準備とウォームアップ

Claude Code（ターミナルの画面）はまだ使いません。ブラウザでGeminiを開き、「Canvas」という機能を使います。当日使うのと同じGoogleアカウントでログインすればよいので、別のアカウントは不要です。ブラウザはGoogle Chromeの利用を推奨します。

まずGeminiのチャット画面を開きます。

チャット入力欄の「＋」から「Canvas」を選んで開始します。

さっそくプロンプトを書いてみましょう。そのままチャットに貼り付けてください

おつまみを選ぶ楽しいアプリを作りたいです。ウェブアプリを作って下さい。
軽く操作できるものにしてください。ビジュアルは手書き風で作って。文字だけはNG。

少し待つとアプリが作られていきます。

返ってきたコードがそのまま画面に表示され、遊べるようになります。実際に作られた例がこちらです。

同じ文章を貼り付けても、毎回違うデザイン・違う機能のアプリができあがります。