---

ニジボックスのUI UXノウハウや案件事例をご紹介！

---

Webサイトのデザインやアプリデザインを考える際、どうデザインすべきか悩んでしまいがちなのが「UI UX」ではないでしょうか。「どう設計すれば良いUI UXになるのか分からない」「イメージはあるけどうまくデザインに落とし込めない」という方も少なくないでしょう。

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

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

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デザインの参考になるサイト6選

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

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

1.Pttrns

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

公式サイト内の左側にカテゴリが並んでいるため、自身が参考にしたいカテゴリの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、スマートニュース、Googleマップなど知名度の高いアプリのUIを確認できるだけでなく、アプリの導線はどうなっているのか、そしてバージョンアップを経てどう変化しているかを確認できるため、有名なアプリのUIを参考にアプリを作りたいと考える方には最適のサイトです。

モバイル（スマートフォン）アプリのUI UXデザインの参考になるサイト8選

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

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

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

の3つが挙げられます。

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

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

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

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

1.First Time Experiences

「First Time Experiences」は、アプリに限定してユーザー体験（UX）を解説しているサイトです。

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

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

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

2.Screenlane

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

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

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

3.Material Design

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

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

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

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

などが挙げられます。

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

4.Mobile Design Inspiration

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

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

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

5.AGT

「AGT（AGT smartphone design gallery）」は、iPhone向けの質の高いスマートフォンサイトを集めているギャラリーサイトです。

運営元である株式会社ヒカリナが、スマートフォンサイトのUI改善や制作業務、ユーザーに対してのリサーチ業務など、日々スマートフォンサイトを調査する中で見つけた優れたサイトが数多く掲載されています。

UIデザインはもちろん、UXデザインとしてもハイクオリティなデザインが掲載されているため、ユーザー体験を向上させるためのデザインの参考にしたい場合に活用するのがおすすめです。

タグはエンタメやファッション、フード、ニュースや美容などジャンル別になっているほか、色でもタグづけされているため、「○○色の配色デザインの参考が欲しい」という場合にも見つけやすいでしょう。また、掲載されているデザインは各事例をキャプチャで表示できるため、見やすく使いやすいのも魅力です。

6.Uplabs

「Uplabs」は、iOSをはじめさまざまなUIデザインを収集、紹介しているサイトです。

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

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

7.Android Niceties

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

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

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

8.App Animations

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

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

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

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

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

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

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

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

1.UI Garage

「UI Garage」は、優れたUIデザインや最新トレンドのUIデザインのスクリーンショットを、カテゴリ別に検索して閲覧できるギャラリーサイトです。

カテゴリはiOSやAndroid、Webなどの媒体別や、カレンダーやダッシュボード、エラーメッセージ、404などの動作別などに分類されており、充実度が高いのが魅力といえます。また、それぞれのカテゴリを指定することで、自身が設計したいと考えているUIデザインにより類似したデザインをピンポイントで検索することもできます。

メールアドレスを登録することで、最新のUIデザインが投稿された際に通知を受け取ることもできるため、常に最新のデザインを把握するのに便利です。

2.Bestfolios

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

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

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

3.Collect UI

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

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

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

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

4.Muzli

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

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

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

5.User Onboarding

有名なWebサービスやアプリのUI UXに関して、さまざまな観点から評価し良い点、改善点を解説しているのが「User Onboarding」です。

特に、初回アクセス時や新規登録時のフローをメインに説明しているのが特徴となっています。

初回アクセスや新規登録のフローは、ユーザーに利用方法を理解してもらう、ユーザー登録をしてもらうなど、さまざまな要素や情報を詰め込まなければなりせん。しかし、フローが長くなりすぎるとユーザーの途中離脱を招く恐れがあります。

先ほども述べたように、User OnboardingはDropboxやHulu、Apple Musicなど、誰もが知る有名なサービスを例にして、初回アクセスや新規登録時におけるフローを解説しているのが特徴です。

User Onboardingを通して、上記のリスクを避けるためのフローの改善点や注意点を把握するのはもちろん、成功しているサービスの優れたデザインからUI UXデザインについて学ぶことができるでしょう。

6.Dribbble

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

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

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

7.UI Sources

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

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

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

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

サイトデザインの参考になるサイト13選

ここからは、「サイトデザイン」を考える際に参考になるサイトを紹介します。その前に、「UI UXデザイン」と「サイトデザイン」の違いについて、今一度確認しておきましょう。

UI UXデザインは、冒頭で解説したように、アプリやWebサイトを通してユーザーにとって快適な操作性を実現することや、ユーザーにとって価値のある体験を提供すべく設計を行うことです。

一方、サイトデザインとは、パソコンやスマートフォンで表示される、サイト画面のレイアウトや情報設計、色彩設計など、サイトを構築するさまざまな要素を設計し、デザインを決めることを指します。

つまり、UI UXデザインはユーザーの操作性・体験を最優先に考えて設計を行うのに対し、サイトデザインはサイトの見た目を重視して設計を行う点が異なります。
良いWebサイトやコンテンツを制作するには、UI UX、サイトデザインのいずれも、バランスよく設計することが重要といえるでしょう。

1.AWWWARDS

「AWWWARDS」は、Webサイトのデザインを中心としたギャラリーサイトです。デザインに優れた世界中の作品がカテゴリ別に掲載されています。

AWWWARDSの大きな特徴は、そのサイト名のとおり、投稿されているデザインに対して、閲覧するユーザーによって採点および投票が行われる点です。デザイン、コンテンツ、ユーザビリティ、クリエイティビティの4つの項目で採点、評価が行われています。

採点されたデザインは期間別に順位づけされ、月間、年間はもちろん、一日単位での順位をチェックすることもできるため、常に最新の高評価サイトを閲覧できます。

グラフィックデザインが優秀なサイトをはじめ、斬新なアクションやアニメーションを取り入れたサイトなどが多数掲載されている点も、AWWWARDSのおすすめポイントの一つです。

2.Web Design Clip

「Web Design Clip」は、国内を中心に、ホームページやWebデザイン制作の参考となるようなクオリティの高いWebサイトを収集しているギャラリーサイトです。

現在の登録数は2023年1月時点で4,378サイトとなっており、いずれも最新のトレンドを押さえたデザイン性の高いWebデザインがそろっています。

掲載されているWebデザインは、キーワード検索できるのはもちろん、メインカラー・サブカラーの指定や、レイアウトを指定して検索することも可能です。

また、「コーポレートサイト」や「アパレル・ファッション」、「動物・ペット」「ポートフォリオ」などカテゴリが充実しているほか、アニメーションやイラスト、スクロールなど、タグ別で検索・閲覧もできます。

3.URAGAWA

株式会社ハイブが運営している「URAGAWA」は、クリエイティブカンパニーの情報を収集、蓄積によって、クリエイティブカンパニーとクリエイター、クライアントとの関係構築を目的としたデータベースサイトです。

URAGAWAのサイトコンテンツは、「ギャラリー」「メディア」「カンパニー」の3つのカテゴリに分けられているのが大きな特徴といえます。

サイトデザインの収集・掲載はもちろん、クリエイティブ業務の裏側やクリエイターの組織論をチェックできる記事の掲載、クリエイティブに特化した企業および求人の紹介なども行っています。

デザインだけでなく、デザインを作った会社の詳細も知りたいという方にぴったりのサイトです。

4.SANKOU!

「SANKOU!」は、国内のビジュアルやコンテンツが魅力的なサイトや、技術を駆使しているサイト、UI UXに優れているサイトなどを厳選して収集・掲載しているサイトです。

あらゆる業種や業界、テイストの異なるWebデザインをカテゴリ別に掲載しているため、参考にしたいサイトや自身のイメージに近いデザインのサイトを、より効率的に探すことができます。

気になったサイトは「お気に入りのサイト」としてサイト上に保存することもできるため、探し直す手間も省くことができるでしょう。

掲載されているデザインの一覧や詳細ページにはクレジットを掲載しているため、サイトの制作者を知りたい場合や、他の実績を見たいとき、依頼先を探している場合にも役立ちます。

5.Media Queries

「Media Queries」は、海外の「レスポンシブデザイン」を中心に収集、公開しているギャラリーサイトです。レスポンシブデザインに特化しているサイトは珍しいことから、レスポンシブデザインの参考事例を集めたいときに重宝するサイトといえます。

レスポンシブデザインとは、サイトを閲覧しているユーザーの端末画面のサイズに合わせて、ページレイアウトを最適化するデザインのことです。

レスポンシブデザインを実装することによって、サイトをパソコン版、スマートフォン版など別々に管理する必要がなくなるというメリットを得られます。

Media Queriesは、このレスポンシブデザインのWebサイトを多数閲覧できるのはもちろん、Media Queriesのサイト自体もレスポンシブデザインとなっているのも特徴です。

6.マネるデザイン研究所

「マネるデザイン研究所」は、優れたデザインが施されたWebサイトをピックアップし、参考点や応用場面、さらには改善点などをまとめているのが特徴です。

サイト名のとおり、「マネしたいポイント」を解説とともにチェックすることができるため、より具体的にデザインの良い点を学ぶことができるでしょう。

マネるデザイン研究所には、「EC・ショッピング」や「スポーツ」、「IT・ソフトウェア」、「広告・コンサルティング」など、掲載されているサイトのカテゴリも豊富にそろっているのが魅力といえます。

自身の興味のあるジャンルの参考事例を探すのはもちろん、デザインをもっと深く学びたいと考えている方にもおすすめのサイトです。

7.I/O 3000

「I/O 3000」は、国内外を問わず、Web制作の参考になるサイトを厳選し収集しているWebデザインギャラリーサイトです。

質の高いサイトがそろっているのが特徴で、カテゴリ別検索やタグ検索、色検索に加えて、テキストでの検索も行えるため、より効率的に求めているWebデザインを見つけやすいといえるでしょう。

また、I/O 3000の更新頻度は一日1サイトと高く、常に最新のWebデザインをチェックできます。更新情報はTwitterでも発信しているため、Twitterもチェックすることでより早く更新情報を把握できる点も便利です。

8.Good Web Design

2019年春より開設された「Good Web Design」は、Webデザイナーやコーダー、エンジニアの方に向けて良質なWebサイトやサイトデザインを紹介しているのが特徴のギャラリーサイトです。

掲載されているサイトは業界別にカテゴリ分けされており、業界別にサイトデザインのトレンドやデザインの雰囲気、トーンやマナーの傾向が把握できます。さらに、登録日をチェックすることで年代別のトレンド把握も可能です。

Good Web Designはサイトデザインのギャラリーだけではなく、現役のWebデザイナーやエンジニアによるオリジナルコラムの掲載や、クリエイター・デザイナー向けの求人情報の紹介など、他のコンテンツも充実している点も強みといえます。

9.現代デザイン

「現代デザイン」は、技術的、デザイン性が優れているWebサイトのトップページおよび中面ページを掲載しているギャラリーサイトです。
トップページと中面ページが一覧で表示できるようになっているため、それぞれのページ同士のつながりやバランスをチェックしやすいのが特徴といえます。

掲載されているサイトは、「おもちゃ・ゲーム」や「イベント・コンテスト」、「ショッピング」、「メディア・広告」など幅広いカテゴリ別に分類されているほか、色別にタグづけされているため、色のイメージで検索しやすいのも特徴です。

また、更新年、月別のアーカイブから探すこともできるため、年代別のトレンドも把握しやすいでしょう。

10.デザインのこと- Web design gallery

「デザインのこと- Web design gallery」は、国内・海外のWebデザイン、タブレットやスマートフォンなどでも見やすいレスポンシブ対応のサイトデザインを収集しているサイトです。

デザイナーやコーダーなど、Web制作に携わる人が「いいな」と感じられるものを提供するのが、このサイトのコンセプトとなっています。

「デザインをさっと見る」というボタンを押すことでページ全体のキャプチャ画像を一気にチェックすることができます。

ほかにも、気に入ったデザインを保存できる「お気に入り機能」、色やテイストを指定して検索できる「フィルター検索（絞り込み検索）」など、便利な機能がそろっているのが魅力のサイトです。

11.81-web.com

「81-web.com」は、Webサイトの制作時に参考になる優れたデザインのサイトを収集したギャラリー＆リンク集サイトです。

サイト名の「81」は、日本の国際電話番号に由来しており、サイト名の示すとおり日本国内のサイトのみをピックアップし掲載しているのが特徴です。

掲載されるサイトに直接飛ばなくても、ポップアップ機能でスマートフォン用のサイトやパソコン用サイトをチェックできるため、操作時の動作も軽く快適に利用できる点も魅力といえます。

また、更新頻度も高く、タグも充実しているため、自分のイメージに近いサイトデザインや求めているサイトデザインをピンポイントで見つけることができるでしょう。

12.Behance

「Behance」は、グローバル企業である「Adobe」が運営しているクリエイター向けのポートフォリオ収集サイトおよびSNSサービスです。世界19ヵ国語に対応しており、日本語にも対応しています。

多種多様な業界・業種のクリエイターたちによるポートフォリオが公開されており、どれも高品質で完成度が高いのが大きな特徴です。

検索時にフィルターを利用することで、推薦順や国ごとにソートなど、さまざまな条件でデザインを検索・閲覧できます。

Behanceでは、パソコン向けサイトはもちろんアプリのデザインまで幅広く取り扱われているため、分野を絞らずにデザインの参考事例を見つけたい場合にも便利です。

13.Pinterest

「Pinterest」は、デザインをテーマにしたコミュニティサイトです。ユーザーによりさまざまなデザインが投稿されており、デザインの参考には定番のサイトといえます。

Pinterestでは、気になるジャンルのデザインをピンポイントで検索できる基本の検索機能のほか、気に入ったアイデアを保存して、あとからチェックできる「ピン留め」機能も便利です。

また、ピン留め機能によって保存されたデザインと関連するデザインを提示してくれる機能もあるため、自身では探しきれなかったデザインを見つけることもできます。

Pinterestはその掲載数の多さが大きな特徴のため、自身の目当てのデザインや参考にしたいデザインが見つかるかもしれません。

モバイル（スマートフォン）サイトデザインの参考になるサイト4選

最後に、モバイル（スマートフォン）向けのサイトデザインの参考になるサイトを4つ紹介します。

モバイル向けのサイトデザインについても、UI UX、情報の分かりやすさ、配色のバランスなどが重要になる点はパソコンで表示されるサイトと同様です。

しかし、モバイルの場合は指で操作することが主であるため、モバイル（スマートフォン）に最適化されたデザインを考えることが重要になってきます。

以下で紹介しているサイトでは、モバイル（スマートフォン）向けのサイトデザインを多数紹介しています。ぜひデザインの参考にしてみてください。

1.Responsive Web Design JP

「Responsive Web Design JP」は、日本国内の優れたレスポンシブWebデザインを収集、公開しているギャラリーサイトです。レスポンシブデザインのWebサイトを掲載しているギャラリーサイトは数多くありますが、このサイトの特徴は、「日本国内のWebサイト」に特化している点といえます。

掲載されているサイトは、「個人」や「制作会社」、「インテリア・雑貨」、「アート・文化・芸能」など、幅広いカテゴリに分類されているほか、色や技術別に絞り込み検索を行うこともできます。

また、掲載ページでは、スマートフォン、タブレット、パソコンでそれぞれサイトを表示した際のキャプチャ画面を一覧で確認でき、デバイスによるデザインの変化もチェックしやすいのが特徴です。

Responsive Web Design JPに掲載されているサイトだけでなく、Responsive Web Design JP自体もレスポンシブデザインとなっています。

2.sps collection

「sps collection」は、デザイン性に優れたスマートフォンサイトを収集、掲載しているギャラリーサイトです。レスポンシブデザインにも対応しており、パソコン、スマートフォンのどちらからでも利用できます。

掲載されているサイトは「エンターテインメント」や「メディア・広告」、「政治・行政」などのカテゴリ別に閲覧できるのはもちろん、デザインのメインカラー別に閲覧することも可能です。

更新頻度が高く豊富なサイトを掲載しているだけでなく、ブックマーク機能によって気に入ったデザインの保存が可能など、利便性も追及されている点が強みといえます。

アーカイブによって、更新年月ごとにデザインを閲覧することもできるため、スマートフォンサイトの年代ごとのトレンドを追うこともできるでしょう。

3.Web Design Clip [S]

サイトデザインの参考になるサイトの章で紹介した「Web Design Clip」は、Webデザインの制作において、制作者のインスピレーションを刺激するようなWebサイトやアイデア、技術、デザインをクリップしているサイトです。

このサイトは「日本国内のWebデザイン」「海外のWebデザイン」「ランディングページデザイン」「スマートフォン/レスポンシブWebデザイン」の4つのコンテンツに分かれているのが大きな特徴といえます。

4つのコンテンツの一つである「スマートフォン／レスポンシブルWebデザイン」の収集、掲載に特化しているのが、今回紹介する「Web Design Clip [S]」です。

掲載されているWebサイトのスクリーンショットをクリックするとサイトに飛び、レスポンシブルデザインをチェックすることができます。

4.Media Queries

先ほど「サイトデザインの参考になるサイト」でも紹介した「Media Queries」ですが、スマートフォンサイトを作る際にも、掲載されているデザイン（主にレスポンシブデザイン）を参考にすることができます。

前述したとおり、Media Queries自体もレスポンシブデザインになっているため、パソコン、スマートフォンやタブレットからでも閲覧できます。パソコンサイトだけでなくスマートフォンサイトのレスポンシブデザインの参考としてもおすすめのサイトといえるでしょう。

まとめ

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

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


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

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