「プログラミングなんてやったことないけど、自分でアプリとかWebページって作れないかな？」——そんな夢みたいな話が、2026年、けっこう現実になってきています。

GoogleのGemini Canvas（ジェミニ キャンバス）は、AIと会話しながらコードや文章を編集できる作業スペース。日本語で「こんなアプリ作って」と話しかけるだけで、ちゃんと動くWebアプリを生成してくれます。しかも無料プランでも使えます。

この記事では、2026年3月時点の最新情報をもとに、Gemini Canvasの始め方・できること・やりがちな失敗と注意点をまとめました。「AIでアプリ作りたいけど、なにから始めれば？」という人はぜひ参考にしてください。

Gemini Canvasとは？ふつうのチャットと何が違うの？

Gemini Canvasは、Google Geminiに搭載されたコード・文章の作業スペース機能です。ふつうのチャット画面では、AIの回答がどんどん下に流れていきますよね。Canvasでは、画面の右側に「作業エリア」が表示されて、そこでコードや文章をリアルタイムに編集できます。

ざっくり言うと、こんな違いがあります。

  • ふつうのチャット：AIに質問→回答が流れてくる→コピペして使う
  • Canvas：AIに指示→作業エリアにコードが表示→その場で編集・プレビュー・修正指示が全部できる

つまり、「AIと一緒にモノを作る」ための専用画面だと思ってください。コードを書くだけじゃなく、文章の推敲やレポートの作成にも使えますが、今回はアプリ・Webページ作りにフォーカスして解説します。

Gemini Canvasの始め方｜3ステップで即スタート

Gemini Canvasを使うのに特別なソフトのインストールは不要です。Googleアカウントさえあれば、ブラウザからすぐに始められます。

ステップ1：Geminiにアクセスする

パソコンのブラウザでGeminiにアクセスし、Googleアカウントでログインします。スマホアプリでもプロジェクトの閲覧はできますが、コードの編集はパソコンのブラウザ限定（2026年3月現在）なので、パソコンで作業しましょう。

ステップ2：Canvasモードをオンにする

チャット入力欄の下にある「Canvas」ボタンをクリックしてオンにします。ボタンが青くなっていればOK。これで、AIの回答がチャット欄ではなくCanvas（作業エリア）に表示されるようになります。

ステップ3：日本語で作りたいものを伝える

あとは日本語で指示を出すだけです。たとえばこんな感じ。

  • 「今日の予定を管理できるToDoアプリを作って」
  • 「BMIを計算できるWebページを作って」
  • 「クイズゲームを作って。問題は日本の地理にして」

数秒〜数十秒で、HTML・CSS・JavaScriptが一体になったコードが生成され、「プレビュー」ボタンを押すとその場で動作確認できます。

無料プランでどこまでできる？有料プランとの違い

「え、これ無料で使えるの？」と驚く人が多いですが、Canvas機能自体は無料プランでも利用可能です（Google公式ヘルプより、2026年3月現在）。

ただし、プランによって使えるAIモデルや処理能力に差があります。

  • 無料プラン：Gemini 3 Flashベースで利用可能。簡単なアプリやWebページなら十分作れる。ただし、長いコードや複雑なロジックでは精度が落ちることがある
  • Google AI Pro（月額約2,900円）：Gemini 3モデルが使え、100万トークンの大容量コンテキストに対応。大規模なプロジェクトも安定して処理できる
  • Google AI Ultra：最上位モデルにアクセス可能。複雑なアプリ開発や大量のデータ処理に向いている

まずは無料プランで試してみて、物足りなくなったら有料プランを検討する、という使い方でOKです。

Gemini Canvasでやりがちな失敗5つと回避方法

「使ってみたけどうまくいかない……」という声もXなどのSNSで見かけます。よくあるハマりポイントを紹介します。

失敗1：「複数ページのサイトを作って」と言ったら1ページしか出てこない

Gemini Canvasは基本的に1つのHTMLファイルを生成します。そのため、「トップページ」「問い合わせページ」「会社概要」……と別々のページを期待すると、「あれ？1ページしかない」となります。

回避方法：「SPA（シングルページアプリケーション）のように、ボタンで画面を切り替えられる形にして」と指示しましょう。JavaScriptでセクションの表示・非表示を切り替えるコードが生成されるので、見た目は複数ページのサイトのように動きます。

失敗2：コードが長くなると途中で止まる・おかしくなる

無料プランでは処理できるコードの長さに限界があります。機能を詰め込みすぎると、途中でコードが途切れたり、前半と後半で矛盾するコードが出力されたりします。

回避方法：1回の指示で全部作ろうとせず、「まず基本機能だけ作って」→「次にこの機能を追加して」と段階的に指示を出すのがコツです。

失敗3：プレビューボタンが表示されない

Googleコミュニティでも報告されている既知の不具合です。Googleドキュメントとの共有設定が影響している場合や、ブラウザの拡張機能が干渉しているケースがあります。

回避方法：シークレットウィンドウで試す、ブラウザのキャッシュをクリアする、または別のブラウザ（Chrome推奨）で開き直してみてください。

失敗4：生成されたアプリを他の人に見せられない

Canvasで作ったアプリはあくまで自分のブラウザ上で動くプレビューです。そのままではURLを共有して他の人に見せることができません。

回避方法：コードをダウンロードして、NetlifyやGitHub Pagesなどの無料ホスティングサービスにアップロードすれば、誰でもアクセスできるURLが手に入ります。手順は「HTMLファイルをドラッグ＆ドロップするだけ」なので、プログラミング未経験でも大丈夫です。

失敗5：機密情報を入力してしまう

「社内の売上データでダッシュボードを作って」と、うっかり顧客情報や社内データを貼り付けてしまうケースです。Geminiに入力した内容はGoogleのサーバーで処理されるため、個人情報・APIキー・パスワードなどは絶対に入力しないでください。

回避方法：テスト用のダミーデータで動作確認し、実際のデータはローカル環境（自分のパソコン上）で扱いましょう。会社で使う場合は、Google Workspaceの管理者に利用ポリシーを確認してください。

ChatGPT・Claude Artifactsとの違い｜どれを使えばいい？

「同じようなことはChatGPTやClaudeでもできるんじゃ？」と思いますよね。確かに、ChatGPTの「Canvas」機能やClaudeの「Artifacts」機能でもコード生成はできます。ざっくり比較するとこんな感じです。

  • Gemini Canvas：コードの直接編集・差分表示・プレビュー実行が1画面で完結する。Googleサービス（ドキュメント・スプレッドシート等）との連携も得意。無料プランで使える
  • ChatGPT Canvas：文章の推敲が得意で、コード生成の精度も高い。ただしプレビュー実行の自由度はGeminiのほうが上
  • Claude Artifacts：コードのプレビューは表示されるが、Canvas内でのインライン編集（部分選択して修正）はできず、コード全体の置き換えになる

要するに、「手軽にWebアプリを作って動かしたい」ならGemini Canvasが現状いちばん使いやすいです。一方、文章のクオリティを詰めたいならChatGPT、長い会話を重ねながらコードを育てたいならClaudeが向いています。

FAQ

Gemini Canvasは日本語で使えますか？

はい、日本語で指示を出してコードや文章を生成できます。CanvasはGeminiアプリが利用可能なすべての言語と国で提供されています（2026年3月現在）。

スマホでもGemini Canvasは使えますか？

Geminiのスマホアプリでは、Canvasで作ったプロジェクトの閲覧はできますが、コードの直接編集やプレビューといった本格的な作業はパソコンのWebブラウザでのみ対応しています（2026年3月現在）。

作ったアプリを公開・共有するにはどうすればいい？

Canvasの「コード表示」からHTMLコードをコピーし、ファイルとして保存してからNetlifyやGitHub Pagesなどの無料ホスティングサービスにアップロードします。Netlifyなら、フォルダをドラッグ＆ドロップするだけでURLが発行されます。

Gemini Canvasで作ったコードの著作権はどうなりますか？

Googleの利用規約上、Geminiで生成されたコンテンツの利用は許可されていますが、商用利用する場合はGoogleの生成AIに関する利用規約を確認してください。AIが生成したコードには著作権が発生しないという見解が一般的ですが、法的解釈はまだ定まっていません。

参考文献