MCP Appsでユーザーに商品を選んでもらう体験を考えてみた
はじめに
私たちリテールアプリ共創部ではMCP Appsについて継続的に調査しています。
これまでの記事は技術・実装寄りの検証が中心で「ユーザーが商品を買いたいと思えるか」という話は、まだあまり語られていません。
今回はMCP Appsを使って服とコスメを提案するECショップを自作して、ユーザー視点で検証し観点を書き記してみました。
Anthropicが考えるMCP Appsの体験とは
Anthropicは、MCP Appsを「チャット内のUX摩擦を解消する仕組み」として設計しています。
公式ブログには、こう書かれています。
"MCP Apps closes this gap. The model stays in the loop, seeing what users do and responding accordingly, but the UI handles what text can't: live updates, native media viewers, persistent states, and direct manipulation."
MCP Appsはそのギャップ（チャット内のUX摩擦）を解消します。モデルはユーザーの行動を見ながら会話を続け、テキストで伝えられないことはUIが表現します。リアルタイムの更新、画像や動画の表示、状態の保持、ユーザーが直接触れる操作です。
従来のMCPはテキストと構造化データのやり取りのみで「商品画像を見せたい」「複数の選択肢を並べて選ばせたい」といった場面ではユーザーを外部アプリに誘導するしかありませんでした。
MCP Appsはそのコンテキストスイッチをなくし、Claudeのチャット内で完結させることを目指しています。
テキストでは届かないUI体験を、チャット内に持ち込むことが目的です。
何を作ったか
チャットで話すように服を選べるECショップを作りました。
| ツール | 内容 |
|---|---|
| 商品の検索・絞り込み | キーワード・カテゴリ・骨格診断・MBTIなどのタグで絞り込めます |
| 全商品の一覧表示 | ファッション8点・コスメ8点、全16商品をカード形式で表示します |
| 商品詳細の確認 | 商品名・価格・ブランド・タグの詳細を確認できます |
| 天気予報の取得 | 日付と都市を指定すると気温・降水確率を取得します |
| シチュエーションからの提案 | 骨格診断・MBTI・天気をもとにおすすめ商品を提案します |
上記5つをMCPツールとして実装し、会話の流れに応じてClaudeが使い分けます。
特にこだわったのが、商品データに持たせる「文脈」の設計です。
MCPは「ツールを呼び出す仕組み」は提供してくれますが、何を文脈として渡すかは開発者が決めるしかありません。
「服を探しています」というひと言だけでは、Claudeは候補を出せても、ユーザーが納得できる理由を返せません。
どんな情報があれば、ユーザーが「これが自分に合っている」と感じられるか。そこを考えるところから始めました。
なぜMBTIと骨格診断をタグにしたか
日本人の生成AI利用目的の1位は「情報収集・調べもの」です（NRC調査、2025年）。
AIに「服を選んでもらう」という体験はまだ一般的ではありません。
一方で、Z世代の41.3%がMBTIを診断済みで、30〜40代の倍以上の実施率です（MERY Z世代研究所調査）。
骨格診断・パーソナルカラー診断も、若年層女性を中心にブームが続いています。
ユーザーはまだAIに服を選んでもらうことには慣れていないかもしれないけれど、自分のMBTIや骨格タイプはすでにClaudeに話したことがあり、メモリに保存されている可能性があります。
ならば「その情報をAIに渡す文脈」として設計できるのではないかと考えました。
骨格診断・パーソナルカラー・MBTIを商品タグとして持たせたのはそのためです。
「何着て行こうかな？」という一言から、Claudeがメモリの骨格タイプやMBTIを読み取り、その人に合ったタグ検索に変換される。
そんな体験を目指して設計しました。
「週末にデートがある」と伝えれば、日付から天気を調べ、骨格・パーソナルカラーに合った服を提案できます。
実際の会話の流れ
「MCP Appsのお店の服で、今週末のカジュアルコーデを提案して」と投げかけてみました。
ClaudeはまずOpen-Meteoの天気APIを呼び出し（get_weather）、今週末の天気を確認してからrecommend_productsを実行しました。
チャット内に商品カードが表示され、天気情報（最高16℃・降水確率53%）をもとに羽織りアイテムを含むコーデを提案してくれました。
 |
 |
|---|
「ブルベにおすすめのコスメある？」という質問では、search_productsがcategory: cosmetics, tags: ["ブルベ"]で呼ばれ、タグ検索が正しく機能していることも確認できました。
ただし、ツールを呼ぶ前に「常に許可」または「拒否」の確認ダイアログが表示されます。
これはすべてのユーザーに表示されます。「常に許可」を押せば同じセッション内では出なくなりますが、初回は必ず一手間かかります。
内部で何が起きているか
MCP AppsはClaudeがMCPツールを呼び出したとき、チャット内にインタラクティブなUIを表示できる仕組みです。
通常のMCPはテキストや構造化データを返すだけですが、MCP Appsではtext/html;profile=mcp-appというMIMEタイプでHTMLを返すと、Claudeがそのままレンダリングしてくれます。
registerAppToolでツールを定義するとき、_meta.ui.resourceUriにUIのリソースURIを指定します。
これによって「このツールを呼んだらUIを表示する」という紐付けができます。
検証で見えてきたこと
連携しないと使ってもらえない
MCP AppsもChatGPTのZOZO連携も、ユーザーが自分でコネクタを繋がないと使えません。
自作MCPだけでなく、公式の連携サービスでも同じです。
| MCP Apps（自作コネクタ） | ChatGPT ZOZO連携 | |
|---|---|---|
| ユーザーの操作 | URL手動入力 | リストから選ぶ |
| 操作の難しさ | 高い | 低い |
| 前提 | 存在を知っている | 存在を知っている |
| ツール実行時の確認 | 「常に許可」ダイアログあり | 不明 |
操作の手数は違いますが、どちらも「ユーザーが自分から繋ごうとしない限り使えない」点は同じです。
今は意識の高いユーザー、いわゆるアーリーアダプターにしか届かない機能といえます。
今後は認証フローの改善が進むと予想されますが、現時点では企業が導入しても、ユーザーに使ってもらうまでの間にひと手間あります。
現在どんなユーザーが実際に連携しているかは、公開されているデータがなく把握できていません。
おそらく今試しているのは、開発者や情報感度の高いユーザーが中心ではないかと想像しています。
今後の方向性として、2つのシナリオを考えています。
ひとつは、認証フローが改善されて連携の手間がなくなり、シームレスな体験になるケース。
もうひとつは、連携は必須のまま残りつつ、LINEミニアプリのようにユーザーデータが蓄積・活用されていくケースです。
どちらになるにせよ、「まず繋いでもらう」という最初のハードルをどう越えるかが、今の課題だと感じています。
ツール実行の確認ダイアログがユーザーに見える
ツールが呼ばれるとき、Claude.aiは「常に許可」「拒否」の確認ダイアログを表示します。
そこには'category': 'cosmetics', 'tags': ['ブルベ']のような生のJSONパラメータがそのまま表示されます。
これはClaude.aiの仕様で、MCP開発者側からは変えられません。
一般ユーザーにコードのような表示が出ることは、現時点では避けられません。
「常に許可」を押せば同じセッション内では出なくなりますが、初回は必ず表示されます。
自然な発話ではツールが呼ばれない
コネクタを繋いだ状態で「今週末に遊びに行く、着ていく服迷うー」と話しかけてみました。
しかしClaudeはECショップのツールを呼ばず、ウェブ検索でコーデ画像を表示しました。
Claudeがどのツールをどのタイミングで使うかは、Claude.ai側が判断します。
ツールの説明文にどれだけ「必ずこのツールを使ってください」と書いても、自然な日常会話に対してはウェブ検索が優先されることがありました。
開発者がサーバー側から制御できる範囲には、現時点では限界がありそうです。
「MCP Appsで」「このECショップの商品で」とユーザー側から明示すればツールは呼ばれます。
ただし、ユーザーに毎回そういわせるのは難しいと感じています。
まとめ
AIは候補を出せますが、ユーザーが納得して商品を選ぶ体験は設計しないと成立しません。
| 検証テーマ | 結果 |
|---|---|
| MCP Appsでチャット内ECは作れるか | 作れました |
| AIが文脈を読んで提案できるか | できました（骨格・パーソナルカラー・MBTI・天気も解釈してくれた） |
| 体験の文脈はAIが自動で用意するか | しません。開発者が設計する必要があります |
| ツール実行時にコードが表示されるか | されます。開発者には変えられません |
| 自然な発話でツールは呼ばれるか | 呼ばれませんでした。明示しないとウェブ検索が優先されました |
| 一般ユーザーへの導入障壁 | 認証が必要。今はアーリーアダプター向けのフェーズです |
使ってもらうまでの認証の壁も含めて、体験全体を設計することが求められていると感じました。
メモリにユーザーの情報（骨格タイプやパーソナルカラー）が溜まっているほど、提案の精度が上がりそうだと感じています。
また、天気から服を提案してくれる体験は個人的にはとても嬉しいです。
自分がすでに持っている服や購入履歴のデータを渡して「持ってる服に合うものを提案して」という使い方ができると、さらに実用的になりそうだなと感じました。
最後までお読みいただきありがとうございました。
検証環境
| 項目 | 内容 |
|---|---|
| MCPサーバー | TypeScript + Express |
| UI | React + vite-plugin-singlefile |
| 商品データ | ファッション8点、コスメ8点（計16点） |
| 公開方法 | cloudflared tunnel → Claude.aiカスタムコネクタ登録 |
| 検証日 | 2026/04/03 |
