Mobbin MCPを試してみた
はじめに
最近Mobbin MCPがリリースされ、Mobbinが収録する60万件以上の実際のプロダクトのスクリーンショットを、AIエージェントから直接検索できるようになりました。
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が使える状態になります。
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分割。ほぼ全アプリ共通で、事実上の業界標準
- バブル：自分は右寄せ・ブランドカラー、相手は左寄せ・グレー/白。色で送信者を区別し、名前ラベルは省略されがち（グループ時のみ表示）
- 入力バー：角丸フィールド＋プレースホルダに、添付（+/カメラ）・送信（紙飛行機や上矢印）・音声マイクを併置
取得したスクリーンショットを分析し、パターンの要約が出力されました。
応用：集めた画面をFigmaに渡す
次に集めた参照画面をFigmaに渡して、それをもとにした画面生成を試します（Figma MCPの接続は別途必要です）。
以下を先ほどにつづけて入力します。
いま集めたチャット画面を参考に、Figmaに新しいチャット画面のUIを作って。
参照スクショも横に並べて貼り付けて
実行すると、Figma上に新規ページが生成され、参照用のスクショと並ぶ形で新しいチャット画面のUIが出力されました。
参照スクリーンショットと生成したデザインを見比べながら手直しできるため、レビューもしやすいです。
生成した画面（左）とMobbin MCPで収集した参照スクリーンショット（右）
使う時の注意点
今回使ってみて気づいた点や引っかかりやすい箇所をまとめておきます。
- 件数は最大30件：一度に大量取得はできない。広く見たいときはクエリを分ける。
platformの指定：iOS と Web で結果が変わる。- クエリは具体的に：
"画面"のような広い語より、"sign up form with social login"のように具体化したほうが精度が上がる。 - スクリーンショットの鮮度：収録時点のUIが返るため、リデザインの早いアプリでは最新と差が出ることがありそう。
最後に
Mobbin MCPの導入から基本的な使い方まで試してみました。
自然言語でMobbinの実機UIから画面を収集しパターン整理までこなせ、ある程度制約はあるものの競合UIをざっと確認したいなどの場面で便利に使えそうです。
