架空のカフェのLPはこちら→https://lp.strn2014.com/cafe-haku/index.html
ソースコードはこちら→https://github.com/taka-k7/cafe-haku-lp
制作期間：2025/07/22〜2025/08/01
この記事では、上記LPを制作した理由や背景、技術的な工夫、実装時の悩み、今後の応用について記します。
【構成予定】
• なぜLPを作ることになったか
• 架空のカフェにした理由
• 実装中の悩み
• 予約フォームの発展的な使い方
⸻
■ なぜLPを作ることになったのか
もともとWordPressでサイトを運営しており、PHPやWordPressの理解は進んだが、HTML/CSSやJS、Web全体の構造についてもっと深く学びたかった。
WordPress以外のWebサイト構築方法が気になり、ChatGPTに尋ねたところ、CMS・静的サイト・Jamstack・SPAなど、様々な方法があることを知る。自分にはLP（ランディングページ）がちょうどよく、そこから開発に着手した。
⸻
■ なぜ「架空のカフェ」にしたのか
LPは「目的に特化した一枚ページ」が前提。つまり、事業やサービスがある前提で構成する必要がある。
そこで以下のような設定を設けた：
• 店名：cafe haku
• 営業時間：14:00〜18:00（L.O.17:30）
• 営業日：年中無休
• 隠れ家的立地（美術館・博物館近くのビル2階）
• 席数：カウンター5席、テーブル5席
• 運営者：マスターとパートナーの2名体制
• 完全予約制、電話予約不可（雰囲気を壊さないため）
【課題】
• 席数が少ないため、満席で断る場面が多い
• Instagramで予約状況を告知しているが、見落とす人が多い
• 電話予約できないため、問い合わせのハードルが高い
このような課題を抱えるカフェを想定し、来店者と運営者双方の負担を減らすための予約LPを制作した。
⸻
■ 実装中の悩み・技術的構成
当初はGoogleフォームで受け付けるだけのつもりだったが、それでは空席状況が反映できず不便。
そこで以下の構成を採用：
【技術構成】
• フロントエンド：HTML / CSS / JavaScript（バニラ）
• バックエンド：Google Apps Script（GAS）
• 使用サービス：
• Googleフォーム（予約情報の送信先）
• Googleスプレッドシート（データ保存、処理トリガー）
• Googleカレンダー（予約登録）
• Gmail（予約完了メール、リマインド、キャンセル対応）
【実装機能】
• 自作カレンダーUI（予約状況：◎ / △ / × 表示）
• 日付・時間選択 → フォーム入力 → GoogleフォームへPOST
• GASで予約情報を受け取り、スプレッドシートに保存
• Googleカレンダーにイベント登録
• 自動で確認メール送信
• リマインドメール・キャンセル処理の自動化
途中、バグや構文エラーに悩まされつつも、ChatGPTの力を借りて完成。
⸻
■ 予約フォームの応用
このフォーム構成は、カフェ予約以外にも応用可能と感じた。たとえば：
• 出藍文庫での書籍予約・郵送管理
• イベント参加申込
• 個人通販（例：ZINEや同人誌）など
予約 → 決済 → 発送という流れを分離して考えることで、安全かつ汎用性のある予約管理システムに応用できると感じた。
【想定フロー】
• 予約：ユーザー情報入力（Googleフォーム + GAS）
• 決済：PayPal決済ページへリンク
• 発送：管理者が発送 → GASで完了フラグ → 必要に応じてリマインド
⸻
以上が、今回の「架空のカフェLP」の制作記録です。
今後は、EC連携や在庫管理などにも発展させたいと思っています。
追記
ECを導入しました→「HPにフルスクラッチで小規模ECを導入した話」
追記以上。