---

---

UI UXを考慮したデザインの重要性は年々高まっています。しかし、UI UXに優れているデザインを具体的にどう設計すべきかまで分からない方もいるでしょう。

そこで今回は、UI UXデザインやWebデザインの参考になるおすすめのサイトを39選紹介します。
ぜひ、自身の作りたいWebサイトやアプリデザインの参考にしてみてください。

なお、UI UXデザインに悩んだ際は「UX専門家の支援」を受けるのもおすすめです！
ニジボックスでは、UX改善への第一歩を踏み出せるサービス『Begin UX!』をご提供しています。 自社サイトやアプリのUI UXデザインに課題感をお持ちの方は、ぜひ気軽にご相談ください！

『Begin UX!』ご紹介サイト

スマートフォン向けサイトのUI UXデザインの参考になるサイト6選

ここからは、スマートフォン向けのUI UXデザインについて、参考になるサイトを紹介します。

UIデザインに重要なのは「ユーザーに考えさせない」こと、UXデザインに重要なのは「ユーザーにより良い体験を提供する」ことです。以上の点を踏まえつつ、これから紹介するサイトを参考にしてみてください。

1.Pttrns.

『Pttrns.』は、UIデザインの中でも、スマートフォンのデザインパターンの収集に特化しているサイトです。iOSメインである点が特徴で、iPhoneやiPadなどの優れたUIパターンやアプリのキャプチャ画面を見ることができます。

公式サイト内はカテゴリ分けがなされており、目的のUIパターンへ直感的にアクセスできます。追加日やタグ、人気順などの並び替え機能も活用すれば、より効率的なリサーチが可能です。有料会員になることで全アーカイブへのアクセスが可能になるほか、広告削除、検索機能などが使用できる点も魅力です。

2.lovely ui

『lovely ui』は、iPhoneやAndroidをはじめとした、スマートフォンのUIデザインに特化したギャラリーサイトです。モバイルサイトのトップ画面をはじめ、さまざまなページのデザインをスクリーンショット形式で紹介しているのが特徴です。

集められたデザインは、端末の種類やアプリアイコン、検索画面、ホーム画面などの画面ごとにタグづけ、カテゴライズされているほか、どのタグがトレンドに入っているかも確認できるため、参考になるデザインをすぐに見つけられます。

また、トップ画面に限らずさまざまな端末デザインが一覧で確認できることから、Webサイトやアプリのデザインを多角的にとらえることにもつながるでしょう。掲載されているUIデザインを使用しているアプリやWebサイト、実際のソースコードを調べることもできるため、自身でUIをデザインする際のコーディングの手間の省略にもつなげられます。

3.UI Pocket

『UI Pocket』は、国内外のUI UXを提供しているアプリのUIデザインを集めた、日本のギャラリーサイトです。各セクションに分けてスクリーンショットをまとめており、優れたUIデザインに素早く簡単にアクセスできるようになっています。

収集されているアプリのスクリーンショットは、ミュージックやニュース、ショッピング、仕事効率化やナビゲーションなど、さまざまなジャンルごとに分類されており、検索画面から直接特定のアプリ名を入力して検索することも可能です。

先ほども述べたように、UI UXのスクリーンショットは、オンボーディングやホーム画面、ショートカットや設定画面など、セクションごとにチェックできます。そのため、アプリ全体のUI UXデザインをイメージしやすいのが魅力といえるでしょう。

4.appealing.

UIのアニメーション部分に注目し、多彩なUIのアニメーションやアクションを閲覧できるのが、この『appealing.』というサイトです。

各サムネイルをクリックすると、数十秒の動画で実際にどのようなアニメーションやアクションの動きをしているのかを確認できます。
動画やアニメーションにはタグが設定されているため、同じようなアニメーションやアクションの動きを確認したい場合は、タグを利用した検索を活用しましょう。

UIのアニメーションデザインの実例を見たい方はもちろん、たくさんのアニメーションに触れ、アイデアを生むためのきっかけにしたいという方にもおすすめです。

5.Mobbin

10万点以上ものUIデザインのスクリーンショットを収集、公開しているギャラリーサイトが『Mobbin』です。

Mobbinの特徴は、その更新頻度の高さです。日々最新のアプリのデザインパターンをチェックできるため、最新のデザインのトレンドを把握できます。

また、Mobbinでは実際に商用化されているアプリのデザインが多数投稿されているのも特徴の一つです。フィルタリング検索を通して、自身の作りたいUIイメージに近く、かつ実際に商用化されたアプリをピンポイントで見つけ、参考にすることができるでしょう。

6.UX Archive

『UX Archive』は、UIデザインの中でも、特にスマートフォンアプリ内の導線設計を考えたいときに役立つギャラリーサイトです。

アプリにおける登録画面や検索画面、管理画面など、アプリの導線を詳細までチェックすることが可能です。また、アプリのUIがバージョン変更を経るごとにどう変化したのかを閲覧することもできます。そして、UX Archiveは、「誰もが知る有名なアプリ」の多くを網羅しているのが大きな特徴といえます。

『Facebook』や『Instagram』、『SmartNews（スマートニュース）』、『Google Maps』など知名度の高いアプリのUIを確認できるだけでなく、アプリの導線はどうなっているのか、そしてバージョンアップを経てどう変化しているかを確認できるため、有名なアプリのUIを参考にアプリを作りたいと考える方には最適のサイトです。

スマートフォンアプリのUI UXデザインの参考になるサイト7選

続いて、スマートフォンアプリのUI UXデザインの参考になるサイトを紹介します。

スマートフォンアプリのUI UXデザインにおけるポイントは、

1. スマートフォンの画面サイズにデザインを合わせること
2. スマートフォンならではの操作を考慮すること
3. 操作時の指の位置や動きに合わせてデザインを考えること

の3つが挙げられます。

スマートフォンの画面は小さいため、表示させる情報量を絞り込むことが重要となります。UI UXを設計する際には、各画面で何を伝えるべきかを明確にし、情報量の調整はもちろん配色やフォントなど、シンプルで分かりやすい表示を心がけるべきです。

また、スマートフォンの操作時は「スワイプ」や「フリック」、「タップ」など、他の端末にはない独特の操作を行います。そのため、操作時に誤操作を行うことのないよう、配慮したデザインが求められるでしょう。

最後に、スマートフォンは片手で持つことが一般的で、親指で操作する人が少なくありません。そのため、スマートフォンを持ったときの手や指の位置を考え、指が届きやすい場所、届きにくい場所を把握してアプリのボタン配置などを行うことが大切です。

以上を意識するとともに、以下で紹介するサイトを参考にすることで、より良いUI UXデザインの制作につなげられるでしょう。

1.FIRST RUN UX

『FIRST RUN UX』は、アプリに限定してユーザー体験（UX）を解説しているサイトです。

FIRST RUN UXの特徴は、アプリ画面を紹介後、アプリの内容をまとめて解説している点が挙げられます。特に、参考にすべき部分は「The good bits」、改善すべき部分は「To be improved」と、それぞれの項目に分けて紹介しています。そのため、掲載されているアプリのどの部分が良い点なのか、どう改善したらより良くなるのかを理解しやすい点が強みといえるでしょう。

また、先ほどもアプリに限定していると述べたとおり、アプリのUXサンプル数が豊富にそろっているのがこのサイトのもう一つの特徴です。これからアプリ設計を検討している方にとっては、自身が設計しようとしているアプリに類似するサンプルも見つけやすいでしょう。

なお、アプリを探す際は、サイトのトップページからスクロールするのも手段ですが、「アーカイブ」のページから探すと、より見つけやすいためおすすめです。

2.pageflows

『pageflows』は、あらゆるアプリやサービスのUIデザインを収集しているサイトです。掲載されているアプリ画面の数が多いため、自身の参考にしたいアプリ画面やUIデザインを見つけやすいといえるでしょう。

pageflowsは、アプリのスクリーンショットをサインアップ画面や設定画面、アクションメニューなどピンポイントで指定して検索できるのが特徴です。その他、動画や音楽の再生、カレンダー、プロモーションなど、開発する機能ごとにカテゴリ分けされているため、自身のアプリ設計において開発したい機能のみに絞ってチェックすることもできます。

また、スマートフォンやアプリだけでなく、テレビやパソコン、タブレット端末におけるUIデザインを探すこともできるため、モバイルやアプリに限らずUIデザインの参考として役立つでしょう。

3.Material Design

『Material Design』は、Googleのデザイナーとデベロッパーによって構築、サポートされているオープンソースデザインシステムです。

マテリアルデザインとは、Googleが2014年に提唱した明確なガイドラインを定めたデザインのことで、「見やすさと直感的な操作が可能なWebページやサービス」を作ることが目的です。

マテリアルデザインにはいくつかの特徴があり、

• 現実世界の物理法則を反映すること
• 色数を少なく配色すること
• 連続性のあるアニメーションの活用

などが挙げられます。

上記の目的および特徴を満たすガイドラインでもあるため、サイトのワイヤーフレームを作成する際に活用するのがおすすめの使い方です。Googleが推奨するマテリアルデザインに則った、アプリ・Webサイトの世界観と、ユーザーの操作に一貫性のあるデザインを生み出すことができるでしょう。

4.Mobile Design Inspiration

『Mobile Design Inspiration』は、モバイルデザインのインスピレーションを促せるような、モバイルアプリのUIデザインやインタラクションを収集したギャラリーサイトです。

iPhoneやAndroidはもちろん、iPadやApple WatchのUIやインタラクションをチェックできます。GIFアニメーションが豊富に使用されているため、デザインやインタラクションの動きを段階ごとに見ることも可能です。

その他にも、ロゴデザインやコンピューターグラフィックス、スケッチデザインリソースを調べることもできるため、あらゆるWebデザインの参考として活用しやすいサイトといえるでしょう。

5.Up.labs

『Up.labs』は、iOSをはじめさまざまなUIデザインを収集、紹介しているサイトです。

特徴は、その更新頻度の高さにあります。毎日新しいデザインサンプルが追加されているのが特徴で、最新のデザインをチェックしインスピレーションを得たい方にぴったりといえるでしょう。

トレンドタグによって注目度の高いデザインを優先して探すことができます。その他にも、iOSやAndroid、Webなど、媒体別にそのまま利用可能なテンプレートデザイン、イラストやアイコン、フォントなどの関連デザインもチェックできる点が魅力です。

6.Android Niceties

『Android Niceties』は、その名のとおり「Androidアプリ」に特化しているのが特徴のギャラリーサイトです。利用料は無料で、世界中のAndroidアプリのUIデザインをスクリーンショット形式で閲覧できます。

AndroidアプリのUIデザインに特化しているギャラリーサイトは珍しいことから、Androidアプリの設計やデザインがしたいと考えている方にとっては、Androidアプリの設計やデザインに取り組む際に、ぜひ見ておくことをおすすめします。

Android Nicetiesでは、スクロールなどの基本操作のみでさまざまなUIデザインをチェックできます。また、掲載されているアプリにはダウンロードサイトへのリンクも掲載されているため、デザインだけでなく実際にアプリを試して使用感やデザインの有用性を確認できる点も特徴の一つです。

7.App Animations

『App Animations』は、その名のとおりモバイルアプリの「アニメーション」部分に着目し、収集、動画で紹介しているサイトです。

モバイル端末でアクセスすることで、アプリのアニメーションをフルスクリーンでループ再生することができるほか、会員登録後に気になったアプリのアニメーション画面をお気に入りとして保存することもできるのが特徴です。

また、登録されているアニメーションは操作場面ごとにタグで分類されており、ボタンやナビゲーション画面など、特定の場面のみを検索してチェックすることも可能です。

UIデザインのアニメーションは、ユーザーが操作する上での使いやすさにも大きく影響します。アニメーションを考える際はぜひ参考にしたいサイトといえるでしょう。

オールマイティなUI UXデザインの参考になるサイト7選

次に、スマートフォンやWebサイトといったデバイス・メディア別ではなく、オールマイティにUI UXデザインの参考になるサイトを紹介します。

UI UXデザインを考える際、中には「スマートフォン専用」、「アプリ専用」のサイトだけでは参考事例が不足していると感じてしまう場合もあるでしょう。そのような場合は、ぜひ以下で紹介するサイトを参考にしてみることをおすすめします。

用途やデバイスを限定せず、さまざまなUI UXデザインに触れることで、自身のデザイン制作を進める大きなきっかけになるかもしれません。

1.Bestfolios

『Bestfolios』は、海外の業界トップクラスのデザイナーやエンジニアなど、さまざまな業界・職種の人々を対象に、実際にインターネット上に公開されているレジュメやポートフォリオを収集、公開しているサイトです。

デザイン性の高いポートフォリオが豊富にそろっており、自身のポートフォリオ作成の参考にするのはもちろん、インターネット上で公開されているページであることから、サイトデザインやUIデザインの参考にするのにもおすすめといえます。

カテゴリ別はもちろん、タグ検索にも対応しているほか、各紹介ページでは詳細情報や関連リソースなども参照できる点も特徴の一つです。

2.Collect UI

『Collect UI』は、WebやアプリのさまざまなUI UXデザインやイラスト、Webサイト・アプリデザインなどを「パーツ別」に分類して収集しているのが特徴のギャラリーサイトです。以下は、集められているパーツデザインの一部です。

• サインアップ
• ユーザープロフィール
• ランディングページ
• 設定
• 404ページ
• お問い合わせ画面
• 検索画面
• オンボーディング
• アプリアイコン など

このほかにも、多種多様なカテゴリごとに優れたデザインを閲覧できるため、WebサイトやアプリのUI UXデザインの参考として役立つでしょう。

また、掲載されるデザインは、ユーザーに新しいインスピレーションを与えられるよう、運営のデザイナーにより一つひとつしっかり精査されたハイクオリティの作品のみとなっている点も、Collect UIの特徴といえます。

3.Muzli

『Muzli（Muzli Search）』は、ビジュアル重視で画像検索ができるのが特徴の検索Webサービスです。プロトタイピングツールが有名な「InVision」により提供されています。

優れたWebサイトの検索はもちろん、有益な情報を得られる記事の検索、閲覧など、多様な用途でサイトを利用できます。キーワード検索のほか、HEXカラーコード、色の名前などでも検索することができる点が、デザイナーを対象にしているMuzliならではといえるでしょう。ちなみに、検索したカラーパレットはダウンロードすることも可能となっています。

また、Muzliのポイントは、Muzli上にある作品のみならず、他のサービス、サイトの作品を横断的に検索できる点です。Muzliに限らず、幅広いソースから情報や作品を見つけられるのが、このサイト独自の強みとなっています。

4.Behance

『Behance』は、 アドビが運営するクリエイターのためのソーシャルメディアプラットフォームです。

最大の特長は、世界中のトップクリエイターからインスピレーションを得られる点です。

UIデザインだけでなく、ユーザーリサーチ、ワイヤーフレーム、プロトタイプといったUXの設計プロセス（ケーススタディ）を深く掘り下げた投稿が豊富です。「なぜこのデザインになったのか」という論理的な背景を学びたい方にとって、非常に価値のあるサイトとなるでしょう。

また、Adobe製品（PhotoshopやIllustratorなど）との連携も強く、国内外の幅広いジャンルの作品を網羅しています。

5.Dribbble

『Dribbble』は、UI UXデザインの参考になる定番サイトとして人気の高いサイトの一つです。

高品質なデザインが収集されているクリエイター、デザイナー向けのSNS、デザインコミュニティでもあり、デザインについてクリエイターとコミュニケーションをとることも可能です。
より具体的にデザインの詳細を知りたい、デザイナーやクリエイターと交流を深めたいという方にもおすすめのサイトといえます。

また、Dribbbleにデザインを公開するためには、すでに会員登録を行っているユーザーからの招待を受けることが必須となっている点も特徴です。この招待制が、掲載されているデザインのクオリティ維持にもつながっています。

6.ScreensDesign

『ScreensDesign』は、スマートフォンアプリのUIデザインの中でも優れたものを厳選し、スクリーンショット形式で公開しているサイトです。

UI Sourcesに掲載されているUIデザインは、カテゴリ別に細かく分類されているため、自身が探しているUIデザインを見つけやすくなっています。

各UIデザイン別にユーザーのインタラクションを動画で閲覧することもできるため、操作中の画面の動きのチェックを通して、UIだけでなくUXデザインの参考にもなる点が強みです。

「スクリーンショットなどの静止画だけではUXデザインの参考にするのが難しい」と悩んでいる方にとって、特におすすめのサイトといえるでしょう。

7.KASOU

『KASOU』は、Webデザインの情報収集から基礎学習までを一元的に支援する、学習支援型サービスです。

デザインの検索、知識のインプット、学習の継続まで、これひとつでカバーできます。
毎日更新される国内外のWebサイトやLPのギャラリー機能では、最新のデザイン、配色、構造、UI UXのアイデアを効率的に発見可能。
さらに、Webデザインに関する最新知識の解説や動画学習、プロのデザイナーによる課題フィードバックまで幅広く提供しています。

Webデザイナー、開発者、そしてデザインを探している企業にとって、日々の業務と学びの両面を支える頼れるパートナーといえるでしょう。

UI UXデザインとは

そもそも、「UI UXとは何なのか」、「聞いたことはあるけど、詳しい意味は覚えていない」という方もいるかもしれません。UI UXデザインの参考になるサイトを紹介する前に、まずはUI UXの概要と重要性について紹介します。

UI（ユーザーインターフェース）とは

「UI」とは、「User Interface（ユーザーインターフェース）」という言葉の略称です。UIは、Webサイトやサービス、アプリなどにおいて、ユーザーが利用時に触れる接点全てを指します。

例えば、スマートフォンやパソコンであれば、ディスプレイやオーディオ、マウス、キーボードなどが該当します。

Webサイトやアプリであれば、ページのデザインはもちろん、文字のフォントや画像、動画、ユーザーが操作したときの動作（起動や他のページへの移動など）や機能性もUIに該当します。

UIデザインが洗練されており操作性が高ければ、快適にWebサイトやアプリを利用することができるため、ユーザーの満足度も高くなるでしょう。

しかし、UIデザインに不足な点が多ければ、操作が分かりにくい、動作が遅いなどの不満を生み、ユーザーが離脱する原因にもなります。

UIデザインは、Webサイトやサービス、アプリにおいて、ユーザーの満足度に直結する重要な要素となり得ます。UIを重視し、デザインを常に改善・充実させることは、Webサイトやサービス、アプリなどの品質向上に不可欠な要素といえるのです。

UIについては、下記の記事で詳しく解説しているのでぜひ併せてご覧ください。

■参考記事：

UX（ユーザーエクスペリエンス）とは

「UX」とは、「User Experience（ユーザーエクスペリエンス）」という言葉の略称です。「ユーザー体験」と言われることもあり、Webサイトやアプリを通してユーザーが体験する経験全てをUXは指しています。

UXに含まれる「経験」には、ユーザーが実際に体験することはもちろん、想像、想起される事柄、サービスの利用にともなう感情や行動、利用に関連して起こった個人的な出来事の全てが該当します。そのため、非常に幅広い概念であるといえるでしょう。

質の高い経験を提供することは、ユーザーの満足度を高め製品やサービスの評価を向上させることにつながります。製品やサービスを通して、ユーザーに対し「より良い経験」を提供するために重要となるのがUXデザインです。

UXについては、下記の記事で詳しく解説しているのでぜひ併せてご覧ください。

■参考記事：

UI UXデザインの参考サイトの活用方法

本記事で紹介した参考サイトをどのように活用するとより効果的なのでしょうか。

ここでは、参考サイトを活用する際のポイントを解説します。

UIデザインとビジュアルデザインは分けて参考にする

サイト・アプリの事例を参考にする際は、UIデザインとビジュアルデザインを分けて考えましょう。

UIデザインの設計は、利便性や機能性を高めてユーザーが使いやすいサイトやアプリにすることを主目的としています。一方で、ビジュアルデザインは、視覚的なインパクトや、コンセプト・メッセージのデザインへの落とし込みなどビジュアルでコミュニケーションを取るためのデザインです。

UIデザインとビジュアルデザインはどちらもUXを向上させるものですが、その目的は異なります。そのため、参考にするときはUIデザインとビジュアルデザインを分けた方が良いでしょう。

UIデザインを参考にする場合は、利便性や機能性など、ユーザーにとって「使いやすい」、「分かりやすい」を追求しているデザインや工夫を参考にしてみてください。

参考例の良い点を言語化する

参考例を見る時に、良い点をしっかりと言語化していきましょう。複数のWebサイト・アプリの良い点を言語化していくと共通点が見えてくるはずです。その共通点を取り入れることで、デザインの細部が異なっていてもUIに優れたデザインを作れるでしょう。

また、他のメンバーやチームと共有する時も、言語化しておかないと自分が良いと思った点を的確に共有できません。良い点を言語化しておくことは、UIデザインを制作する際に他のメンバーと共有する上でも重要です。

自社に近い業種・目的のサイトを参考にして要素を取り入れる

UIデザインは、Webサイト・アプリのターゲットにとってのUXを向上させるためのものなので、ターゲットによって異なります。また、ECサイトとコーポレートサイトでは、優れたUIが異なるように、サイト・アプリの目的によっても変わります。

そのため、参考にするときは自社に近い業種・ターゲット・目的のサイトを参考にしましょう。その方が、参考例の中で自社に取り入れられる点が多くなります。

まとめ

今回は、UI UXデザイン、アプリやWebサイトデザインの参考になる20サイトを紹介しました。自身のイメージに近いデザインのサイトをチェックして参考にするのはもちろん、優れたデザインに多く触れることは、新たなアイデアや設計を生むことにもつながります。

ぜひ、今回紹介したおすすめサイトをチェックし、自身のデザインや設計をブラッシュアップしながら、質の高いWebサイトやアプリの制作を目指しましょう。


ニジボックスではサイト制作や開発における、情報設計やビジュアル設計、デザインガイドライン制作といったUIデザイン面に加えて、ユーザーテストなどによるUX観点でのご支援も行っております。

下記資料にて、人間中心設計の考え方をベースとしたUXリサーチ結果に基づいた、ニジボックスのユーザー課題解決型のUIデザインフローや、支援事例を一部紹介しています。
ご興味を持たれた方はぜひ、下記ダウンロードリンクよりご参照ください！

個別課題のご相談窓口

みなさま固有の課題や、AI導入の具体的なフェーズに合わせたご相談を承っております。
具体的な相談内容が決まっていなくとも構いません、お気軽にお声がけください。