私のUIデザインのインスピレーション源：愛用している6つの参考サイト

Mobbinは、私が最も頻繁に使うデザイン参考サイトです。ダントツで一番です。

その核心的な価値は、実際のプロダクトのUIを検索可能なデザインパターンライブラリに分解していることです。4つの切り口でブラウジングできます：アプリカテゴリ（AI、ヘルスケア、飲食など）、スクリーンパターン（Dashboard、フィルター＆ソート、通知など）、UI要素（Text Field、Bottom Sheet、Tab Barなど）、ユーザーフロー（Onboarding、ログイン、決済など）。

iOSとWebの両プラットフォームをカバーしています。Web側ではさらにスタイルによるフィルタリングにも対応しており、Dark、Minimal、Colorful、Motionなどから選べるため、ランディングページのインスピレーション探しに特に便利です。

おすすめのシーン：ある機能をデザインする際に「他のプロダクトはどうしているのか」を見たいとき。例えば「サブスクリプションページは一般的にどんなレイアウトか」「Onboardingフローはどう設計されているか」など。

無料 vs 有料：無料ユーザーは最新4つのアプリ／サイトを閲覧可能。Pro版ですべてのコンテンツがアンロックされます。

Mobbinがグローバルなプロダクトをカバーしているとすれば、UI Notesは中国国内のプロダクトデザインの百科事典と言えます。

396アプリ、152,592枚のスクリーンショット——このデータ量だけでも、その価値は明らかです。しかも収録されているのは「リリースされたデザイン」のみで、コンセプトモック（実装されなかったデザイン案）はありません。目にするスクリーンショットはすべて、実際にリリースされた画面です。

収録されているアプリは、日常的に使われているものばかりです：豆包、DeepSeek、扣子、紅果短劇、元宝、TapTapなど。企業別（ByteDance、Tencent、Alibabaなど）や業界別でフィルタリングできます。各アプリにはバージョン番号と更新日時が記載されており、プロダクトの進化の軌跡を追うことができます。

おすすめのシーン：中国市場向けのプロダクトを開発している際に、競合の完全なUI画面やデザイントレンドを確認したいとき。

無料 vs 有料：基本的な閲覧は無料。会員になるとより多くの機能がアンロックされます。

このサイトは発想がまったく異なります。他のプロダクトのデザインを見せるのではなく、何かをデザインする際に注意すべきポイントを教えてくれます。

56種類のチェックリストが、5つのカテゴリに分類されています：

• Website（13種）：Loginページ、Billing、Blog Post、ショッピングカート、FAQなど
• Components（24種）：Button、Modal、Input Field、Toast、Carouselなど
• Flows（13種）：カートへの追加、サブスクリプション解約、パスワードリセット、アカウント削除など
• Topics（3種）：レスポンシブデザイン、UXライティング、ダークモード
• Brand（3種）：Logo、Typography、Tone of Voice

各チェックリストはベストプラクティスの一覧になっています。例えば「Loginページにはパスワードの表示／非表示切り替えが必要」「ModalはESCキーで閉じられるべき」といった内容です。さらにFigmaプラグインもあり、デザインツール内で直接チェックすることができます。

おすすめのシーン：デザイン完了後のセルフチェック、あるいはコンポーネントの設計を始める際の基準づくりに。特に初心者がデザイン規範の意識を身につけるのに適しています。

無料 vs 有料：完全無料です。

他のサイトが単体のスクリーンショットを見せてくれるのに対し、Page Flowsが見せてくれるのは完全なユーザーフローです。

その核心は画面録画にあります。実際のユーザーがアプリを開いてから特定の操作を完了するまでの一連のプロセスを、ステップごとの注釈付きで見ることができます。例えば「Airbnbの検索フローはどのようにユーザーを誘導しているか」「DropboxのOnboardingはどう設計されているか」といった内容です。

iOS、Android、Web、Emailsの4つのプラットフォームをカバーしており、10万人以上のデザイナーが利用しています。カテゴリ、業界、UXパターンによるフィルタリングに対応しています。

おすすめのシーン：ユーザーフロー（Onboarding、サインアップ、決済など）を設計する際に、トップレベルのプロダクトがどうデザインしているかを見たいとき。

無料 vs 有料：3日間の無料トライアル。その後は$8.25/月（年払い）または$13/月（四半期払い）。

Referoは最近発見した隠れた名サイトで、分類の細かさはすべてのサイトの中で随一です。

6つの切り口を網羅しています：

• Page Types（45種）：Dashboard、Landing、Paywall、404、Blog、Profileなど
• Flows（44種）：サインアップ、ログイン、サブスクリプション、カートへの追加、チャット、編集、アカウント削除など
• UX Patterns（87種）：Testimonials、Filter & Sorting、Dark Mode、Shoppingなど
• UI Elements（69種）：Modal、Cards、Table、Tabs、Skeleton、Chartなど
• Sites（業界別）：AI Tool、SaaS、Finance、Education、Foodなど
• Fonts：特定のフォントを使用しているプロダクトページをフォント別にフィルタリング

収録されているのはStripe、Calendly、n8n、Shopify、Coinbaseといったベンチマーク的なプロダクトばかりです。

最も目を引いたのは、MCP連携が提供されていることです。AIエージェントがReferoのデザインライブラリに直接アクセスでき、AIでサイトを構築する際に実際のプロダクトデザインを参考にすることができます。「AI臭い」画面を生成するのではなく、リアルなデザインに基づいた構築が可能になります。

おすすめのシーン：Web系プロダクトのデザインリサーチ、特にSaaS系プロダクトに最適です。

無料 vs 有料：7日間の無料トライアル。その後は有料サブスクリプション。

最後の1つは少し毛色が違います。Lovable自体はAIサイト構築ツールですが、そのDiscoverページは優れたデザインインスピレーションの源になっています。

ここに掲載されているすべてのアプリは、AIとの対話によって構築されたものです。「AIサイト構築が今どこまでできるのか」を直感的に感じることができます。CRM、イベントマーケティング、音楽プレーヤーからアイコンライブラリまで、カテゴリは多岐にわたります。

各アプリにはお気に入りデータが表示されており（Iconstack 1221 favorites、Attendflow 813 favoritesなど）、コミュニティでの評価がわかります。Featured、Builders、Personal、Marketing、Companyなどのカテゴリで閲覧できます。

おすすめのシーン：AIサイト構築の実際の成果物を見たいとき、またはクイックプロトタイプのインスピレーションを得たいとき。チームにAIサイト構築を試すよう説得する際の事例としても活用できます。

無料 vs 有料：閲覧は無料。Lovableでのサイト構築には無料枠があり、高度な機能は有料です。