AIがコードを書いてくれて、デザインもさっと作ってくれる時代になりました。でも本当の問題はその先にあります。AIが作った結果が良いのか悪いのか、それを判断する目がなければ何の意味もないんです。
これは何?
最近、Cursor、Claude Code、BoltといったAIコーディングツールでアプリを作る人が急増しています。「バイブコーディング」なんて言葉まで生まれましたよね。でも、コードはAIが代わりに書いてくれても、結果物の品質を判断するのはやはり人の仕事なんです。
デザインリファレンスサイトは、実際にリリースされたアプリやWebサービスのUI/UXを体系的に収集・分類したライブラリです。エージェンシーのデザイナーがプロジェクト開始前に必ず参照する必須ツールでもあります。デザインの専門家でなくても、「良いデザインがどんな感じか」を目で覚える一番の近道です。
特にAI時代には、こうしたリファレンスの価値がさらに高まりました。AIに「こんな感じで作って」と指示するには、自分がまず「こんな感じ」が何なのかを知っている必要があるからです。あるデザイナーは「良いリファレンスを探し、自分だけのインサイトを積み上げることが大切だ」と語っています。
今日紹介する4つのサイトは、それぞれ異なる強みを持っています。インタラクション動画、画面スクリーンショット、プロダクトUIアーカイブ、UXフロー録画まで — 目的に応じて使い分けられます。
何が変わるのか?
「DribbbleやBehanceと同じじゃないの?」と思う方もいるかもしれません。全然違います。DribbbleやBehanceはデザイナーの作品集です。実際にリリースされた製品ではなく、ポートフォリオ用に作ったコンセプトデザインがほとんどです。一方、今日紹介するサイトは実際に運営中のアプリやサービスの本物の画面を集めたものです。
| ポートフォリオ型（Dribbble等） | 実際の製品リファレンス | |
|---|---|---|
| コンテンツ | コンセプトデザイン、モックアップ | 実際にリリースされたアプリUI |
| UXフロー | 単一画面中心 | オンボーディング→決済の全フロー |
| 実務への適用性 | インスピレーションレベル | すぐに参考にできる |
| AIプロンプト活用 | 抽象的なリファレンス | 具体的なパターン指示が可能 |
実務での差は明らかです。例えば「決済画面を作って」とAIに指示すると平凡な結果になりますが、MobbinでまずAirbnbのチェックアウトフローを見てから「このパターンで作って」と伝えると、結果が全然変わります。FigmaのMarco Cornacchiaも「Mobbinは実際のアプリが特定のUIパターンやフローをどう処理しているかを確認できて、一番好きなリソース」と語っています。
では、4つのサイトを一つずつ見ていきましょう。
| サイト | 強み | コンテンツ形態 | 価格 |
|---|---|---|---|
| Mobbin | UXフロー別分類、60万枚以上のスクリーンショット | スクリーンショット＋フロー動画 | 無料（Pro有料） |
| 60fps.design | インタラクション/アニメーション動画の収集 | 動画キャプチャー1,880件以上 | 無料 |
| Refero | SaaS/Web製品UI＋MCPサポート | デスクトップスクリーンショット＋フロー | 無料（Pro有料） |
| Page Flows | UXフロー録画動画＋アノテーション | 画面録画動画 | 有料（$99/年） |
始め方のポイント：目的別サイト活用法
- インタラクション・アニメーションのインスピレーションが必要なとき → 60fps.design
1,880件以上のアプリインタラクションを動画でキャプチャーしたサイトです。ボタンアニメーション、スワイプ、ローディング、オンボーディングなど88種類のフィルターで分類されています。62,800人以上のデザイナーが登録中で、Duolingo・Airbnb・Instagramなど有名アプリの細かなインタラクションを動画で直接確認できます。アプリの「雰囲気」を伝えたいときに最も役立ちます。 - 特定のUXパターンを探すとき → Mobbin
1,150以上のアプリから抽出した601,500件のスクリーンショットと320,000件のフローを保有する、圧倒的な規模のリファレンスサイトです。「オンボーディング」「決済」「プロフィール」などUXフロー別に検索でき、Figmaプラグインでそのままデザインをコピーすることもできます。Visa、Shopify、Figmaなどのデザインチームが実務で活用しています。無料から始められるので、ハードルも低めです。 - SaaS・Web製品UIを参考にするとき → Refero
Stripe、Shopify、NotionといったリアルなSaaS製品のデスクトップUIを収集するライブラリです。45種類のページタイプ、87種類のUXパターン、69種類のUI要素に分類されており、検索機能が強力です。注目すべきはAIエージェント向けのMCP（Model Context Protocol）にも対応している点です。AIコーディングツールがReferoのリファレンスを直接参照して、より良いデザインを生成できるようになります。Product Huntでの評価4.9点も印象的です。 - ユーザー全体の流れを動画で見たいとき → Page Flows
実際のアプリのUXフローを画面録画動画で提供するサイトです。スクリーンショットだけでは把握しにくいトランジション効果、マイクロインタラクション、実際の使用の流れを動画で確認できます。Airbnb、Dropbox、Slackなど2,000件以上のフロー録画があり、10万人以上のデザイナーが利用しています。有料（$99/年）ですが、3日間の無料体験があります。
AIプロンプトにリファレンスを活用するヒント
AIにデザインをリクエストするとき、リファレンスサイトで見たパターンを具体的に説明すると、結果の品質がぐっと上がります。「決済画面を作って」ではなく「Airbnbスタイルのステップ式チェックアウトフローで、上部にプログレスバーがある形で作って」というようにです。
