AstroとmicroCMSのホームページ制作例｜シンプルキッチンの更新・フォーム構成

シンプルキッチンは、健康料理家・堀之内ちづるさんの活動や講座を紹介するサイトです。Astroで公開ページを生成し、お知らせの管理にはmicroCMSを使う構成で制作しています。

会社や店舗のホームページで同じ構成を検討するときの参考になるよう、公開ページ・お知らせ・問い合わせの実装と更新手順、公開後の表示速度の計測結果を紹介します。

紹介ページ、お知らせ、フォームで役割を分けた

公開ページを読むアクセスでは、できあがったファイルを返します。問い合わせAPIへのアクセスだけをWorkerで処理する設定です。公開ページのためのPHP実行環境やデータベースを置いていません。

この役割分担は、案内ページが中心で、お知らせだけを継続更新したいサイトに合います。一般的なAstroの事前生成とサーバー処理の使い分けを、このサイトの用途に合わせた実装です。

本文はHTMLで届け、動く部分にだけJavaScriptを使う

トップページの見出しや活動紹介は、公開用のHTMLに入っています。ブラウザーでプログラムを実行してから本文を組み立てる必要がなく、メニューなどの操作にだけJavaScriptを使っています。

問い合わせ画面には、迷惑送信を防ぐTurnstileのスクリプトを読み込みます。ページごとに必要な処理を分けることで、案内を読むだけのページにフォーム用の処理を持ち込まずに済みます。

公開用ファイルで確認したページの内訳

2026年10月25日に手元のビルド成果物を確認した値です。KBは1,000バイトとして表記しています。

トップページの確認項目	結果
HTMLファイルの容量	24,249バイト（約24.2KB）
HTML内に記述されたJavaScriptの合計	1,048バイト（約1.05KB）
HTMLから直接読み込む外部JavaScriptファイル	0件

容量は圧縮前で、画像・CSS・フォントなどを含むページ全体の転送量とは区別しています。表示時間は、公開先の配信環境や回線も含めて計測します。

速度を改善するときは、画像やフォントの読み込みも合わせて調整します。検索評価との関係と、公開後に確認する指標は表示速度とSEOのガイドにまとめています。

PageSpeed Insightsで携帯電話99点、デスクトップ100点を記録

公開サイトのトップページをGoogleのPageSpeed Insightsで計測したところ、パフォーマンスは携帯電話で99点、デスクトップで100点でした。ユーザー補助・おすすめの方法・SEOは、どちらも100点です。

計測対象は https://chizurukitchen.com/。レポートの作成日時は、携帯電話が2026年10月27日15:42:57、デスクトップが2026年10月25日20:42:50です。それぞれ別の日に行ったテストの結果を掲載しています。

料理の写真や活動紹介を掲載したトップページで、表示速度についても良好な結果を確認できました。本文をHTMLで届け、必要な箇所にだけJavaScriptを使う構成の、公開後の確認例です。

携帯電話の計測画面を見る（2026年10月27日）

デスクトップの計測画面を見る（2026年10月25日）

掲載値はLighthouseによる各1回のテスト結果です。どちらのレポートも実ユーザーデータは「データがありません」と表示されており、Core Web Vitalsの実ユーザー評価は確認できていません。スコアは計測条件によって変動するため、公開後も継続して確認します。Googleによる計測方法の説明

自社サイトでの測り方や改善の順番は、ホームページの表示速度改善ガイドをご覧ください。

お知らせは管理画面で編集し、生成したページへ反映する

担当者はmicroCMSでタイトル、要約、本文、サムネイルを編集します。実装では記事をビルド時に取得し、一覧と詳細ページを生成します。

更新マニュアルには、記事の追加、修正、公開終了、反映されない場合の確認先をまとめています。CMSの編集内容はページを再生成すると反映されます。公開操作から再生成までの流れも、運用担当者へ引き継ぎます。

同じ構成を別のサイトで採用する場合も、更新頻度、下書きの確認方法、公開を反映する仕組みと失敗時の連絡先を決めます。

問い合わせはメールで扱うため、保存先の管理は残る

フォームには、必須項目と長さのチェック、Turnstileのサーバー側検証、ボット対策用の項目を入れています。送信はメール配信サービスを通じ、サイト自身のデータベースには保存しない実装です。

ただし、送信先のメールボックスや配信サービス側では問い合わせ情報を扱います。静的サイトだから個人情報を持たない、とは言えません。保存期間、閲覧できる人、APIキー、メールの送信失敗時の対応は、運用として管理する必要があります。

Studioの不正アクセスに関する記事でも触れていますが、サイトの見た目と、情報がどこへ送られ保存されるかは別々に確認します。

WordPressから移す場合も、必要な機能を先に整理する

会社案内や店舗のホームページなら、同じようにページの配信と更新・送信の処理を分けられる場合があります。既存の記事、画像、URL、フォーム、予約などを確認してから、移行範囲を決めます。

WordPressの保守・移行ガイドに、継続運用と静的化の判断基準をまとめています。新規制作も含めた範囲と費用はホームページの制作・移行をご覧ください。