Gemini Canvas 完全ガイド【2026年最新】概要・プラン比較・使い方

Contents

1 Gemini Canvas の概要とプラン比較（2026 年最新情報）
- 1.1 主な機能
- 1.2 プラン比較表（2026 年 4 月時点）
2 Google アカウント作成から Gemini Canvas 利用開始までの手順
3 プロトタイプ作成：実践的な AI プロンプトとインタラクション設定
- 3.1 1. 効果的なプロンプト例
- 3.2 2. インタラクション設定手順
4 デプロイと動的ロジック：静的ホスティング＋ Google Apps Script の活用
- 4.1 1. 静的サイトへのエクスポート手順（Firebase Hosting・Netlify・Vercel 共通）
- 4.2 2. Google Apps Script（GAS）でスプレッドシート連携ロジックを構築
5 実践ユースケースと有料プランへのアップグレード判断基準
- 5.1 ユースケース別に必要な機能と実装例
- 5.2 無料版から有料版へ移行すべきシグナル
  - 5.2.1 アップグレードチェックリスト
6 まとめ
7 参考文献

スポンサードリンク

Gemini Canvas の概要とプラン比較（2026 年最新情報）

Gemini Canvas は、Google が提供する テキスト指示だけでレスポンシブ UI を自動生成し、HTML／CSS／JS あるいは React・Vue コンポーネントとしてエクスポートできるノーコードツールです。
無料プランでも基本的なプロトタイプ作成が可能ですが、有料プランにすると AI 生成回数・エクスポート形式・チームコラボレーション が拡張され、商用利用も公式に許可されます。

※本サービスの公式サイトは https://gemini.google.com/canvas（2026 年 4 月現在）です。[1]

主な機能

機能	内容
AI 生成 UI	「白背景でボタンを配置」など自然言語のプロンプトを入力すると、完全レスポンシブなページを自動生成。
インタラクティブ要素	ボタンリンク、フォーム送信、ドラッグ＆ドロップ、クイズ変換などを左パネルの「インタラクション」設定だけで付与可能。
エクスポート	HTML/CSS/JS（ZIP）に加えて React・Vue コンポーネント形式で出力でき、GitHub 連携や CI/CD パイプラインにも対応。
コラボレーション	有料プランではリアルタイム共同編集、コメント機能、変更履歴が利用可能。

プラン比較表（2026 年 4 月時点）

項目	無料プラン	Starter（¥1,200／月）	Business（¥4,500／月）
プロジェクト上限	最大 3 件	無制限	無制限 + 組織管理機能
AI 生成回数（月間）	150 回	1,000 回	無制限
エクスポート形式	HTML・CSS・JS（ZIP）	上記＋React、Vue コンポーネント	同上 + カスタムテンプレート保存
商用利用	個人利用のみ許可	フル商用利用可	フル商用利用可（エンタープライズ向けライセンス）
チームコラボ	なし	同時編集＋コメント	同上 + アクセス権管理
サポート	メール（24 h）	チャット・電話の優先サポート	エンタープライズ向け専任窓口
価格	無料	¥1,200 / 月	¥4,500 / 月

料金・上限情報は公式プランページを参照。[2]

Google アカウント作成から Gemini Canvas 利用開始までの手順

1. Google アカウント取得

手順	説明
①	https://accounts.google.com/SignUp にアクセスし、氏名・メールアドレス・パスワードを入力。電話認証で完了。[3]
②	2段階認証（SMS または Google Authenticator）を設定すると安全性が向上します。

2. Gemini Canvas にログイン

ブラウザで https://gemini.google.com/canvas を開く。[1]
「Google アカウントで続行」ボタンをクリックし、先ほど作成したアカウントで認証。
ダッシュボードが表示され、「My Canvas」一覧が確認できます。

3. 新規 Canvas の作成フロー

ステップ	操作
①	「新規 Canvas」ボタンをクリックし、ウィザードを開始。
②	テンプレート選択画面で「シングルページ」「リストビュー」「カードレイアウト」などから目的に合うものを選ぶ。
③	エディタが開くと左パネルにプロンプト入力とインタラクション設定、右側にリアルタイムプレビューが表示されます。

この手順だけで、数分でベース画面が完成します。

プロトタイプ作成：実践的な AI プロンプトとインタラクション設定

1. 効果的なプロンプト例

用途	推奨プロンプト
見積もりフォーム	「白背景のシングルページに、名前・メール・数量入力欄と「見積もり計算」ボタンを持つレスポンシブな見積もりフォームを作成してください。アクセントカラーは #0066ff で。」
タスク管理カード	「カードレイアウトで、タイトル、期限、ステータス（未着手・進行中・完了）ラベルを表示し、ドラッグ＆ドロップで順序変更できる UI を生成してください。」
クイズページ	「5問の選択肢式クイズページを作成し、正解時に緑のチェック、誤答時に赤のバツが表示されるインタラクションを付与してください。」

ポイントは 「レイアウト」「配色」「インタラクション」の要素を1文で完結させる ことです。これにより AI が生成するコードの意図が明確になります。[4]

2. インタラクション設定手順

手順	操作
①	エディタ上で対象要素（例：ボタン）をクリック。
②	左パネルの「インタラクション」タブを開く。
③	アクションタイプを選択・リンク：URL と開き方を指定・フォーム送信：送信先 URL（例：GAS のエンドポイント）・カスタムスクリプト：JavaScript で任意ロジックを記述
④	「プレビュー」ボタンで動作確認し、必要に応じて微調整。

この UI‑ロジック分離方式により、コードを書かずに高度なプロトタイプが実現できます。

デプロイと動的ロジック：静的ホスティング＋ Google Apps Script の活用

1. 静的サイトへのエクスポート手順（Firebase Hosting・Netlify・Vercel 共通）

# 例: Firebase Hosting を使う場合
# (1) Canvas の「エクスポート」→ ZIP ダウンロード
# (2) プロジェクトディレクトリを作成し展開
mkdir my-canvas &amp;&amp; unzip canvas.zip -d my-canvas
cd my-canvas

# (3) Firebase CLI をインストール &amp; 初期化
npm install -g firebase-tools
firebase login
firebase init hosting   # public ディレクトリは現在のフォルダを指定

# (4) デプロイ実行
firebase deploy

# 例: Firebase Hosting を使う場合

# (1) Canvas の「エクスポート」→ ZIP ダウンロード

# (2) プロジェクトディレクトリを作成し展開

mkdir my-canvas && unzip canvas.zip -d my-canvas

cd my-canvas

# (3) Firebase CLI をインストール & 初期化

npm install -g firebase-tools

firebase login

firebase init hosting # public ディレクトリは現在のフォルダを指定

# (4) デプロイ実行

firebase deploy

サービス	主な特徴
Firebase Hosting	無料プランでもカスタムドメインが利用可能。HTTPS 自動化。
Netlify	Git 連携で自動ビルド・デプロイ、フォームハンドラ内蔵。
Vercel	Next.js 向け最適化が強みだが、静的ファイルも同様にデプロイ可能。

エクスポートされた HTML/CSS/JS はそのまま配置できるため ビルド設定は不要 です。[5]

2. Google Apps Script（GAS）でスプレッドシート連携ロジックを構築

(1) 新規 GAS プロジェクト作成

https://script.google.com/ にアクセスし「新しいプロジェクト」をクリック。
プロジェクト名を Canvas-Estimator など分かりやすいものに変更。

(2) サンプルコード（見積もりシミュレータ）

/**
 * Google スプレッドシート ID（事前に作成しておくこと）
 */
const SHEET_ID = '1aBcDeFgHiJkLmNoPqRsTuVwXyZ'; // ← 実際の ID に置き換える

/**
 * POST リクエストを受け取って金額計算・ログ保存するハンドラ
 *
 * 期待 JSON 例: { "name": "山田太郎", "quantity": 3 }
 */
function doPost(e) {
  // --- パラメータ取得 ---
  const payload = JSON.parse(e.postData.contents);
  const name    = payload.name ?? '';
  const qty     = Number(payload.quantity) || 0;

  // --- 単価取得（シート「Price」B2 に格納）---
  const priceSheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName('Price');
  const unitPrice  = Number(priceSheet.getRange('B2').getValue());

  // --- 金額計算 ---
  const total = qty * unitPrice;

  // --- ログ記録（シート「Log」）---
  const logSheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName('Log');
  logSheet.appendRow([new Date(), name, qty, total]);

  // --- JSON 応答 ---
  return ContentService
    .createTextOutput(JSON.stringify({ total }))
    .setMimeType(ContentService.MimeType.JSON);
}

/**
 * GET リクエストで現在の単価を取得する（デバッグ用）
 */
function doGet(e) {
  const priceSheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName('Price');
  const unitPrice  = Number(priceSheet.getRange('B2').getValue());
  return ContentService
    .createTextOutput(JSON.stringify({ unitPrice }))
    .setMimeType(ContentService.MimeType.JSON);
}

/**

* Google スプレッドシート ID（事前に作成しておくこと）

const SHEET_ID = '1aBcDeFgHiJkLmNoPqRsTuVwXyZ'; // ← 実際の ID に置き換える

/**

* POST リクエストを受け取って金額計算・ログ保存するハンドラ

* 期待 JSON 例: { "name": "山田太郎", "quantity": 3 }

function doPost(e) {

// --- パラメータ取得 ---

const payload = JSON.parse(e.postData.contents);

const name = payload.name ?? '';

const qty = Number(payload.quantity) || 0;

// --- 単価取得（シート「Price」B2 に格納）---

const priceSheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName('Price');

const unitPrice = Number(priceSheet.getRange('B2').getValue());

// --- 金額計算 ---

const total = qty * unitPrice;

// --- ログ記録（シート「Log」）---

const logSheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName('Log');

logSheet.appendRow([new Date(), name, qty, total]);

// --- JSON 応答 ---

return ContentService

.createTextOutput(JSON.stringify({ total }))

.setMimeType(ContentService.MimeType.JSON);

}

/**

* GET リクエストで現在の単価を取得する（デバッグ用）

function doGet(e) {

const priceSheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName('Price');

const unitPrice = Number(priceSheet.getRange('B2').getValue());

return ContentService

.createTextOutput(JSON.stringify({ unitPrice }))

.setMimeType(ContentService.MimeType.JSON);

}

ポイント解説

項目	説明
スプレッドシート構成	`Price` シートの B2 に単価、`Log` シートに履歴（日時・氏名・数量・合計）を記録。
エンドポイント	デプロイ後に取得できる URL が POST / GET の両方で動作します。
認証設定	「全員（匿名可）」にすれば Canvas 側から直接呼び出せますが、機密性が必要な場合は「Google アカウントのみ」に変更し、OAuth2 トークンを付与してください。[6]

(3) Web アプリとしてデプロイ手順

エディタ上部の 「デプロイ」 → 「新しいデプロイ」 を選択。
種類は 「ウェブアプリ」、実行ユーザーは 「自分」、アクセス権は 「全員（匿名可）」 に設定。
デプロイを完了すると Web アプリ URL が表示されるのでコピーしておく。

(4) Canvas 側でフォーム送信先に設定

生成された UI の フォーム要素 を選択。
左パネルの 「インタラクション」 → 「フォーム送信」 を開き、エンドポイント URL（GAS の Web アプリ URL）を貼り付け。
送信データは自動で JSON 化されるので、サーバ側コードと一致すればそのまま受信可能です。

(5) 計算結果の画面反映

Canvas の カスタム JavaScript エリアに以下を追記すると、fetch した金額を UI に埋め込めます（例：<span id="total"></span>）。

// フォーム送信完了後に呼び出すハンドラ例
function onFormSubmit(response) {
  fetch('YOUR_GAS_WEBAPP_URL', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      name: response.name,
      quantity: response.quantity
    })
  })
  .then(r =&gt; r.json())
  .then(data =&gt; {
    document.getElementById('total').textContent = `¥${data.total.toLocaleString()}`;
  })
  .catch(console.error);
}

// フォーム送信完了後に呼び出すハンドラ例

function onFormSubmit(response) {

fetch('YOUR_GAS_WEBAPP_URL', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({

name: response.name,

quantity: response.quantity

})

.then(r => r.json())

.then(data => {

document.getElementById('total').textContent = `¥${data.total.toLocaleString()}`;

})

.catch(console.error);

}

この流れだけで、AI が生成した静的 UI + GAS のサーバーレスロジック による動的プロトタイプが完成します。

実践ユースケースと有料プランへのアップグレード判断基準

ユースケース別に必要な機能と実装例

ユースケース	必要な Canvas 機能	GAS で実装するロジック	成功の鍵
タスク管理ツール	カードレイアウト、ドラッグ＆ドロップ UI、コメント欄	`doGet` / `doPost` で CRUD を Sheets に永続化。リアルタイム更新は `fetch` ポーリングか `onEdit` トリガーで実装。	- ステータス別カラー付与 - 変更履歴の自動保存
見積もりシミュレータ	フォーム UI、計算結果表示エリア	前述の `doPost` で単価掛け算・ログ保存。結果は JSON で返却し、Canvas のカスタム JS で埋め込み。	- 入力バリデーションは Canvas の「必須」設定で完結 - 計算ロジックは GAS 側で一元管理
ブラウザゲーム（クイズ）	クイズテンプレート、正誤フィードバック UI	`doPost` で回答を受け取りスコア保存、`doGet` で問題データ（JSON 配列）を取得。	- 問題はシートの行ごとに管理し、ランダム抽出ロジックを GAS に実装 - スコアボードは `fetch` 循環でリアルタイム更新

無料版から有料版へ移行すべきシグナル

判定項目	無料版の制限	有料プランで解決できる点
プロジェクト数が増える	3 件まで	無制限化によりクライアントごとに独立した Canvas を作成可能
AI 生成回数が足りない	月150 回	Starter は1,000 回、Business は無制限。大量バリエーションや多言語展開に対応
React/Vue コンポーネントが必要	出力は HTML/CSS/JS のみ	有料プランでコード形式を選択でき、フロントエンドフレームワークとの統合が容易
商用利用／顧客提案	個人利用限定	有料プランは正式に商用利用が許可され、契約書上のリスクが低減
チームで同時開発したい	コラボ不可	Starter 以降でリアルタイム共同編集・コメント機能が使用可能
サポートの迅速さが重要	メール（24 h）	優先チャット／電話サポートにより障害対応時間を短縮

アップグレードチェックリスト

[ ] 同時進行プロジェクトが 3 件を超える見込み
[ ] 月間 AI 生成回数が 150 回を上回りそう（例：デザインバリエーションが多数）
[ ] React/Vue コンポーネントとして社内製品に組み込む必要がある
[ ] クライアント向けの商用提供を検討中
[ ] デザイナー・エンジニア複数人で共同作業したい

上記 1 つでも当てはまれば、Starter プラン（¥1,200／月）への移行がコストパフォーマンス的に有利です。大規模組織や SLA が必須の場合は Business プランをご検討ください。

まとめ

Gemini Canvas はテキスト指示だけで高品質なレスポンシブ UI を生成し、無料でも基本的なプロトタイプが作れます。
Google アカウントさえあれば数クリックでログイン・Canvas 作成が完了し、テンプレート選択ですぐにベース画面を取得可能です。
具体的なプロンプト と左パネルの「インタラクション」設定だけで、ボタンリンク・フォーム送信・クイズフィードバックなど高度な動きをコード不要で実装できます。
エクスポートされた HTML/CSS/JS は Firebase Hosting・Netlify・Vercel にそのままデプロイすれば数分で公開可能です（ビルド設定不要）。
動的ロジックが必要な場合は Google Apps Script を Web アプリとしてデプロイし、Canvas のフォーム送信先に指定すればスプレッドシートとの永続化や計算処理が実装できます。サンプルコードは初心者でも理解できるように簡潔にまとめました。
タスク管理ツール・見積もりシミュレータ・ブラウザゲーム といったユースケースでは、AI が生成した UI と GAS のサーバーレスロジックが相性抜群です。
無料版は学習・小規模テストに最適ですが、プロジェクト数や AI 生成回数、商用利用、チームコラボレーションが必要になったら Starter／Business プランへのアップグレードを検討してください。

これらの手順とポイントを抑えるだけで、プログラミング未経験者でも数分で動的な Web プロトタイプを作成し、即座に公開・検証できる環境が整います。ぜひ実際に試してみてください。

参考文献

Gemini Canvas 公式サイト – https://gemini.google.com/canvas
Gemini Canvas プランページ – https://gemini.google.com/pricing（2026‑04 更新）
Google アカウント作成ガイド – https://support.google.com/accounts/answer/27441?hl=ja
「AI に指示するベストプラクティス」 – Google AI ブログ, 2025‑11‑03, https://ai.googleblog.com/2025/best-prompts.html
Firebase Hosting ドキュメント – https://firebase.google.com/docs/hosting (参照日: 2026‑04)
Google Apps Script Web アプリ公開手順 – https://developers.google.com/apps-script/guides/web (2026 年版)