Gemini Canvas は Gemini の立ち位置そのものを変えました。Canvas がなければ Gemini はチャットボットです。質問を打ち込み、文章が返ってくる。Canvas があると Gemini は制作ツールになります。欲しいものを説明すれば、Gemini がそれを組み立てる。動く Web ページ、インタラクティブなクイズ、めくるアニメーション付きのフラッシュカード、HTML と SVG で描かれたインフォグラフィック。出力は「説明」ではなく、成果物そのものです。

TL;DR クイックリファレンス

起動方法：フルチャットウィンドウ（⌥ ⇧ Space）を開き、入力欄の「Canvas」ボタンを押す。または質問の末尾に「Canvas で見せて」と付ける
6 つのテンプレート：Web ページ、インフォグラフィック、クイズ、フラッシュカード、音声概要、カスタムアプリ
出力形式：サイドパネルのリアルタイムプレビュー（HTML/CSS/JS を iframe サンドボックス内で描画）
書き出し：.html としてダウンロード、ソースをコピー、スクリーンショット保存、閲覧専用リンクの共有
修正方法：対話で指示するだけ。「ボタンを緑にして」「戻るボタンを追加して」で即座に再描画
対応モデル：Gemini 2.5 Pro 以上（一部テンプレートは Gemini 3 が必要）
サイズ上限：生成される HTML はおよそ 800KB まで。超えると途中で切られる
競合：Claude Artifacts（より開発者向け）、ChatGPT Canvas（文書コラボ向け）

デスクトップ app で Canvas を使う手順は？

⌥ ⇧ Space でフルウィンドウを開くところから始めます。ミニ浮遊ウィンドウでは Canvas は使えません。

⌥ ⇧ Space で Gemini のフルウィンドウを開く（ミニウィンドウは Canvas 非対応）
モデルセレクターが Gemini 2.5 Pro か Gemini 3 になっているか確認する
入力欄の右側にある Canvas アイコン（パレット型）をクリックし、テンプレートを選ぶか自動判定に任せる
やりたいことを入力する。例：「履歴書サイトを作って。テーマカラーは濃紺で、氏名・自己紹介・職歴・プロジェクト・連絡先を入れて」
右側に Canvas プレビューが自動で開き、コードが流れるように生成され、完了後に描画される
対話で修正を続ける。「フォントを Inter にして」「連絡先に LinkedIn アイコンを追加して」
書き出す。プレビュー上部の「⋯」から「Download HTML」または「Copy source」を選ぶ

6 つのテンプレートはそれぞれ何ができる？

Web ページ——文章の説明から完成した HTML ページを生成します。ポートフォリオ、ランディングページ、履歴書。自己完結型でレスポンシブ対応。肝心なのは反復です。生成後に配色を変え、フォームを足し、レイアウトを組み替える。すべてリアルタイムプレビューの中で完結します。

Web ページテンプレートは Tailwind CSS + 素の JavaScript を使います（React/Vue は入れず、依存を避ける設計）。すべてのコードは 1 つの HTML ファイルにインライン化されます。長所は「そのまま使える」こと。ダウンロードしてダブルクリックすればブラウザで開き、ビルド工程は不要です。短所は、複雑な操作を伴う場合に手作業で複数ファイルへ分割する必要が出ることです。

インフォグラフィック——HTML と SVG によるデータの視覚化です。文字は選択でき、SVG はどの解像度でも鮮明に拡大でき、対話でデータ点の変更やレイアウトの作り直しができます。

典型的な使い方は「この四半期決算のデータを積み上げ棒グラフ＋トレンドラインのインフォグラフィックにして」「世界のコーヒー消費量マップを作って」など。生成された SVG は PowerPoint や Figma にそのまま貼り込めます。ビットマップ（PNG/JPG）と違い、ベクターとして編集できる状態が保たれます。

クイズ——採点と即時の正誤フィードバックが付いたインタラクティブな選択問題です。テーマを渡すか教材を貼り付ければ生成されます。教師の練習問題作成、研修担当者の理解度チェック、長文を自己テストに変換する用途に向きます。

クイズには採点ロジックが組み込まれています。設問ごとに正誤を表示し、最後に総合点と間違えた問題の振り返りを出します。学習者は同じ問題を何度でも解き直せます（出題順はランダム化）。書き出した HTML はオフラインで動くので、社内ネットワークでの研修にも適します。

フラッシュカード——CSS のめくりアニメーションを使った学習カードです。表に問題、裏に答え。ナビゲーションとシャッフルに対応します。教育用途以外に、新入社員のオンボーディングや製品機能のざっと確認にも便利です。

3D のめくり効果は純粋な CSS（transform: rotateY）で実装され、JS ライブラリは不要です。キーボード操作にも対応し、スペースで裏返し、左右キーで移動します。明示的に指定すれば Anki 互換の CSV 形式で書き出すこともできます。

音声概要——貼り付けた内容から音声の要約を作ります。まず文章を凝縮し、それを音声に変換する流れです。通勤中や運動中に要点を聞けます。NotebookLM の音声要約に似ていますが、Gemini の対話の中に直接組み込まれているため、製品を切り替える必要がありません。

音声概要は既定でおよそ 5〜10 分。日本語・英語・中国語・韓国語など複数言語のナレーション音声に対応します。出力された MP3 はローカルに保存したり、AirDrop で iPhone に送ったりできます。NotebookLM との違いは形式で、NotebookLM は 2 人の対談ポッドキャスト形式、Gemini Canvas は 1 人語りの解説寄りです。

カスタムアプリ——もっとも自由度の高いモードで、作りたいアプリを説明すると Gemini が HTML/CSS/JS で組み立てます。Canvas の本質がここに表れます。実体はコード生成エンジン＋リアルタイムプレビューであり、ほかの 5 つのテンプレートはそれを用途別に制約したものです。

向いているもの：ToDo リスト、ポモドーロタイマー、簡単なゲーム、単位換算ツール、Markdown プレビューア。限界もあります。単一ファイルの HTML なのでバックエンドがなく、永続化もできません（localStorage を使わない限り、再読み込みで状態は消えます）。

Canvas と Claude Artifacts、ChatGPT Canvas は何が違う？

もっとも大きな違いは出力の性格です。Gemini Canvas は「見せられる完成物」、Claude Artifacts は「コンポーネントの検証」、ChatGPT Canvas は「文書の共同編集」に寄っています。

観点	Gemini Canvas	Claude Artifacts	ChatGPT Canvas
位置づけ	テンプレート型の制作	コード生成＋コンポーネントのサンドボックス	文書／コードの共同編集
既定の出力形式	HTML + Tailwind + 素の JS	React + Tailwind（サンドボックス描画）	Markdown 文書／コード
テンプレート数	明示的な 6 種＋カスタム	明示的なテンプレートなし	明示的なテンプレートなし（文章／コードの二択）
操作性	高い（クイズ／フラッシュカード／カスタムアプリ）	高い（React コンポーネント）	低い（文書寄り）
書き出し	単一ファイル HTML	コードを書き出し、React は自前でビルド	Markdown／コードをコピー
コード実行	iframe サンドボックス、サーバーなし	iframe サンドボックス、サーバーなし	Python 実行環境を内蔵（データ分析）
修正方法	対話による指示	対話による指示	段落単位のインライン編集
最適な相手	「目に見える成果物」が欲しい非エンジニア	コンポーネントを素早く検証したい開発者	文書を深く編集したいライター／プログラマー

選び方の目安：

「人に見せるもの」（Web ページ、インフォグラフィック、クイズ）を作りたい → Gemini Canvas
「コンポーネントの試作」（React のボタン、チャートライブラリ）を作りたい → Claude Artifacts
「長文執筆＋共同での注釈」をしたい → ChatGPT Canvas
「データ分析レポート＋グラフ」を作りたい → ChatGPT Canvas（Python 実行があるため）

用語集の Canvas 記事との違いは？

この記事はデスクトップ app 上での使い方に絞っています。Canvas という概念全般、その成り立ち、競合製品の全体像は用語：Canvas を参照してください。要点だけ言うと、Canvas は 2024〜2025 年に主要な AI 製品が広く採用したパラダイムで、チャットの出力を「文章」から「操作でき、プレビューでき、編集できる成果物」へ拡張するものです。実装は Artifacts / Canvas / Workbench の 3 系統に分かれます。

生成されたコードはどこで実行され、安全なのか？

生成されたコードは iframe のサンドボックス内で描画されるため、ホストアプリやあなたのデータには触れられません。

サンドボックス隔離：<iframe sandbox="allow-scripts">。JS は動きますが、親ページの DOM にアクセスできず、親ページの window.parent も呼べず、localStorage も読めません（自分のサンドボックス内のものを除く）
クロスオリジン制限：Google の CDN 上のリソース（Tailwind、Google Fonts、Chart.js）のみ読み込め、サードパーティ API への fetch は CORS で遮断されます
ネットワーク：既定ではネットワークなし。生成されたアプリは外部サービスを呼べず、再現性が保たれます
ローカル保存：サンドボックス内の独立した localStorage で、ブラウザ再起動やセッション切り替えで消えます

つまり Canvas は展示・試作・デモに向いており、「本番運用のアプリ」には向きません。本番用に育てたい場合は、コードをローカルにダウンロードし、バックエンドを足し、API をつなぎ、Vercel や Cloudflare にデプロイしてください。

作ったものはどんな形式で書き出せる？

書き出しは 6 通りあり、用途に応じて選べます。

書き出し方法	成果物	向いている場面
Download HTML	単一ファイル `.html`	メール添付、USB メモリでの配布、ローカルでのオフライン閲覧
Copy source	ソースコードをクリップボードへ	VS Code、CodePen、JSBin に貼って続きを編集
Export as PNG	スナップショット画像	資料に貼る、SNS に投稿する、チャットで画像として送る
Share link	閲覧専用のオンラインリンク	Slack などで共有。閲覧には Google ログインが必要
Export to Drive	Google Drive に保存	端末をまたいだアクセス、チームでの共同作業
Export MP3（音声概要のみ）	単一ファイル `.mp3`	AirDrop でスマホへ、ポッドキャスト配信先へアップロード

デスクトップ app の大きな価値はここにあります。ダウンロードすればそれはローカルファイルであり、Obsidian でも Notion でも iCloud でも、好きなノート環境に取り込めます。チャット履歴に閉じ込められません。

もっと使いこなすコツはある？

指示を具体的にするほど手戻りが減ります。特に効くのは次の 5 つです。

CSS フレームワークを指定する：既定は Tailwind ですが、「Bootstrap 5 で」「Pico.css で」「フレームワークなしの素の CSS で」と指定できます
一部だけを固定する：「ヘッダーはそのままで、下部だけ変えて」と言えば、指定部分だけを描き直すので反復が速くなります
実データを渡す：CSV を対話に貼り付けて「このデータでインフォグラフィックを作って」と頼むほうが、Gemini に数字を考えさせるより格段に信頼できます
Deep Research と組み合わせる：先に Deep Research で調査レポートを作り、続けて「このレポートを 1 枚のインフォグラフィックにして」と頼めば、調査から可視化まで一気に進みます
ブラウザの新規タブに組み込む：書き出した HTML を newtab.html として保存し、Chrome の起動ページに設定すれば、自作のスタートページになります

うまく動かないときはどうする？

原因のほとんどはモデル選択、サンドボックスの制約、外部リソースの読み込み失敗のいずれかです。

Canvas ボタンがグレーアウトしている：モデルの選択ミスです。Canvas には Gemini 2.5 Pro か Gemini 3 が必要で、Flash 系では使えません。
生成されたページが真っ白：多くは JS の構文エラーか CDN リソースの読み込み失敗です。ブラウザの開発者ツールで Console の赤い行を確認し、Gemini に「さっきのコードを確認して直して」と依頼してください。
フォントがおかしい：Google Fonts はネットワーク環境によって不安定になります。Gemini に「システムフォントを使い、Google Fonts を読み込まないで」と頼めば解決します。
画像が表示されない：サンドボックスは既定で https:// の画像しか読み込めず、CORS に対応している必要があります。Unsplash や Placehold.it など CORS 対応の画像ソースを使ってください。
クイズを送信しても反応がない：ブラウザがフォーム送信をブロックしています（サンドボックスの方針）。「フォームをやめて、純粋な JS のイベント処理にして」と依頼してください。
ダウンロードした HTML が Chrome では正常なのに Safari で崩れる：CSS の :has() や ES2022 の機能が原因になりがちです。「最新の CSS/JS 機能を避けて、Safari 15 互換にして」と指定してください。
ページの読み込みが遅い：生成時に大きなライブラリ（Chart.js のフル版など）が取り込まれています。「Chart.js の ESM 版で不要部分を落として」または「素の SVG に置き換えて」と依頼してください。
共有リンクを相手が開けない：閲覧専用リンクには Google ログインが必要です。ログインしたくない相手には HTML をダウンロードして直接送るのが確実です。

ブラウザ版ではなくデスクトップで使う利点は？

左にチャット、右にプレビューを並べたまま反復できることが最大の利点です。タブを行き来する必要がありません。iframe サンドボックスが安全性を担保し、生成されたコードはホストアプリから隔離され、あなたのデータやシステム資源に触れられません。さらにデスクトップのワークフローに溶け込みます。HTML をダウンロードしてデプロイする、ソースをプロジェクトにコピーする、インフォグラフィックをスクリーンショットしてプレゼンに使う、フラッシュカードを書き出してオフラインで学ぶ。デスクトップのファイルシステムとアプリ環境が、Canvas の産物を一時的なものから扱える納品物へと変えます。

ブラウザ版との実際の差は主に 3 点です。

ドラッグ＆ドロップ：デスクトップ app は生成された HTML を Finder にドラッグしてそのまま保存できますが、ブラウザは右クリックからのダウンロードが必要です
ウィンドウの並べ方：デスクトップ app の Canvas パネルは 2 台目のディスプレイに独立して出せますが、ブラウザは同じタブ内で分割するしかありません
オフラインキャッシュ：デスクトップ app は直近の Canvas をローカルにキャッシュするため、回線が切れても履歴を見られます。ブラウザはオンライン前提です

Windows ユーザーは Canvas をどう使えばいい？

ブラウザ版 gemini.google.com を使うのが基本です。Google は Windows 向けのネイティブ Gemini チャットクライアントを出しておらず、Windows 向けの Google app for desktop（2026-04-14 公開）は検索とファイルのみで、Canvas は含まれません。詳しくは Google が Gemini の Windows app を作らなかった話と Gemini Windows app と Google app for desktop の比較を参照してください。

Windows で Canvas を使う選択肢：

ブラウザ版 gemini.google.com は Canvas を完全に利用でき、Mac 版と機能は同じです
GeminiDesktop for Windows はブラウザ版の Canvas をネイティブな Tauri アプリとして包み、Alt+Space で呼び出せて、独立した Canvas ウィンドウにも対応します。ネイティブ Gemini Windows app と Gemini Windows インストールガイドも参考にしてください

GeminiDesktop での実装

GeminiDesktop は Canvas を中核機能として扱っています。Tauri の webview によるネイティブサイドパネルと Retina 描画、指示ごとにプレビューを更新して文脈を保つ反復編集、そしてローカルの HTML ファイルへの書き出し（持ち運べて、オフラインでも開けます）。

差別化ポイント：

Canvas と Claude Artifacts、ChatGPT Canvas を併用できる（同一アプリ内でモデルを切り替え）
Canvas の履歴をローカルの SQLite に保存し、過去の成果物をいつでも検索できる
書き出し先を自由に指定できる（既定は ~/Documents/GeminiDesktop/Canvas/）ので、Obsidian の保管庫と直結できる
書き出し時に Markdown のメタデータファイル（タイトル、作成日時、モデル、元の指示文）を自動生成し、後から管理しやすい

FAQ

Q1：Canvas で作ったものをそのまま本番環境で使えますか？ 試作やデモの素材としては使えます。本番では、バックエンド API、実データの接続、十分なエラー処理、クロスブラウザ互換性のテスト、SEO とアクセシビリティの最適化を足す必要があります。Canvas が渡してくれるのは「見せられる水準」の出発点です。

Q2：Canvas に参考画像をアップロードできますか？ できます。Canvas で質問するときにデザインの参考画像を添えると、Gemini が配色・レイアウト・書体の雰囲気といった視覚的なスタイルの再現を試みます。再現度はモデルのバージョン次第で、Gemini 3 のほうが明らかに正確です。

Q3：無料ユーザーでも Canvas を使えますか？ 基本的な Canvas 機能は無料ユーザーにも開放されていますが、モデルのグレードによる制限があります（Flash 系は Canvas 非対応か機能が制限されます）。6 テンプレートをすべて使うには Gemini Advanced のサブスクリプションか AI Studio の利用枠が必要です。

Q4：Canvas から自分のデータベースにつなげますか？ サンドボックス内ではできません。ローカルに書き出してから改造する形になりますが、それは Canvas の範囲を超えています。実質的には AI が生成したコードを自分のシステムにつなぐ、通常の Web 開発です。

Q5：Canvas と「Deep Research のレポート」はどう違いますか？ Deep Research の出力は引用付きの長文ドキュメント（Markdown または PDF）で、Canvas の出力はインタラクティブな Web ページ・インフォグラフィック・クイズです。両者はつなげられます。Deep Research が中身を作り、Canvas が見せ方を作る形です。

Q6：Canvas で作った内容は Google のモデル学習に使われますか？ 有料サブスクリプションのユーザーは既定で学習に使われず、無料ユーザーは使われる可能性があります。詳細は Google のプライバシーポリシーが基準になります。

Canvas はデスクトップ AI の価値基準を書き換えました。回答の質を競う段階から、成果物の質を競う段階へ。デスクトップのユーザーが必要としているのは、文章の返信だけではなく納品物です。GeminiDesktop を試す。

Gemini デスクトップの Canvas 完全ガイド：チャットを超える 6 つの作成テンプレート