---

---

本記事では、Webデザインの参考になるおすすめサイトを紹介します。

Webマーケティング上で、WebサイトやLPのデザインは非常に重要です。Webデザインを考える上で、「いま流行しているサイトのデザインが分からない」「優れたWebデザインのイメージが欲しい」など、サイトの参考例を知りたい方は多いと思います。

デザイナーはもちろん、発注する側もデザインのイメージを持っておくことは重要です。ぜひ、本記事より良いサイトの参考例を見つけてWebサイト制作に役立ててください。

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

Webサイトのデザインを考える際に参考になるサイトを13点、ご紹介します。海外サイトをまとめているサイトや、国内のサイトをまとめているサイトなど、それぞれ特徴があるので、目的に合わせて参考にしてください。

1.『AWWWARDS』

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

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

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

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

2.『Web Design Clip』

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

現在の登録数は国内のサイトだけでも6,000以上（2026年4月時点）となっており、いずれも最新のトレンドを押さえたデザイン性の高いWebデザインがそろっています。

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

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

3.『URAGAWA』

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

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

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

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

4.『SANKOU!』

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

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

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

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

5.『Web Design Garden』

『Web Design Garden』は、国内外のWebサイトを参考事例として紹介しているサイトで毎日更新されています。

サイト種別・業種別・機能別など、さまざまな切り口でジャンル分けされているため、自分の目的にあった参考サイトを効率よく探せるのが特徴です。

また、レイアウト・色・フォントなどでも検索できるため、ビジュアルコンセプトやデザインイメージが決まった時点で、参考サイトをいくつか見てみると良いでしょう。

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

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

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

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

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

7.『I/O 3000』

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

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

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

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 Inc.が運営しているクリエイター向けのポートフォリオ収集サイトおよび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』自体もレスポンシブデザインになっているため、パソコン、スマートフォンやタブレットからでも閲覧できます。パソコンサイトだけでなくスマートフォンサイトのレスポンシブデザインの参考としてもおすすめのサイトといえるでしょう。

Webデザインの参考サイトを活用するポイント

Webデザインの参考サイトはいくつかのポイントを意識すると、より効果的に活用できます。

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

ターゲットやコンセプトが類似しているサイトを見つける

優れたWebデザインは、ユーザー層や目的によって変わります。

例えば、高齢者にとって印象の良いWebデザインと、10代にとって印象の良いWebデザインはトンマナやビジュアルが異なるということです。

そのため、ターゲットやデザインコンセプトが類似しているサイトを参考にしたほうが、より自社サイトに活用できる点が見つかるはずです。
デザインの引き出しを増やすために、全くコンセプトが異なるサイトを見たいなど、特別な目的がない場合は、まずはターゲットやコンセプトが類似しているサイトを参考にしましょう。

一部ではなく全体を俯瞰して参考にする

Webデザインを参考にする際は、一部分のみを見るのではなく、全体を俯瞰しながら参考にできる点を取り入れていきましょう。

例えば、画像の使い方で印象に残るような優れたデザインがあるとします。しかし、その画像の使い方だけをただマネしても、周りのデザインとの調和が取れず、優れたデザインにならないかもしれません。

つまり、周りやページ全体のデザインとのバランスや調和も考えながら、デザインを考えていかなければならないということです。そのため、全体を俯瞰しながら参考にできる点を取り入れていきましょう。

UIも意識しながら取り入れる

Webサイトを制作する際は、ビジュアルデザインのみが優れていても、優れたWebサイトとは言えません。ユーザーにとっての利便性や使いやすさも優れたサイトにするための重要な要素だからです。

ビジュアルデザインとUIデザインは、時に相反してしまうこともあります。ビジュアル的に優れている点と、利便性などのUIにおいて優れている点はバランスよく取り入れることが重要です。
Webデザインにおいて、参考になる点を取り入れる際には、UIも意識しながら取り入れていきましょう。

まとめ

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

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


ニジボックスではサイト制作や開発における、情報設計やビジュアル設計、デザインガイドライン制作といったUIデザイン面に加えて、ユーザーテストなどによるUX観点でのご支援も行っております。下記資料にて、人間中心設計の考え方をベースとしたUXリサーチ結果に基づいた、ニジボックスのユーザー課題解決型のUIデザインフローや、支援事例を一部紹介しています。
ご興味を持たれた方はぜひ、下記バナーよりご参照ください！

資料を通じて私たちの取り組みや成果をぜひご確認いただき、今後のプロジェクトにおいてもご一緒できる機会があれば幸いです。

以下よりぜひお気軽にご相談ください。