GeminiでWebサイトのコード作成　Canvasなし【コピペOKのプロンプト付き】

前の記事では、GeminiアプリのCanvasを使ってWebページのコード作成を解説しました。

GeminiアプリのCanvasで、おしゃれなWebページのコードを作成する方法

今回は、

Canvasを使わない方法を紹介します。

1. 保存用のフォルダを用意する

まず、ファイルをまとめて入れるフォルダを作っておきます（例：mysiteなど）。

HTMLとCSS、複数のページをこの中にまとめることで、ページ同士のリンクが正しく動くようになります。

2. Geminiにプロンプトを入力する

Geminiアプリ（https://gemini.google.com）にアクセスし、プロンプトを入力します。

▲Geminiアプリのプロンプト欄に貼り付けて【Enter】キーを押す

例として、架空のマカロン専門店「Macaron Shop」のWebサイトを作ります。

前の記事では1ページ構成のサイトのプロンプトでしたが、今回は複数ページ構成のサイトのプロンプトを紹介します。そのままコピーしてお使いください。

# 「マカロン専門店」Webサイトの作成

## 役割
あなたはマーケティングに強く、洗練されたデザインが得意なWebデザイナーです。

## 目的
マカロンの可愛さとおいしさが伝わり、「買いに行きたい」「贈りたい」と思わせる集客力の高いWebサイトを制作してください。

## 指示
以下の条件で、マカロン専門店の複数ページのWebサイトを作成してください。

## ターゲット
- 20〜30代の女性
- 自分へのご褒美、友人や家族へのちょっとした手土産やギフトを探している人

## デザイン
- モダンで洗練された、かわいいデザイン
- パステルカラーを基調に、マカロンの色とりどりな魅力が伝わる配色
- フォント：テーマに合う書体を、Google Fontsのみから選んで読み込む
- 見やすいレイアウト
- 全ページ共通のヘッダーとフッターを設置する（ページ間リンクの詳細はナビゲーションを参照）
- レスポンシブ対応
- スタイルは Tailwind CSS で記述する（各ページの <head> で <script src="https://cdn.tailwindcss.com"></script> を読み込む）

## ページ構成（必ず4ページすべて作成）
1. index.html （TOP）
2. products.html （商品紹介）
3. shop.html （店舗案内）
4. access.html （アクセス）

## ナビゲーション（重要）
- 全ページ共通のヘッダーナビから、他の3ページへ移動できるようにする
- リンクのhref（リンク先）はファイル名を指定する：index.html / products.html / shop.html / access.html
- リンクテキスト（画面に表示する名前）は必ず日本語にする：TOP / 商品紹介 / 店舗案内 / アクセス

## 掲載内容
- 店名：Macaron Shop
- キャッチコピー：ひとくちで、しあわせ色
- 人気フレーバー：ピスタチオ、ローズ、ショコラ、レモン、ベリー、塩キャラメル
- 価格帯：単品 1個 ¥280／6個入ギフトボックス ¥1,980／12個入 ¥3,800
- ギフト対応：誕生日・記念日向けのラッピング、メッセージカード無料
- 営業時間：11:00〜20:00（不定休）
- 店舗：Macaron Shop 本店

## 出力形式
- 下記の順で、ファイルごとにファイル名を見出しに付けて出力する
index.html → products.html → shop.html → access.html → style.css
- 各HTMLとCSSは、それぞれ独立したマークダウンのコードブロックで出力する
- style.css には、Tailwind のクラスで表現しにくいものだけをまとめる（独自の @keyframes アニメーション、base のフォント適用など）。配色・書体の指定は各ページのtailwind.configで行う
- 画像はサンプル画像を使用する

## 制約条件
- index.html / products.html / shop.html / access.html / style.css の5ファイルを、必ずすべて出力すること
- 4ページ分のHTMLは1ページも省略しないこと
- 出力を途中で止めないこと。「（以下同様）」などで省略しないこと

3. 生成されたコードを保存する

しばらくすると、「style.css」と4ページ分のHTMLのコードが生成されます。

各コードブロックの右上にある「コードをダウンロードする」ボタンをクリックして、指定したファイル名（style.css / index.html / products.html / shop.html / access.html）で保存します。

間違えないように、ダウンロードと同時にファイル名を設定するとよいでしょう。

▲「↓」ボタンをクリックしてファイル名を付けて保存する

注意点として、

必ず最後まで出力されてからダウンロードする（途中だとコードが切れてしまいます）
ファイル名は正確に入力する（スペルを間違えるとページ間のリンクが動かなくなります）
5つのファイルはすべて同じフォルダの直下（同じ階層）に保存する

4. ブラウザで表示を確認する

5つのファイルを同じフォルダに保存できたら、「index.html」をダブルクリックして表示を確認します。

上部のメニュー（TOP／商品紹介／店舗案内／アクセス）をクリックして、各ページにきちんと移動できるかを確認してください。

5. 修正や調整

生成されたサイトは「ここはこうしたい」というのが出てくると思います。

直したいところがあったらGeminiに指示を出しましょう。

「＋」をクリックして「index.html」と「style.css」のファイルを添付してから、プロンプトを入力します。

今回の場合は、ヒーローエリアの文字が少し見づらいので、

「やわらかい雰囲気を維持しつつ、文字が見やすいように「index.html」と「style.css」のコードを修正してください。」

と入力します。

「先ほど生成されたらindex.htmlのコードを修正してください」では、画像を出力する場合もあるのでファイルを指定した方が確実です。

コードが再出力されたら、前回のファイルを上書きします。

サイトに掲載されている画像はダミーなので、実際の写真に差し替えてください。

店舗名や住所なども架空のものが入力されているため、全ページを確認し、実際の情報に修正してください。

ちょっとした修正なら、HTMLファイルを「メモ帳」などのアプリで開いて行えます。

あとは、作成したファイルをサーバーにアップロードすれば公開できます。

6. Canvasを使った作成方法との違い

なお、今回のプロンプトは、前記事で紹介したCanvasでもそのまま使えます。

Canvasで入力すると、ページごとに分かれた状態で生成され、各ページの見た目をプレビューで確認しながら作れます。生成されたファイルは、それぞれ開いて1つずつダウンロードできますが、ナビゲーションメニューのリンクは使えません。

ファイルを分けて受け取れる点は、Canvasでも非Canvasでも同じです。大きな違いは「プレビューを見ながら作れるかどうか」と「コードの手入力ができるか」です。

見た目を確認しながら対話で調整したり、その場でコードを直接いじったりしたいときはCanvas、5つのファイルを1つの返信でまとめて受け取りたいときは今回の非Canvasの方法、というように使い分けてみてください。

まとめ

2回にわたり、GeminiでWebサイトのコードを生成する方法を紹介しました。

AIによって、誰でもWebサイトのコードを作成できる時代です。

プロンプトを少し工夫すれば、さらにデザイン性の高いサイトに仕上げることもできるので、あなたのお店やサービスのサイトに活用してみてください！