Claude Media
ClaudeにMobbinを連携する方法 — UI事例の検索を会話で回す
ClaudeClaude連携MCPチュートリアル

ClaudeにMobbinを連携する方法 — UI事例の検索を会話で回す

MobbinのMCPコネクタをClaudeにつなぐ手順です。使えるプラン、3つの検索ツールの使い分け、60回/60秒の制限、事例を根拠にするときの注意をまとめます。

読了目安 約10分

ClaudeとMobbinの連携でできること — UI事例を会話で引く

ClaudeとMobbinの連携は、UIデザインの参照ライブラリMobbinをClaudeにつなぎ、画面・フロー・Webサイトのセクションを自然言語で検索させる仕組みです。MobbinのMCPサーバーは、実在するプロダクトの画面や複数ステップのフローを検索できます。結果には画面画像、アプリ名、フローの文脈、Mobbinのページへのリンクが含まれます。

Connectorsディレクトリでは、開発元Mobbinの「Anthropic verified」表示付きで掲載されています。カテゴリはCreative、Developer tools、Education、Other、Productivityの5つ。追加時期は2026年6月で、サインインは必須です。接続先のURLは https://api.mobbin.com/mcp で、通信方式はStreamable HTTPです。初回の接続ではブラウザが開き、Mobbinへのサインインと許可を求められます。

条件は先に押さえておくと手戻りがありません。

  • Mobbin側のプランはPro、Team、Enterpriseのいずれか。Freeは対象外です
  • 認証はMobbinアカウントでのOAuth。APIキーのコピーは不要です
  • 公開されているツールは読み取り専用で、Mobbinのアカウント内容は作成も変更も削除もされません

コネクタ全般の仕組みはClaudeのコネクタ解説が入口です。同じデザイン系でも、デザインを作る側のCanvaはClaudeとCanvaの連携、デザインファイルからコードを起こす側のFigmaはFigma MCPサーバーの使い方で扱っています。Mobbinは「他社の実例を探す」側で、デザインの作成や編集はせず、調査の段階で使います。

使えるプランと料金

MobbinのMCPは有料プラン向けです。提供元の料金ページ(機械可読版、最終更新は2026年9月11日)にある表示価格は次のとおりです。

プラン四半期払い年払いMCP
Free四半期払い$0年払い$0MCP含まれない
Pro四半期払い月あたり$15($45を3か月ごと)年払い月あたり$10($120を12か月ごと)MCP含まれる
Team四半期払い1人あたり月$24年払い1人あたり月$16MCP含まれる
Enterprise四半期払い要問い合わせ年払い要問い合わせMCP含まれる

Mobbinには月払いがなく、月額表記は四半期払い・年払いの換算額です。ProはメンバーがひとりだけでFlowsとSearch、Deep Searchが含まれます。TeamはProに加えてREST APIや共有コレクションが付きます。購入前は料金ページの最新表示で確かめてください。

このほか、TeamとEnterprise向けに、金融系アプリ65以上を対象にした「Explore Finance+」というアドオンが年払いで月$399と案内されています。Mobbinのコネクタがこのアドオンの対象まで検索できるかは、MCPのページには書かれていません。金融アプリの事例を主に探すなら、契約前にMobbinへ確かめる項目になります。

なお、REST APIはTeam以上でしか使えません。MCPはPro以上で使えるため、MCPだけを使う個人は、Proが対象になります。制限も別で、MCPはユーザーごと、APIはワークスペースごとに60秒あたり60リクエストです。

ClaudeのWebとDesktopで接続する

ClaudeのWebとDesktopでは、ディレクトリから追加するのが最短です。Mobbin側の手順は次の3段階です。

手順

Mobbinコネクタを追加する流れ

  1. 1

    コネクタを開く

    Claudeで「Customize > Connectors > Add > Browse connectors」から「Mobbin」を選びます。コネクタの詳細ページから開いても同じです。

  2. 2

    Connectを押す

    「Connect」を押すとブラウザが開きます。

  3. 3

    Mobbinにサインインして許可する

    Mobbinのアカウントでサインインし、アクセスを許可します。

接続後は、次のような依頼で動作を確かめられます。

Search Mobbin for onboarding screens from banking apps

日本語で頼んでも構いません。結果は、MCP Appsに対応したクライアントではインタラクティブなギャラリーとして表示されます。対応クライアントは、ChatGPT、Claude DesktopとWeb、Codex Appです。

TeamとEnterpriseでは管理者の追加が先

ClaudeのTeamまたはEnterpriseプランでは、組織への追加が先に必要になる場合があります。管理者またはオーナーが「Organization settings > Connectors > Add > All available」から「Mobbin」を選び、「Add to your team」を押します。その後、メンバーが各自のClaudeアカウントからMobbinに接続します。メンバーは、コネクタのページから管理者へ追加を依頼することもできます。

Claude Codeで使う

Claude Codeは、ClaudeのDesktopとWebで追加したコネクタを共有します。先にDesktopとWebで接続しておけば、Claude Codeは自動的にアクセスできます。

CLIだけで登録したいときは、claude mcp add を使います。提供元はこの方法を推奨していませんが、手順は用意されています。

claude mcp add mobbin --scope user \
  --transport http https://api.mobbin.com/mcp

登録後に新しいセッションを開き、/mcp の一覧から mobbin を選んで「Authenticate」を押すと、ブラウザが開きます。Mobbinのアカウントでサインインして許可すれば完了です。書式の詳細はclaude mcp add-jsonの手順にもあります。コーディング作業の中で参照するなら、Claude Codeの全体像も合わせて見ておくと位置づけがつかめます。

3つの検索ツールの使い分け

ツールは search_screens、search_flows、search_sections の3つです。何を知りたいかで選びます。

ツール探す対象向いている問い
search_screens探す対象モバイルとWebの個別の画面向いている問いログイン、ペイウォール、空の状態、ダイアログ、フォーム、ナビゲーション
search_flows探す対象順序のある複数ステップのフロー向いている問いオンボーディング、チェックアウト、本人確認、サブスクリプション、解約
search_sections探す対象Webサイトのセクション向いている問いヒーロー、料金表、お客様の声、ナビゲーション、フッター

迷ったときの基準は、順序が意味を持つかどうかです。ある画面の見せ方だけなら画面検索、画面から画面への流れが論点ならフロー検索、ランディングページの構成ならセクション検索になります。結果が絞られすぎるときは、条件を減らすか、画面・フロー・セクションを別々に検索します。

業務での使いどころ

依頼の例には、次のようなものがあります。

  • 銀行アプリのオンボーディング画面を探す
  • AirbnbとBooking.comのチェックアウトのフローを比べる
  • 四半期払いと年払いを分かりやすく説明しているモバイルのペイウォールを探す
  • 機能比較表が複雑なSaaSの料金セクションを探す
  • 通知許可の事前説明の画面を集めて、繰り返し出るパターンを挙げる
  • 共同作業系のプロダクトの空の状態を探す

頼み方で効くのは、検索の切り口を先に決めてから頼むことです。効きやすい流れは、プラットフォーム・プロダクトの分野・ユーザーの目的・デザイン上の問いを決め、画面・フロー・セクションのどれで探すか選び、複数のプロダクトを見て、プロダクト名とURLを残す、というものです。

この流れは、そのままプロンプトの型にできます。

Mobbinで、モバイルのサブスクリプション解約フローを探してください。
- 対象: 家計簿アプリなど、月額課金の個人向けアプリ
- 件数: 5つ以上のプロダクトを見比べる
- 出力: プロダクト名とMobbinのURLを必ず添える
- 区別: 「画面で見えること」と「あなたの解釈」を分けて書く

チームで共通ルールにするならCLAUDE.mdに書く

デザイン調査を何度も頼むなら、毎回プロンプトに書くより、プロジェクトの CLAUDE.md に置く方が手間がかかりません。Claude Codeで使う場合の断片の一例です。

## UI事例の調べ方(Mobbin)
- 調査はMobbinのコネクタ(search_screens / search_flows / search_sections)を使う
- 1つの事例だけで結論を出さず、複数のプロダクトを見比べる
- 重要な参照には、プロダクト名とMobbinのURLを残す
- 「見えた事実」と「解釈・提案」を分けて書く
- 事例のデザイン・文言・素材をそのまま流用する案は出さない

事例を根拠にするときの注意

Mobbinの事例は、デザイン判断の材料にはなりますが、判断の根拠そのものにはなりません。事例の扱いには次の限界があります。

  • Mobbinにある事例は、そのプロダクトがそのデザインを使ったことを示すだけで、コンバージョンなどの指標が良くなった証拠にはならない
  • 繰り返し出るパターンは慣習であって、ベストプラクティスとは限らない
  • 時期が重要なときは、キャプチャのメタデータを確かめる
  • 保護されたデザイン、ブランド、文言、素材をそのまま複製しない
  • アクセシビリティは別に評価する

見つけた事例は、そのまま採用する前に、自社のブランド、想定ユーザー、デザインシステム、アクセシビリティの要件、プロダクトの制約に合わせて調整する前提で読みます。

たとえば「このペイウォールが多くのアプリで使われている」という結果から「だからこれが最適だ」とは言えません。Claudeに頼むときも、「効果が高いパターンを教えて」ではなく「どのようなパターンが繰り返し使われているか」と聞く方が、事実と解釈を分けやすくなります。

制限とトラブルの切り分け

利用上の制限は、MCPではユーザーごとに60秒あたり60リクエストです。超えるとHTTPステータス 429 Too Many Requests が返り、Retry-After ヘッダーに待つべき秒数が入ります。再試行が続けて失敗するときは、待ち時間を指数関数的に延ばし、揺らぎを加えます。

症状対処
認可に失敗する対処Mobbinを再接続し、OAuthのサインインをやり直す
429が返る対処Retry-After の秒数だけ待ってから再試行する
結果が少ない・弱い対処プラットフォーム、分野、目的、パターンやフローを具体的に指定する
結果が絞られすぎる対処余計な条件を外すか、画面・フロー・セクションを別々に検索する

一度に大量の事例を集めさせると、制限に当たることがあります。1回の依頼で見比べる範囲を絞り、必要なら分けて頼むのが無難です。

接続を解除するには

接続を外したいときは、Mobbinのアカウント設定のMCPページを開きます。「Connected」の一覧から対象のクライアントの「...」メニューで「Revoke access」を選ぶと、そのクライアントのアクセスは即座に失われます。再接続はいつでも、MCPクライアント側から認可し直せます。

Claude側のコネクタを外す操作とは別なので、Mobbin側の認可も外したいときは両方で操作します。

この記事を共有:XはてブLinkedIn

関連する記事

Claude をもっと見る →