【Gemini Canvas】動画入力でWebアプリを爆速複製！「Vibe Coding」完全ガイド

1. Gemini Canvasとは？ - 概要とメリット

こんにちは、AIアーキテクトのOKIHIROです🚀

Webアプリのプロトタイプを作る際、これまでは要件定義をテキストで細かく指示する必要がありました。しかし、Googleがリリースした「Gemini Canvas」は、その常識を覆そうとしています。

Gemini Canvasは、OpenAIの「Canvas」やAnthropicの「Artifacts」に対抗する機能で、チャット画面の横にプレビューウィンドウを表示し、リアルタイムでReactやHTML/JavaScriptベースのアプリケーションを生成・実行できます。

そして、Gemini最大の特徴である「動画入力（マルチモーダル入力）」を組み合わせることで、既存のアプリの操作動画を見せるだけで、その機能を模倣したクローンアプリを作成する「Vibe Coding（雰囲気コーディング）」が可能になります💡

開発者にとってのメリット

特に以下の点が革新的です。

• 視覚的な指示: 言葉で説明しにくいUIの動きを動画で伝えられる。
• Geminiエコシステムの統合: 画像生成や動画生成、Deep Researchと同じ場所で開発できる。
• エクスポート機能: 作成したコードを簡単にコピーし、Cursorなどの外部エディタへ移行できる。

2. 必要な準備

Gemini Canvasを利用するために、特別な環境構築は必要ありません。ブラウザがあればすぐに始められます。

アクセス方法

1. 公式サイトへアクセス: gemini.google.com にアクセスします。
2. モデルの選択: 左上のモデル選択プルダウンから、Gemini 3 Pro（またはAdvancedなど上位モデル）を選択することをお勧めします。
3. Canvasの起動: 左サイドバーまたはプロンプト入力欄付近のメニューから「Tools」→「Canvas」を選択します。

これで準備は完了です✅

3. 実装・使い方の解説

では、動画の内容に沿って、実際にアプリを作ってみましょう。今回は2つのパターンを紹介します。

パターンA：テキストプロンプトでフィットネスアプリ作成

まずは基本的な使い方です。以下のプロンプトを入力してみましょう。

Real-time, camera-based fitness coach that gives instant feedback on user movement...

Geminiは瞬時にHTML/CSS/JSを生成し、右側のCanvas領域でアプリを実行します。MacのWebカメラへのアクセス許可を求められ、実際にスクワットなどの動作カウントが可能になります。

パターンB：【本命】動画入力で「AudioPen」を再現する

ここが本記事のハイライトです。有名な音声メモアプリ「AudioPen」の動作をGeminiに見せて、同じものを作らせます。

手順1: ターゲットアプリの画面録画

再現したいアプリ（ここではAudioPen）を操作している様子を、LoomやQuickTimeなどで画面録画します。1分程度の短い動画で構いません。

手順2: 動画のアップロードと指示

Geminiのチャット欄にある「＋」ボタンから録画した動画ファイルをアップロードし、以下のプロンプトを送信します。

I want to recreate this app verbatim. I want to use something like the Web Speech API in my browser to be able to dictate in real-time. And I want the look and feel to look exactly the same...

ポイント: ここで技術的なキーワードとして「Web Speech API」を指定しています。これにより、外部APIキーを必要とせず、ブラウザ標準機能だけで音声認識を実装するよう誘導できます。

手順3: 動作確認と修正

生成されたアプリを確認します。動画では一発で以下の機能が実装されていました。

• マイクボタンによる録音開始・停止
• リアルタイムの波形表示（ビジュアライザー）
• 音声のテキスト変換（Transcription）
• テキストのダウンロード機能

もし動かない場合は、「It's not transcribing.（文字起こしされないよ）」とフィードバックを送れば、Geminiがコード内の非同期処理のタイミングなどを修正してくれます。

手順4: AI機能（PM機能）の追加

さらに、Canvas右下の「Add Gemini features」ボタン（キラキラアイコン）を使うと、Geminiがプロダクトマネージャーのように振る舞い、機能改善案を出してくれます。

例えば、「履歴機能を追加したい」と伝えると、localStorage を使った保存機能や、過去のメモ一覧UIを実装してくれます。

4. 応用・注意点

コードのエクスポートと本格開発への移行

Canvasで作ったアプリはプロトタイプです。本番環境で使うには、コードを取り出す必要があります。

Canvas上部の「Code」タブをクリックすると、生成されたHTMLやReactのコードが表示されます。これをコピーして、CursorやVS Codeなどのエディタに貼り付ければ、本格的な開発フェーズへスムーズに移行できます。

注意点

• Web Speech APIの制限: ブラウザ依存の機能であるため、Chrome以外のブラウザでは動作が異なる場合があります。
• セキュリティ: プロトタイプではAPIキーをフロントエンドに書く提案をされることがありますが、本番運用時は必ずバックエンドを構築してください。
• 動画入力の容量: Gemini 3 Proは長時間の動画も理解できますが、開発指示用なら1分程度の動作デモで十分です。

5. まとめ

本記事のゴールは、Gemini Canvasを使った「Vibe Coding」の威力を実感していただくことでした。

1. 準備不要: ブラウザだけですぐにReact/HTMLアプリが作れる。
2. 動画で指示: 「これと同じにして」が通じるため、UIの微調整にかかる時間を大幅に短縮できる。
3. AIとの共創: 実装だけでなく、機能提案までAIに任せることができる。

エンジニアにとって、これは「仕事を奪うツール」ではなく「初速を爆発的に上げるブースター」です🚀

ぜひ、手元の参考動画をアップロードして、あなただけのアプリを爆速で開発してみてください。