UIデザインをするときに、アイデアに詰まることはありませんか？
独自性を出すことに囚われてしまい、なかなかアイデアが出ない…。
なんてときは、やはり素晴らしいUIを見てアイデアを膨らませるのが最適です。
私自身、UI設計やビジュアルデザインの着想を得たりするために、よくいろいろなアプリのUIや参考サイトを見たりします。
今回は、10年以上UIデザイナーをしている私が参考にしているUIデザインのギャラリーサイトをご紹介します。
こういったギャラリーサイトは、チーム内やクライアントとのイメージのすり合わせにも活用できて便利です。
ぜひUIデザインの参考にしてみてはいかがでしょうか。
目次
UI Pocket
日本のアプリがキュレーションされているUIギャラリーサイト
UI Pocketは、UIデザインギャラリーサイトのなかでは珍しく日本の方が運営されています。国内のアプリを中心に、運営者さんの観点から優れたUIデザインをキュレーションしているサイトになっています。
ナビゲーションや操作フロー単位でUIがまとめられており、アプリ全体のUXをイメージしやすいのが特徴です。
きめ細かくカテゴリ分けされており、ジャンル別のアプリのUIデザインが探しやすいので、個人的にもイチオシのUIギャラリーサイトです。
Muzli
海外のハイセンスなUIデザインを探すのに最適なデザインキュレーションサービス
数年前に一世を風靡したUIプロトタイピングツール「InVision」が運営するデザインキュレーションサービスです。Figmaの台頭によってピボットを余儀なくされてしまったInVisionですが、2022年8月現在でもMuzliの運営は続けられています。
UIプロトタイピングツールを開発していた会社というだけあって、UIデザインのキュレーションも充実しています。海外のハイセンスなUIデザイントレンドのエッセンスを取り入れたい際に最適なUIギャラリーサイトです。
Google ChromeやSafariにエクステンションをインストールする形式で、インストールするとブラウザのスタート画面が
また、MuzliはMediumでMuzli Magazineも運営しており、Weekly Inspirationを毎週発信されているので、MediumのほうをRSSリーダーで追うのもおすすめです。
Mobbin
6万以上のスクリーンショットからUIを探せる世界最大級のUIギャラリーサイト
https://mobbin.com/browse/ios/apps
60,000 以上のモバイルアプリのスクリーンショットがデータベースとして揃っている、世界最大級のUIデザインギャラリーサイトです。
ログイン画面や検索画面などのセクションに分けられているので、参考にしたい画面フローを素早く検索できるほか、もちろんカテゴリ別で探すことも可能です。
先に紹介したMuzliはビジュアルデザインに寄ったUIギャラリーでしたが、こちらはユーザー体験や情報設計を参考する際に役立ちます。
海外のアプリをインストールすることなく、素早く探してUXやUIの参考にできるので、個人的にもかなり重宝しています。
UX Archive
操作フロー別にアプリのUIを探せるUIギャラリーサイト
UX ArchiveはWaldoというモバイルアプリの自動テストツールを提供している会社が運営しているUXのギャラリーサイトです。
UXという名の通り、一連の操作フローに沿ってUIが並べられており、「予約」や「作成」、「オンボーディング」など、操作フロー別にアプリやUIのリファレンスを探せるのが特徴です。
2022年8月現在で、181のアプリが掲載されています。
Waldoという自動テストツールを導入しているアプリを中心に掲載されているようで、マーケティングとしてもなかなかに上手だな〜という感想です。
UI Garage
AndroidアプリやMacアプリ、Web（ダッシュボード）も探せるUIギャラリーサイト
UI Garageは、UI のインスピレーションとパターンを毎日厳選して掲載しているギャラリーサイトです。2022年8月現在で、6,431 を超えるパターンが掲載されています。
このサイトの特徴は、モバイルアプリだけではなく、WebやMac OSアプリもキュレーションされている点です。
また、モバイルアプリはiOSだけではなくAndroidで絞り込むこともできます。
多くのUIギャラリーサイトはiOSを基準にしていることが多いので、AndroidアプリのUIが掲載されているのは嬉しいポイントですね。
「エラーメッセージ」や「カラーピッカー」、「404」、「ナビゲーション」など、独自に分けられたカテゴリで探せるのも面白いポイントです。
Collect UI
Dribbbleに投稿されるDaily UIをキュレーションしているUIギャラリー
Collect UIは、Daily UIにチャレンジしているデザイナーがDribbbleに投稿した作品をキュレーションしているサービスです。
基本的にDribbbleからのみキュレーションしているため、ハイレベルなDaily UIを探すことができます。キュレーション対象もDribbbleの中でも多くフォロワーを獲得しているデザイナーを中心としているため、非常にハイクオリティです。
また、カテゴリが整理されているため、探しやすいのも特徴です。
Daily UIにチャレンジしているUIデザイナーの方は、ぜひ一度覗いてみていただくと、他のデザイナーの作品がどんなものなのか、インプレッションを得られると思います。
Dribbble
限られたデザイナーだけが投稿できるデザイナーSNS
Dribbbleは、全世界で100万を超えるデザイナーやデザインエージェンシーが登録している世界最大のデザイナーSNSです。
Dribbbleにアカウント登録すること自体はどなたでも可能ですが、投稿できるデザイナーは投稿権限を持つデザイナーから招待されたごく一部のデザイナーのみとなっています。
そのため、投稿されるデザインはどれもハイクオリティなので、いつ見ても楽しいですね。
Behance
Adobeが運営するクリエイター向けSNS
Behanceは、デザイナーであれば知らない人は居ない、Adobeが運営するクリエイター向けSNSです。
世界中のあらゆるクリエイターが自身の作品をポートフォリオとしてアップロードしているため、UIデザインやWebデザインのみならず、グラフィックデザインやモーション、3Dモデルなど様々な作品を探すことができます。
UIデザインのアイデアを気軽にタグベースで探せるSNS
Pinterestは、WebサイトやPinterest上の画像をブックマークして、整理したりできる画像を軸にしたSNSです。
デザイナーも多く使っており、Dashboard UIや、App UIなどで探したりすると、他のユーザーがPinterestに公開ブックマークした画像を見つけることができます。
非公開で保存することもできるので、参考になりそうなUIを探して自分なりにテイスト別やデバイス別などでブックマークしておくと、似たような仕事を担当することになった際に役立ちます。
参考サイトからUIデザインを参考にするときのポイント
ここで紹介した参考ギャラリーサイトをもとにUIデザインをしていくときには、以下のポイントを抑えることをおすすめします。
UI設計とビジュアルデザインは切り分けて考察してみる
良いと思った箇所を明確にし、そのエッセンスを局所的に取り入れてみる
ビジュアルの表現を参考にする場合は、該当箇所をトレースしてみる
まずは、参考になりそうなUIデザインの「なんかいいな」と思った箇所が、なぜ良いのかをご自身の中で噛み砕くことからぜひ始めてみてください。
UIはいくつもの構成要素が複合的に組み合わさって形成されているので、1つひとつの要素を読み解いて、参考にできそうな手法を習得していくことが、より良いUIデザインのアウトプットに直結します。
