静的サイト制作の課題
コーポレートサイトのような動的なコンテンツの少ないwebサイト制作ではWordPressを指定されることが圧倒的に多かったのですが、次のような課題を感じていました。
- サイトの更新よりも多いプラグイン関連の更新
- プラグイン更新による表示崩れなどの対応が発生
- 複雑化したサイトのメンテナンスコスト
- 脆弱性によるセキュリティの問題
- サーバー代がかかる
WordPressほど多くはありませんが、HTML, CSSでの制作でも課題がありました。
- headerやfooterなど共通パーツの編集・更新
- ニュースや実績などのコンテンツ部分の管理と一貫性
- JavaScriptやCSSの軽量化への対応
これらの課題はReactなどのモダンな開発体験を経てより顕著になり、保守コストとの兼ね合いもあり素のHTMLやWordPressの開発に戻るのは辛いと感じるようになりました。
Astroと静的サイトの相性の良さ
Astroとは「ブログやマーケティング、eコマースなど、コンテンツ駆動のウェブサイトを作成するためのウェブフレームワーク」で、Zero JS, by defaultと革新的なフロントエンド設計により高速でSEOに優れたwebサイトを構築することが可能です。
コーポレートサイト制作にあたっては以下のような利点が挙げられます。
高速なサイトパフォーマンス
Astroのコンセプトは「コンテンツを表示する」ことに重点を置いており、会社概要やサービス紹介、実績、自社ブログなどコンテンツが豊富なコーポレートサイトのようなwebサイト構築において優れたパフォーマンスを発揮できる設計になっています。
ページ数が大量にあるようなwebサイトでは表示の遅さが致命的になりかねないですが、Zero JS, by defaultという設計によりLighthouseスコア90〜100が実現できます。
アイランドアーキテクチャ
Astroの特徴のひとつとして挙げられるアイランドアーキテクチャとは、コンポーネントベースの設計パターンです。
- headerやfooterなどをコンポーネントに分割でき、共通パーツ更新の課題が解消
- インタラクティブ性が必要な箇所に部分的にJavaScriptを追加できる
- アイランド設計によりサイトの成長度合いや変化に応じて柔軟に拡張することが可能
学習コストの低さ
Astroを構成するファイルは拡張子こそ .astro ですが、その中身は基本的にはHTMLとCSSです。 .astro ファイルの構造さえ覚えれば、webサイトを構成するソースコード部分は純粋なHTMLとCSSとして書くことが可能です。
純粋なHTMLと書きましたが、Astroでは以下のようにモダンな開発と掛け合わせたような書き方も可能で、良いとこ取りのような設計になっている点も好印象です。
<ul>
{news.map((newsItem) => (
<li>
<a href={newsItem.url}>
{newsItem.title}
</a>
</li>
))}
</ul>また、最初にあげたWordPressの課題も解決されます。
- セキュリティリスクが軽減（攻撃対象となるPHPバックエンドもデータベースもない）
- CloudflareやNetlifyへのデプロイでサーバー代はほぼ無料に
- プラグインの更新作業からの解放
上記以外にもAstroの利点はまだまだありますが、詳しくは公式ドキュメントの「Astroを選ぶ理由」参照ください。
Astroに向いているサイト
コーポレートサイト以外にも、製造業や士業系、制作会社、採用サイト、プロダクトサイト、スタートアップ、歯科医院、webメディア、ランディングページなど
- 更新頻度が少なく（月0〜2回程度）
- ページ数が10〜50程度で
- サイトの大部分が静的なコンテンツで構成されている
といったwebサイトにはAstroが最適と言えそうです。
実例で見るAstroサイト
Astroの公式サイトのShowcaseで紹介されている事例のほか、日本でAstroで制作されたコーポレートサイトや企業サイトがいくつかあったのであわせて紹介します。
Nord VPN ↗︎ ランディングページのように長いトップページや大量のコンテンツを発信しながらもページの切り替えや表示は高速です。
Cloudflare ↗︎ トップページのスムーズなアニメーションに加え、50を超える大量のページでも遅さを感じることのない表示速度が保たれています。
ミツエーリンクス ↗︎ 多言語の切り替えに対応しているほか、実績、セミナー情報、ニュースといった大量のコンテンツでも安定しています。
ジオリーブグループ株式会社 ↗︎ 動画を埋め込んだファーストビューの表示がスムーズで、IR情報などを含む大規模な構成でも滞りなく表示されています。
集英社2027年度採用サイト ↗︎ コンテンツの多いページでも読み込み速度が早く、読み込み時やスクロールのアニメーションもスムーズです。
CMSを持たないAstro
Astroはコンテンツ駆動を謳ってはいますが、WordPressのような管理画面からコンテンツを編集するというシステムはありません。案件で制作するようなコーポレートサイトの場合に課題となるのが、非開発者へのコンテンツ編集方法の提供です。現時点では外部サービスを利用することでCMSの課題を解決できます。以下に例を3つ挙げます。
ヘッドレス CMSの利用 コンテンツの編集・作成はmicroCMSのような外部サービスで行い、APIを利用してAstroでコンテンツ内容を取得・表示する方法です。
Gitベースで管理 Decap CMSやTinaCMSといったサービスでブラウザで編集可能な画面を持つことができ、MarkdownファイルをGitHubで管理する構造を維持できます。
WordPressをヘッドレスCMSとして利用するハイブリッド WordPressをコンテンツの編集用のソフトとして利用し、Astro側で記事を取得・表示することで、webサイト本体の表示の高速化を実現できます。
※ Astroと統合が可能なCMSの例は公式ドキュメントのUse a CMS with Astroを参照。
最後に
Astroでコーポレートサイトを立ち上げたい方向けに、すぐに使えるテンプレートを制作しています。
デモを見る | 購入はこちら
基本的なページが揃っていて、Astroの強みを活かしたコンポーネントベース設計のほか、レスポンシブ対応、SEO最適化済み、Lighthouseスコア全項目100です。
