「長田本庄軒」サイトリニューアル

「長田本庄軒」様のサイトでは、来店を検討する方にメニューなどの情報を届けています。私たちは提供されたデザインデータをもとにサイトを構築し、メニュー情報とトップページのセクション内のテキスト・画像をCMSから更新できるようにしました。

課題

従来はサイトの情報を更新するたびにHTMLやCSSを編集しており、公開までの作業に時間がかかっていました。手作業による更新には、編集や反映を誤るリスクもありました。

サイトの刷新にあたり、メニュー情報やトップページの内容を運用担当者が更新できる仕組みと、更新内容を公開するまでの手順を整える必要がありました。

アプローチ

1. メニューとトップページをCMSから更新できるようにする

メニュー情報に加え、トップページのセクション内のテキストや画像をmicroCMSで管理できるようにしました。運用担当者は、これらの内容を更新する際にHTMLやCSSを直接編集せずに済みます。

2. 更新から公開までの作業を自動化する

CMSの更新を起点に、GitHub Actionsでサイトのビルドとデプロイを実行する仕組みを構築しました。手作業で行っていた公開工程をワークフローにまとめています。

3. 配信環境に合う構成でサイトを新規構築する

提供されたデザインデータをもとに、サイトを新規に構築しました。既存のインフラは静的ファイルをAWS S3へアップロードする構成です。本案件の要件に対してNext.jsは機能が過剰と判断し、静的サイトの生成に適したAstroを採用しました。あわせて、公開前のプレビューに使う検証環境も構築しました。

技術的特長とシステム構成

コンテンツ管理とサイト生成

microCMSでメニュー情報とトップページの対象コンテンツを管理し、Astroで静的なサイトを生成する構成です。CMSで更新できる箇所を設けながら、既存のS3へのアップロードを前提とした配信環境を利用できる構成にしました。

公開フローと配信

CMSの更新に応じてGitHub Actionsがビルドを実行し、生成した静的ファイルをAWS S3へデプロイします。サイトはAWS CloudFrontを通じて配信します。

成果

提供されたデザインに基づくサイトを構築し、メニュー情報とトップページの対象セクションをCMSから更新できるようにしました。
対象箇所の更新時にソースコードを直接編集する必要がなく、公開までの工程も自動で進められる構成です。