AIでお店のホームページはどこまで作れる？カフェの制作例で紹介

Lumi · 2026年11月16日 · 約5分

「AIでホームページを作れる」と聞いても、どんなページになり、どこから自分の作業が必要なのかは分かりにくいものです。架空のカフェ「こもれび珈琲」の試作を、実際に見られる形で紹介します。

この記事は、lumiwingで販売する「お店のホームページ作成キット」の制作例・商品紹介です。

架空店舗の公開デモ。画面内のカフェ写真はAI生成のイメージです。

1. 実際にできたサイトを見る

デモには、お店の紹介、メニュー、営業案内、問い合わせフォームがあります。最初の画面は写真を横いっぱいに使い、その上に文字を配置しました。文字の後ろを暗くすることで、写真が明るい場所でも文章を読みやすくしています。

パソコンだけでなく、スマートフォン相当の幅でも表示を確認しました。自分のお店に置き換えるなら、「何のお店か」「どこにあるか」「どう連絡するか」がすぐ伝わるかを見てください。

架空店舗のデモです。実際の予約はできません。見学のためのフォーム送信は不要です。

この一連の進め方を、Codexに読み込ませる「スキル」というファイルと、説明書にまとめています。スキルは仕事の進め方を伝えるもので、それだけで動く独立したアプリではありません。

住所、料金、営業時間、連絡先の正しさは、ご本人の確認が必要です。AIが作った紹介文でも、実際に提供していないサービスや、根拠のない実績が入っていないかを確認します。

画像にも注意します。雰囲気を伝える生成画像と、実際の店内・スタッフ・商品の写真を区別します。実物の紹介には、掲載できる実写真を用意するのがおすすめです。

公開用アカウントへのログイン、メール内の有効化ボタン、最後の受信確認もご本人が行います。フォームは「問い合わせをメールで受け取る窓口」です。空席の管理や予約の自動確定は含みません。

既存のWindows・Codex・Cloudflare環境で、旧配布版を使った画像生成、サイト公開、フォーム有効化、テストメールの実受信を確認しました。送信時にAPI応答がタイムアウトした場面があり、実際の到着は受信者に確認しています。

現在の商品に入るv1.1改訂フォームは、成功・失敗・時間切れなどの模擬試験14項目を確認しています。旧デモの実受信と、改訂フォームの模擬試験は別の検証です。

Mac実機、新規PC・新規アカウント、初心者本人が説明書だけで進める操作、改訂フォームの新たな実送信は未検証です。すべての環境での完成や、完成までの時間を保証するものではありません。

次の一歩は、自分のお店の情報を整理すること。別の記事に、コピーして記入できる準備シートを置きました。