「明日までに予約ページが欲しい」

Web開発の現場では、時として無茶なスピード感が求められます。 特に飲食店の「季節イベント」は待ってくれません。

今回のミッションは 「恵方巻きのWeb先行予約ページ」 の構築。 要件は以下の通りでした。

• 期間厳守: 1月2日 9:00 ジャストに予約受付を開始したい。
• デザイン: 通常メニューとは違う、特別感のあるLP（ランディングページ）にしたい。
• システム: 既存の予約管理フロー（Googleスプレッドシート）は変えたくない。

開発期間は実質2日。通常なら1週間はかかる要件ですが、私たちはこれを余裕を持ってクリアしました。 勝因は 「徹底的な再利用」 と 「クライアントサイドでの制御」 です。

1. サーバーレス・バックエンドの再利用

Vol.3 で紹介した「GAS + Google Sheets」の予約システム。 実はこれ、汎用的に作ってありました。

APIのエンドポイント（GASのURL）はそのままに、送信するデータ構造（JSON）さえ合わせれば、どんなフォームからでも受け付け可能です。

// 今回の恵方巻き用の送信データ
const data = {
    name: "山田 太郎",
    // 既存のカラム「備考」などに商品内訳をまとめて入れる工夫
    remarks: "海鮮恵方巻き(2), エビチリ巻き(1)", 
    // ...
};

バックエンド側の改修はゼロ。フロントエンドを作るだけで「予約システム」が完成しました。

2. カウントダウンと自動オープン

「1月2日 9:00」という厳密な開始時間をどう制御するか。 サーバーサイド（SSR）で制御するのが確実ですが、今回はAstroの静的サイト生成（SSG）でホスティングしています。

そこで、シンプルに JavaScript（クライアントサイド） で解決しました。

// public/js/ehomaki.js (抜粋)
function checkReservationStatus() {
    const startTime = new Date("2026-01-02T09:00:00+09:00");
    const now = new Date();

    if (now >= startTime) {
        // 時間が来たらフォームを表示
        showReservationForm();
    } else {
        const diff = startTime - now;
        // 開始24時間前なら、時間ジャストに自動リロード
        if (diff > 0 && diff < 86400000) {
            setTimeout(() => {
                location.reload();
            }, diff);
        }
    }
}

「時間になったら自動でリロードしてフォームが出現する」。 アナログですが、静的サイトにおいては非常に効果的で、サーバー負荷も気にする必要がありません。

3. 構造化データでイベントをアピール

ただページを作るだけでなく、Google検索へのアピールも忘れません。 PublicationEvent や Event 構造化データを埋め込み、検索結果に「イベント」としてリッチに表示されるようにしました。

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Event",
    "name": "2026年 恵方巻きWeb先行予約",
    "startDate": "2026-01-02T09:00:00+09:00",
    "location": {
        "@type": "Place",
        "name": "店舗名"
    }
    // ...
}
</script>

Antigravityへの指示例 (Prompt)

この「再利用」と「クライアントサイド制御」を実現するための、具体的なプロンプト例です。

Reuse Prompt: 「public/js/ehomaki-common.js にある setupFormSubmission 関数を、新しいLP（ehomaki-reservation.astro）でも使いたいです。 商品IDごとの価格設定（PRODUCT_PRICES）を拡張し、送信されるJSONデータに『備考』として注文内訳を結合するロジックを追加してください。 GAS側のコードは変更せず、フロントエンドの変更だけで完結させてください。」

Timer Logic Prompt: 「クライアントサイド（JavaScript）で、指定した日時（2026-01-02 09:00 JST）になるまでフォームを非表示にする checkReservationStatus 関数を作成してください。 開始時間前なら『受付開始までお待ちください』と表示し、開始時間を過ぎたらフォームを表示します。 また、開始まで残り24時間を切っている場合は、setTimeout を使って開始時間ジャストに自動でページをリロードする処理を入れてください。」

「バックエンドは変更しない」という制約や、「自動リロード」という具体的な挙動を指定することで、AIは最適な実装方針（この場合はJSでの制御）を選んでくれます。

まとめ：コンポーネント資産は裏切らない

今回の「爆速構築」を可能にしたのは、Astroのコンポーネント指向と、疎結合なバックエンド設計でした。

• デザイン: 既存の Layout.astro や Hero.astro を少し調整して流用。
• ロジック: 予約送信ロジックは共通JSとしてモジュール化。

一度しっかりした土台を作れば、その後のキャンペーン施策は驚くほど低コストで打てるようになります。 これがモダンなWeb開発の強みです。

あなたのプロジェクトにも、再利用できる「コアモジュール」はありますか？ 次のキャンペーンのときに慌てないよう、今から準備しておきましょう。

---

次回 Vol.6 は最終回。 「美味しそう」を伝える画像最適化 と、日々のメニュー更新を支える技術について解説します。

🤖 Antigravity Prompt

この記事の成果物を作成するために、実際に使用した（または推奨される）プロンプトです。

あなたはWebマーケター兼デザイナーです。飲食店の「季節限定・恵方巻予約」のランディングページ(LP)を構成してください。
ターゲット: 30-50代の主婦層
ゴール: Web予約完了
必須セクション:
1. ヒーロー（美味しそうな写真と「予約受付中」の文字）
2. 商品のこだわり（3つのポイント）
3. メニュー一覧（写真、価格、説明）
4. 予約フローの案内
5. よくある質問
これらをAstroのコンポーネントとして実装するための設計案を出してください。