5行書くだけ。AIが飲食店のHPを作って、無料で公開するKit
お店のHPに必要なのは、メニュー(料金表)・場所・営業時間・予約の4つだけ。お店の情報を5行書いてAIに渡し、スマホ対応の1ページHPを無料で公開するまで60分。コードは書かない。
やること:下のシートを埋める/写真3枚(外観・看板メニュー・店内)をスマホで撮り、小文字で 1.jpg・2.jpg・3.jpg に/空欄OK(AIは勝手に埋めない)。費用:サーバーはNetlifyの無料枠、ドメインは無料の○○○.netlify.app。独自ドメインだけ任意で年1,000〜2,000円。
使い方:コピーして5行を埋める 空欄:分からない欄はそのままでOK(AIは勝手に埋めない) 次:STEP2のプロンプトに貼る
【店の情報シート】 1. 店名/業態/ひとこと 例:炭火焼鳥 とり源/焼鳥と地酒の店/博多の地鶏を備長炭で焼いてます 2. 場所:住所/最寄り駅から徒歩○分/駐車場の有無 3. 営業時間/定休日/席数/支払い方法(現金・カード・PayPayなど) 4. 売り(3つまで):看板メニューと税込価格/こだわり/こんな人に来てほしい 5. 予約・連絡先:電話番号/LINE公式アカウントのURL/InstagramのURL/食べログのURL(あれば)
新しいチャットで、下のプロンプトの【店の情報】にSTEP1のシートを貼って送る → index.html が1つ出てくる。おすすめはClaude(その場でプレビュー+ダウンロードボタン)。ChatGPTでも可。
貼るもの:【店の情報】の位置にSTEP1のシート 出てくるもの:index.html が1つ(スマホ対応・ボタン3つ・地図つき) 直したいとき:STEP4のプロンプト
あなたは飲食店専門のWebデザイナーです。以下の店の情報から、ホームページを作ってください。 【店の情報】 (ここにSTEP1のシートを貼る) 【ルール】 - HTML・CSS・JavaScriptをすべて1つのファイル(index.html)にまとめる。外部ファイルやフレームワークは使わない - お客さんの9割はスマホなので、スマホで見たときの見やすさを最優先。PCでも崩れないようにする - 画面の一番上:店名と「ひとこと」。そのすぐ下に大きなボタンを3つ横並びで「電話する」「LINEで予約」「地図を開く」 - 電話は tel: リンク - LINEはシートのURL - 地図は https://www.google.com/maps/search/?api=1&query=(住所) へのリンク - セクションの順番:トップ → おすすめメニュー(写真つき、表組み、税込価格)→ 店内・こだわり → 店舗情報(住所・営業時間・定休日・席数・支払い方法)→ アクセス → 予約・お問い合わせ(3つのボタンをもう一度) - アクセスにはGoogleマップを埋め込む。iframeのsrcは https://www.google.com/maps?q=(住所)&output=embed (APIキー不要) - 写真は同じフォルダに 1.jpg(外観)2.jpg(看板メニュー)3.jpg(店内)という名前で置くので、その名前で読み込む。写真がない場所は店の雰囲気に合う無地の背景にする - 色は店の雰囲気に合わせて2色まで。フォントは端末標準のもの(読み込みを速くするため) - シートに書いていない情報は勝手に作らない。その場所に【要確認】と書いて空けておく - 完成したら index.html の中身を全部、1つのコードブロックで出す。説明文は不要
index.html と写真3枚を1つのフォルダに入れて、Netlify Dropにドラッグ&ドロップ。手順はリンクの説明に。控え:Cloudflare Pages。
1. フォルダを作る(名前は何でも) 2. AIのHTMLを index.html で保存して入れる(Claude/ChatGPTのダウンロードボタン) 3. 写真 1.jpg・2.jpg・3.jpg を同じフォルダへ(重い写真はLINEで自分に送ると軽くなる) 4. 無料アカウントでログイン → フォルダをドラッグ&ドロップ 5. xxxx.netlify.app をスマホで確認 英語は3語だけ:Sign up/Drag and drop your site output folder here/Deploys。カード不要。
直し:下のプロンプトでAIに言う/更新:Deploysにフォルダを再ドラッグ(同じURL)/見つけてもらう:URLをGoogleビジネスプロフィールの「ウェブサイト」欄とInstagramのプロフィールに貼る。
使い方:変えたい箇所だけ書き換えて、同じチャットで送る 出てくるもの:直した index.html の全体 反映:Deploysにフォルダを再ドラッグ
さっき作った index.html を直してください。変えるのは以下だけで、他はそのままにしてください。 - 看板メニューの価格を 1,200円 → 1,350円 に - 「営業時間」の下に「ラストオーダー 22:30」を追加 - 全体の色を、もう少し落ち着いた色に 直したあと、index.html の中身を全部、もう一度1つのコードブロックで出してください。
進捗を保存する
無料登録で、進捗の保存・お気に入り・フォローができます。
ログインしてコメントする
SNS アカウントで AI Contents Bank にログインすると、コメント・お気に入り・進捗保存ができるようになります。
まだコメントはありません
最初のコメントを投稿して、クリエイターに感想を伝えましょう。
コメント0件