Canvasでアプリモックアップ！自然言語だけでWebアプリを作る方法

こんにちは！YaroTechです。

「ジミーことはじめ」シリーズ #22 へようこそ！

#21では、Gemini Liveで音声ブレストに挑戦しました。

今回のテーマはGemini Canvasでアプリモックアップです！

「Webアプリ作りたいけどプログラミングできない…」
「#10でCanvasの資料作成はやったけど、アプリも作れるの？」
「最近話題のVibe Codingってやつ？」

実はGeminiのCanvas機能には、自然言語で指示するだけで動くWebアプリを自動生成する機能があります。HTMLもCSSもJavaScriptも知らなくてOK。日本語で「こういうアプリ作って」と言うだけです。

今回は見積書の自動計算ツールや日報テンプレート生成フォームなど、仕事で今すぐ使えるツールを実際に作りながら、Vibe Codingの楽しさを体験しましょう！

※見出し画像のプロンプトは一番下におまけで公開中！

🎯 このシリーズで得られること

• Googleが開発した生成AI「Gemini」の基本がわかる

• 無料で使える環境でAIを体験できる

• 仕事で実際に使えるプロンプトが手に入る

• 20〜30分のミニ講座で、無理なく学習を続けられる

• Gemini Canvasでプログラミング不要のアプリ作成ができる

🖥️ 実行環境

必要なもの:

• PCのブラウザ（Chrome推奨）

• Googleアカウント（無料）

• Gemini（https://gemini.google.com）

確認環境: ThinkPad X1 Carbon（RAM 32GB）/ Windows 11 Home 25H2 / Chrome

🎨 Canvasの「アプリ生成」って何？ — #10との違い

#10では、Canvasでプレゼン資料やドキュメントを作成しました。テキストベースのコンテンツ作成が中心でしたね。

今回使うのは、Canvasの「アプリ」モードです。

#10 （資料作成）と#22（アプリ生成）の違い：

• #10 : Canvas → ドキュメント・資料を作成 → テキスト＋レイアウト

• #22 : Canvas → Webアプリを作成 → HTML/CSS/JSを自動生成 → その場で動く！

Canvasのアプリ生成では、Geminiが裏側でHTML・CSS・JavaScriptのコードを書いてくれます。でも私たちはコードを見る必要すらありません。プレビュー画面で実際に動くアプリを確認しながら、「ボタンをもっと大きくして」「色を青に変えて」と日本語で修正指示を出すだけです。

これが最近話題のVibe Coding（バイブコーディング）。雰囲気（Vibe）を伝えるだけでコーディングが完了する、プログラミングの新しいスタイルです。

🔰 Canvasでアプリを作る手順

Step 1: gemini.google.comにアクセス

Step 2: チャット欄の下にある「ツール」ボタンをクリック→「Canvas」を選択