サイトのリニューアル（改修）と新規対応技術（Astro）のご案内

今日は、弊社サイトのリニューアル（改修）と併せて、サービス（対応技術）として「Astroを利用したWebサイト制作」が増えましたので、そのご紹介をさせて頂ければと思います。

Astroを採用した理由

ここ1,2年で注目されている、AstroというWebフレームワークを活用したサイト制作が弊社の対応技術として新たに加わりました。

Astroには様々な特徴がありますが、私達が考える大きなメリットの一つとしてサイトの高速化とコンテンツ管理の柔軟性が挙げられます。

これまでのWeb制作では、CMS（WordPress等）を活用したケースが多くありましたが、昨今では静的サイトの制作も増えてまいりました。

実際のご依頼の際にお話を伺うと、CMSが抱えるセキュリティに対するリスクやコストが無視できないからというご意見が多くあります。

また、サイト閲覧時のパフォーマンス（表示速度）はSEOにも影響をあたえることから、サイトの高速化の目的として静的サイト化を求められる声もあります。

Astroは単一の特設サイトの制作から、コンテンツ数の多いメディアサイトまで柔軟にスケールアップできるのも魅力的です。

サイトの高速化

Astroは標準でSSG（Static Site Generation）を使用しています。
SSGとはビルド時に静的なHTMLファイルを生成し、それを再利用する方式のことです。

従来のWebサイト（MPA）では、ページ遷移の際に常に読み込みが発生していましたが、SSGではビルド時にページを生成しておくことで、ページ遷移時の読み込み時間を大幅に短縮できます。

コンテンツ管理の柔軟性

AstroはJamstackでのWeb開発に対応しているため、コンテンツ管理の幅が広がります。Jamstackでは、コンテンツをAPIを使用して取得しますので、サイトの表示部分とコンテンツ部分を切り離して管理することができます。

そのため、WordPressのようなバックエンドとフロントエンドが一体型になっている環境に比べセキュリティリスクを抑えることができます。

コンテンツの管理はAPIで取得するため、APIが使用できるサービスであれば基本的に連携可能です。（近年では、microCMSといったクラウド型のヘッドレスCMS等を利用するケースもよく見聞きいたします）

もちろん、WordPressも標準でREST APIという機能を提供していますので、WordPressをコンテンツ管理のためのCMSとして使用することも可能です。

前述しましたが、弊社クライアント様ではWordPressを利用しているケースが多くあります。サイトのリニューアルに合わせてコンテンツ管理からガラッと変更するには運用の見直しや操作方法の再習得など様々なコストが発生します。

そのため、弊社では既存のWordPressはそのまま活かし、フロント部分を新たにAstroで制作する方法をご提案しています。（もちろん、新規でLP等の単一ページを制作する際はAstroのみでも問題ないかと思います）

今回、実際にAstroで制作されたサイトをご確認いただけるよう、弊社サイトをAstroを使用しリニューアルいたしました。

表示速度の速さや、合わせて活用した Web Transition API(ブログ記事や制作実績の単一ページへの遷移時の挙動)の動作など実際にご確認頂ければと思います。

開発の特徴

• サイトの公開サーバはレンタルサーバ（エックスサーバー）
• コンテンツ管理はWordPress（ブロックエディタ）を利用（稼働しているのは異なるサーバ、異なるドメイン）
• ページ内コンテンツ以外にページごとのSEOの設定情報はWordPressプラグイン（Yaost SEO）で管理
• AstroにてWordPress上のコンテンツデータをAPIで取得
• Astro側（データ取得とフロント部分の実装）のデータ管理はGitHub（プライベートリポジトリ：非公開）
• Astro側の変更がGitにコミットされると自動的に再ビルド（静的ページを再生成）し、公開サーバへ転送（GitHub Actions を使用）
• WordPress側でコンテンツの更新（新規作成や削除を含む）があった際は上記のGitHub Actionsを実行（専用プラグインを開発）
• スクロールに応じた見出しのアニメーションやメインビジュアルのテキストアニメーションにGSAPを使用