医療 x AI「自分のアイデアを”かたち”に v0, ChatGPT, Cursor で体感する Vibe Coding 入門」

医療 × AI をテーマにしたワークショップ第4回「Vibe Coding入門」の資料。
今回は「Vibe Coding」を入り口に、生成AI時代のアイデア実装プロセスを体験する内容。
v0 / ChatGPT / Cursor などを使って、コードを書かずにプロンプトだけで“とりあえず動くもの”を作る。
考えたことをその場で試す、そんなプロトタイピングのやり方を紹介。

内容：
- 大規模言語モデル（LLM）の基礎と限界
- 生成AI時代のプロトタイピングの変化
- 「Vibe Coding」という新しい開発スタイル
- 実践ワーク：AIとともにアイデアをかたちに

Transcript

1. 医療 x AI ワークショップ #04 自分のアイデアを”かたち”に v0, ChatGPT, Cursor で体感する Vibe Coding 入門 Atsushi Omata (Nx-CEC), 2025/07/29 unsplash
2. 生成AIにより アイデア → 形の距離が短縮 従来のアイデア検証プロセス 1. アイデア思いつき 2. 企画書・仕様書作成 3. 技術者との相談・見積もり 4. プロトタイプ開発依頼 5. 実際に触って検証 生成AI時代 1~5まで数分で完結 ITmedia https://www.itmedia.co.jp/aiplus/articles/2507/04/news070.html 1 1 1 / 24
3. そこで今日は「Vibe Coding」 Vibe Coding とは？ 生成AIとプロンプトのみで雰囲気で開発する手法（コードすら見ない） 主にプロトタイプやモックアップの開発に使われ始めている 完璧より「とりあえず動くもの」でアイデア検証に最適 今日のゴール 生成AIを使ってアイデア→プロトタイプ作成までを体験する 1 / 24
4. 今日の目標と流れ Goal：生成AIを使ってアイデア→プロトタイプ作成までを体験する 1. イントロ（５分） 2. 講義：大規模言語モデル（LLM）の基礎（20分） 3. ワーク１：LLMを使ったアイデアの作り方（30分） 4. ワーク２：Vibe Codingでアイデアを"かたち"にする（40分） 5. おわりに（５分） 1 / 24
5. 大規模言語モデル（LLM）の基礎 1 / 24
6. ChatGPT Generative Pre-trained Transformer 生成型の 事前学習を行なった トランスフォーマー をチャット形式にしたサービス 1 / 24
7. Transformer (2017) 2017年の論文「Attention Is All You Need」で提案されたモデル構造 翻訳・要約・質問応答・感情分析など 多様な自然言語処理タスクに対応可能なモデル GPTでは右側のDecoderブロックのみを使用 Vaswani et al., "Attention Is All You Need" (2017) 1 1 / 24
8. ちなみに…2025年現在もLLMの基本構造は変わらず The Big LLM Architecture Comparison The Big LLM Architecture Comparison 1 1 1 / 24
9. LLMの学習プロセス：ChatGPTができるまでの3ステップ DEMO：https://poloclub.github.io/transformer-explainer/ 1 / 24
10. なぜ3ステップも必要？ 段階 身につく能力 例 事前学習 大量の知識・検索能力 「猫は動物です」 SFT 指示理解・タスク実行 「要約して→要約文」 RLHF 人間らしさ・安全性 「わからないことは正直に『わからない』と言う」 各段階で異なるスキルを段階的に習得 1 / 24
11. なぜ間違うのか？ 学習の仕組みを理解した上で考える 1. ハルシネーション: もっともらしい誤情報の生成 「次の単語予測」の延長で自然な文章は作れるが、真偽は判断していない 2. プライバシー: 機密データの漏えい 学習データに含まれた個人情報が生成されてしまう可能性 3. 著作権: 学習データ由来のテキスト引用 著作物も学習データに含まれており、そのまま引用されるリスク 4. バイアス: データ偏りによる差別的出力 インターネットや書籍の偏見がそのまま学習されてしまう 5. 説明可能性: なぜその答えに至ったかわからない RLHFで人間らしくなったが、内部の判断プロセスは見えない など Prompt： 「カットオフ教えて」 Prompt：Web search 1 / 24
12. LLMへの指示の出し方（プロンプト） ステップ２ SFT（教師あり微調整） では人間が作った 「質問→理想的な回答」 のペアで学習していました つまり… LLMはどんな指示をどう解釈すべきかをすでに学んでいる その学習されたスタイルに沿って指示を出せば、期待通りの出力が得られる 1 / 24
13. モデルが慣れている指示パターン① カテゴリ 内容 指示文例 要約 与えられた文章を簡潔にまとめる 以下の記事を読み、主要なポイントを3文で要約してください。 情報抽出 文中から特定の情報（名前・日付等） を抜き出す 以下の文章から日付をすべて抜き出してください。 ブレーンストーミング アイデアや項目のリストを生成する 新しいエコ製品のユニークなマーケティングアイデアをいくつか提案してくだ さい。 クリエイティブライテ ィング 創作的な文章（物語・詩など）を生成 する 絵を描くことが大好きなドラゴンについて、短いファンタジー物語を書いてく ださい。 分類 テキストをあらかじめ定めたカテゴリ に分類 次のレビューの感情極性をポジティブ、ネガティブ、ニュートラルのいずれか で分類してください。 クローズドQA 正答が決まった質問に短く答える 上記の文章によれば、そのワクチンは新しい変異株に対して有効ですか？ Shengyu, Zhang, et al. "Instruction tuning for large language models: A survey." (2023). Lou, Renze, et al. "Large language model instruction following: A survey of progresses and challenges." (2024). 1 / 24
14. モデルが慣れている指示パターン② カテゴリ 内容 指示文例 オープンQA 自由回答型で詳細に説明する質 問応答 秋になると木の葉が色づくのはなぜですか。その理由を詳しく説明してください。 ジェネラルQA 一般知識に関する一問一答型の 質問応答 カナダの首都はどこですか？ 翻訳 ある言語から別の言語への翻訳 次の日本語文を英語に翻訳してください: 「機械学習はとても面白い分野です。 」 文体変換・リライト 丁寧語・易しい文・構文変更な ど表現の変換 次の文章を丁寧な敬体の表現に言い換えてください: 「その書類を明日までに送って」 コード生成・プログ ラミング コードの生成や解説、デバッグ など 与えられた整数が素数かどうかを判定するPython関数を作成してください。 ロールプレイ 指定された役割になりきって応 答する あなたは19世紀ロンドンの名探偵です。依頼人から指輪紛失の相談を受けました。その 設定になりきり応答してください。 1 / 24
15. 複雑なプロンプト：要素を組み合わせて最適解を見つける 要約タスクの例 https://www.oreilly.co.jp/books/9784814401154/ 1 項目 説明 ペルソナ (アイデンテ ィティ) あなたは大規模言語モデルの専門家です。複雑な論文をわかりやすく要約することに秀でて います。 指示 (メインタスク) 与えられた論文の主要な発見を要約してください。 文脈 (追加情報) 要約は、研究者が論文のもっとも重要な情報を迅速に理解できるよう、最重要ポイントを抽 出した内容であるべきです。 形式 (追加情報) 手法を箇条書きでまとめ、その後に主要な結果を簡潔に要約した段落を記載してください。 対象者 (誰のため？) 要約は、大規模言語モデルにおける最新のトレンドを素早く把握したい忙しい研究者を対象 としています。 1 / 24
16. 色々紹介してきましたが… 複雑なことをやる場合はプロンプト自体をLLMに作成してもらう方がうまくいくことが多い プロンプトを作るプロンプト（Meta Prompt, Prompt Generator） システムプロンプト システムプロンプト：LLMサービスの内部で使われるLLMにどう振舞って欲しいかを指示するプロンプトのこと [ ここに具体的なタスクを記入] のシステムプロンプトを作成してください。 以下について、効果的なプロンプトを作成してください： やりたいこと：[ ここに具体的なタスクを記入] 対象：[ 想定するユーザーや状況] 期待する出力：[ どんな形式・内容を求めるか] 最新のプロンプトエンジニアリングのベストプラクティスに則って作成してください。 https://platform.openai.com/docs/guides/prompt-generation 1 1 / 24
17. 実用的なプロンプトテクニック 1. 構造化出力の指定 2. 確実性レベルの明記 3. 段階的思考の促進（手順を与える） コードブロックで出力してください。 マークダウンで出力してください。 JSON 形式で出力してください。 各回答に確信度を付けてください： - 高（90% 以上）: ✅ - 中（60-90% ）: ⚠️ - 低（60% 未満）: ❓ 以下の手順で考えてください： 1. まず前提条件を整理 2. 次に可能性を列挙 3. 最後に結論を導出 各ステップの思考過程も示してください。 1 / 24
18. その他 マルチモーダルモデル 軽量モデル，汎用モデル，推論モデル ツール連携（Web, Canvas, Agent, etc…） サービスごとの違い（ChatGPT, Gemini, Claude, Grok, etc…） 1 / 24
19. ワーク１：LLMを使ったアイデアの作り方 1 / 24
20. 流れ 1. アントレプレナーシップ・コーチAIの説明 (5 分) 課題「休みの日にできる趣味が欲しい」でやってみる 2. 個人でAIと壁打ち (15 分) 各自がマンツーマンでAIと対話し、自分のアイデアを育てる 3. チーム内でアイデア共有 (10 分) 各自のアイデアを発表・フィードバック 1 / 24
21. ワーク２：Vibe Codingでアイデアをかたちにする 1 / 24
22. 流れ 1. v0の説明・デモ (5 分) 2. v0でプロトタイプ作成 (20 分) 各自が自分のアイデアのモックアップを作成 実際に動く画面設計を体験 3. チームの自信作を決定 (5 分) 4. チームごとに１件発表 (10 分) 1 チーム 3 分プレゼン + 1 分 QA 課題、アイデア、作ったもの 1 / 24
23. v0 とは Vercel が開発したAI UI生成ツール プロンプトからReact/HTML/CSSコードを自動生成 プレビューをリアルタイムで確認しながら修正可能 Webサイトの見た目を作るのに特化 関連ツール Google AI Studio: aistudio.google.com Firebase Studio: firebase.studio 1 / 24
24. 次回 Cursorを使ったAIエージェント アイデアをビジュアルストーリーにする〜ChatGPT, Firefly, Runwayで始める動画生成AI入門 1 / 24