0円でホームページを作る。無料Geminiで、問い合わせまで入る店の1ページ

この記事で作るもの

Googleの無料AI「Gemini（ジェミニ）」の Canvas（キャンバス） を使い、お店の縦スクロール1ページを作ります。

「ホームページはデザインから作らなきゃ」と思いがちですが、今日はそこまでやらなくて大丈夫です。仕事帰りの人が電車の中でスマホを見て、「この店、自分向けかも」とパッと判断できる——その最初の一歩を手元に用意します。色やフォントが粗くても、次の3つさえ入っていれば、お客さんが「次に何をすればいいか」までしっかり届きます。

1. 誰に来てほしいかが1行ある
2. 何をどの順で伝えるかがページ上に並んでいる
3. 問い合わせの一文（電話・LINE・予約のいずれか1つ）がある

この3つが入ったプレビューが画面に出せれば、今日の作業は完了です。

事前に用意するもの

画面を開く前に、紙やメモアプリへ3行だけ書き出してください。開店前や閉店後のすきま時間で十分です。Geminiにいきなり「HP作って」とだけ頼むと、どの町にでもあるような平均点の案が返ってきます。駅前のカフェなのか、夜の居酒屋なのかが分からないまま進むと、あとで「うちっぽくない」と直す手間が増えるだけです。最初に3行メモを用意しておけば、AIの出発点がちゃんと「うちのお店」になります。

サンプル（架空のカフェ）

1. 誰に来てほしいか（1行）
   「西鉄久留米駅近くで働く人に、仕事帰りに一人でも入りやすい店だと伝えたい」
2. 強み・メニュー・料金の目安（今日出す分だけで可）
   「エチオピア豆のハンドドリップ／本日のパンセット／ドリンク500〜650円」
3. 連絡手段を1つ（電話 / LINE / 予約のうち、いちばん使ってほしいもの）
   「電話で空きを確認してほしい」

メモのほかに、次の3つも用意しておくと作業がスムーズです。

• Googleアカウント（店用のGmailなどでログイン）
• 店の写真（外観1枚、店内1枚、看板メニュー1枚など。スマホで撮った実写でOK。公式写真にAI生成画像をそのまま使うのはおすすめしません）
• できればパソコン（スマホだけでも進められますが、Canvasでの細かい直しはPCのブラウザが楽です。画面の表記は時期によって変わることがあります）

手順

1. Geminiを開く

「AIの画面って、どこを押せばいいか分からない」と身構えなくて大丈夫です。まずはログインして、Canvas（キャンバス）という作業スペースに入りましょう。ボタンの名前や配置は時期によって変わるので、だいたいの言葉を目印に探せばOKです。

1. ブラウザで https://gemini.google.com/ を開く
2. Googleアカウントでログインする
3. 新しい作成まわりの「＋」などから Canvas を選ぶ

Canvasは、作ったウェブページを横のプレビュー画面で見ながら編集できる機能です。今日の店の1ページはここで作ります。普通のチャットだと長い英語コードが流れてきて圧倒されますが、Canvasなら実際の画面を見ながら「店名だけ直して」と手軽に修正できます。

画面のボタン名や配置はよく変わります。「Canvas」「キャンバス」「ウェブページ」といった言葉を探してみてください。特定のモデル（FlashやProなど）を選ぶ必要はありません。無料で使える範囲で進められます。

2. いきなり「HP作って」と言わない（3点を先に確定）

すぐにページを作りたくなりますが、ここは一度ぐっとこらえます。「誰向けか」が曖昧なまま作ると、あとから文章のトーンを何度も直すハメになるからです。まずは確認用の短いプロンプトを使って、3点だけをAIと一緒に整理しましょう。ページ本体を作るのはその次です。

次の文は、先ほどの架空カフェの情報を入れた例です。まずはそのまま試すか、ご自身の店のメモに差し替えてGeminiに送信してみてください。

あなたは地域の小さなお店のホームページ相談役です。
まだページは作らず、次の3点だけを整理して、私の確認用に短く書き直してください。

【誰に来てほしいか】
西鉄久留米駅近くで働く人に、仕事帰りに一人でも入りやすい店だと伝えたい

【何をどの順で伝えるか（私のメモ）】
- エチオピア豆のハンドドリップ
- 本日のパンセット
- ドリンク500〜650円
- 落ち着ける店内
- 西鉄久留米駅から徒歩5分
- 11:00–20:00・水曜定休

【問い合わせの一文にしたい行動】
電話で空きを確認してほしい

出力ルール:
1. 「誰に来てほしいか」を1行に整える
2. ページ上の順番を、上から番号付きで4つまでに要約する
   （ファーストビュー → メニュー／強み／料金目安 → 場所・時間 → 問い合わせ一文）
3. 問い合わせのボタン文言案を、動詞入りで2案だけ出す（私が1つ選ぶ）
4. 架空の店名・住所・口コミ・賞は作らない
5. まだHTMLやデザインは出さない

もし返ってきた内容がイメージとズレていたら、短い言葉で修正します（例:「ターゲットは仕事帰りの一人客に絞って」）。
ボタンの文言案が出たら、2案から1つだけ 選んでください。電話・LINE・予約が全部並んでいると、お客さんは「どれを押せばいいの？」と迷ってページを閉じてしまいますし、店側もどの連絡が来るのか読めなくなります。

3. Canvasで1ページを生成する

下準備ができたので、いよいよページ本体を作ります。下のプロンプトは、「誰向け・店の事実・並べる順番・問い合わせ」をまとめてAIに渡すための型です。空欄をAIの想像に任せると、架空の口コミやありもしない受賞歴を勝手に作られてしまい、直す手間が増えます。分からない項目は無理に埋めず、「未定」と書いておけば大丈夫です。

Canvasを開き、次のプロンプト（架空サンプル入り）を送信してください。自分の店で作るときは、【】の中身を実際の情報に差し替えます。

あなたは地域店の集客に強いWebデザイナーです。
GeminiのCanvasでプレビューできる、お店の縦スクロール1ページを作ってください。

【目的（行動は1つだけ）】
来店見込みの人に、ページを読んでもらい、最後に「電話で空きを確認する」へ進んでもらう。
今回選ぶ行動: 電話で空きを確認する

【誰に来てほしいか（1行）】
西鉄久留米駅近くで働く人に、仕事帰りに一人でも入りやすい店だと伝えたい

【店の事実（想像で埋めない。空欄は「未定」と書く）】
- 店名: 久留米駅前焙煎舎
- 業種: カフェ
- エリア（市区町村まで可）: 福岡県久留米市
- 住所: 久留米市東町1-2-3（架空のサンプル。自分の店に差し替える）
- 営業時間・定休日: 11:00–20:00・水曜定休
- 電話 / LINE / 予約URL（使うものだけ）: 電話 0942-00-0000（架空）
- 主なメニューまたはサービス（3つ前後）: エチオピア豆のハンドドリップ、本日のパンセット、アイスコーヒー
- 料金の目安（分かる範囲で）: ドリンク500〜650円
- 強み・選ばれる理由（2〜3個）: 駅から徒歩5分、一人でも入りやすい、焙煎の香りがわかりやすい
- 避けたい表現（誇大・最安・必ず治る、など）: 最安、絶対、必ず

【ページのセクション順（この順番を守る）】
1. ファーストビュー: 何屋か＋誰向けの1行＋主ビジュアル枠＋主CTAボタン1つ
2. メニュー／強み／料金目安
3. 場所・時間
4. 問い合わせの一文（CTAはページ内で同じ文言を最大2か所まで。種類は増やさない）

【問い合わせボタンの文言】
「電話で空きを確認する」／近くに「営業時間内にお電話ください」

【デザイン方針】
- スマホで読みやすい、落ち着いた店舗向け
- 色やフォントはおまかせ。後で短文で直す
- 派手なアニメーションは不要

【技術・出力の制約】
- 1ファイルで完結するHTML（必要ならTailwindなどCDN可）
- レスポンシブ（スマホ幅を優先）
- 地図は埋め込みコードのプレースホルダーでよい
- 問い合わせリンクは仮でよい（例: tel: や #contact）。後で実番号・実URLに差し替える前提
- 画像は「実写差し替え前提」の枠とaltを用意。AI生成画像を店の公式写真として確定しない
- 架空の口コミ・賞・保証は作らない
- 日本語のみ

出力: Canvasでプレビューできる1ページ全体。

プレビューが表示されたら、色や余白などの細かい見た目はひとまず置いて、上から下までスクロールしてみましょう。チェックするポイントは「さっきの3点が入っているか」だけです。デザインの調整は、次の手順でいくらでも直せます。

4. 差し替えと直し（ここが本番）

できあがった画面を見て、「サンプルの店名のままだ」「写真がうちの店じゃない」とがっかりするかもしれませんが、それで普通です。AIが出してくれるのはあくまで「たたき台」。お店の本当の情報に合わせていくのはここからです。

修正するときは、チャットで一言ずつ指示を出します。一度に「全部直して」と頼むと、どこがどう変わったか追えなくなって、かえって時間がかかります。「店名」「住所」「ボタン」と1つずつ頼めば、プレビューで確認しながら確実に進められます。

例:

• 「店名を久留米駅前焙煎舎に変えて」（自分の店なら実名に）
• 「住所と営業時間を次の文に差し替えて」（メモを貼る）
• 「CTAは『電話で空きを確認する』だけ。他の種類のボタンは消して」
• 「キャッチを短く。誰向けかが先に来るように」
• 画像をアップロードできる場合は「この写真をファーストビューに」

サンプルのままになっているところを、メモの事実や実際の写真に一つずつ置き換えていきましょう。

問い合わせ一文の型（1つ選ぶ）

電話・LINE・予約を全部並べたくなりますが、読む側からすると「どれが本命なの？」と迷って離脱する原因になります。一番使ってほしい連絡方法を1つだけ選びましょう。

また、ボタンのすぐそばに短い一文を添えておくと、「押したあと何が起きるのか」がイメージできて安心感が出ます。仕事帰りの人でも、「これなら気軽に電話できそうだな」と一歩を踏み出しやすくなります。

目的	ボタン例	近くに添える一文例
電話	電話で空きを確認する	営業時間内にお電話ください
LINE	LINEで気軽に相談する	しつこい勧誘はしません
予約	来店予約をする（無料）	予約前の確認だけでも大丈夫です

誇張表現や、架空の口コミ・実在しない賞は入れないでください。

5. できあがり確認

最後に、パソコンのブラウザ幅をぐっと狭めて、スマホの画面サイズで見てみましょう。来店を考える人の多くは、電車の中やちょっとした休憩時間にスマホでページを開きます。PCの広い画面では綺麗に見えていても、スマホの狭い幅にすると「文字がギチギチで読みにくい」「ボタンが押しづらい」ということがよくあります。

成功チェックリスト

大切な3点に加えて、事実・実写・スマホでの見やすさをチェックしましょう。閉店後にひとつずつ当てはめてみて、すべてにチェックが入ればお店の1ページとして完成です。

• 「誰に来てほしいか」がファーストビュー付近に1行ある
• 上から、メニュー／強み／料金目安 → 場所・時間 → 問い合わせ、の順になっている
• 問い合わせのボタン（または一文）は種類が1つだけ
• 店名・住所・時間・連絡先が自分の店の事実（サンプルのまま残っていない）
• 写真は実写、または「あとで実写に差し替える枠」
• スマホ幅で文字が読め、ボタンが押しやすそう
• Canvasのプレビュー（またはコード）が手元で見られる

コードのコピーや書き出しは、画面上にある「コード」「エクスポート」「コピー」といったボタンから探してください（表記は時期によって変わります）。プレビューできて、3点が入っていれば合格です。

よくあるつまずきと対処

作業中につまずいたときは、次の表を参考にしてください。「症状」に当てはまる行を見れば、すぐやるべき手が分かります。

つまずき	対処
「HP作って」だけで平均的な店になる	3行メモと手順2の確認を先に行う
Canvasの場所が分からない	「＋」「Canvas」「ウェブページ」を探す。長いHTMLだけ出たら「Canvasでプレビューできるようにして」と頼む
サンプル店名・偽住所・生成画像が残る	手順4で事実と実写に差し替える
CTAが電話・LINE・予約で並ぶ	種類は1つに削る（同じ文言の再掲は最大2か所）
スマホで崩れて見える	幅を狭めて確認し、「スマホ幅で読みやすく直して」と指示
上限や一時停止の表示	待ってから短い指示で再開。○回/日などの断定はしない

トラブルの多くは、「事前にメモを書く」「短文で少しずつ直す」「問い合わせは1種類に絞る」の3つを徹底すれば解決します。もし途中で何が何だか分からなくなったら、手順2の「3点の確認」に戻ってみてください。

ページのセクション順（固定）

お客さんはページを上から順にスクロールして見ていきます。仕事帰りの忙しい人が、パッと見て「何のお店か」「自分向けか」を最初の数秒で感じ取れなければ、メニューの詳細を見る前に離脱してしまいます。だからこそ、並べる順番を固定します。

1. ファーストビュー（何屋か＋誰向け1行）
2. メニュー／強み／料金目安
3. 場所・時間
4. 問い合わせ一文（CTA 1種類）

まずは「何屋で、誰向けか」、次に「商品や強み」、そのあとで「どこにあって何時までか」、最後に「問い合わせ」です。あれこれ盛り込みすぎるとお客さんが読むのに疲れてしまうので、最初は必ずこの4つの順番を守って組み立てましょう。

まとめ

高額な費用をかけなくても、無料のGeminiとCanvasを使えば、お店の1ページの骨格は作れます。
ツールの操作に迷う前に、まず固めるべきは次の3点です。「誰向けか」が決まれば、誰にも刺さらない平均点な文章になりません。「伝える順番」があれば、スマホでスクロールしても迷子になりません。そして「問い合わせの一文」があれば、お客さんは「次に何をすればいいか」で止まらずに済みます。

1. 誰に来てほしいか
2. 何をどの順で
3. 問い合わせの一文

この3つが入った1ページが手元にあれば、完了です。

自分の店用プロンプト（空欄・コピー用）

下の2つは、ご自身のお店用にそのまま使えるプロンプトのテンプレートです。コピーして【】の中身を書き換えて使ってください。分からない項目は無理に埋めず、「未定」と書いて構いません。

1. 3点確認用（先に送る）

あなたは地域の小さなお店のホームページ相談役です。
まだページは作らず、次の3点だけを整理して、私の確認用に短く書き直してください。

【誰に来てほしいか】
（1行で書く）

【何をどの順で伝えるか（私のメモ）】
- （強み・メニュー・料金など）
- （）
- （）

【問い合わせの一文にしたい行動】
（電話 / LINE / 予約のうち、いちばん使ってほしいもの）

出力ルール:
1. 「誰に来てほしいか」を1行に整える
2. ページ上の順番を、上から番号付きで4つまでに要約する
   （ファーストビュー → メニュー／強み／料金目安 → 場所・時間 → 問い合わせ一文）
3. 問い合わせのボタン文言案を、動詞入りで2案だけ出す（私が1つ選ぶ）
4. 架空の店名・住所・口コミ・賞は作らない
5. まだHTMLやデザインは出さない

2. Canvas生成用（1ページを作る）

あなたは地域店の集客に強いWebデザイナーです。
GeminiのCanvasでプレビューできる、お店の縦スクロール1ページを作ってください。

【目的（行動は1つだけ）】
来店見込みの人に、ページを読んでもらい、最後に「（選んだ行動）」へ進んでもらう。
今回選ぶ行動: （電話で空きを確認する / LINEで相談する / 来店予約をする、など1つ）

【誰に来てほしいか（1行）】
（1行で書く）

【店の事実（想像で埋めない。空欄は「未定」と書く）】
- 店名: （）
- 業種: （）
- エリア（市区町村まで可）: （）
- 住所: （）
- 営業時間・定休日: （）
- 電話 / LINE / 予約URL（使うものだけ）: （）
- 主なメニューまたはサービス（3つ前後）: （）
- 料金の目安（分かる範囲で）: （）
- 強み・選ばれる理由（2〜3個）: （）
- 避けたい表現（誇大・最安・必ず治る、など）: （）

【ページのセクション順（この順番を守る）】
1. ファーストビュー: 何屋か＋誰向けの1行＋主ビジュアル枠＋主CTAボタン1つ
2. メニュー／強み／料金目安
3. 場所・時間
4. 問い合わせの一文（CTAはページ内で同じ文言を最大2か所まで。種類は増やさない）

【問い合わせボタンの文言】
「（選んだボタン文言）」／近くに「（添える一文）」

【デザイン方針】
- スマホで読みやすい、落ち着いた店舗向け
- 色やフォントはおまかせ。後で短文で直す
- 派手なアニメーションは不要

【技術・出力の制約】
- 1ファイルで完結するHTML（必要ならTailwindなどCDN可）
- レスポンシブ（スマホ幅を優先）
- 地図は埋め込みコードのプレースホルダーでよい
- 問い合わせリンクは仮でよい（例: tel: や #contact）。後で実番号・実URLに差し替える前提
- 画像は「実写差し替え前提」の枠とaltを用意。AI生成画像を店の公式写真として確定しない
- 架空の口コミ・賞・保証は作らない
- 日本語のみ

出力: Canvasでプレビューできる1ページ全体。