Mobbin MCPを試してみた

Mobbin MCPを試してみた

Claude CodeからMobbinの60万件以上のUIスクリーンショットを検索できるMobbin MCPのセットアップ方法と、実際の使用例を紹介します。競合調査や画面パターン分析をAIエージェントと連携して効率的に行う流れをまとめました。
2026.06.05

はじめに

最近Mobbin MCPがリリースされ、Mobbinが収録する60万件以上の実際のプロダクトのスクリーンショットを、AIエージェントから直接検索できるようになりました。

https://mobbin.com/mcp

Mobbin MCPは、モバイルアプリやWebサービスのUIスクリーンショットを大量に収録したMobbinの検索を、Claude CodeなどのAIクライアントから呼び出せるようにするMCPサーバーです。
本記事では、これをClaude Codeにつなぎ、最初のリサーチを行うまでの手順をまとめます。

セットアップ

1. サーバーを登録する

ターミナルを開いて下記コマンドを実行:

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

設定ファイル(~/.claude.json)に直接書く場合は、mcpServers に以下を追記します。

{
  "mcpServers": {
    "mobbin": {
      "type": "http",
      "url": "https://api.mobbin.com/mcp"
    }
  }
}

2. 認証する

/mcp を実行し、一覧から mobbin を選んで認証します。ブラウザが開くので、Mobbinアカウントでログインして許可します。

/mcp

ステータスが connected になればOKです。これでMobbin MCPが使える状態になります。

01

search_screens

Mobbin MCPが提供するツールは search_screens の1つだけです。パラメータは以下の4つ。

パラメータ 内容
query 自然言語の検索語 "chat messaging screen"
platform プラットフォーム ios / web
mode 検索モード deep(意図を解釈)/ fast(低レイテンシ)
limit 取得件数 最大 30

返ってくるのは画像とメタデータ(アプリ名・カテゴリ・URL)です。

使ってみる:画面収集と分析

実際に動かしてみます。Claude Codeに以下を入力します。

チャット画面のUIをMobbinで10枚集めて、共通パターンを教えて

なお、Mobbin MCPがつながっていれば、毎回「Mobbinで」と指定しなくても、UIの事例を探すような問いであればClaudeが自動で search_screens を呼んでくれることが多いです。確実に使わせたいときは「Mobbinで」と添えると安定します。

Claudeが search_screens を呼び、10アプリ分のスクリーンショットを取得して、その場でパターンを整理します。チャット画面であれば、次のような共通点が挙がってきます。

  • 全体構成:固定ヘッダー+スクロールするメッセージ領域+下部固定の入力バーという縦3分割。ほぼ全アプリ共通で、事実上の業界標準
  • バブル:自分は右寄せ・ブランドカラー、相手は左寄せ・グレー/白。色で送信者を区別し、名前ラベルは省略されがち(グループ時のみ表示)
  • 入力バー:角丸フィールド+プレースホルダに、添付(+/カメラ)・送信(紙飛行機や上矢印)・音声マイクを併置

02
取得したスクリーンショットを分析し、パターンの要約が出力されました。

応用:集めた画面をFigmaに渡す

Figma MCPも併せて接続しておくと、集めた参照画面をそのままFigmaに渡して画面を生成することができます(Figma MCPの接続は別途必要です)。

いま集めたチャット画面を参考に、Figmaに新しいチャット画面のUIを作って。
参照スクショも横に並べて貼り付けて

参照スクリーンショットと生成したデザインを見比べながら手直しできるため、レビューもしやすいです。

03.
生成した画面(左)とMobbin MCPで収集した参照スクリーンショット(右)

使う時の注意点

今回使ってみて気づいた点や引っかかりやすい箇所をまとめておきます。

  • 件数は最大30件:一度に大量取得はできない。広く見たいときはクエリを分ける。
  • platform の指定:iOS と Web で結果が変わる。
  • クエリは具体的に"画面" のような広い語より、"sign up form with social login" のように具体化したほうが精度が上がる。
  • スクリーンショットの鮮度:収録時点のUIが返るため、リデザインの早いアプリでは最新と差が出ることがありそう。

最後に

Mobbin MCPの導入から基本的な使い方まで試してみました。
自然言語でMobbinの実機UIから画面を収集しパターン整理までこなせ、ある程度制約はあるものの競合UIをざっと確認したいなどの場面で十分に実用的だと感じました。


生成AI活用はクラスメソッドにお任せ

過去に支援してきた生成AIの支援実績100+を元にホワイトペーパーを作成しました。御社が抱えている課題のうち、どれが解決できて、どのようなサービスが受けられるのか?4つのフェーズに分けてまとめています。どうぞお気軽にご覧ください。

生成AI資料イメージ

無料でダウンロードする

この記事をシェアする

関連記事