Canvas とは？Gemini でドキュメントとアプリを作る対話型モード
Gemini Canvas は Google Gemini の対話型制作モードで、テキスト指示から機能する成果物——Web ページ、インフォグラフィック、クイズ、単語カード、カスタムアプリ——をそのまま生成します。返ってくるのは文章による説明ではなく、サンドボックス iframe 内でそのまま動く完成物です。
TL;DR 要点まとめ
- 位置づけ：Gemini に内蔵されたビジュアル制作パネル。AI を「質問に答える道具」から「成果物を納品できる作業台」に変えます。
- 6 つのテンプレート：Web ページ、インフォグラフィック、クイズ、単語カード、音声概要、カスタムアプリ——学習カードから対話型の計算ツールまで幅広くカバー。
- 反復ワークフロー：生成後は会話で修正（「見出しを濃紺に」「比較表に 1 列追加」「モバイル対応に」）。各修正は前バージョンの文脈を引き継ぎます。
- サンドボックスによる安全性：生成コードは iframe の隔離環境で実行され、メインアプリの Cookie・localStorage・システム資源にはアクセスできません。
- Artifact 系との対比：Claude Artifacts や ChatGPT Canvas と同カテゴリ。ただしよりテンプレート駆動で、非エンジニア向けです。
- デスクトップの大画面が有利：左右分割（左に対話、右にリアルタイムプレビュー）のレイアウトはデスクトップで最も活き、モバイルでは体験が制限されます。
Canvas では何ができますか？
Canvas は Gemini を質問応答ツールから制作ツールへ変えます。用意されているテンプレートは 6 種類です。
Web ページ：説明文からレスポンシブな HTML ページを丸ごと生成。CSS スタイルと基本的な操作用 JavaScript を含み、製品のランディングページ、履歴書、イベント招待状、1 枚もののドキュメントに使えます。
インフォグラフィック：HTML と SVG によるデータビジュアライゼーション。テキストは選択可能（SEO に有利）で、ベクターなので拡大しても劣化しません。スライドへの埋め込みや社内報告に向いています。
クイズ：自動採点・即時フィードバック・誤答ヒント付きの単一／複数選択問題。授業、研修、コミュニティ企画に適します。
単語カード：CSS のめくりアニメーション付き学習カード。キーボード操作、シャッフル、進捗管理に対応し、語学学習・試験対策・概念の暗記に向きます。
音声概要：選んだ内容の音声要約を生成。まず Gemini がテキストを凝縮し、それを合成音声で読み上げます。NotebookLM の音声概要の軽量版に近い機能です。
カスタムアプリ：最も自由度の高いモード。HTML／CSS／JavaScript で任意の対話型アプリ——計算機、単位変換ツール、抽選ツール、ミニゲーム、データダッシュボード——を構築でき、実質プロトタイプ級の MVP を納品できます。
Canvas はどのように動いていますか？
Canvas を起動すると Gemini が HTML・CSS・JavaScript を生成し、それをサンドボックス iframe 内で描画します。このサンドボックスがセキュリティ境界で、生成コードはあなたの Cookie、localStorage、システム資源にアクセスできません。指示文に悪意ある命令が紛れ込んでも、注入されたコードは隔離環境の中でしか動かず、ホストアプリは守られます。
肝になるワークフローは反復です。生成後は会話で直していきます——「見出しを濃紺に」「比較表を 1 列増やして」「モバイル対応にして」「表の説明行を 1 行足して」。各指示は既存の出力を修正するもので、ゼロから作り直すわけではありません。Canvas は既存の HTML 構造・データ・スタイルという完全な文脈を保持したまま、何度でも制作対話を続けられます。多くの場合、5〜10 往復で公開可能に近い水準まで到達します。
技術面では、Canvas は基本的に素の HTML／CSS／JavaScript を使い、フレームワークを必要としません。複雑なアプリでは CDN 経由で Tailwind、Chart.js、Alpine.js といった軽量ライブラリを読み込めます。出力は単体の HTML ファイルとして書き出して自分のサーバーに配置することも、Gemini アカウント内に保存して作り続けることもできます。
カスタムアプリではどの言語が動きますか？
カスタムアプリモードで実行できるのは、基本的にブラウザネイティブの言語です。HTML／CSS がページ構造とスタイル、JavaScript（ES2020 以降） が主なロジック言語で、Fetch API、Canvas 2D、SVG 操作、localStorage（サンドボックス内では有効ですが、リロードで消えます）が使えます。WebGL で簡単な 3D 描画も可能です。計算負荷の高い処理には pyodide（ブラウザ上で動く Python 実行環境）を読み込んで Python を走らせたり、Lua や Wasm といった軽量スクリプトを持ち込んだりできます。使えないのは Node.js のサーバー処理と、バックエンドのデータベースを前提とする言語（Java／Go／Rust のサーバーロジック）です。この種の要件は Deep Research で技術評価をしたうえで、本格的な開発環境に移すべきです。
主要な Artifact 系ツールとの違いは何ですか？
| 製品 | ベンダー | コード技術 | テンプレート | 書き出し | 共有 | 価格 |
|---|---|---|---|---|---|---|
| Gemini Canvas | HTML/CSS/JS | 6 種 + 自由モード | HTML ファイル / Docs / Drive | 共有リンク | 基本機能は無料、Advanced で全機能 | |
| Claude Artifacts | Anthropic | React + HTML | 自由モード中心 | コードのコピー / 共有リンク | 共有リンク | Claude Pro 月 $20 |
| ChatGPT Canvas | OpenAI | 文書編集中心 | 文書 + コード | Markdown／コード書き出し | 共有リンク | ChatGPT Plus 月 $20 |
| GitHub Spark | GitHub | React Native | フルスタックアプリ | GitHub リポジトリ | GitHub 上で協働 | Copilot Pro 月 $10 |
方向性の違いは明確です。Claude Artifacts は開発者寄りで、React コンポーネントを土台にした構造化能力が強く、複雑なデータ可視化やツールのプロトタイプに向きます。ChatGPT Canvas は協働ライティングツールに近く、長文の編集（部分的な書き直し、版の比較）が得意な反面、対話型コンテンツの生成は弱めです。Gemini Canvas はテンプレート駆動で非エンジニアに優しく、教師・マーケター・中小企業がコードを書かずに成果物を得られます。GitHub Spark はより重いフルスタック AI アプリの方向へ進んでいます。
Canvas と Claude Artifacts、どちらを選ぶべきですか？
判断軸は次の 4 つです。
コードの複雑さ：Artifacts は既定で React コンポーネントを使うため、React の素養がある開発者には非常に快適で、状態管理を伴う複雑なアプリ（localStorage 付き ToDo リスト、グラフ入りダッシュボード）をそのまま書けます。Canvas は素の JavaScript から始まるので、React の背景はないが簡単な JavaScript は書けるプロダクトマネージャーやマーケターに合います。
テンプレートの充実度：Canvas にはすぐ使える 6 種のテンプレート（クイズ、単語カード、インフォグラフィックなど）があり、一言で成果物が出ます。Artifacts にはほぼプリセットがなく、欲しいものを自分で描写する必要があります。何から始めればよいか分からない初心者にとって、Canvas のテンプレートは敷居を下げる鍵になります。
修正の粒度：Canvas の会話型の反復は「ひとかたまりの差し替え」寄りで、「ページ全体の雰囲気を変えて」といった指示がスムーズに通ります。Artifacts はより細かく、「3 枚目のカードのボタン色だけ変えて」と指定して他を保つことができます。
共有と連携：どちらも共有リンクを持ちますが、Canvas は Google ドキュメント／ドライブとの連携が良く、Artifacts は Claude のプロジェクト作業空間との連携が良好です。
Deep Research と組み合わせるとどう使えますか？
Canvas と Deep Research の組み合わせは Gemini 圏で最強のペアです。典型的な流れは、まず Deep Research で調査レポート（例：「電気自動車市場の競合分析」）を作り、15 ページの Markdown と数十件の引用を得ること。次にそのレポートを Canvas に貼り付け、「このレポートを元にインフォグラフィックを作って。上位 5 社のシェアと主要な差分を強調して」と伝えます。Canvas はデータを解釈し、SVG で比較棒グラフとブランドの時系列を描きます。文字だけの調査が数分で、顧客に送れる／SNS に載せられるビジュアルコンテンツに変わります。
もう一つ定番なのが「調査 + クイズ」です。Deep Research で技術トピックを調べ、Canvas で要点を解答付き 20 問のクイズに変換すれば、チーム学習や採用試験の問題として使えます。
Google ドキュメントや Notion への書き出しはどう行いますか？
Canvas の成果物は Google ドキュメント、Notion、Obsidian の 3 つに送られることが多く、それぞれ手順が異なります。
Google ドキュメントへ：Canvas 右上の「Export to Docs」をクリックすると、テキスト系の内容（Web ページの段落、インフォグラフィック内の文字）が Docs 形式に変換され、見出し階層とリンクが保たれます。SVG のインフォグラフィックは Docs 内の画像に変換され、操作性は失われますが見た目は残ります。
Notion へ：ワンクリック書き出しはなく、手動になります。右上の「Copy as Markdown」で Markdown をコピーし、Notion のページに貼り付けます。表、コードブロック、リンクは正しく変換されますが、独自 CSS の動きは失われます。
Obsidian へ：Notion と同じく手動で、Markdown をコピーして貼り付けます。Obsidian はローカルファイルと相性が良いので、Canvas を「使い捨ての外部作業場」と捉え、要点だけをローカルの知識ベースに移す運用に向きます。
実際にどんな人が使っていますか？
教師・研修担当：テーマごとに 20 問のクイズを即席で作って配る、復習用の単語カードを生成する、授業資料の挿絵としてインフォグラフィックを作る。スライドのテンプレートもデザインソフトも不要で、「中学数学の図形問題を解答と解説付きで 20 問」と伝えれば成果物になります。
コンテンツ制作者：記事に添えるオリジナルのインフォグラフィック（データ可視化）、動画の告知用の対話型 Web ページ、イベント招待の 1 枚ページ。デザイナーに依頼したり素材を撮影したりするより桁違いに速く仕上がります。
プロダクトマネージャー・起業家：MVP 級のツール試作——「体重と目標から 1 日の消費カロリー差を計算するツール」「入力された製品カテゴリから競合を推薦するカード型 Web アプリ」。実ユーザーに配れる水準とは限りませんが、社内デモや初期の仮説検証には十分です。
マーケティング・運用：キャンペーンのランディングページ（「創立記念日用にカウントダウン付きのお祝いページを」）、社内研修クイズ、メール登録フォーム、簡易ダッシュボードを短時間で用意できます。
学生・独学者：教科書の章を単語カードに変換する、難しい概念をインフォグラフィックにして記憶を助ける、カスタムアプリモードで模擬問題やプログラミング練習を作る。
Canvas にできないことは何ですか？
現時点でできないのは次の 5 つです。本物のバックエンド（データベースなし、永続化なし、リロードで消えます。バックエンドが必要な場合は Canvas の成果物をフロントのプロトタイプと割り切り、裏側は別途つなぎます）、複雑な外部サービス連携（API キーが必要なサービスは直接呼べず、公開 CDN のライブラリのみ）、ピクセル単位の精密デザイン（Figma や Sketch のような精度は Canvas の弱点のままです）、複数ページのアプリ（一度に描画できるのは 1 ページで、ページ遷移は自前でつなぐ必要があります）、リアルタイム共同編集（Google ドキュメントのような同時編集ではなく、Canvas は 1 人で会話しながら作る形式です）。
既知の制約もあります。無料版にはテンプレートの利用回数制限があり、カスタムアプリと音声概要は通常 Advanced が必要です。数百行の JavaScript を伴う複雑なカスタムアプリは 1 回の生成でタイムアウトすることがあり、分割して反復する必要があります。書き出し先も限定的で、基本は HTML ファイルかアカウント内保存です。WordPress や Wix のような CMS へ載せるには手作業が要ります。
Windows ではどう使えばよいですか？
Google は今もネイティブの Gemini Windows アプリを出していません。2026-04-14 に公開された「Google app for desktop」は Alt+Space の検索オーバーレイに過ぎず、Canvas のようなマルチパネルの制作ワークフローには対応していません。アップロードも 20MB までです。Windows で Canvas を使って Web ページ・インフォグラフィック・対話型アプリを作り、HTML をローカルに書き出したいなら GeminiDesktop をおすすめします。ネイティブの Windows バイナリで左右分割の大画面制作ができ、ブラウザのタブを行き来するより反復が速くなります。詳しくは Windows インストールガイドと Google app との比較をご覧ください。
よくある質問
Q：Canvas と Claude Artifacts、どちらを使うべきですか？ A：用途次第です。教育・マーケティング・非エンジニア向けの成果物（単語カード、インフォグラフィック、クイズ、ランディングページ）なら、テンプレートがそのまま使える Canvas。開発者向けの試作（React コンポーネント、複雑なデータ可視化、ツールアプリ）なら、React を土台に構造を作れる Artifacts です。
Q：生成した Web ページを自分のドメインに公開できますか？ A：できます。単体の HTML ファイルとして書き出し、Vercel、Netlify、Cloudflare Pages、GitHub Pages などの静的ホスティングか自前サーバーにアップロードしてください。CDN ライブラリなど外部依存の可用性にはご注意を。
Q：生成コードをそのまま本番で使えますか？ A：基本的におすすめしません。Canvas はプロトタイプと中〜低複雑度の成果物に向いています。本番水準のセキュリティ・保守性・性能最適化は人の確認が必要で、事前に Deep Research で技術評価をしておくと安全です。
Q：Canvas に画像を埋め込めますか？ A：できます。Nano Banana 2 で作った画像を会話にアップロードして Web ページやインフォグラフィックに埋め込めますし、外部画像の URL を貼ることもできます。
Q：生成した成果物の権利は誰のものですか？商用利用できますか？ A：Google の規約では、Canvas で生成した内容を商用を含めて利用できます。ただし生成コードが第三者ライブラリ（MIT／Apache などの CDN 資源）を読み込む場合は、それぞれのライセンスに従う必要があります。
Q：Google ドキュメントと連携できますか？ A：できます。Canvas の成果物のうち、特にテキスト系の内容は Google ドキュメントへ書き出して編集を続けられ、「Canvas で作る → Docs で仕上げる」という流れが組めます。
関連記事
- Deep Research とは？——Canvas と並ぶ Gemini のもう一つのエージェント能力
- Nano Banana とは？——Canvas の Web ページやインフォグラフィックに挿す画像を作る
- Personal Intelligence とは？——Canvas にブランドのテンプレートや好みを覚えさせる
- Veo とは？——Canvas の Web ページに動画を添える
- Gemini for Mac 100 日 100 機能レビュー
- Windows ネイティブ Gemini アプリ完全ガイド
- Google が作らなかった Gemini Windows クライアント
デスクトップでの体験
GeminiDesktop は macOS（Intel／Apple Silicon）、Windows、Linux 向けのバイナリで、クロスプラットフォームなネイティブ Canvas 体験を提供します。左右分割の大画面レイアウト（左が対話、右が Canvas プレビュー）により、ブラウザのタブを切り替えるより反復のテンポが締まります。Retina／高 DPI で表示が鮮明になり、生成した HTML・インフォグラフィック・アプリはそのままローカルのファイルシステムへ書き出せます。Google の Windows 向け検索クライアント（比較）が英語中心で 20MB 制限を持つのに対し、GeminiDesktop は日本語・中国語・韓国語の UI と完全な Canvas ワークフローに対応します。ダウンロードは geminidesktop.app から。