GeminiアプリのCanvasでWebページのコード作成【コピペOKのプロンプト付き】

WebサイトやLP（ランディングページ）を作りたいときは、GeminiのCanvasを使うと誰でも簡単にコードを作成できます。

Geminiアプリ（https://gemini.google.com/）にアクセスし、プロンプト欄の「＋」から「Canvas」を選んでプロンプトを入力するだけです。

▲「＋」をクリックして「Canvas」を選択

プロンプトには「スタイルは Tailwind CSS で記述する」を入れるのがおすすめです。今風のデザインになります。

また、デザインに慣れていない方は、色やサイズを細かく書くより、Geminiにお任せした方がよい感じのができます。

Canvas用プロンプト

# 「マカロン専門店」1ページWebサイトをCanvasで作成

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

## 目的
マカロンの可愛さとおいしさが伝わり、思わず「買いに行きたい」と感じてもらえる集客力の高いサイトにすること。

## 指示
以下の条件で、マカロン専門店の1ページWebサイト（縦スクロール）を作成してください。

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

## デザイン
- モダンで洗練された、かわいいデザイン
- パステルカラーを基調に、マカロンの色とりどりな魅力が伝わる配色
- フォント：テーマに合う書体を、Google Fontsのみから選んで読み込む
- 見やすく回遊しやすいレイアウト
ｰ 適度な余白を作る
- レスポンシブ対応
- スタイルは Tailwind CSS で記述する（<head> で <script src="https://cdn.tailwindcss.com"></script> を読み込む）

## ページ構成（1ページ内に、上から順に配置）
1. ヘッダー（画面上部に固定するナビ）： 店名ロゴ＋ TOP / 商品紹介 / 店舗案内 / アクセス
2. TOP（ヒーロー）：キャッチコピー＋メインビジュアル＋「商品を見る」ボタン
3. 商品紹介：人気フレーバーと価格
4. 店舗案内：営業時間・店舗情報
5. アクセス：場所・地図エリア（地図はプレースホルダーでよい）
6. フッター

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

## 出力形式
- 画像はサンプル画像を使用する

## 制約条件
- ヘッダーのメニューをクリックすると、該当セクションへスムーススクロールで移動すること。
- 予約・問い合わせフォームは作らない。「お問い合わせ」ボタンのリンク先は後でGoogleフォームのURLを設定するため、href="#" のプレースホルダーにしておくこと。

しばらくすると、右側にプレビューが表示されます。