Gemini Canvasの新機能！クリックだけでWebアプリを簡単修正

本記事を10秒でまとめると

GeminiのCanvas機能が神アップデート！Webアプリのプレビュー画面を直接クリックし、自然言語で指示するだけで即座に修正可能に。プログラミングの常識を変える、驚異の視覚編集機能を徹底解説します。

GeminiのCanvas機能とは

Geminiの「Canvas」機能は、Geminiとの対話を通じて文章やプログラムコードを生成し、その結果をリアルタイムでプレビューしながら編集できるインタラクティブな開発環境です。左側でGeminiと会話し、右側のプレビュー（Canvas）で成果物を確認・編集できるため、アイデアを素早く形にすることが可能です。これまでもコード生成とプレビューは強力でしたが、その編集方法に革命が起きました。

今回のアップデートとは

2025年9月10日に発表された今回のアップデートで、Canvas機能は新たな次元に進化しました。それは、**Webアプリのプレビュー画面を直接操作できる「ビジュアル編集機能」**の実装です。

従来、生成されたWebアプリのテキストやデザインを修正するには、対応するHTMLやCSSのコードを探し出して書き換える必要がありました。しかし今回のアップデートにより、修正したい箇所をプレビュー上でクリックし、「この文章を変えて」「このボタンの色を青にして」のように自然言語で指示するだけで、Geminiが瞬時にコードを書き換え、プレビューに反映してくれるようになったのです。

もはやコードを一行も読むことなく、見たままにアプリケーションを編集できる。これは、Web開発の専門知識がない人でも、アイデアを形にできる時代の到来を意味します。

実際にやってみた

この革命的な「ビジュアル編集」の実力を確かめるため、少し複雑なWebアプリケーションをゼロから生成し、修正するまでを試してみました。

【ステップ1：複雑なWebアプリの生成を依頼】

まず、「入力された業務内容から、生成AIで時間短縮できそうな作業を診断するWebアプリ」という、かなり具体的な多段階のアプリケーションを非常に長いプロンプトで依頼しました。

【ステップ2：コードとプレビューを瞬時に生成】

複雑な要件にもかかわらず、Geminiは即座にHTML、CSS、JavaScriptを組み合わせたコードを生成。1〜2分で右側のCanvasに操作可能なWebアプリのプレビューが表示されています。このスピード感だけでも驚異的です。

【ステップ3：魔法の始まり！クリック＆指示で視覚編集】 

生成されたアプリのプレビューを確認すると、入力フォームの案内文が少し長かったので修正することに。 ここからが今回のアップデートの真骨頂です。

右下の赤枠をクリックした後に修正したい案内文（「業務内容を入力して、生成AIによる時間短縮効果を診断しましょう。」）をプレビュー上で直接クリックもしくは囲います。

そして、下に出てくるのチャット欄で「ここの部分を『以下の内容を記入してください。』に修正して」と、まるで人にお願いするように指示しました。

するとどうでしょう。Geminiはコードのどこを修正すべきかを自ら判断し、瞬時にテキストを書き換え、プレビューに反映してくれました。コードを探す手間は一切ありません。まさに、クリックして説明するだけで更新が完了したのです。

【ステップ4：完成したアプリを使ってみる】 

Canvas機能のアップデートとは少しずれますが、Geminiの開発レベルを見てみましょう。
完成した「生成AI活用診断アプリ」を実際に動かしてみます。 まず、業界・職種・主な業務を入力します。

すると、入力内容に基づき、アプリが関連業務を推測して「業務分解フェーズ」として提示してくれます。

ここで以下のようにいくつか業務を修正したり追加してみます。

最後に、次のページで各業務にかかる週あたりの時間を入力すると、

生成AI活用による時間短縮効果の診断結果が表示される、という本格的なアプリケーションが、本当にチャットだけで完成してしまいました。

まとめ

Gemini Canvasの今回のアップデートは、Web開発の歴史における一つの転換点と言っても過言ではありません。「コードを書いて、結果をプレビューする」という従来の開発プロセスが、「プレビューを直接編集し、生成AIにコードを書かせる」という全く新しい形に変わったのです。

これにより、プログラミングの壁は劇的に低くなり、誰もがアイデアをインタラクティブなツールとして具現化できる可能性が拓かれました。

今後のビジネスでの展望

この技術革新は、ビジネスの現場に計り知れないインパクトをもたらします。

• 爆速でのプロトタイピング: 企画担当者やマーケターが、エンジニアに依頼することなく、顧客向けサービスのモックアップや社内ツールのプロトタイプを数分で作成し、その場でフィードバックを得ながら修正することが可能になります。
• 業務ツールの内製化: 各部署が「こんな計算ツールが欲しい」「この入力フォームがあれば便利」といった日々のニーズを、自分たちの手で即座にアプリ化し、業務効率を改善できます。
• エンジニアの生産性向上: エンジニアはUIの細かな修正作業から解放され、より本質的なロジックの実装やバックエンドの構築に集中できるようになります。デザイナーとの連携も、プレビューを見ながら直接修正できるため、格段にスムーズになるでしょう。

Gemini Canvasの視覚編集機能は、専門家と非専門家の垣根を取り払い、すべてのビジネスパーソンが「開発者」となり得る未来を提示しています。あなたのそのアイデアも、もう実現できるかもしれません。

writer：宮﨑 佑太（生成AIアドバイザー）