Gemini Canvas で「Vibe Coding」を体験しよう

こんにちは、Google の AI「Gemini（ジェミニ）」の公式 note 編集部です。

みなさんは、Google の生成 AI Gemini に搭載された Canvas 機能をご存知でしょうか？今年のアップデートで Canvas は大きく進化し、エンジニア、教育者、コンテンツクリエイターなど幅広いユーザーが、自分のアイデアを手軽にアプリやツールとして形にできるようになったんです。

特に注目したいのが、曖昧なアイデアやスケッチからでも AI がコードを書いてくれる新発想の開発スタイル 「Vibe Coding」 です。この記事では、特に「Vibe Coding」に注目して、Gemini Canvas の実践的な使い方やプロンプトの例を詳しくご紹介していきますね。

基本的な Canvas の使い方を知りたいという方は、以下の Canvas 基本編記事もぜひご覧ください。 

Gemini Canvas とは？最新アップデートで広がる創作空間

さて、まず Canvas がどんなものか簡単におさらいしましょう。Canvas は、Gemini アプリの中にある、インタラクティブな開発スペースです。チャット入力欄で「Canvas」を選ぶと、文章だけでなくコードの作成や編集を AI とリアルタイムで行うことができます。

テキストドキュメントのブラッシュアップから、HTML ・ CSS ・ JavaScript (React など) や Python を用いたコード作成まで、AI と一緒に作業できるのが大きな魅力です。

例えば「ウェブサイトのメルマガ登録フォームを作って」とお願いするだけで、フォームの HTML コードを生成し、その見た目や動きをすぐに Canvas 上でプレビューできます。コードを少し直せば、その変更はすぐにプレビューに反映されるので、いくつものエディタを行ったり来たりする手間なく、アイデアの試作から共有までを一気に進めることができます。

そして今年の 5 月、Gemini 2.5 Pro を皆さんに使っていただけるようになり、Canvas はさらに直感的でパワフルに進化しました。これにより 「コードを書かずにアイデアをアプリ化」 する新しい開発体験が、ぐっと身近になりました。
Canvas では、複雑なアイデアもシンプルな説明からスピーディーかつ正確にコードへ翻訳でき、ソフトウェア開発のハードルを劇的に下げて、試作品作りを飛躍的に速くしてくれます。

さらに Canvas には Web ページやインフォグラフィックの生成、文章からの AI 音声概要の作成、Deep Research レポートのインポート・編集といった多彩な機能も追加されています。(これらの新機能については、また別の機会にご紹介しますね)

では、この Canvas を最大限利用するための「Vibe Coding」とは、具体的にどんなものなのでしょうか？

「Vibe Coding」とは？ - 曖昧な指示でコードを書いてもらう新発想

Vibe Coding (バイブコーディング) とは、一言で説明すると、 「AI に“こんな感じ！”とお願いして、コードを書いてもらう」 新しい開発スタイルなんです。これまでのように人が一行ずつプログラミングするのではなく、「こんな感じのものが欲しいな」といった曖昧なアイデアやイメージを言葉で伝えるだけで、AI が具体的な機能やデザインを提案して、コードを生成してくれます。

例えば、「会社のアイデアをみんなで共有できる簡単なアプリが欲しい」と伝えるだけで、Gemini が必要な機能のリストや UI デザインを考えて、React と Tailwind CSS といった適切な技術でコードを書き上げてくれる、といったイメージです。

このまるで魔法のような体験を支えているのが、進化した Gemini 2.5 Pro の優れたマルチモーダル (多モード) 理解能力です。Gemini 2.5 Pro は、長文コンテキストや画像・動画なども扱えるネイティブマルチモーダル対応モデルで、開発者向けの評価 (WebDev Arena) で、テキスト、ビジョン、WebDev、難問、コーディングなど 10 のカテゴリーですべて 1 位を取得するという高性能を示しています。

さらに、文章だけでなくラフなスケッチ画像から「雰囲気」を汲み取ってコード化することも可能です。

実際に、手描きの UI 案や既存の資料のスクリーンショットを Canvas に見せて、そのレイアウトや要素を再現するコードを書かせることも試みられ、X でも大きな話題になりました。

さらに便利なのが、Canvas 上でワンクリックするだけで、 生成 AI の機能をアプリに組み込める 点です。Canvas でコードを生成したアプリ画面の右下には「Gemini 機能を追加」というボタンが表示され、これを押すだけでそのアプリの中に Gemini の AI 応答機能を組み込めてしまいます。

例えば、試験対策サイトを作った後にこのボタンを押せば、問題文や選択肢を AI が毎回自動で考えてくれるような、高度なアプリに一瞬で進化させられます。追加のプログラミングや有料の API 連携をしなくても、自分で作ったアプリに対話 AI の力を持たせられるのは、とても画期的な機能です。

このように、Canvas と Gemini 2.5 Pro で実現できる Vibe Coding は、専門知識の壁をなくし、「こんなものが欲しい」という想いをすぐにカタチにできる、まさに次世代の開発スタイルなんです。

それでは、具体的にどのような活用ができるのか、実例を見てみましょう。

使ってみたくなる！Canvas 活用の具体例

最新の Canvas を使えば、「コードが書けないから無理だな…」と諦めていたアイデアも、気軽に形にすることができます。

例えば、こちらは新しい宇宙のシミュレーションを表現したものです。

以下のリンクからご自身で試すこともできますので、ぜひ触ってみてください。

https://gemini.google.com/share/ec4dbc626080

実際に X 上では、Canvas を活用した様々な作品が共有されています。今回はその中から、特に興味深いものをいくつかご紹介します。皆さんもぜひ、ご自身のアイデアを形にしてみてください。

クイズアプリ

Canvas を使えば、クイズのネタ集めやアイデア出しから、実際のアプリ作成までを手軽に行うことができます。「インターネット古参会入会資格」のような、ユーモアのあるクイズアプリも制作可能です。実際に遊んでみることができますので、ぜひお試しください。

子供向けアプリ

お子さん向けの学習用として作られた「ひらがなフラッシュカード」のアプリです。
Canvas を使えば、学習に役立つツールや、親子で一緒に遊べる簡単なゲームなどを手軽に作成できます。

クリエイティブなAIミニゲーム

Canvas は、仕事で役立つ実用的なアプリ作成はもちろん、遊び心あふれる創作活動にもぴったりです。

例えば、「この桜と犬の写真でゲームを作って」のように、写真と簡単な言葉でお願いするだけで、楽しいアプリを開発することもできます。

また、以下のような画像生成 AI と組み合わせて、もっと高度なゲームも生成できます。

このように、Gemini の Canvas を使えば、アイデア次第で誰でもインタラクティブな作品を作ることができるんです。

Canvas での Vibe Coding のコツ

Canvas を使った Vibe Coding は本当に楽しいのですが、その魅力を最大限に引き出すための、ちょっとしたコツがあります。

ここでは、特に大切なポイントをいくつかご紹介しますね。

イメージがわかない時は AI に相談してみよう

ツールの詳細などがイメージできていない場合、まず Gemini に、「こんなものを作りたい。そのための企画や仕様を考えて」と聞いてから具体的にして Canvas を利用するとよりイメージに近いものが作れるようになります。

例えば、会議の議事録作成に課題を抱えていた場合、Gemini の Canvas 機能を使って「会議の議事録を簡単に要約して、パッと見てわかりやすくしたい。アプリを作って。」

とそのまま指示するだけでも、アプリを作成することができますが、

まず Gemini に「仕様書を書き出して」と伝えると以下のような詳細な情報を書き出してくれます。その上で、Canvas 機能を使うと、より具体的で役立つアプリが作りやすくなります。

この要件定義書を見ながら、あらためて解決したい課題や欲しい機能を伝えていきましょう。
社内展開がしやすいフォーマットにしてほしいとGemini に追加指示します。

すると、マークダウン形式コピーという機能を提案してくれました。
それでは、この条件でアプリを作ってもらいましょう。

さらに、Gemini AI 機能をつけて、議事録をいれて試してみましょう。

出来上がったアプリはこちら。ぜひ試してみたり、機能追加してみてください。

https://g.co/gemini/share/f0c39172382e

「なぜ作るのか」という目的（北極星）を持とう

「このアプリで、誰に、どんな気持ちになってほしいのか」

開発を始める前に、こうした「目的」を自分の中ではっきりさせておくことが、ぶれない軸を作るための大切な羅針盤になります。

この「北極星」とも言えるゴールがあれば、途中で細かい部分に迷ったときも、いつでもそこに立ち返り、判断のよりどころにすることができます。

完璧を目指さず、まずは動かしてみよう

完璧なアプリを目指すより、まずは「動くもの」を完成させてみましょう。「Done is better than perfect（完璧よりまず終わらせる）」という言葉があるように、大切なのは実際に作ってみることです。

難しく考えず、頭の中のアイデアをそのまま Gemini に話しかけてみてください。変更はいつでもできますし、途中で計画が変わったり、時にはゼロからやり直したりすることも、新しい発見につながる楽しいプロセスの一部です。そうした変化さえも楽しみながら、対話と試行錯誤を重ねて、理想の形を探っていきましょう。

さっそく試してみよう！

Canvas は、無料の Gemini アプリで誰でも簡単にご利用いただけます。
基本的な Canvas の使い方については、こちらの Canvas 基本編記事をぜひご覧ください。 

「でも、何を作ればいいか分からない…」

そんな時は、難しく考えずに「何か面白いアプリのアイデアをちょうだい！」と、そのまま Gemini に聞いてみてください。きっと、創作のヒントをくれるはずです。

AI と会話しながら、あなたのアイデアが形になっていく。そんな新しい創作体験を、ぜひ気軽に楽しんでみてください。