Referoは、Refero Inc.が開発する、実在するWebアプリ・Webサイト・iOSアプリの画面キャプチャとユーザーフローを集めたUI/UXデザインリファレンスライブラリ。人間のデザイナー向けのタグ・画像・テキスト検索やFigmaプラグインに加え、MCP接続によってClaude Code・Cursor・Codexなどのコーディングエージェントにも実在プロダクトのデザイン知見を参照させられる点が特徴で、生成されるUIが画一的になりがちな課題に具体的な解決策を提示する。2023年3月にProduct Huntでローンチされて以降、142,000件超の画面とユーザーフローを蓄積しており、その後は実プロダクトの配色・タイポグラフィ・余白・モーションなどのデザインシステムを構造化した「Refero Styles」を追加して、画面単位だけでなく製品全体のビジュアル方向性までMCP経由で参照できるようになった。
主な特徴
- タグ・画像・テキスト検索: ページ種別・UXパターン・UI要素のタグ検索に加え、画像アップロードによる類似デザイン検索、サイト名やテキスト内容での検索にも対応する
- ユーザーフロー収録: サインアップから解約まで、複数画面をつないだ操作フロー単位でも参照できる
- Figmaプラグイン: Figma上で作業しながら、参考にしたいUIをその場で検索・挿入できる公式プラグイン
- Refero MCP:
https://api.refero.design/mcpのリモートMCPサーバー。OAuthまたはBearerトークンで認証し、Claude Code・Cursor・Codex・Lovable・Antigravity・Manusなど主要なコーディングエージェントから接続できる。エージェントがUIを生成する前に実在プロダクトの画面・フローを参照できるため、生成物の質を底上げできる。2026年5月には、実プロダクトのデザインシステムを構造化した「Refero Styles」もMCP経由で検索できるようになり、ブランド名やムード、URLを起点に配色・タイポグラフィ・コンポーネント傾向まで参照できる範囲が広がった（公式Xでのアナウンスに基づく、2026年5月時点の情報） - Refero Skill:
npx skills addで導入できる、UI生成の前に必ず参照調査を行わせるエージェント向け手法パッケージ。GitHubでMITライセンス公開されている - Research mode: タスクを自然文で説明すると、関連する参照・分析・推論を返す機能。2026年8月時点で公式サイトのホームに掲出されている
料金
| プラン | 月額料金 | 主な特徴 |
|---|---|---|
| Free | $0 | ライブラリの約3%のみアクセス可。基本的なタグ・企業名検索のみで、MCP・Figmaプラグイン・Refero Skillは利用不可 |
| Pro | $10/月（年払い時の月換算額、年額$120） | 142,000件超の全画面とユーザーフローに無制限アクセス、ダウンロード可、Figmaプラグイン、Refero MCP、Refero Skill |
| Team | $12/月・1席あたり（年払い時 $140/年） | 最低3席からの座席課金。Proの全機能に加え管理パネル・チーム共同ブックマーク。SAML SSOは有償アドオン（個別見積もり） |
| Lifetime | 公式サイトで要確認 | 買い切りでの無期限アクセスとされるが、価格・詳細条件は非公開 |
料金は2026年8月時点の情報です。Pro単体の月払い単価とLifetimeの価格は、公式サイト上でタブを切り替えたときにのみ表示されるため本記事執筆時点では確認できませんでした。最新の料金は公式サイトをご確認ください。
メリット・デメリット
✅ メリット
- 142,000件超の画面とユーザーフローを、ページ種別・UXパターン・UI要素のタグと画像類似検索で横断的に絞り込める
- Figmaプラグインとリモート MCP の両方に対応し、人間のデザイナーとAIエージェント双方の設計フローに組み込める
- MCPはClaude Code・Cursor・Codex・Lovable・Manusなど主要なコーディングエージェントを公式サポートし、製品単位のデザインシステム（Refero Styles）まで参照できる
⚠️ デメリット
- Freeプランはライブラリの約3%しか閲覧できず、実質的に有料前提のサービス
- MCP・Figmaプラグイン・フル検索はすべてPro以上限定で、無料では機能を試しづらい
- ライブラリ規模は競合Mobbin（40万件超）より小さい
- Teamプランは最低3席からの座席課金で、SSOは別途問い合わせが必要な有償アドオン
類似サービスとの比較
| 比較項目 | Refero | Mobbin | Screenlane | Page Flows |
|---|---|---|---|---|
| 収録規模 | 画面14.2万件超・フロー1.2万件超 | スクリーンショット40万件超 | モバイルUI中心（規模非公開） | ユーザーフロー動画中心 |
| 検索方法 | タグ・画像類似検索・テキスト検索 | タグ・企業名検索が中心 | カテゴリ・インスピレーション中心 | フロー動画の閲覧が中心 |
| AIエージェント連携（MCP） | 対応（Pro以上、Claude Code/Cursor/Codex等） | 前面に出していない | 非対応 | 非対応 |
| Figma連携 | 公式プラグインあり | ─ | ─ | ─ |
Referoの独自性は、人間のデザイナー向けのデザインリファレンスとAIエージェント向けのMCP連携を同一ライブラリで両立させている点にある。Mobbinは規模で上回るがAIエージェント向け機能を前面に出しておらず、ScreenlaneやPage FlowsはそれぞれモバイルUIの閲覧・フロー動画の視聴といった特定用途に特化している。
こんな人におすすめ
- プロダクトデザイナーが新機能のUIを設計する前に、類似ユースケースの実例を参照したい人
- Claude CodeやCursorなどのコーディングエージェントに、MCP経由で実在プロダクトのデザインを参照させたい開発者
- Figma上での作業中に、参考にしたい実例をプラグインから直接呼び出したい人
- チームでオンボーディングや課金導線など特定フローのベストプラクティスを共同ブックマークで共有したいチーム
まとめ
Referoは、実在するWeb・iOSプロダクトの画面とユーザーフローを、人間のデザイナー向けの検索性とAIエージェント向けのMCP連携の両輪で提供するUI/UXリファレンスライブラリである。Figmaプラグインでの参照に加え、Claude CodeやCursorなどのコーディングエージェントにMCP経由で実例デザインを渡せる点は、生成UIが画一的になりがちな課題への具体的な答えになっている。後発のRefero Stylesにより、画面単位だけでなく製品全体のビジュアル方向性まで参照範囲が広がった。一方でFreeプランはライブラリの3%しか閲覧できず、主要機能はPro以上が前提となる点には注意したい。