目次10項目
UIデザインの参考サイトは、探したいものによって使い分けると便利です。実際のアプリの画面や操作フローを調べるならMobbinやUI Pocket、配色やレイアウトの着想を得るならDribbbleやBehance、アイデアをまとめるならPinterestが候補になります。
この記事では、UI設計やビジュアルデザインの参考にしてきたサイトを目的別に整理します。サービスの公開内容を確認し、古い掲載数や招待制の説明を見直しました。掲載画像は初回執筆時のもので、現在の画面とは異なる場合があります。
UIデザインの参考サイトを目的別に選ぶ
| 探したいもの | サイト | 見るポイント |
|---|---|---|
| 実際のアプリ・Webサービスの画面と操作フロー | Mobbin | 画面の前後関係、入力項目、操作の順序 |
| 日本語のアプリの画面 | UI Pocket | 日本語の文言、情報量、ナビゲーション |
| デザインの着想を幅広く集める | Muzli | 配色、レイアウト、表現の方向性 |
| キュレーションされたUIやWebデザイン | Collect UI | 気になる表現を見つけて元の作品へ進む |
| 画面のビジュアル表現 | Dribbble | 余白、文字の強弱、カードやグラフの配置 |
| プロジェクト全体の表現 | Behance | 複数画面の一貫性、ブランドとの関係 |
| 参考画像の収集・整理 | テイスト別に保存し、共通点を整理する |
実際の製品の画面と、デザイナーが制作したコンセプト作品では、参考にできる点が異なります。見た目が魅力的でも、そのまま自分のサービスで使いやすいとは限りません。ユーザー、情報量、操作の目的を揃えて比較するのがおすすめです。
Mobbin：実際の画面と操作フローを調べる
Mobbinは、公開されているアプリやWebサービスの画面、操作フローを探せる参考サイトです。単独の画面だけでなく、登録や検索などの前後の流れを確認したいときに役立ちます。
たとえば検索画面を設計するなら、検索前の状態、結果一覧、絞り込み、詳細への移動を続けて見ます。UIの形だけでなく、どのタイミングで何の情報を求めているかを読み取ると、設計の参考になります。
UI Pocket：日本語の画面を参考にする
UI Pocketでは、日本語のアプリを含むUIを探せます。アプリ、UIコンポーネント、UIパターン、フローの入口があり、日本語の文言や画面内の情報量を比較するときの候補になります。
海外のUIを参考にすると、英語では収まるラベルが日本語では長くなることもあります。表示するデータや文言が近い画面を選び、自分のサービスの条件に置き換えて検討してみてください。
Muzli：デザインの着想を幅広く集める
Muzliは、デザインの作品や情報を集めるキュレーションサービスです。ブラウザの新しいタブに着想を届ける拡張機能も提供しています。
画面の仕様を調べるというより、表現の方向性を広げたい段階に向いています。気になった作品の配色、余白、文字の扱いを分けて見ると、単に雰囲気を真似するだけで終わりにくくなります。
Collect UI：キュレーションから参考を見つける
Collect UIは、UIやWebデザインの参考をキュレーションしているサイトです。以前の記事で紹介していたDaily UIだけに用途を限定せず、現在の掲載内容から気になる作品を探す入口として使えます。
参考にする際は元の作品も開き、実際のサービスか、コンセプトとして作られた画面かを確認するとよいでしょう。
Dribbble：レイアウトや配色の表現を探す
Dribbbleは、デザイナーが作品を公開するプラットフォームです。ダッシュボードやアプリの画面など、ビジュアル表現の着想を探すときに役立ちます。
検索では「dashboard」「onboarding」「checkout」など、作りたい画面や操作を具体的に指定してみてください。作品の完成度だけで選ばず、自分の画面と情報量や用途が近いかを見るのがポイントです。
管理画面については、6つの参考UIを見ながら設計のポイントを整理した記事もあります。
Behance：複数画面やブランドとの一貫性を見る
Behanceは、クリエイターがプロジェクトを公開するプラットフォームです。UI以外の表現も含めて、作品を探せます。
複数画面が紹介されているプロジェクトでは、画面ごとの共通ルールや、ブランドとUIのつながりに注目してみてください。プロジェクト内に説明がある場合は、何を解決しようとしたデザインなのかも合わせて読みます。
Pinterest：参考画像を集めて整理する
Pinterestは、画像などのアイデアを探し、ピンとしてボードに保存できるサービスです。参考を集めて、テイストや用途別に整理するときに使えます。
「dashboard UI」「app UI」などで探した後、単に保存するだけでなく「余白の取り方」「カードの配置」「色の使い分け」など、参考にしたい理由をメモしておくと、チーム内でイメージを共有しやすくなります。画像だけでは出典がわからないこともあるため、元のサイトや作品も確認しましょう。
参考UIを自分の設計に活かす手順
- 解決したい操作を決める。 「登録の離脱を減らしたい」「一覧から対応が必要な項目を見つけたい」など、画面の目的を言葉にします。
- 条件が近い参考を3つほど集める。 同じ用途、デバイス、情報量の画面を優先します。
- 良いと思った理由を分ける。 情報の順序、文言、余白、色、操作の流れを区別してメモします。
- 自分のデータに置き換える。 長い名前、項目の多い一覧、データがない状態、エラー時にも成立するかを確認します。
- 操作して確かめる。 必要に応じてプロトタイプを作り、想定するユーザーが目的を達成できるか確かめます。
参考作品をそのまま転用するのではなく、良さを生んでいる考え方を読み解き、自分の画面の条件に合わせて取り入れることが大切です。余白や強弱の見方は、デザインの4大原則の記事でも解説しています。
以前紹介していたサイトについて
UI Garageは公式サイトで終了のお知らせが掲載されているため、現在のおすすめ一覧から外しました。UX Archiveは今回の確認では公開内容を取得できなかったため、紹介情報の更新を保留しています。これをサービス終了とは判断していません。
