ホームページをAstroで作った話

株式会社ZENSHINのCTOの高橋です。ZENSHINのホームページを Astro で構築しました。技術選定の経緯と、実際に使ってみた感想をご紹介します。

なぜ Astro を選んだのか

以前から Astro の存在は知っており、調べていくうちに良さそうだなとは感じていました。ホームページに必要な要件を整理してみたところ、Astro で対応できそうなものばかりだったのが採用の決め手になりました。

もちろん Next.js も候補に挙がりました。ただ今回のホームページでは状態管理やクライアントサイドルーティング、仮想 DOM を使う場面がなく、React のランタイムを載せる必要がありませんでした。

素の HTML / CSS で作る方法もありますが、SEO 周りやコンテンツ管理、画像最適化の仕組みを一から整えるのはなかなか大変です。Astro はそのあたりがちょうどよく揃っていて、ぴったりのフレームワークでした。

Astro を選ぶ上でもう一つ大きかったのが、2025 年の Cloudflare による Astro の買収です。

私たちはもともと Cloudflare Pages でホスティングしているので、フレームワークとホスティングが同じエコシステムに統合されたのは嬉しいポイントでした。長期的なサポートやプラットフォーム最適化も期待できます。

静的サイトのフレームワーク選定で気になるのは、プロジェクトの開発が止まってしまうリスクです。OSS は優れたものでも、メンテナンスが止まると使い続けにくくなります。

Cloudflare のバックアップがあるという点は、安心して採用に踏み切れる大きな材料になりました。

Astro では React を使わなくても、ホームページに必要な機能は一通り揃っています。実際に今回のサイトは React なしで構築しましたが、特に困る場面はありませんでした。

Astro コンポーネント（.astro ファイル）は HTML をそのまま書く感覚で使えます。

---
const { title, date } = Astro.props;
---
<article>
  <h1>{title}</h1>
  <time>{date}</time>
  <slot />
</article>

ハンバーガーメニューやスクロール検知などのインタラクションはバニラ JS で対応しました。もちろん React を使うこともできますが、このホームページぐらいの規模であれば React なしでも全然問題なくカバーできています。

コンテンツ管理の面でも Astro の仕組みがうまくハマりました。

Astro には Content Collections という機能があり、マークダウンファイルを Zod スキーマで型安全に管理できます。このホームページでは 6 つのコレクションをすべてマークダウンで運用しています。

Zodのバリデーションにより CMS を導入しなくてもコンテンツの整合性を保てるので、私たちのような少人数のチームでは Git 管理だけでうまく回っています。

開発体験の面でも良い点がありました。

このサイトでは React を使っていないため、ビルドが非常に軽量です。15 ページのビルドが 1秒未満 で完了します。フィードバックループが短く、スムーズに開発を進められました。

本番環境の依存パッケージも 7 つだけです。

依存が少ないと、アップデート対応やセキュリティの面でも安心です。

Next.js でもホームページは作れますし、プロジェクトによっては Next.js がベストな場面もあると思います。今回はシンプルな構成で済む要件だったので、Astro がぴったりでした。

必要なものがちょうどよく揃っていて、余計なものを持ち込まずに済む。Cloudflare による長期的なサポートも期待できる。私たちのホームページの技術基盤として、良い選択ができたと感じています。

ZENSHINではエンジニアを募集しています。こうした技術選定や開発に興味がある方は、ぜひご覧ください。