「天ぷらまきの」サイトリニューアル

複数ブランドへの汎用CMSでコンテンツを管理し、Astroでブランドサイトを構築しました。

2026.10.19

プロジェクト概要

「天ぷらまきの」様のサイトでは、来店を検討する方にブランドやメニューの情報を届けています。私たちは、複数ブランドで共通利用するヘッドレスCMSと連携し、静的ファイルを配信する構成でサイトを構築しました。

フェアメニュー、定食、トッピングなど、サイトに掲載するメニューは種類によって伝える情報や見せ方が異なります。今回は、これらを他ブランドと共通のヘッドレスCMSで管理しながら、それぞれの特性に合ったレイアウトで表示する必要がありました。

また、配信には静的ファイルをAWS S3へアップロードし、AWS CloudFrontを通じて届ける構成を用います。コンテンツの更新方法と、この配信環境に合うサイトの生成・公開方法を整える必要がありました。

共通のヘッドレスCMSで天ぷらまきののコンテンツを管理し、フェアメニュー、定食、トッピングなど、それぞれの内容に応じたレイアウトを実装しました。運用担当者が内容を更新できることに加え、メニューごとの情報を適した形でサイトに表示できるようにしました。

サイトはAstroで構築しました。生成した静的ファイルをS3へ配置する構成に合うためです。本案件ではNext.jsの機能は要件に対して過剰と判断し、Astroを採用しました。

ヘッドレスCMSの更新を起点に、GitHub Actionsでサイトをビルドし、生成した静的ファイルをS3へデプロイする仕組みを構築しました。あわせて検証環境を用意し、公開前に内容を確認できるようにしました。

共通のヘッドレスCMSで管理する情報をAstroのビルド時に取得します。フェアメニュー、定食、トッピングなどの特性に応じて表示する情報とレイアウトを設計し、静的なページに反映しました。

サイトに掲載する画像にはAstroの画像最適化機能を利用しました。画像をビルド時に配信用として処理し、生成したサイトとともに配信します。

GitHub Actionsで生成したファイルをAWS S3へ配置し、AWS CloudFrontを通じて配信します。

フェアメニュー、定食、トッピングなどの情報を共通のヘッドレスCMSで管理し、それぞれの特性に合ったレイアウトで表示するサイトを構築しました。Astroによる画像最適化と検証環境も含め、コンテンツの更新から公開までの流れを整えました。