🔒 参加者限定
Vibe Coding ワークショップ AIと一緒にアプリを作ろう
2026年2月5日（木）13:00〜15:00
鯉渕学園農業栄養専門学校
🎯 今日のゴール
自分だけのWebアプリを作って、インターネットに公開する
タイムライン
13:00〜13:15
🎤 オープニング
森理事長 ご挨拶
13:15〜13:40
💡 【知る】AIでできること紹介
AIの基礎知識、Vibe Codingの紹介
13:40〜14:30
🛠 【体験】ハンズオンタイム
テーマ選択→テンプレ→生成→調整→デプロイ
14:30〜14:50
🎉 【共有】アウトプット発表
完成したものを参加者同士でシェア
14:50〜15:00
📝 クロージング・アンケート
フィードバックと次のステップ
🤖 Vibe Codingとは
難しいコードを書かなくても、AIに話しかけるだけでアプリが作れる新しい開発スタイル
従来の開発
const app = new App();
app.init({ config });
function render() { ... }
英語のようなコードを大量に書く
→
Vibe Coding
💬 「ToDoリストアプリを作って。タスクの追加・削除ができて、完了したらチェックできるようにして」
AIに「こんなの作って」と話しかけるだけ
✓
プログラミング経験ゼロでもOK
✓
「AIとの会話」がそのままプログラムになる
✓
直感（Vibe）でモノづくりができる
🛠 ハンズオンの進め方
1
テーマを選ぶ
作りたいアプリのジャンルを決めましょう
2
3
4
5
📋 参加者テンプレート一覧
自分の名前を探して、テンプレートリンクをクリックしてください
| No. | お名前 | テンプレート |
|---|
💡 困ったときのプロンプト集
🚀 はじめの一歩
○○アプリを作ってください。必要な機能は△△と□□です。
🎨 見た目を変える
背景色を青に、ボタンを丸くしてください
もっとモダンでおしゃれなデザインにしてください
🔧 機能を追加する
リセットボタンを追加してください
データを保存できるようにしてください
🐛 エラー・修正
以下のエラーが出ています。修正してください：
○○の部分が動かないので直してください
📱 レスポンシブ対応
スマートフォンでも見やすいようにしてください
✨ その他
もっとシンプルにしてください
コツ: 完璧な日本語じゃなくてOK！「いい感じにして」「なんかちょっと違う」でも通じます。
🚀 デプロイ手順（Google AI Studio）
1
アプリが完成したら「Deploy」ボタンをクリック
画面右上にある青い「Deploy」ボタンを押します
2
Google Cloud プロジェクトを選択
初めての場合は「新規作成」が表示されます
3
数秒待つとURLが発行される！
自動的にインターネット上にアプリが公開されます
4
URLをコピーして共有しよう
発行されたURLを友達や家族に送って、見てもらおう！
🎤 発表・共有
発表のポイント（約2分）
- 作ったアプリの名前と概要（30秒）
- 工夫したところ・こだわりポイント（30秒）
- 実際に動かしてデモ（1分）
共有方法
- デプロイしたURLを画面に映す
- URLをチャットに貼って共有
- QRコードを表示しても◎
📝 アンケート
今日のワークショップはいかがでしたか？ぜひご感想をお聞かせください