現場デザイナーが毎日使うデザイン参考サイト17選（2026）

デザイン参考サイトを探すとき、無駄になりやすいのは美しい画面を眺める時間ではありません。いまの課題に答えていない画面を見続ける時間です。

ログイン・オンボーディング・決済など実際のフローにはアプリ画面アーカイブを、SaaSの情報設計にはWebプロダクト参考を、ファーストビューと転換にはランディングページギャラリーを使いましょう。

以下の17サイトは2026年8月22日時点でアクセスを確認した UI/UXデザイン参考サイト です。

すばやく選ぶなら

アプリUI/UX参考：実画面とフローを見るとき

アプリを作る・改善するときは、ボタンをきれいにする方法より、他社が同じ場面でどんな順番でユーザーに選択を求めているかを見るほうが役に立ちます。

1. Mobbin

実際のモバイルアプリとWebサービスの画面を、パターン・コンポーネント・フローで探せる代表的なライブラリです。ログイン、ボトムシート、決済、設定を比較するときに最初に開く場所です。

向いている場面： 競合のオンボーディングやサブスクリプション転換の画面順を確認するとき。

2. WWIT (What Was IT)

韓国のサービス画面を見るのに便利です。金融、コマース、デリバリーのカテゴリと、ログイン・会員登録・ボトムシートなどのパターンがそろい、韓国のUX文脈を確認しやすいです。

向いている場面： TossやNaver Payの情報密度、用語、決済前後の画面を参考にするとき。

3. Appshots

モバイルとWebの実プロダクト画面をフロー単位で見られるライブラリです。1画面ではなく、体験全体を確認したいときに役立ちます。

向いている場面： 登録後の権限リクエスト、初期設定、空状態、アクティベーションまでの流れを探すとき。

4. ScreensDesign

旧scrnshts.clubとUISourcesは現在ScreensDesignに統合されています。App Storeのスクリーンショットとアプリ画面をカテゴリ別に見られ、プロダクト内UIとストアでの第一印象を両方確認できます。

向いている場面： リリース直前にApp Storeスクリーンショットの構成、キャプション、強調場面を点検するとき。

Web・SaaS UI参考：構造とプロダクトフローを見るとき

Webサービスは情報密度が高く、1画面が担う役割も複雑です。華やかなマーケティングページより、まず プロダクトが仕事を進める画面 を見ましょう。

5. Page Flows

Web・モバイルプロダクトの主要フローを画面と動画で確認できます。オンボーディング、アカウント作成、アップグレード、設定など、静止画だけでは分かりにくい流れに強いです。

向いている場面： 機能をどこで、いつ見せるべきか考えるとき。

6. Refero

Web UI、SaaSダッシュボード、ランディングページを画面・セクション単位で探しやすいサイトです。

向いている場面： B2B SaaSのテーブル、ダッシュボード、設定画面の情報設計を組み立てるとき。

7. Nicelydone

実際に動くプロダクトのような密度を持つWebアプリ中心のUI/UXアーカイブです。

向いている場面： 管理ツール、コラボレーションサービス、ダッシュボードの雰囲気と構造を一緒に見たいとき。

ランディングページ参考：ファーストビューと転換を設計するとき

ランディングページは、美しいビジュアルを集める場所ではありません。誰にどんな価値を約束し、どう次の行動につなげるかを見る場所です。見出し、証拠、CTAの順番を一緒に確認しましょう。

8. Landingfolio

料金、ログイン、登録などのページやコンポーネント例も探せます。業種、色、デバイスで絞り込めるため、トーンを定めやすいです。

向いている場面： SaaSのヒーロー、料金ページ、機能紹介を設計するとき。

9. SaaS Landing Page

SaaSランディングページを集中的に見たいときに便利です。説明、顧客ロゴ、ユースケース、料金がどんな順番で説得を作るかを比較できます。

向いている場面： B2BプロダクトのメッセージとデモCTAを1ページで整理するとき。

10. Fountn

AIデザイン、Figma、UIリソースを幅広く集めたハブです。特定の参考より、プロジェクトに必要なリソースを探す出発点として有用です。

向いている場面： デザインツール、UIキット、生産性リソースをまとめて探すとき。

Webデザイントレンド：レイアウト・タイポグラフィ・インタラクション

ここでは、ブランドが速度、余白、転換の瞬間をどう扱うかを見ます。使いやすさ優先のプロダクト画面とは分けて考えましょう。

11. Recent

Godly.websiteは現在Recentに移行しています。最新サイトをすばやく見渡し、視覚的な空気感とインタラクションの方向を決めるのに便利です。

向いている場面： ブランドサイトやポートフォリオに強い視覚的印象を与えたいとき。

12. Awwwards

受賞作中心のWebデザインアーカイブです。表現の基準を広げるために使い、プロダクトUXの正解集としては扱わないのがおすすめです。

向いている場面： ブランドキャンペーン、ポートフォリオ、エディトリアルサイトの完成度を上げるとき。

13. Httpster

独立的で実験的なWebデザインを見るのに向いています。大胆なレイアウトと書体は、安全なカード・グリッドから抜け出すヒントになります。

向いている場面： ブランドトーンを作り直したいとき、ありきたりなレイアウトに飽きたとき。

ケーススタディとインスピレーション

コンセプトショットは実プロダクトの制約と異なることがあります。構造と意図を持ち帰り、実装難易度は別に判断しましょう。

14. Dribbble

UIショットと視覚的なアイデアをすばやく探索できます。色、グラフィック、コンポーネント、マイクロインタラクションの手がかりに便利です。

向いている場面： 白紙から視覚的な方向性を広げたいとき。

15. Behance

プロジェクト単位のケーススタディで、ブランディング、デザインシステム、画面構成まで追えます。

向いている場面： 1画面ではなく、リブランディングやサービス全体の方針を学ぶとき。

16. Growth.Design

UXパターンを画面集ではなくケーススタディとして解釈してくれます。ユーザーがなぜ行動するのか、どんな設計が問題を作るのかを考えるのに役立ちます。

向いている場面： コンバージョン、リテンション、ダークパターンをチームで議論するとき。

17. GDWeb

韓国のWebサイトとモバイルサイトを幅広く見られます。韓国のブランドや企業が選ぶトーンと構造を把握しやすいです。

向いている場面： 韓国のクライアントや業界に合うWebデザイン参考を探すとき。

参考は「保存」より「問い」として使う

良い参考は、魅力的な画面のフォルダではなく、次の判断を速くする根拠です。

• この画面はユーザーにどんな判断をさせているか？
• 何を先に見せ、何を後に隠しているか？
• 自分たちのユーザー、文脈、制約でも同じ方法は機能するか？

モバイルUIはMobbinとWWITから、WebフローはPage FlowsとReferoから、ランディングページはLandingfolioから始めてみてください。いまの課題に合う3サイトを行き来するほうが、すべてを眺めるより成果につながります。