Gemini × antigravity_MBTI ＆ 手相ハイブリッド占いアプリ開発ワークショップ

Gemini × antigravityのバイブコーディングで作る！ プログラミングの暗記は一切不要！
「データを整える力（AIレディデータ）」と「AIとの対話（Vibe Coding）」で、本格的なマルチモーダルAIアプリをゼロから構築しよう！

Transcript

1. 無料クレジット このURLをご自身のプロジェクトに紐づけてください https://g.dev/credits/ｘｘｘｘｘｘｘ Claim window starts from Oct 18, 2026, 10:00 AM ←Meet入っていただければチャットに貼ります
2. 初心者歓迎 ハンズオン講座 本日作るハイブリッドAIアプリ図解 AIレディデータ × バイブコーディングで作る！ MBTI ＆ 手相ハイブリッド 占いアプリ開発ワークショップ プログラミングの暗記は一切不要！ 「データを整える力（AIレディデータ）」と「AIとの対話（Vibe Coding ）」で、 本格的なマルチモーダルAIアプリをゼロから構築しよう！ MBTI 16タイプ 診断 Gemini手相画像 解析 Google Antigravity JSON構造化デー タ MBTIデータ (16タイプJSON) 内面の性格・才能 × 手のひら写真 (Gemini Vision) 生命線・知能線・感情 線 AIレディデータ（JSON）× Vibe Coding Google Antigravity + Gemini 2.5 Flash ハイブリッド占いWebアプリ完成！ ・予測寿命（バイタリティ換算） 88歳 ・性格＆隠れた才能・開運アドバイス
3. ④ 全体設計 本日のワークショップ全体像（ハイブリッド占いデータパイプライン） ゴール：「仕様① MBTI診断」＋「仕様② 手のひら写真のAI手相解析」＝「仕様③ 寿命・性格・才能・運勢プロフィー ル出力」 【仕様①】MBTI 16タイプ診断 （静的な構造化マスターデータ） mbti_master.json ・基本性格、強み・弱み ハイブリッド合成エンジン （app.py 内部ロジック） ① 2つのJSONデータを結合！ MBTIのJSON ＋ 手相解析JSON 【仕様③】総合運勢プロフィール出 力 予測寿命（バイタリティ換算） 例：88歳（エネルギー満タン！） ・ベース生命力（base_vitality） ・隠れた才能、ラッキーアクション ② 寿命（バイタリティ）算出式 ベース生命力 ＋ (生命線スコア×係数 ) MBTI気質 × 知能線・感情線の融合 ＝ 予測健康寿命（例：88歳） 隠れた才能・適職アドバイス 【仕様②】手のひら写真のAI手相解析 （非構造化データのリアルタイム構造化 ） 手相写真 ➔ Gemini Vision解析 ・生命線スコア（1〜10点） ・知能線・感情線の特徴テキスト 性格＆思考タイプ分析 あなただけの強みと開花ポイント ③ Geminiで総合鑑定コメント生成 「ENFPの創造性 × 知能線の長さ」 総合運勢・開運アクション を掛け合わせた唯一無二の診断！ 今日から実践できるラッキー行動 裏側のAIレディデータ表示 変換されたJSONデータを画面で確認 ・手相から読み解く強みJSONへ変換！ 5 / 10
4. はじめに ワークショップをはじめるには以下事前準備が必要です。 1. 2. プロジェクトの作成 請求アカウントとの紐づけ 4 / 10
5. Google Cloudプロジェクトの作成 まだ新規作成していない人、一緒にやりましょう！ まずはご自身の Google アカウントにログインし、 Google Cloudコンソールにアクセスしてください。 個人の Google アカウント利用が前提です 4 / 10
6. Google Cloudプロジェクトの作成 (1/3) 1.「プロジェク ト 選択ツール」を 選択 2. 「新しいプロジェ クト」 を選択 4 / 10
7. Google Cloudプロジェクトの作成 (2/3) 1.任意のプロジェ クト名を入力 2. 組織関連の設定はなし 」でOK 3.「作成」をクリ ック 4 / 10
8. Google Cloudプロジェクトの作成 (3/3) 作成した プロジェクトを選択 4 / 10
9. 請求アカウントとの紐づけの確認 念のため、作成済みプロジェクトが 請求アカウントと紐付けられていることを確認しておきましょう。 請求アカウントが紐付けられていないと、 各種APIにアクセスできず、ワークショップが実施できません。 4 / 10
10. 請求アカウントとの紐づけの確認 (1/2) 左上のナビゲーションメニュ ーから、「課金」を選択 4 / 10
11. 請求アカウントとの紐づけの確認 (1/2) 1.対象の請求先アカウント を選択 2.「アカウント管理」をク リック 3.作成したプロジェクト名 が 表示されることを確認 4 / 10
12. Who?
13. Speaker 領域や製品を横断した技術知見が武器！ 安全なデータと生成AIの利活用を 推進して次世代のマーケティング活動に対応した事業成長を支援します • • • • 新卒 2007年 【帝国ホテル】レストラン部に従事。10か条のおもてなしと10%のサービス料のウェイトレス従事 【SCSK】 初IT転職。みずほ銀行国際系DWH-PJ参画し汎用系開発とライブラリ管理。SIer間の調整難 に揉まれ、ある日上司が失踪し管理職に昇格 2010～2014年 【アクティブコア】自社マーケティングASP(現クラウド)製品を開発するITベンチャーにて技術職担当 2015年~現在 【ネクステッジ電通】現電通デジタルに入社。MC(AP) → TX →MC →IBP→AIX 現在に至る 主な業務／プロジェクト実績 福島 ゆかり / Yukari Fukushima AIトランスフォーメーション部門 マネージャー 兼務1) DASC AI イノベーション事業部 マネージャー 兼務2) DASC 統合データ＆プライバシーグループ マネージャー 兼務3) 統合BP 第2事業部 マネージャー • • • • • • • アクション x デ－タ x クラウドの３領域を横断PJに強み アクセス解析/CDP構築/MA/BI/CX/広告/アプリ等複合的な施策マーケティング基盤の提案とPM・開発・分析対応 需要予測の為AI/ML、旧VertexAIによる開発を分析実績。生成AIの登場でGemini,Veoはじめ生成AI案件多数対応。 DJ初のGoogle Cloudパートナーチーム立ち上げ。プレミア格へ昇格させた実績で2024年にはPartner Top Engineer選出 MC領域SOL戦として初めて構想策定フェーズでのコンペに勝利し定額予算化に成功 2023以降生成AIも考慮した商用利用のためのセキュリティ対策やプライバシー対応 社外活動。講演や分科会の他、DEIと技術の両立を目指すML女子部も企業の垣根を越えてオーガナイズ。ぜひご参加下さい！ 資格・講演・受賞歴・メディア掲載等 ▼個人資格 クラウド データ＆AI ＃セキュリティ＆プライバシー ＃タグ/SDK/アクセス解析 コンサル 営業 ＃Google ＃クラウド ＃構想策定 ＃データ分析 ＃AI/Data to アクション ＃コミュニティ構築と運営 ＃広告・CX・MA・BI・AI/ML ＃生成AI ＃統合マーケ基盤 ＃人材育成・セミナー・勉強会 ▼登壇/掲載 ▼会社・チーム Google Developer Expert [AI/ML] , [Data Analytics] 2022~前 Google Cloud Partner Top Engineer2024 2023 Google Cloud/Google Marketing Professional Data Engineer Professional Cloud Architect ,他 DataとAIの２タイトル (国内GDE 全62名) プレミアパート ナー昇格認定 (2022) スペシャライ ゼーション取得 (2023) 2024-2025
14. GoogleのGoogle I/O と Google Cloudを横断・組合わせ Google I/O 14
15. 初心者歓迎 ハンズオン講座 本日作るハイブリッドAIアプリ図解 AIレディデータ × バイブコーディングで作る！ MBTI ＆ 手相ハイブリッド 占いアプリ開発ワークショップ プログラミングの暗記は一切不要！ 「データを整える力（AIレディデータ）」と「AIとの対話（Vibe Coding ）」で、 本格的なマルチモーダルAIアプリをゼロから構築しよう！ MBTI 16タイプ 診断 Gemini手相画像 解析 Google Antigravity JSON構造化デー タ MBTIデータ (16タイプJSON) 内面の性格・才能 × 手のひら写真 (Gemini Vision) 生命線・知能線・感情 線 AIレディデータ（JSON）× Vibe Coding Google Antigravity + Gemini 2.5 Flash ハイブリッド占いWebアプリ完成！ ・予測寿命（バイタリティ換算） 88歳 ・性格＆隠れた才能・開運アドバイス
16. What?
18. ① イントロダクション 今必要なAI人材とは？ 〜暗記する人から、データを整え導く人へ〜 これまでの開発者（プログラミング暗記型） ・PythonやJavaScriptの細かい文法・構文を丸暗記 ・エラーが出るたびに何時間も検索して手作業で修正 ・1つの画面を作るだけでも膨大なコード記述が必要 これからのAI人材（データ設計 × 対話ディレクション 型） ・自分がやりたい企画・アイデアを言語化できる ・AIが読み取りやすい「AIレディデータ（JSON等）」を 整える ・AIエージェントと対話してアプリ構築を指揮（ディレクシ ョン）する 【図解】従来の開発 vs これからのAI人材 従来：人間がすべて手作業でコーディング 人間 バグ発生 完成 文法を暗記 構文エラーで 数週間〜 1行ずつ手打ち 何時間も停止 数ヶ月 これから：データを整え、AIを導くディレクターへ あなた AIエージェン ト わずか (AIレディ化) コード自動生成 数十分！ ② 日本語で指示 エラーも自動修正 ① データを整える 」 最重要キーワード：「AIレディデータ（AI-Ready Data） 完成 高速実装！ AIが迷わず正確に処理できるように、ルールや項目を整理整頓し たデータのこと！これさえあればAIは100倍賢く動きます。 2 / 10
19. ② 開発スタイル バイブコーディング（Vibe Coding）とは？ ノリ・雰囲気（Vibe）を伝えてアプリを作る！ AI研究者 Andrej Karpathy 氏が提唱した新しい開発スタイル 。 人間はコードを1行も書かず、「こんな機能・デザインにしたい 」と自然言語でAIと対話するだけでソフトウェアを完成させま す。 1. やりたいことを日本語で伝える 「MBTIと手相写真を組み合わせて占うWebアプリを作って ！」 【図解】人間とAIの吹き出し対話からアプリが生まれる！ 「MBTIデータと手のひら写真を読み込んで、 あなた 寿命や才能を楽しく診断するアプリを作って！」 「了解しました！JSONデータを読み込み、 Gemini連携とWeb画面(app.py)を自動生成します 」 AI 「いい感じ！さらに『金運スコア』も追加して！」 2. AIがコードを全自動生成・実行 あなた 裏側のPython処理も画面デザインもAIが一瞬で組み立てる 3. 動く画面を見て追加オーダー 「もっとポップな色にして！」「金運スコアも追加して！」 で即改修 リアルタイムでWebアプリが誕生＆進化！ [MBTI選択: ENFP] ＋ [手相写真アップロード] ➔ 【診断結果＆ 金運★5】 ※ 人間が書いたプログラムコード：0行！ 3 / 10
20. ③ 開発ツール Google Antigravity とは？ 〜自律型AIエージェント開発環境〜 Geminiを搭載した次世代AIエージェントIDE 単なる「コード補完ツール」ではありません！ あなたの指示を受け取ると、AIエージェントが自ら計画を立て 、複数ファイルの作成からコマンド実行まで自律的にこなしま す。 【図解】Antigravityが複数ファイルを自動構築する仕組み Google Antigravity (Gemini Agent) 「指示を理解 ➔ タスク分解 ➔ ファイル生成 ➔ 起動」を 全自動実行！ ① 企画・タスク設計（Planning） 必要なファイル構成や手順をAIが自分で考えてリストアップ mbti_master.json ② 複数ファイルの自動生成・編集 データファイル(JSON)もアプリ本体(app.py)も一括で作成・ 修正 ③ ターミナルコマンド実行・検証 ライブラリのインストールやサーバー起動までAIが自動で実行 【AIレディデータ】 16タイプの性格・ 才能・バイタリティ マスターデータ app.py 【Webアプリ本体】 Streamlit UI画面 ＆ Gemini画像解析 ハイブリッド処理 Terminal実行 【自動コマンド】 pip install ... streamlit run app.py エラーも自動検知 あなたはチャット欄にプロンプトを貼るだけ！ フォルダ内のファイル作成からブラウザ起動まで全自動で完了しま す 4 / 10
21. Experience liftoff with the nextgeneration IDE
22. AI駆動開発とは • AIを活用して、ソフトウェア開発のラ イフサイクル全体（設計、コーディン グ、テスト、デプロイ、運用）を効率 化、自動化、高度化するアプローチ • 開発者の生産性向上、品質の向上、開 発期間の短縮、そして新たな価値創造 を加速させることを目的としています 。
24. Google Antigravity is an agentic development platform that empowers developers to act as architects, orchestrating autonomous agents that plan and execute complex tasks across the editor, terminal, and browser. IDE & Code Terminal & Operations Browser & Preview High-level orchestration in familiar interface Autonomous building, testing, fixing End-to-end execution & verification Gemini Native Foundation Gemini 3 Pro Reasoning Gemini 2.5 Computer Use
25. What is Google Antigravity Antigravity is Google’s AI agentfirst development application • エージェント開発プラットフォーム • エージェントファーストビュー • エージェントのフリートを編成可能 • コーディングではなくワークフローベース • ワークフロー、エディター、ターミナル、ブラウザ間 のシームレスな統合 • 同期（エディター）および非同期（マネージャー）ワ ークフローとハンドオフをサポート • VS Code 上に構築
26. Google Antigravity: Key Features Agent Powered Coding • • Cross-surface Agents エージェントは複雑なタスクを計 画、実行、検証します。 エージェントは並行して作業でき るため、コーディングが非常に高 速になります。 • Built-In Test Automation • • ビルトインブラウザでアプリケー ションのテストを自動的に実行し ます。 ブラウザからのフィードバックを 使用してバグを自動修正します。 エディタ、ターミナル、ブラウザ にわたる同期されたエージェント 制御により、強力な開発ワークフ ローを実現。 Full user control • • エージェントは、ユーザーがレビューし 承認するための構造化された計画を生成 します。 ユーザーは、エージェントの作業を改善 するために、サーフェスや成果物全体で エージェントにフィードバックを提供で きます。
27. What is Google Antigravity Antigravity is Google’s AI agentfirst development application • エージェント開発プラットフォーム • エージェントファーストビュー • エージェントのフリートを編成可能 • コーディングではなくワークフローベース • ワークフロー、エディター、ターミナル、ブラウザ間 のシームレスな統合 • 同期（エディター）および非同期（マネージャー）ワ ークフローとハンドオフをサポート • VS Code 上に構築
28. EXTERNAL Google Antigravity Features & Capabilities • すべてのワークスペースで並行して動作する非同期の ローカルエージェント。 • エージェントは、計画アーティファクトと検証プロセ スを活用して、品質と機能的な結果を保証します。 • プランニングモード、会話 UI、およびアーティファク トレビューを中心に構築された、エージェント優先の エクスペリエンスのための新しい Agent Manager ビュ ー。 • マネージャー、ブラウザ、エディタを備えたマルチウ ィンドウ製品 • ブラウザで Web をブラウズして、ダッシュボードの 読み取り、SCM アクション、UI テストなどの開発タス クを達成できるエージェント。
29. EXTERNAL Google Antigravity Core Surfaces • Agent Manager - 会話と成果物に焦点を当てたミニ マルなプロダクトで、タスクの開始と閲覧を行うた めのオーケストレーションの『ノーコード』ビュー • Editor - コードベースの表示、編集、作業を行うため の（VSCode上に構築された）『コードビュー』IDEエ クスペリエンス • Browser - IDEを超えたより多くのサーフェスを読み 取り、作動させるためのブラウザ使用エージェント 機能 • Terminal - エージェントの会話から、単一のコマン ドや長時間実行されるターミナルセッションを開始 できます
30. EXTERNAL Google Antigravity Common use cases • エンドツーエンドのソフトウェア開発 – 複雑なエンタープライズのリファクタリングやバックグラウンド のバグ修正から、新規の0→90%の機能のドラフト作成まで、主要なエンジニアリングタスクを加速します 。 • 品質保証とテスト – 自己検証型の単体テストの生成を自動化し、さまざまな画面寸法でのモバイルUIを検 証し、CIエラーを非同期で解決します。 • UI/UXデザインとプロトタイピング – PRD、Figmaデザイン、または既存のアプリケーションのスクリーン ショットを機能的で反復的なフロントエンドコードに直接迅速に変換します。 • 研究とデータ分析 – 並行エージェントをデプロイして、SREレポートのためのWeb情報を集約したり、デー タサイエンスの視覚化を生成したり、アーキテクチャ図を作成したりします。 • 非同期タスクの自動化 – 受信トレイのタスクのクリアやグローバルな成果物の監視など、反復的な低コン テキストの作業を、主要なワークフローを中断することなくオフロードします。
31. Try!
32. ④ 全体設計 本日のワークショップ全体像（ハイブリッド占いデータパイプライン） ゴール：「仕様① MBTI診断」＋「仕様② 手のひら写真のAI手相解析」＝「仕様③ 寿命・性格・才能・運勢プロフィー ル出力」 【仕様①】MBTI 16タイプ診断 （静的な構造化マスターデータ） mbti_master.json ・基本性格、強み・弱み ハイブリッド合成エンジン （app.py 内部ロジック） ① 2つのJSONデータを結合！ MBTIのJSON ＋ 手相解析JSON 【仕様③】総合運勢プロフィール出 力 予測寿命（バイタリティ換算） 例：88歳（エネルギー満タン！） ・ベース生命力（base_vitality） ・隠れた才能、ラッキーアクション ② 寿命（バイタリティ）算出式 ベース生命力 ＋ (生命線スコア×係数 ) MBTI気質 × 知能線・感情線の融合 ＝ 予測健康寿命（例：88歳） 隠れた才能・適職アドバイス 【仕様②】手のひら写真のAI手相解析 （非構造化データのリアルタイム構造化 ） 手相写真 ➔ Gemini Vision解析 ・生命線スコア（1〜10点） ・知能線・感情線の特徴テキスト 性格＆思考タイプ分析 あなただけの強みと開花ポイント ③ Geminiで総合鑑定コメント生成 「ENFPの創造性 × 知能線の長さ」 総合運勢・開運アクション を掛け合わせた唯一無二の診断！ 今日から実践できるラッキー行動 裏側のAIレディデータ表示 変換されたJSONデータを画面で確認 ・手相から読み解く強みJSONへ変換！ 5 / 10
33. Step 0 準備 Google Cloud（Vertex AI API有効化）とAntigravity認証セットア ップ 手順① Google Cloud プロジェクト確認＆Vertex AI API有効 化 【図解】なぜこのコマンドが必要なの？（認証の仕組み） ・Google Cloud コンソールで対象プロジェクトを選択 ・「Vertex AI API」を検索して【有効にする】をクリック！ Google Cloud あなたのPC (Antigravity) (Vertex AI API) ADC認証 手順② ターミナルでADC（アプリケーションのデフォルト認証）を実 行 作っている占いアプリ ・Antigravity内のターミナル（またはコマンドプロンプト）を開く (app.py) 通行証を発行 最新モデル Gemini 2.5 Flash ・下記の認証コマンドを実行し、ブラウザでGoogleアカウントにログ イン！ 手順③ 作業用フォルダを開いて準備完了！ ・Antigravityで空の作業フォルダ（例：`fortune_app`）を開 く ・これでアプリからGemini APIを安全に呼び出す準備が整いま した！ ターミナルに入力する認証コマンド（コピペ用） $ gcloud auth application-default login $ gcloud config set project [あなたのプロジェクトID] 初心者向けポイント：APIキーの直書き不要で安全！ 通常はプログラムの中に秘密のパスワード（APIキー）を書く必 要がありますが、`gcloud auth application-default login` を1回実行しておけば、PC内に安全な「デジタル通行証」が保存 されます。 これにより、コードを公開してもパスワード漏洩の心配がありま せん！ 6 / 10
34. Step 1 データ生成 MBTIの「AIレディデータ（mbti_master.json）」を自動生成しよう Step 1 のゴール：土台となるマスターデータをAIに作らせる！ 16タイプすべての性格やベース生命力を人間が手入力するのは大変で す。 Antigravityに「プロンプト①」を投げて、綺麗なJSONを一瞬で作ら せましょう！ 【図解】生成される AIレディデータ（mbti_master.json）の 構造 { "ENFP": { "name": "広報運動家タイプ", Antigravityに送る【プロンプト①】 "base_vitality": 80, "personality": "好奇心旺盛でエネルギッシュな自由人", "hidden_talent": "ゼロから企画を生み出すイノベーター", 「MBTIの全16タイプ（INTJ, INTP, ENTJ, ENTP, INFJ, INFP, ENFJ, ENFP, ISTJ, ISFJ, ESTJ, ESFJ, ISTP, ISFP, ESTP, ESFP ）の占いマスターデータを構造化した `mbti_master.json` を作成 してください。 "lucky_action": "行ったことのないカフェでアイデア出し" }, "INTJ": { 各タイプには以下のキーを含めてください： "name": "建築家タイプ", - name (日本語のタイプ名) "base_vitality": 76, ... - base_vitality (ベース生命力: 70〜85の数値) - personality (基本性格の特徴) } } - hidden_talent (隠れた才能・適職) - lucky_action (開運アクション)」 確認ポイント：フォルダ内に `mbti_master.json` が生成され たら開いてみよう！ すべての項目名（キー）とデータ型（数値・文字列）が揃った「AIレ ディデータ」になっています。 数値データ化がカギ！ キー名が統一されている！ "base_vitality": 80 personality / hidden_talent 数値になっているから、後で手 相スコアと足し算できる！ 16タイプ全て同じ構造だからプ ログラムが迷わない！ 7 / 10
35. Step 2 アプリ構築 手のひら写真をJSONに変換してWebアプリ（app.py）を構築・起動し よう Antigravityに送る【プロンプト②】 「StreamlitとVertex AI (`google-genai` SDK / `gemini-2.5flash`) を使い、MBTIと手相写真のハイブリッド占いアプリ `app.py` を 作成して起動してください。 【図解】手のひら写真が「AIレディデータ」に変わる瞬間！ 手のひら写真 Gemini 手相JSON (非構造化データ) Vision解析 (AIレディ化!) 1. `mbti_master.json` を読み込み、16タイプを選択できる そのままでは 線を読み取り 生命線: 9点 2. 手のひら写真をアップロードすると、Geminiで手相（生命線・知能線・ 感情線）を解析し、各スコア(1〜10の数値)と特徴をJSON形式で抽出する 計算できない スコア数値化 知能線: 8点 【機能要件】 3. ベース生命力＋手相スコアから『予測寿命（バイタリティ換算）』を算出 し、性格・才能・運勢プロフィールを華やかに表示する 4. 画面下部に『 裏側のAIレディデータを見る』トグル（expander）を 設置し、抽出された手相JSONとMBTIデータを表示する」 Webアプリ画面（app.py）プレビュー あなたの予測バイタリティ寿命：89歳 ｜ 隠れた才能：直感クリエイ ター ▼ 最重要チェック体験：「裏側のAIレディデータを見る」トグルを 開こう！ 裏側のAIレディデータを見る（クリックで展開！） { "selected_mbti": "ENFP (base_vitality: 80)", ・ただの「手のひら写真（画像）」が、Geminiによって "palm_analysis_json": { `{"life_line_score": 9, "head_line_score": 8, ...}` という綺 麗なJSONデータ（数値）に変換されている瞬間を目撃しよう！ "life_line_score": 9, "head_line_score": 8, "heart_line_score": 9, "palm_feature": "生命線が深く張り出し、エネルギッシュな手相" ・写真が数値化されたからこそ、MBTIデータと合算して寿命計算が できるのです！ }, "calculated_lifespan": 89 } 8 / 10
36. Step 3 カスタマイズ バイブコーディングでUI変更や「金運スコア」を自由に追加しよう Step 3 のゴール：対話だけでアプリを自分好みに進化させ る！ アプリが動いたら、ここからがバイブコーディングの真骨頂です 。 自分の言葉で「デザイン変更」や「新しいデータ項目」を追加し てみましょう！ カスタム例①：データ項目に「金運スコア」を追加する 「手相のJSON解析項目に『財運線（money_luck_score: 1〜10） 』を追加し、MBTIの特徴と掛け合わせた【金運スコア＆金運アップ アドバイス】を画面に表示して！」 カスタム例②：UIデザインをテーマ変更する 「画面全体を明るくポップなパステルカラーのカードデザインに変更 して、診断結果が出たときに風船エフェクト（st.balloons）を飛ばし て！」 カスタム例③：相性診断やラッキーカラーを追加する 「診断結果の最後に『相性の良いMBTIベスト3』と『今週のラッキー カラー』のバッジを追加して！」 【図解】バイブコーディングによるアプリの高速進化！ Before（初期バージョンのアプリ） ・シンプルな白黒画面 ・基本の3項目（寿命・性格・才能）のみ表示 「金運スコアと風船エフェクトを追加して！」 After（わずか30秒でアップデート完了！） 金運スコア：★9 / 10 華やかUI＆演出 財運線がくっきり！ パステルカード化＆ 自己投資で大吉 風船アニメーション！ 裏側のJSONにも `"money_luck_score": 9` が自動で追加さ れます！ 「データの項目を増やす ➔ 画面が進化する」感覚を味わおう！ 9 / 10
37. ⑤ まとめ なぜ「データ整備（AIレディデータ）」が必要なのか？ 結論：写真やメモなどの「非構造化データ」も、Geminiで「JSON（AIレディデータ）」に整えれば、 バイブコーディングでどんな業務アプリも一瞬で作れるようになる！ 本日のワークショップで体験したこと 1. MBTIの知識を `mbti_master.json` に構造化した 2. 手のひら写真をGeminiで数値・JSONデータに変換した 3. データが整っているから、バイブコーディングで計算も画 面表示も迷わず一瞬で実装できた！ 【図解】非構造化データがJSONブロックになりアプリに組み込まれる！ バラバラな情報 AIレディデータ (非構造化データ) (綺麗なJSONブロッ ク) 業務アプリ (Vibe Coding) スマホの写真 手書きメモ PDF書類・日報 チャット履歴 明日からの仕事・業務への応用アイデア ・名刺や領収書の写真 ➔ JSON化 ➔ 経費・顧客管理アプリ Geminiで変換！ 分析画面 { 診断ツール "id": 101, "score": 95, 自動化シス テム "tags": [...] が一瞬で完成！ } ・会議メモや日報テキスト ➔ JSON化 ➔ タスク進捗ダッシ ュボード ・商品カタログやマニュアル ➔ JSON化 ➔ 自動提案AIアプ リ ！ すべて今日の「手相アプリ」と全く同じ仕組みで作れます ご参加ありがとうございました！ 「データを整え、AIと対話して創る」新しい開発体験をぜひ現場でも試し てみてください！ 10 / 10
38. Complete!
39. アプリ完成① スマホで撮った 自分の写真を アップロード
40. アプリ完成② 解析元となった非構造化データ(MBTI)+構造化データ(手相)の中身も見れる ※注意※動画です↑
41. おつかれさまでした
42. Thank you. Proprietary + Confidential