COMPLETE EDITION 2025

VIBE CODING
TRAINING

バイブコーディング完全研修資料

Gemini実践ワークとGoogle AI Studio Build機能を使った
AIと協働する新時代の開発手法を完全マスター

2
つのツール
3
つのコツ
∞
可能性

研修内容

パート1：Geminiでバイブコーディング

  • • バイブコーディングの基礎理解
  • • 効果的なプロンプトテクニック
  • • デザインのコツと実践
  • • Geminiを使った実践開発
  • • Google Sitesへの埋め込み
  • • 共有権限の制御

パート2：Google AI Studio Build

  • • Build機能の概要と特徴
  • • 瞬間アプリ生成テクニック
  • • プロトタイピング実践
  • • 生成されたコードのカスタマイズ
  • • デプロイと共有方法
01
INTRODUCTION

バイブコーディングとは

AIツールと対話しながら開発する新しいアプローチ

1

AIとの協働

プログラミング知識不要。自然言語（日本語）で指示を出すだけでアプリが完成

2

高速プロトタイピング

アイデアを数分で形に。MVPを素早く作成し、フィードバックを得られる

3

段階的改善

完璧を求めず、動くものから始めて徐々に改善していくアプローチ

02
PART 1

Geminiでバイブコーディング実践

プロンプトエンジニアリングの極意とGoogle Sites連携

tips_and_updates バイブコーディングのコツ（完全版）

01

AIに「ヒアリング」させる

ESSENTIAL
❌ 悪い例 
「血液シミュレーターを作って」
check_circle 良い例 
「中学校の保健の授業で血液成分を教えるためのツールを作りたいです。
他に要件をまとめるために、私にヒアリングをしてください。」
lightbulb ポイント：AIに質問させることで、自分でも気づかなかった要件が明確になります
02

デザインで「煽る」テクニック

RECOMMENDED 
効果的なプロンプト：
「モダンでかっこいい、教育現場らしい親しみやすさもある、
限界を超えたUIを作ってください！パステルカラーで、
中学生も喜ぶようなデザインにしてください！」
効果的な煽り言葉
  • • 限界を超えた
  • • プロ級の
  • • 最高にかっこいい
避けるべき表現
  • • シンプルで
  • • 普通の
  • • 適当に
03

MVP思考：機能は2つまで！

ESSENTIAL
❌ 失敗パターン

「生徒管理も、成績管理も、連絡帳も、時間割も...」

→ 完成しない

check_circle 成功パターン

「血液成分の動きを見る」「クリックで説明表示」

→ 60分で完成！

palette デザインが垢抜けるコツ

参考：バイブコーディングで使える！デザインが垢抜けるコツ - フリーランスの学校

参考：影を使った立体感の演出テクニック - @rocomodesign

01

絵文字をアイコンに差し替える

ESSENTIAL
❌ 問題点
  • • 絵文字で色数が増えてノイズに
  • • 3D絵文字がフラットデザインと不調和
  • • 世界観が崩れて素人っぽく見える
check_circle 解決法
  • • Google Iconsを使用
  • • フラットなアイコンで統一感
  • • 配色を崩さず洗練された印象に
lightbulb 実装例： 
「Google Iconsのサイト（https://fonts.google.com/icons）から
適切なアイコンを選んで、絵文字と差し替えてください。
フラットなデザインで統一感を出してください。」
02

タイトルで個性を出す

RECOMMENDED
フォントの工夫
  • • Google Fontsから個性的なフォント選択
  • • サイトの雰囲気に合った書体
  • • 日本語フォントも豊富に利用可能
文字間の調整
  • • letter-spacingで文字間を広げる
  • • ゆったりした印象でタイトル感UP
  • • 本文との差別化を明確に
lightbulb 実装例： 
「タイトルにGoogle Fontsから印象的なフォントを使用してください。
文字間（letter-spacing）を0.1emくらい広げて、
ゆったりとした高級感のある見た目にしてください。」
03

影で立体感を演出する

ADVANCED
ベーシックな影

シンプルで読みやすさ重視

  • • ドロップシャドウ
  • • シャープシャドウ
遊び心のある影

個性的なアクセント

  • • ずらし影
  • • ストライプ影
演出用の影

存在感を強調

  • • ロングシャドウ
  • • 鏡面反射
lightbulb 実装例： 
「見出しやカードにbox-shadowで立体感を出してください。
例：box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
ホバー時に影を深くして、インタラクティブな演出も追加してください。」

auto_awesome デザイン改善のBefore/After

❌ Before（初期状態）

menu_book 学習管理ツール

デフォルトフォント・絵文字多用

🏫 学校 school 教材 ✏️ 課題
check_circle After（改善後）

学習管理ツール

カスタムフォント・アイコン統一

学校 教材 課題

改善ポイント：

  • check 絵文字 → Google Iconsのフラットアイコンに変更
  • check デフォルトフォント → 個性的なフォント + letter-spacing調整
  • check フラットなデザイン → box-shadowで立体感を追加
  • check 単調な配色 → グラデーションで深みを演出

description Gemini実践プロンプト集

基本テンプレート

「[対象ユーザー]向けの[アプリの種類]を作成してください。

【必要な機能】
1. [機能1]
2. [機能2]

【デザイン要件】
- Tailwind CSS CDNを使用
- [色やスタイルの希望]
- スマホでも見やすく

【技術要件】
- 1つのHTMLファイルで完結
- Google Sitesに埋め込み可能
- 外部ライブラリは最小限」

段階的改善プロンプト

第1段階：「基本機能だけ実装してください」
第2段階：「デザインをもっとモダンに改善してください」
第3段階：「アニメーションを追加してください」
第4段階：「レスポンシブ対応してください」

🌐 Google Sites埋め込みワーク

埋め込み手順

  1. 1. Google Sitesで新規サイト作成
  2. 2. 埋め込み → 埋め込みコードを選択
  3. 3. 生成したHTMLコードを貼り付け
  4. 4. サイズを調整して配置
  5. 5. 公開設定で共有範囲を制御

共有権限の制御

  • check 限定公開：特定のユーザーのみ
  • check リンク共有：URLを知っている人
  • check 一般公開：誰でもアクセス可能
  • check 編集権限：共同編集者の設定
lightbulb ワークのポイント：

実際にGoogle Sitesにアプリを埋め込み、チーム内で共有設定を試してみましょう。

03
PART 2

Google AI Studio Build機能

瞬間アプリ生成でプロトタイピングを加速

rocket_launch Google AI Studioの全機能

chat Chat

対話形式でコード生成。段階的な改善や複雑なロジック構築に最適

stream Stream

リアルタイムストリーミング。長文生成や連続的な出力に対応

build Build

瞬間アプリ生成。プロンプト一つで完全なWebアプリを数秒で作成

image Create Media

画像生成機能。UIデザインやアイコン、教材用画像の作成

build Build機能に特化した解説

瞬間生成

プロンプトを入力するだけで数秒でアプリが完成

コード編集可能

生成されたコードを直接編集してカスタマイズ

即座にプレビュー

リアルタイムでプレビューしながら開発

Build機能ワークフロー

1

アクセス＆セットアップ

  1. 1. https://aistudio.google.com にアクセス
  2. 2. Googleアカウントでログイン
  3. 3. 「Build an app」を選択
2

プロンプト入力

効果的なBuildプロンプト例：

「インタラクティブな周期表を作ってください。
各元素をクリックすると詳細情報がポップアップで表示。
3Dアニメーション効果付き。
モダンで教育的なデザイン。」
3

生成＆カスタマイズ

生成されるもの
  • • 完全なHTMLコード
  • • スタイリング込み
  • • JavaScriptロジック
カスタマイズ可能
  • • コード直接編集
  • • リアルタイムプレビュー
  • • 再生成も可能
4

共有＆デプロイ

  • check 共有リンクの生成
  • check HTMLファイルとしてダウンロード
  • check CodePenやGitHubへエクスポート
  • check Google Sitesへの埋め込み

lightbulb Build機能活用例

教育系

化学反応シミュレーター

「化学反応を視覚的に
表示するツール。
分子がアニメーションで
結合・分離」

生成時間：約5秒

管理系

席替えジェネレーター

「クラスの席替えを
ランダムに生成。
ドラッグ＆ドロップで
手動調整も可能」

生成時間：約3秒

ゲーム系

漢字神経衰弱

「漢字と読み方を
マッチングする
教育ゲーム。
スコア機能付き」

生成時間：約7秒

build Build機能上級テクニック

反復生成戦略

  1. 1. 同じプロンプトで3回生成
  2. 2. 最も良いデザインを選択
  3. 3. 良い部分を組み合わせて編集
  4. 4. 最終調整して完成

プロンプトの魔法の言葉

  • • 「プロダクションレベルの」
  • • 「最新のWeb技術を使って」
  • • 「アクセシビリティに配慮した」
  • • 「パフォーマンス最適化された」
04
WORKSHOP

実践ワークショップ

2つのツールを使い分けて最適な開発を体験

schedule ワークショップタイムライン

イントロ＆セットアップ

ツールの準備、アカウント確認

Geminiワーク

プロンプト作成→生成→デザイン改善→Google Sites埋め込み

AI Studio Buildワーク

Build機能でプロトタイプ作成

発表＆振り返り

成果物の共有、学びの共有

assignment ワークショップ課題

A

Gemini課題：教育支援ツール

学校現場で使える実用的なツールを作成

課題例
  • • 出席管理システム
  • • 授業タイマー
  • • 成績計算ツール
  • • 座席表ジェネレーター
要件
  • check 機能は2つまで
  • check デザインのコツを実践
  • check Google Sites埋め込み対応
  • check スマホ対応
成果物：Google Sitesに埋め込まれた実用ツール
B

AI Studio Build課題：インタラクティブ教材

授業で使える視覚的な教材を作成

課題例
  • • 化学元素周期表
  • • 歴史年表タイムライン
  • • 数学公式計算機
  • • 地理クイズゲーム
要件
  • check ビジュアル重視
  • check インタラクティブ
  • check アニメーション含む
  • check 瞬間生成を活用
成果物：すぐに授業で使えるインタラクティブ教材
05
TIPS & TRICKS

実践的なコツとベストプラクティス

効率的に開発するための実証済みテクニック

warning よくある失敗と回避法

!

機能過多症候群

一度に10個以上の機能を実装しようとする

MVPは2機能まで。段階的に追加

!

完璧主義の罠

100%完璧になるまで公開しない

60%動けばOK。フィードバックを得て改善

!

プロンプト依存

1つのプロンプトに全てを詰め込む

段階的に詳細化。基本→装飾→最適化

!

車輪の再発明

既存サービスと同じものを作る

既存ツールの隙間を埋める補助ツール

checklist 成功のためのチェックリスト

開発前

開発後

06
COMPARISON

AIツール詳細比較

各AIツールの特徴・機能・設定を理解する

search 主要AIツール詳細比較

機能 Claude ChatGPT Gemini Google AI Studio
コード生成 ◎
高精度		 ◎
高精度		 ◎
高精度		 ◎
Build機能で瞬間生成
画像生成 ×
非対応		 ◎
DALL-E 3		 ◎
Imagen		 ◎
Create Media
リアルタイム検索 ○
Web検索(ベータ)		 ○
Web Browsing		 ◎
Google検索統合		 ◎
Google検索統合
ファイル解析 ◎
多形式対応		 ◎
多形式対応		 ◎
Google Drive連携		 ○
基本的な対応
音声対話 ○
音声モード(ベータ・英語)		 ◎
音声モード		 ○
モバイルアプリ		 △
限定的
カスタムGPT/Gem/Project ◎
Projects		 ◎
GPTs		 ◎
Gems		 ×
非対応
API提供 ◎
Anthropic API		 ◎
OpenAI API		 ◎
Gemini API		 ◎
統合API
無料利用 ○
制限あり		 ○
制限あり		 ◎
寛容な制限		 ◎
開発者向け無料枠

凡例： ◎ 優秀 | ○ 対応 | △ 限定的 | × 非対応

settings トークン設定と詳細設定

※バイブコーディングには直接関係ありませんが、知識として

analytics トークン数設定

Claude 3.7 Sonnet: 最大200,000トークン入力、4,096トークン出力
ChatGPT 4.5: GPT-4で128,000トークン、出力4,096トークン
Gemini 2.0: 1M～2Mトークンのコンテキストウィンドウ
AI Studio: モデルによって異なる（Gemini準拠）

tune Temperature設定

低温度（0.0-0.3）:

コード生成、正確な回答が必要な場合

中温度（0.4-0.7）:

バランスの取れた創造性と正確性

高温度（0.8-1.0）:

アイデア出し、創造的な文章生成

lightbulb バイブコーディングでの推奨：デフォルト設定のままで問題ありません。特別な調整は不要です。

edit_note バイブコーディングに最適なツール

1. Gemini 2.0 + Google AI Studio Build

段階的な開発とプロトタイピングの組み合わせ

2. ChatGPT 4.5（画像生成が必要な場合）

UIデザインやアイコン作成を含む開発

3. Claude 3.7 Sonnet（複雑なロジック）

高度なコード生成と詳細な説明が必要な場合

tune シチュエーション別選択ガイド

  • check_circle
    教育現場で即座に使うツール： Google AI Studio Build
  • check_circle
    複雑な業務システム： Gemini or Claude
  • check_circle
    ビジュアル重視のアプリ： ChatGPT + DALL-E 3
  • check_circle
    Google Workspace連携： Gemini

auto_awesome 2025年最新アップデート情報

最新モデル

  • star
    Claude 3.7 Sonnet Pro - 音声対話、Web検索、Projects機能追加
  • star
    GPT-4.5 - マルチモーダル機能強化
  • star
    Gemini 2.0 - Google検索統合改善、処理速度向上

料金プラン（2025年1月時点）

  • payments
    Claude Pro: $20/月（制限緩和、優先アクセス）
  • payments
    ChatGPT Plus: $20/月（GPT-4.5フル機能）
  • payments
    Gemini Advanced: $19.99/月（2TB Google One容量付き）

info 注意：各AIツールは頻繁にアップデートされるため、最新情報は公式サイトをご確認ください。 特に2025年は各社とも機能強化が活発で、新機能が続々とリリースされています。

rocket_launch まとめと次のステップ

lightbulb

学んだこと

  • • バイブコーディングの基礎
  • • 効果的なプロンプト術
  • • ツールの使い分け
flag

実践したこと

  • • Geminiでアプリ開発
  • • AI Studio Build体験
  • • Google Sites連携
auto_awesome

次のステップ

  • • 実務での活用
  • • より複雑なアプリ
  • • チーム開発への応用

今日学んだ技術を活用して、

あなたのアイデアを形にしていきましょう！

menu_book 参考リソース

link ツールリンク

school 学習リソース

  • • プロンプトエンジニアリング入門
  • • HTML/CSS/JS基礎
  • • レスポンシブデザイン
  • • アクセシビリティ対応

groups コミュニティ

  • • AI開発者コミュニティ
  • • バイブコーディング実践者
  • • 教育×テクノロジー
  • • オンライン勉強会