UIデザインのインスピレーションサイト:本物のインターフェースが見つかる6選
モックアップではなく本物のインターフェースを見せてくれる6つのサイト:Mobbin、Refero、Page Flows、Landingfolio、Dark Mode Design、SaaSFrame。それぞれの得意分野、開くのにかかる費用、ブリーフでの使い方を紹介します。
空白のフレームは、デザインを始める場所としていちばん難しい。本物のインターフェースがあれば話は簡単です。設定ページ、課金画面、ヒーローが、チームが実際にリリースした状態でどう見えるかがわかります。ここでは、本物の画面を集めた6つのサイトを紹介します。それぞれの得意分野と、先に登録を求められるサイトも書いておきます。
| サイト | 得意分野 | 無料で開けるか |
|---|---|---|
| Mobbin | 本物のアプリ画面、60万以上 | 無料アカウント、閲覧は限定的 |
| Refero | 画面、フロー、パターンの検索 | サイト上でライブラリを検索可能 |
| Page Flows | 画面録画付きのフロー全体 | 3日間トライアル |
| Landingfolio | ランディングページ、ヒーロー、コンポーネント | ギャラリーを閲覧可能 |
| Dark Mode Design | ダークなWebサイトのデザイン | グリッドを閲覧可能 |
| SaaSFrame | SaaSのWebサイトとプロダクト画面 | カテゴリ別に閲覧可能 |
1. Mobbin:本物のアプリ画面
Mobbinは自らを「アプリとサイトのためのデザインリファレンスライブラリ」と呼び、60万以上のリリース済み画面を掲載し、毎週新しい画面が追加されます。ライブラリはアプリ、サイト、画面、フロー、アニメーション、UI要素に分かれています。無料で登録できますが、無料アカウントは閲覧が限定的で、全ライブラリは有料プランの先にあります。
**見るべきポイント:**複数のアプリが同じ画面をどう解いているか。オンボーディングや課金画面など1つの画面タイプを選び、自分の画面を描く前に5つ並べて比べましょう。
2. Refero:検索できる参考資料
Referoは自らを「本物のプロダクト画面、フロー、パターン」と説明しています。検索を軸に作られていて、メール認証付きのサインアップ、グラフ付きのダッシュボードレイアウト、SSOとパスワードリセット付きのログイン画面といった検索例が並び、Webアプリ用とiOSアプリ用のタブも別々にあります。
**見るべきポイント:**検索として打ち込む具体的な問い。ギャラリーをスクロールするより、「カレンダー予約」と検索するほうが使える答えに早くたどり着けます。
3. Page Flows:旅路ぜんぶ
ほとんどのインスピレーションサイトは単独の画面を見せます。Page Flowsは画面と画面の間の道筋を見せます。キャッチコピーは「UI/UX Inspiration from Real User Flows」で、フローを画面録画とステップごとの注釈と組み合わせています。
iOS、Android、Web、メールで絞り込め、3日間のトライアルがあります。
**見るべきポイント:**画面と画面の間のステップ。良いサインアップフローはボタンを押した後に何が起こるかで決まるので、最初のフレームではなく一連の流れ全体を見ましょう。
4. Landingfolio:ランディングページとヒーローのアイデア
Landingfolioはランディングページのギャラリーです。確認した時点では、ヘッダーに961サイト、その週の追加が4件と表示され、業種、ページタイプ(ランディング、料金、会社概要、ログイン、サインアップ、404)、色で絞り込めました。Tailwind、Webflow、Figma向けのコンポーネントも掲載しています。
**見るべきポイント:**最初の画面、つまりヒーロー。自分の業種に絞り込み、訪問者が知るべき唯一のことを競合がどう伝えているかを比べましょう。見つけたものをどう活かすかは、ランディングページデザインの原則とSaaSランディングページの構造のガイドで解説しています。
5. Dark Mode Design:ダークなWebサイト
Dark Mode Designは、ダークなWebサイトを厳選したグリッドで、誰でもサイトを投稿できます。各タイルがダークデザインの全体像なので、黒やほぼ黒の背景の上で、コントラスト、アクセントカラー、画像をほかの人たちがどう扱っているかがわかります。スクリーンショットはすべて各所有者に帰属します。
**見るべきポイント:**2色目。各サイトがアクセントカラーに加えてどの色を足しているか、そしてどこで使っているかをメモしましょう。自分で作る方法は、ダークモードのカラーシステムのペーパーで解説しています。
6. SaaSFrame:SaaSの画面
SaaSFrameは、本物のSaaSのWebサイトとプロダクトインターフェースを集めた「SaaS UI & UX デザインのインスピレーションライブラリ」です。カテゴリを見ればライブラリの規模がわかります。確認した時点で、ランディングページ画面296、料金ページ211、ダッシュボード191、追加・編集画面424、アカウント設定画面571でした。サイドバーナビゲーション、オンボーディングのチェックリスト、AI生成の状態といったパターンも掲載し、編集可能なFigmaファイルとAIデザインプロンプトも提供するとしています。
**見るべきポイント:**地味な画面。料金、設定、アカウント設定は、プロダクトが完成して見えるかどうかを決める画面で、空白のフレームがいちばん難しくする画面でもあります。
6つをまとめて使う方法
- **画面に名前をつける。**いまデザインしている画面かフローを1つ書き出します。
- **サイトを選ぶ。**アプリ画面全般はMobbin、問いはRefero、旅路はPage Flows、ヒーローはLandingfolio、ダークテーマはDark Mode Design、SaaSプロダクトはSaaSFrameへ。
- **30枚ではなく3枚保存する。**自分の画面をいちばんうまく解いている3枚を選びます。
- 1枚ずつ一行書く。「価格が明快、ボタンは1つ」はリファレンスです。メモのない保存画像はただの山です。
- **ピクセルではなく判断を真似る。**レイアウトが何をしているか、なぜそうなのかを持ち帰ります。参考資料をワークフローに変える方法は、スクリーンショット駆動デザインのペーパーで紹介しています。
デザイナーもクライアントも、「あのサイトくらいシンプルな料金ページで、あっちみたいなプラン切り替え付き」と言われれば多くのことができます。「モダンにして」では、ほとんど何もできません。
サイト
Mobbin
本物のアプリ画面。無料アカウントは閲覧が限定的、全ライブラリは有料。
サイト
Refero
検索できる、本物のプロダクト画面、フロー、パターン。
サイト
Page Flows
人気アプリのユーザーフロー全体を、画面録画付きで。
サイト
Landingfolio
ランディングページとヒーローのインスピレーション。
サイト
Dark Mode Design
ダークなWebサイトデザインのグリッド。
サイト
SaaSFrame
SaaSのUIとUXデザインのインスピレーションライブラリ。
無料のFigmaファイル
UIアイデアの6サイト
6つのリンクと各サイトの強みを、1つの無料ファイルにまとめました。
FAQ
UIデザインのインスピレーションに最適なWebサイトは?
Mobbin、Refero、Page Flows、Landingfolio、Dark Mode Design、SaaSFrameです。アプリ画面、検索できる参考資料、ユーザーフロー全体、ランディングページ、ダークなWebサイト、SaaSのインターフェースをカバーしています。
Mobbinは無料?
一部だけです。Mobbinは無料で登録でき、閲覧は限定的です。60万以上の画面がある全ライブラリには有料プランが必要です。
本物のユーザーフローの例はどこで見つかる?
Page Flowsです。本物のアプリやWebサイトのフローを、画面録画とステップごとの注釈付きで見せてくれます。3日間のトライアルもあります。
ランディングページのデザインインスピレーションはどこで見つかる?
Landingfolioは、業種とページタイプで絞り込めるランディングページのギャラリーです。SaaSFrameにもSaaSのランディングページ画面があります。
ダークなWebサイトのインスピレーションはどこで見つかる?
Dark Mode Designが、ダークなWebサイトを1つのグリッドにまとめています。誰でもサイトを投稿できます。
コピーせずにインスピレーションを使うには?
デザイン中の画面について2〜3個の参考を保存し、それぞれが何をうまくやっているかを一行で書きます。明快な価格や1つだけのボタンといった判断を使い、レイアウトは自分で描きましょう。
出典
- Mobbin、mobbin.com:「アプリとサイトのためのデザインリファレンスライブラリ」、60万以上のリリース済み画面、無料登録、プラン。2026年11月4日確認。
- Refero、refero.design:「本物のプロダクト画面、フロー、パターン」。2026年11月4日確認。
- Page Flows、pageflows.com:「UI/UX Inspiration from Real User Flows」、画面録画と注釈、3日間トライアル。2026年11月4日確認。
- Landingfolio、landingfolio.com:「最高のランディングページデザインのインスピレーション」、確認当日で961サイト。2026年11月4日確認。
- Dark Mode Design、darkmodedesign.com:ダークなWebサイトのグリッド、サイト投稿可。スクリーンショットは各所有者に帰属。2026年11月4日確認。
- SaaSFrame、saasframe.io:「SaaS UI & UX デザインのインスピレーションライブラリ」、画面数は確認当日の表示どおり。2026年11月4日確認。
- 最初にUX Brainyでカルーセルとして公開。
Collected the references and still need the interface built? Our team turns a clear brief into product UI that holds up in every state.
Get Started
