本文へスキップ
高速な静的Webサイトを表す抽象的なイラスト
開発 Astro パフォーマンス フロントエンド

プレミアムなマーケティングサイトでAstroを選ぶ理由

Astroは静的な高速表示と柔軟なアイランド構成を両立します。速く、洗練されたクライアントワークで私がどう活用しているかを紹介します。

1 分で読めます Alex Morgan

マーケティングサイトは第一印象で大きく左右されます。ポートフォリオやローンチページが重く感じられると、訪問者はその裏側にあるプロダクトまで粗いものだと感じてしまいます。

Astroが私の標準になった理由は、ほとんどのHTMLを静的に配信しながら、必要な場所だけにインタラクティブ性を足せるからです。ナビゲーションのアニメーション、テーマ切り替え、料金計算ツールのように、本当に必要な部分だけを動かせます。この構成は、クライアントワークで設定するパフォーマンス予算とも相性が良いです。

静的を基本にし、必要なところだけインタラクティブにする

マーケティングサイトの多くのセクションには、クライアント側JavaScriptは必要ありません。ヒーローコピー、ケーススタディ、ブログ記事、FAQはビルド時にHTMLとして生成できます。AstroのContent Collectionsを使うと、技術者ではない関係者がMarkdownを編集する場合でも、予測しやすい運用にできます。

モーションやフィルターが必要な場合は、client:visible やスコープされたスクリプトで小さなクライアントモジュールだけを読み込みます。その結果、洗練された表現を保ちながら、Lighthouseで安定して95点以上を狙えるサイトになります。

Content Collectionsが混乱を減らす

Astro 4/5が成熟する前は、チームが早い段階でCMSに寄りすぎることもよくありました。Content Collectionsなら、構造化されたfrontmatter、型安全、Gitベースのワークフローを組み合わせられます。プレミアムテーマやクライアントへの引き継ぎに向いています。

実践のヒント

  • グローバルスクリプトは最小限にし、アニメーションはスコープされたユーティリティを優先する
  • SEOのためにセマンティックHTMLとページごとのH1を守る
  • テーマ調整しやすいようにCSS変数でデザイントークンを定義する
  • 購入者がプロジェクトやブログ記事を追加する方法をドキュメント化する

Astroがすべてのプロダクトの答えというわけではありません。それでも、プレミアムなポートフォリオやローンチサイトには、とても相性の良い選択肢です。

関連記事

続けて読む