Geminiでホームページを作成する方法｜Canvasの使い方と公開手順【2026年】
「Geminiでホームページが作れると聞いたけれど、実際どうやるの？」「無料でもできる？公開まで本当にできる？」。この記事は、そんな疑問を持つ方に向けて書いています。
結論から言うと、GoogleのGeminiにある「Canvas（キャンバス）」機能を使えば、会話だけでホームページのHTMLを作り、その場でプレビューまでできます。Canvasは無料プランでも利用できます。ただし、Gemini上で作ったページをそのまま会社の公式サイトとして運用するのは難しく、独自ドメインで公開するにはHTMLを書き出し、ホスティングサービスやサーバーにアップロードする必要があります。
この記事では、Geminiでホームページを作る具体的な手順、プロンプト例、Google AI StudioやGoogle Stitchとの使い分け、公開方法と注意点までを、ホームページ制作会社の視点で解説します。
目次
Geminiでホームページは作れる？できること・できないこと
Geminiは、Googleが提供する生成AIです。文章の作成だけでなく、Webページのコード（HTML・CSS・JavaScript）を書くこともできます。特に「Canvas」は、チャット画面の横に編集エリアを開き、作ったWebページをその場でプレビューできる機能で、ホームページ作成と相性のよい機能です。
| できること | できないこと・苦手なこと |
|---|---|
| 会話だけでホームページのHTMLを作成 | 独自ドメインでの公開（Gemini内では不可） |
| 作ったページをその場でプレビュー | 問い合わせフォームの送信処理やデータ保存 |
| 「色を変えて」など会話での修正 | 自社の正確な情報を自動で入れること |
| 構成案・原稿・キャッチコピーの作成 | 公開後のアクセス解析や改善の判断 |
Geminiは「ホームページの試作品やたたき台を短時間で作る」ことが得意で、「公開・運用」はほかのサービスと組み合わせて行う、と考えると分かりやすいでしょう。
ホームページ作成に使えるGoogleのAIツール3つ
Googleには、Gemini以外にもホームページ作成に使えるAIツールがあります。目的に応じて使い分けましょう。
Gemini（Canvas）：初心者がまず使うならこれ
普段のGeminiの画面で使えるため、最も手軽です。1ページ完結のホームページやLP（ランディングページ）であれば、Canvasだけで見た目まで作り込めます。
Google AI Studio（Buildモード）：アプリ寄りの開発向け
開発者向けの「Google AI Studio」には、自然な言葉で指示するとWebアプリを生成する「Build」モードがあります。複数のファイルで構成されたアプリを作れ、GitHubとの連携やZIPでのダウンロードにも対応しています。予約システムのような動きのあるものを試作したい場合に向いています。
Google Stitch：デザイン案を作りたいとき
Google Stitchは、テキストや画像からアプリ・Webの画面デザインを生成するツールです。生成したデザインはFigmaやHTML/CSSに書き出せます。公開機能はないため、デザインの方向性を決めたり、制作会社やエンジニアとイメージを共有したりする用途に向いています。
Geminiでホームページを作成する手順（Canvas）
ここからは、GeminiのCanvasを使ってホームページを作る手順を紹介します。全体の流れは次の6ステップです。
ステップ1：Canvasをオンにする
Geminiの画面を開き、入力欄の近くにある「Canvas」を選択します。その状態で指示を書くと、回答がCanvasの編集エリアに表示されます。
ステップ2：条件を具体的に伝えて生成する
ホームページの条件をまとめて伝えます。次のプロンプト例を、自社に合わせて書き換えて使ってみてください。
「福岡市中央区にある整体院のホームページを、HTML・CSS・JavaScriptを1ファイルにまとめて作ってください。
・ターゲット：デスクワークで肩こりや腰痛に悩む30〜50代
・目的：Web予約を増やしたい
・載せる項目：ファーストビュー、こんな悩みはありませんか、施術の流れ、料金、院長あいさつ、よくある質問、アクセス、予約ボタン
・雰囲気：清潔感があり、落ち着いた青と白を基調に
・スマートフォンで見やすいレイアウトにしてください」
ポイントは、業種・地域・ターゲット・目的・載せる項目・雰囲気の6つを入れることです。条件があいまいだと、どこにでもあるような仕上がりになります。
ステップ3：プレビューで確認する
Canvasのプレビューで見た目を確認します。パソコンの画面幅だけでなく、スマートフォンでどう見えるかも意識しましょう。
ステップ4：会話で修正する
気になる部分は、会話で1つずつ修正を依頼します。
- 「ファーストビューのキャッチコピーを、悩みに寄り添う表現で3案出して」
- 「料金表を表形式にして、初回料金を目立たせて」
- 「全体の色を、もう少し落ち着いた紺色に変えて」
一度にたくさんの修正を頼むより、1〜2点ずつ頼んだ方が意図どおりに直りやすいです。
ステップ5：店名・住所・料金などの情報を正しく直す
Geminiは、それらしい店名や電話番号、料金を「仮の情報」として入れることがあります。公開前に、すべての情報を実際のものに置き換えてください。ここを見落とすと、お客様に誤った情報を伝えてしまいます。
ステップ6：HTMLを書き出して公開する
完成したら、コードをコピーして「index.html」として保存し、ホスティングサービスやレンタルサーバーにアップロードして公開します。公開方法は次の章でくわしく説明します。
Geminiで作ったホームページを公開する方法
Geminiで作ったホームページの公開方法は、主に3つあります。
| 公開方法 | 特徴 | 向いている用途 |
|---|---|---|
| Canvasの共有リンク | Geminiの画面から公開リンクを発行。手軽だが独自ドメインやアクセス解析は使えない | 社内やお客様への試作の共有 |
| 無料ホスティング（Cloudflare Pages・Netlifyなど） | HTMLファイルをアップロードして公開。独自ドメインも設定できる | 費用を抑えて公開したい場合 |
| レンタルサーバー | 独自ドメインで本格運用。メールアドレスも作れる | 会社・店舗の公式サイト |
なお、GitHub PagesやVercelの無料枠は、規約上、商用利用が制限されています。会社のサイトとして使う場合は、利用するサービスの規約を必ず確認しましょう。完全無料で公開する手順はAIでホームページを完全無料で作成・公開する方法でくわしく解説しています。
Geminiでホームページを作るときの注意点
便利なGeminiですが、注意しておきたい点もあります。
共有リンクは「誰でも見られる」状態になる
Canvasの共有リンクを発行すると、リンクを知っている人なら誰でも閲覧できる状態になります。未公開の情報やお客様の情報を含むページは共有しないようにしましょう。
フォームやSEOは別途設定が必要
Geminiが作るHTMLの問い合わせフォームは、見た目だけで、送信の仕組みが入っていないことがほとんどです。Googleフォームを埋め込む、フォームサービスを使うなどの対応が必要です。また、ページのタイトルや説明文（meta description）、アクセス解析の設定も自分で行う必要があります。
更新のたびにHTMLの修正が必要
HTMLで作ったサイトは、文章を少し変えるだけでもファイルの修正と再アップロードが必要です。お知らせやブログを頻繁に更新したい場合は、WordPressなどのCMSを使った方が運用しやすくなります。WordPressとAIの組み合わせはホームページ作成×AI×WordPressの記事で紹介しています。
制作会社から見たGeminiの上手な使い方
ホームページ制作の現場から見ると、Geminiが最も力を発揮するのは「完成品を作る」ことよりも、「イメージを形にして共有する」ことです。
たとえば、制作会社に依頼する前にGeminiで「こんな雰囲気のサイトにしたい」という試作を作っておくと、打ち合わせでのイメージのずれが減り、話がスムーズに進みます。社内で「どんなホームページにするか」を話し合うときの叩き台としても便利です。
一方で、集客や問い合わせを増やすためのサイトには、競合との違いを伝える原稿、検索で見つけてもらうための設計、公開後の改善が欠かせません。試作はGeminiで、本格運用はプロと一緒に、という使い分けも一つの選択肢です。
目的別｜Geminiでホームページを作るプロンプト集
Geminiへの指示は、目的に合わせて使い分けると効率的です。そのまま使えるプロンプトの例を紹介します（【 】の部分を自社の内容に置き換えてください）。
| 目的 | プロンプトの例 |
|---|---|
| サイト構成を考える | 【業種・地域】のホームページを作ります。ターゲットは【ターゲット】、目的は【目的】です。必要なページと、各ページに載せる内容を提案してください |
| キャッチコピーを作る | 【強み】が伝わるファーストビューのキャッチコピーを、20文字以内で10案出してください。誇張した表現は使わないでください |
| 1ページのLPを作る | 次の情報をもとに、HTML・CSSを1ファイルにまとめたLPを作ってください。スマートフォンでの表示を優先してください。【情報】 |
| デザインを調整する | 全体の配色を【色】を基調に変更し、見出しの文字を大きく、行間を広げて読みやすくしてください |
| よくある質問を作る | 【ターゲット】が問い合わせ前に不安に思いそうな質問を8個作り、次の情報をもとに回答してください。【情報】 |
| SEO設定を考える | このページのtitleタグ（32文字前後）とmeta description（120文字前後）の案を3つずつ作ってください |
プロンプトのコツ
- 一度に頼みすぎない：構成→原稿→デザイン→細部の調整、と段階的に依頼する
- 条件を数字で伝える：「短く」より「20文字以内」、「たくさん」より「10案」
- 禁止事項も伝える：「誇張表現は使わない」「専門用語は使わない」など
工程ごとのプロンプトはWeb制作AIプロンプト実践例20選でもまとめています。
GeminiのAPIを使った活用（開発者向け）
社内にエンジニアがいる場合は、GeminiのAPI（外部のシステムからGeminiを呼び出す仕組み）を使って、ホームページの原稿づくりや更新作業を自動化することもできます。たとえば、商品データから商品紹介ページの下書きをまとめて作る、といった使い方です。くわしくはGemini APIの使い方で解説しています。
よくある質問
Q. Geminiのホームページ作成は無料でできますか？
はい、Canvas機能は無料プランでも利用できます。有料プラン（Google AI Proなど）では、より高性能なモデルや多い利用上限が使えます。最新の料金は公式サイトで確認してください。
Q. Geminiで作ったホームページに独自ドメインは使えますか？
Geminiの共有リンクでは独自ドメインは使えません。HTMLを書き出して、独自ドメインを設定できるホスティングサービスやレンタルサーバーで公開する必要があります。
Q. Geminiで作ったホームページはスマホ対応できますか？
プロンプトで「スマートフォンでも見やすいレイアウトにして」と伝えれば、多くの場合スマホ対応のHTMLを作ってくれます。公開前に実際のスマートフォンで表示を確認しましょう。
Q. GeminiとChatGPT、ホームページ作成にはどちらがいいですか？
どちらも構成案・原稿・HTMLの作成に使えます。GeminiはCanvasでのプレビューがしやすく、Googleのサービスとの連携も便利です。ツールの比較はAIホームページ作成ツール比較16選を参考にしてください。
まとめ：Geminiは「試作」に強い。公開と運用は組み合わせで
- GeminiのCanvas機能を使えば、会話だけでホームページのHTMLを作成・プレビューできる
- プロンプトには「業種・地域・ターゲット・目的・載せる項目・雰囲気」を入れる
- 会社のサイトとして公開するなら、HTMLを書き出してホスティングやサーバーで公開する
とはいえ、試作から「問い合わせが増えるホームページ」に仕上げるには、原稿や導線の設計、SEOの設定など、専門的な作業が必要です。スゴヨクでは、AIを活用しながら、市場調査にもとづいた「売れる」ホームページを制作し、公開後の改善まで伴走しています。
Geminiで作った試作を持ち込んでのご相談も歓迎です。まずは無料相談から、お気軽にどうぞ。
