【VibeCodingChallenge#14】画像と音声だけで楽天で買い物検索

はじめに

このVibeCodingChallengeでは、AIだけで開発を行い、AIに何ができて何ができないのか？ を考える記事です。

以前、「カメラで接客をサポートするAIアプリ」の構想を立てていましたが、日本の法律上、顧客の映像を同意なく認識・保存・解析するのは非常に違法の可能性があることに気付きました。
該当のアプリは以下です。
https://zenn.dev/acntechjp/articles/48c2aa27dc5706

ですが、人を撮らなくてもいいのでは？
画像と音声だけで、楽天とかAmazonで買い物の体験を与えられるのでは？と思い始めました。
そこで今回は、「画像 × 音声 × 会話」で構成される、よりプライバシーに配慮した買い物体験Botのミニマル実装 を行いました。

最終成果物

いつものように最終成果物です。
https://youtu.be/J4Ku5Zwfl84

• ユーザーが商品画像を1枚アップロード
• 音声で「こんな感じのバッグがほしい」「色違いはある？」などと話しかける
• Geminiが画像と音声を解析し、適切な楽天市場向け検索キーワードを生成
• 検索キーワードを楽天APIに渡し、商品候補を表示する

視覚的な情報と会話的な入力を使って、買い物をより直感的にする仕組みです。

実装ステップ

今回実装した内容を、ステップごとに採番して振り返ります。

Step 1: UI構成（PC専用）

• 左に画像アップロード、音声認識ボタン
• 右に Gemini の出力結果、楽天APIの検索結果をスクロール表示
• UIは黒ベースで未来的なスタイルを目指す（ClaudeCodeがなかなか理解してくれず、やや妥協）

Step 2: 音声認識（STT）

• Google Speech-to-Text APIを使用し、商品について話している内容を文字に変換

Geminiにより、画像と音声をもとに楽天の検索フレーズを生成

• Google Cloud Vision APIを利用し、画像内容を分析、そのフレーズと音声データのテキストを入力して、「検索キーワードを30文字以内で作って」と楽天の検索キーワードを生成

Step 4: 楽天商品検索APIへの連携

• 生成されたキーワードを即座に楽天APIへ投げて検索
• 商品一覧を右カラムに即時表示
• hits=10、sort=standard（おすすめ順）

今回できなかったこと・課題

Vertex AI の沼

ClaudeCodeが Vertex AI 経由で Gemini をマルチモーダルで正しく呼び出すための構文を理解できず、何度か試行錯誤したが、Limitに到達し、断念しました。
SubAgent などを使って、API層を分担させる工夫があれば、もう少し楽だったかもしれませんので、次回はそうしてみます。

UI調整の難航

本来は横並びUIにすべきだったのですが、ClaudeCode側が縦長レイアウトを繰り返し提案したが、Limitに到達。
結果として、

• デザインの崩れ
• PC上での視認性の低下
• レスポンシブ対応の中途半端さ
  が生じてしまいました。

ClaudeCodeのLimit

コード生成におけるトークン制限・実行リミットに早期到達してしまい、途中でやりきれなくなりました。
やはり、以前より制限が厳しくなってきたような…？気がしますね。

---

💡 今後の改善に向けて

今回の最終目標は、次のような買い物体験の実現でした：

「画像を見ながら」「音声で話しかけながら」対話的に買い物ができるBot

UIも、API連携も、まだ改良の余地が多くあります。特に：

• 商品属性（メンズ/レディース、サイズ、価格帯など）をGeminiで理解した上での検索。
• Geminiの出力をユーザーの言い回しや意図に応じてリアルタイムに再構築
• 複数ステップ会話での状態管理（例：「もっと大きめで」）
  などを次回以降で実装していければと思います。

📝 おわりに

今回は、Gemini 2.5 × Google Speech API × 楽天APIという構成で、画像と音声を組み合わせた買い物体験Botのプロトタイプを実装してみました。
が、さまざまな理由から今回は諦めてしまいました。。。
まだ道半ばですが、引き続きブラッシュアップしていきたいと思います。

毎日平日投稿をしてきましたが、夏休みのため、来週はお休みします。
引き続きよろしくお願いいたします。