GSP1383

概要

このラボでは、Google AI Studio でショッピング エージェントのプロトタイプを迅速に作成します。あなたは、小売企業 CymbalMart のために、お客様がイベントを計画してショッピング リストを作成するのに役立つパーティー プランナー ショッピング エージェントを作成します。このハンズオン エクスペリエンスを通じて、クリティカル ユーザー ジャーニー（CUJ）を機能的なエージェントに変換し、バイブ コーディングと自然言語プロンプトを使用してその機能を強化し、さまざまなシナリオで検証する方法を学びます。

クリティカル ユーザー ジャーニー（CUJ）は、お客様が特定の目標を達成するために行う主要なステップとインタラクションの詳細なマップです。お客様のエクスペリエンスに不可欠な意思決定ポイントと成果を把握します。

より詳しいコンテキストについては、関連するコース「エージェント戦略: 調査、設計、プロトタイプ」の受講をご検討ください。

学習内容

このラボでは、次のタスクの実行方法について学びます。

• クリティカル ユーザー ジャーニー（CUJ）からショッピング エージェントを作成する。
• バイブ コーディングと自然言語プロンプトを使用して、エージェントの機能を強化し、イテレーションを行う。
• さまざまなシナリオでエージェントの動作をテストして検証する。

設定と要件

[ラボを開始] ボタンをクリックする前に

こちらの説明をお読みください。ラボには時間制限があり、一時停止することはできません。タイマーは、Google Cloud のリソースを利用できる時間を示しており、[ラボを開始] をクリックするとスタートします。

このハンズオンラボでは、シミュレーションやデモ環境ではなく実際のクラウド環境を使って、ラボのアクティビティを行います。そのため、ラボの受講中に Google Cloud にログインおよびアクセスするための、新しい一時的な認証情報が提供されます。

このラボを完了するためには、下記が必要です。

• 標準的なインターネット ブラウザ（Chrome を推奨）

注: このラボの実行には、シークレット モード（推奨）またはシークレット ブラウジング ウィンドウを使用してください。これにより、個人アカウントと受講者アカウント間の競合を防ぎ、個人アカウントに追加料金が発生しないようにすることができます。

• ラボを完了するための時間（開始後は一時停止できません）

注: このラボでは、受講者アカウントのみを使用してください。別の Google Cloud アカウントを使用すると、そのアカウントに料金が発生する可能性があります。

Google AI Studio を開く

1. [ラボを開始] をクリックします。ラボパネルにこのラボ用の一時的な認証情報が表示されます。

   • 注: 有料のラボの場合は、お支払い方法を選択するよう求められます。

2. シークレット ウィンドウで Google AI Studio を開きます。Google ログインページが表示されます。

   • ヒント: ラボと AI Studio のタブをそれぞれ別のウィンドウで開いて並べて表示しておくと、操作が簡単です。

3. 以下のユーザー名をコピーして [Email] 欄に貼り付け、[Next] をクリックします。

   {{{user_0.username | "Username"}}}

4. 以下のパスワードをコピーして [Enter your password] 欄に貼り付け、[Next] をクリックします。

   {{{user_0.password | "Password"}}}

5. 画面に表示される利用規約に同意して続行します。

これで、一時的な受講者用アカウントを使用して Google AI Studio にログインできます。

タスク 1. クリティカル ユーザー ジャーニー（CUJ）からショッピング エージェントを作成する

このタスクでは、CymbalMart のお客様がパーティーを計画し、ショッピング リストを作成するのに役立つ、定義された CUJ に基づくパーティー プランナー ショッピング エージェントを作成します。

1. [始める] ボタンをクリックし、利用規約に同意します。

2. 左側のナビゲーション メニューで [Build] をクリックします。

   ドライブへのアクセスを有効にするには、「Add files」アイコン（+）で [Drive] をクリックし、受講者用アカウント（例: [student-username]）を選択して、必要な権限を付与します。

3. [Build your ideas with Gemini] の下にあるメインのテキスト プロンプト バーに次のプロンプトを貼り付けて、パーティー プランナー ショッピング エージェントを作成します。

パーティー プランナー ショッピング エージェントを作成して。

4. [Build] をクリックし、Google AI Studio でエージェントが生成されるのを待ちます。

5. エージェントを確認し、サンプルデータでテストします。エージェントは期待どおりの動作をしていますか？

6. 「Gemini との会話」パネルで、次の CUJ プロンプトを貼り付けてから、[Send prompt] をクリックして、クリティカル ユーザー ジャーニーを定義します。

次のクリティカル ユーザー ジャーニー（CUJ）に基づいて、CymbalMart のパーティー プランナー ショッピング エージェントを作成して。 ユーザー: イベントの計画を必要とする多忙な主催者。 目標: インテントを、厳選された予算に配慮したショッピング リストに変換する。 タスク: イベントの定義: パーティーの種類、テーマ、予算、ゲストの人数、特別なリクエストを定義する。 リストの確認: 合計予算に合わせてアイテムを調整する。 調整と購入手続き: 制約に合わせて調整し、計画を確定する。 注: クリティカル ユーザー ジャーニー（CUJ）とは、お客様が特定の目標を達成するために行う主要なステップを構造化して記述したものです。これには、ユーザー（誰が）、目標（何を）、タスク（どのように）の 3 つの主要コンポーネントが含まれます。

7. 「Gemini との会話」パネルで、生成されたエージェント仕様を確認し、CUJ と一致していることを確認します。

8. [Preview] ペインで、パーティーの詳細のサンプルを使用してエージェントをテストします。

注: エージェントは AI 生成コンテンツを使用するため、出力は異なる場合があります。

• パーティーの種類: 「誕生日」
• ゲストの人数: 「20」
• 日付: 「来週の土曜日」
• テーマ: 「トロピカル」

9. エージェントで、CUJ に沿った関連性の高いショッピング リストが生成されることを確認します。

10. アプリケーションの名前を変更します。アプリ名の横にある鉛筆アイコンをクリックし、アプリ名を「CymbalMart ショッピング エージェント」に変更して、[Save] をクリックします。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 作成されたショッピング エージェントを確認する。

タスク 2. バイブ コーディングを使用してエージェントの機能を強化する

このタスクでは、バイブ コーディングを使用して、カスタム機能と改善されたユーザー エクスペリエンスでパーティー プランナー ショッピング エージェントを強化します。

1. 生成されたコードを確認します。[コード] タブで App.tsx などのファイルをクリックすると、メインのアプリケーション コードが表示され、UI 要素の構造を確認できます。

2. エージェントの機能を強化します。「Gemini との会話」パネルで、次のコマンドを貼り付けて、エージェント UI に chatbot を追加します。

CymbalMart アシスタントという chatbot を追加して、顧客とやり取りできるようにして。 注: エージェントにすでに chatbot が含まれている場合は、代わりに別の機能を追加してみてください。

3. [Send prompt] をクリックします。アプリケーションのスタイルとレイアウトが変更されるのを確認します。

4. 機能の強化を継続します。Gemini パネルで、次のコマンドを入力します。

お客様がショッピング リストを更新し、予算の合計を自動的に再計算できるようにして。 注: この機能に満足したら、別の機能を追加するか、この機能をさらに改良してみてください。

5. [Send prompt] をクリックし、UI に新しい機能が追加されるのを確認します。

6. [Preview] ペインで新機能をテストします。

タスク 3. エージェントをテストして完成させる

さまざまなシナリオでパーティー プランナー ショッピング エージェントをテストし、堅牢な機能を確保するために最終的な強化を加えます。

1. [Preview] ペインで、次のシナリオを使用してエージェントをテストします。

   シナリオ 1 - 子どもの誕生日パーティー:

   • パーティーの種類: 「子どもの誕生日パーティー」
   • ゲストの人数: 「15」
   • テーマ: 「スーパーヒーロー」
   • ショッピング リストに、年齢に適した商品と数量が含まれていることを確認する。

   シナリオ 2 - 企業のチームイベント:

   • パーティーの種類: 「企業のチーム ビルディング イベント」
   • ゲストの人数: 「50」
   • テーマ: 「プロフェッショナル」
   • 企業に適したアイテムと現実的な予算見積もりがリストに含まれていることを確認する。

   シナリオ 3 - 屋外での結婚式:

   • パーティーの種類: 「ウェディング パーティー」
   • ゲストの人数: 「100」
   • テーマ: 「ガーデン / アウトドア」
   • 天候保護や屋外席など、屋外に特化したアイテムがエージェントに含まれていることを確認する。

2. Gemini パネルで、必要に応じてエージェントを改良するためのフィードバックを提供する。

3. 最後に、Gemini パネルに次のプロンプトを貼り付けて、音声操作機能を追加します。

音声操作機能を追加して、お客様がハンズフリーでプロセス全体を完了できるようにして。

4. [Send prompt] をクリックし、ポップアップ ウィンドウでマイクへのアクセスを許可します。

5. すべての機能強化が適用されたパーティー プランナー ショッピング エージェントが正しく機能することを確認します。

6. [Back to start] をクリックしてホームページに移動し、左上にある Google AI Studio のロゴをクリックします。

7. 左側のナビゲーション メニューで [Build] をクリックします。

8. [Your apps] > [Created by you] をクリックして、すべての機能強化が適用されたパーティー プランナー ショッピング エージェントを表示します。

省略可: エージェントをデプロイする エージェントを他のユーザーと共有するには: 1. [Publish] をクリックして Google Cloud にデプロイします（Google Cloud プロジェクトが必要です）。 2. [Code] をクリックし、ソースコードをダウンロードして他のプラットフォーム（GitHub、サードパーティのホスティングなど）にデプロイします。

お疲れさまでした

クリティカル ユーザー ジャーニーからパーティー プランナー ショッピング エージェントを作成し、強化しました。具体的には、以下の方法について学習しました。

• クリティカル ユーザー ジャーニー（CUJ）からショッピング エージェントを作成する。
• バイブ コーディングと自然言語プロンプトを使用して、エージェントの機能を強化し、イテレーションを行う。
• さまざまなシナリオでエージェントの動作をテストして検証する。

これで、Google AI Studio で独自の AI エージェントを構築し、イテレーションを行う準備が整いました。

Google Cloud トレーニングと認定資格

Google Cloud トレーニングと認定資格を通して、Google Cloud 技術を最大限に活用できるようになります。必要な技術スキルとベスト プラクティスについて取り扱うクラスでは、学習を継続的に進めることができます。トレーニングは基礎レベルから上級レベルまであり、オンデマンド、ライブ、バーチャル参加など、多忙なスケジュールにも対応できるオプションが用意されています。認定資格を取得することで、Google Cloud テクノロジーに関するスキルと知識を証明できます。

マニュアルの最終更新日: 2026 年 4 月 1 日

ラボの最終テスト日: 2026 年 4 月 1 日

Copyright 2026 Google LLC. All rights reserved. Google および Google のロゴは Google LLC の商標です。その他すべての企業名および商品名はそれぞれ各社の商標または登録商標です。