WEBデザイン

【必見】WEBデザインの参考サイト20選!WEBデザイナーはいつでも見直すべき

WEBデザイン

「WEBデザインのアイディアがでない・・」

「魅力的なデザインのサイトを作りたいけど、どうすれば良いか分からない」

という方向けに、この記事ではWEBデザインの参考サイトを紹介しているサイトを20選紹介します。

魅力的なデザインの参考サイトを見ることで、どんなデザイン要素があり、どんな配色、どんなフォントでデザインすれば良いのかを理解できます。

良いデザインを作れるようになるには、良いデザインのサイトをたくさん見ることが非常に大切なので、ぜひこの記事を参考にチェックしてください。

WEBデザイナーはサイトをたくさん見よう

WEBデザイナーは他の方がデザインしたサイトをたくさん見ることが上達のカギです。

印象に残る魅力的なデザインや、人の行動を促せるデザインには共通している項目があり、多くのサイトデザインを見ることで、自然に良いデザインとは何かを身につけることができます。

多くのサイトをデザインしている優秀なWEBデザイナーの方でも、最初は参考サイトをたくさん見て、共通項目を分析することからスタートしています。

良いデザインを見ずに良いデザインを作れるようにはなれませんので、この記事で紹介する参考サイトをチェックしてください。

WEBデザインの参考サイト20選

WEBデザインの参考になるサイトは以下の20選です。

  • S5-Style
  • boolma! v3
  • MUUUUU.ORG
  • SANKOU!
  • Web Design Clip
  • I/O 3000
  • 81-web.com
  • 現代デザイン
  • イケサイ
  • Siimple
  • WPデザインギャラリー
  • The Best Designs
  • straightline bookmark
  • iPhoneデザインボックス
  • LPアーカイブ
  • LPadvance
  • ブブンデザインアーカイブ
  • Elements of Design
  • Responsive Web Design JP
  • AGT

S5-Style

S5-Styleは8,000以上のサイトデザインを掲載している参考サイトで、高品質なサイトを多く見つけることができます。

参考サイトのフィルター機能では、業界カテゴリやデザインジャンル、使用しているカラーや言語、サイトの目的別に絞り込むことが可能です。

検索せずに流し見しても、素敵なデザインと出会えますが、フィルター機能を活用することで、より具体的に参考になるデザインを見つけられます。

また、参考になったサイトはお気に入りとして参考サイト上に保存しておくことも可能です。

S5-Style公式サイト

boolma! v3

boolma! v3は独自性の高いサイトを豊富に掲載している参考サイトで、PC表示とスマホ表示を画面上で切り替えて確認できます。

掲載数は多くありませんが、注目を集める魅力的なデザインが多く掲載されているので、参考になるはずです。

boolma! v3公式サイト

MUUUUU.ORG

MUUUUU.ORGはおしゃれで見やすいサイトデザインを豊富に掲載しているサイトで、画面左側のカテゴリー項目から業界やデザインジャンル・使用しているカラーで絞り込むことができます。

業界では「飲食・制作会社・広告代理店・ファッション・不動産」が多いです。

デザインジャンルでは「フラットデザイン・JSを多用したサイト・スタイリッシュ・レスポンシブデザイン」が多いです。

本当にあらゆるサイトを掲載しているので、作りたいサイトの業界やデザインジャンルでカテゴリーを絞り込めば、参考になるサイトを見つけることができるでしょう。

MUUUUU.ORG公式サイト

SANKOU!

SANKOU!は2,000以上の高品質なデザインを集めている参考サイトで、WebサイトやECサイト、ランディングページなど様々なジャンルが掲載されています。

更新頻度も高いので、最新のトレンドをチェックしたい場合に便利です。

またカテゴリの大枠で絞り込むこともできますし、ECやコーポレートサイト、採用サイトなど、サイトの目的別に探すことも可能です。

他にも業界カテゴリやデザインイメージ、使用しているカラー、エフェクトやアニメーションが適用されているのかなどから絞り込めます。

検索も行いやすく、参考になるサイトを見つけやすいので、チェックしてみてください。

SANKOU!公式サイト

Web Design Clip

Web Design Clipは国内だけでなく、海外サイトの事例も集められており、事例数は2,400種類以上掲載されています。

PC用以外にもレスポンシブデザインも多く掲載され、カテゴリーやタグ、使用しているカラーでサイトを絞り込むことができます。

また、他の参考サイトでは珍しいレイアウトで検索することもでき、参考になるデザインを見つけやすいのが特徴です。

海外の最先端デザインを取り入れたい場合に活用すると良いでしょう。

Web Design Clip公式サイト

I/O 3000

I/O 3000は他の参考デザインサイトでは、見つからないサイトが多く掲載されており「カテゴリーやタグ、使用しているカラー、アーカイブで検索を行えます。

更新頻度も非常に高く、毎月20件ほどが追加されて、事例数は5,500種類を超えています。

常に最新のデザインを取り入れたサイトがアップされているので、流行を掴みたい場合に最適です。また、他の参考デザインサイトでは珍しい事例のシャッフル表示機能が利用できるので、眺めているだけで良いアイディアが浮かぶことでしょう。

I/O 3000公式サイト

81-web.com

81-web.comは国内のデザイン性に優れたサイトを5,000以上も集めているサイトです。パッと見でおしゃれなサイトを見つけることもできますし、画面右上の検索アイコンから「カテゴリー・カラー・業界・フォント」で絞り込むことが可能です。

また、気になるサイト上にマウスホバーさせると、カテゴリーや業界・カラー・使用しているフォントを確認できます。

サイトを表示させるには、各サイト項目の「view site」をクリックするだけです。

更新頻度も高く、平日は1日1サイトアップされているので、サイトデザインに悩んでいる方は定期的に参考にしてください。

81-web.com公式サイト

現代デザイン

現代デザインはシンプルでミニマムなデザインを多く掲載している参考サイトで、サイトにアクセスしなくても、メインビジュアルとコンテンツを一部確認することができます。

掲載数は多くありませんが、クオリティの高いデザインのみを集めているので、デザイン制作のヒントを得ることができるでしょう。

お気に入りのサイトは参考サイト上にブックマークして保存しておくことができ、いつでも見返せます。

検索機能はワード検索しか行えず、あまり優れていないので、サイトにアクセスしてスクロールして閲覧してみてください。

現代デザイン公式サイト

イケサイ

イケサイは1,400種類以上の参考デザインを掲載しているサイトで、毎日2〜4サイト新しく追加されています。デザインはカテゴリーや色、レスポンシブデザインなどで検索できます。企業コーポレートサイト・ECサイト・スポーツ・教育・美容など様々なカテゴリーでデザインを絞り込めます。

サイトの検索方法などはシンプルですが、更新頻度が高く、比較的新しいサイトも多く掲載されている印象なので、競合リサーチなどに活用できるでしょう。

イケサイ公式サイト

Siimple

Siimpleは名前の通りシンプルで見やすいデザインに特化して掲載している参考サイトです。更新頻度はあまり高くありませんが、シンプルなサイトを探している場合は必ず役立ちます。

検索では「アプリケーション・アート・コーポレート・イラスト・Eコマース」などの条件で絞り込めます。また、ログイン機能があり自分のサイトを掲載させることも可能です。ミニマムでシンプルなデザインを扱っている場合は、チェックしてみると良いでしょう。

Siimple公式サイト

WPデザインギャラリー

WPデザインギャラリーは、WordPressで構築したサイトデザインに特化して掲載しており、サムネイルにカーソルを合わせるとデザインの参考になるポイントを確認できます。

検索はIT系やエンターテイメント、デザイナーや飲食など、業界カテゴリーで絞り込めます。また、1カラムや2カラムなどレイアウトで絞り込むことや、アートやキュートなど抽象的なデザインイメージで探せます。

国内外のWordPressを使用したサイトを収集したい場合は、WPデザインギャラリーをチェックしてみてください。

WPデザインギャラリー公式サイト

The Best Designs

The Best Designsは海外の最新トレンドデザインを集めた参考サイトです。WEBサイトだけでなく、オフィス画像やSNS画像なども掲載されています。

好きなWEBデザイナー名で検索したり、The Best Designsの運営がおすすめするデザインコレクションを確認できます。

最新のダークデザインやニューモフィズムなど、トレンドを掴みたい方はチェックして見ましょう。

The Best Designs公式サイト

straightline bookmark

straightline bookmarkは1日に2〜3サイト掲載され、斬新な表現をしているサイトが多いです。累計掲載サイト数は2万を超えており、国内外の優れたデザインを見つけることができます。

また、検索の選択肢が多く、他のユーザーがチェックしたサイトを客観的に知ることも可能です。ログイン機能が搭載されているので、参考になるデザインは、サイト上にブックマークやお気に入りとして保存しておけます。

掲載されているサムネイルをクリックすれば、すぐに該当サイトへアクセスして確認できます。

straightline bookmark公式サイト

iPhoneデザインボックス

iPhoneデザインボックスは、iPhoneで表示されるデザインに特化された参考サイトです。更新頻度は高くありませんが、カテゴリで検索できたり、スマフォサイトで使えるネタを知ることができます。

カテゴリではファッションやレスポンシブデザイン、グローバルメニュー表示の掲載がおおき、一部海外サイトも掲載しています。

スマホ用のランディングページやWebサイトをデザインする際は、参考になるはずなので、チェックしてみてください。

iPhoneデザインボックス公式サイト

LPアーカイブ

LPアーカイブは名前の通り、ランディングページに特化した参考サイトです。事例数は2万4,000件を超えており、更新頻度も非常に高いです。参考になるLPデザインを探している場合は、LPアーカイブをチェックすれば安心でしょう。

検索機能も便利で、使用しているカラーや業界カテゴリ、キレイ系やかわいい系などのデザインイメージで絞り込めます。

また、新しく登録された順番やお気に入り数順に並べ替えることも可能です。

参考になるデザインは、サムネイル右下の「ハートアイコン」をクリックすることでお気に入りとして保存しておけます。

サイトを眺めているだけでも、参考になるデザインをたくさん見つけることができるので、チェックしてみてください。

LPアーカイブ公式サイト

LPadvance

LPadvanceもLPアーカイブと同様にランディングページに特化した参考サイトです。

JavaScriptの技術やアニメgifのLPも掲載しているので、LPデザインのアイディアを生み出せるでしょう。

検索では業界カテゴリや使用しているカラー、かわいい系やかっこいい系などのデザインイメージタイプ、メインビジュアルの概要から絞り込めます。

メインビジュアルで男性と女性どちらを使用しているか、イラストか文字かなど、メインビジュアルのデザインで探せる機能は非常に便利です。

また、画面右側の「LPのキャッチコピーを見る」をクリックすれば、業界カテゴリごとに採用しているキャッチコピーを調べることも可能です。

LPのデザインやアイディアを探しているのであれば、必ずチェックすべき参考サイトです。

LPadvance公式サイト

ブブンデザインアーカイブ

ブブンデザインアーカイブは見出しやアイコンなど、サイトのパーツごとにデザインを集めている参考サイトです。ヘッダ要素やメインビジュアル、サイドメニューなど必要な要素に応じて探し出すことができるので、非常に便利です。

また、PhotoshopやIllustratorを利用してデザインを作成している場合は、各デザイン要素をツールにドラッグ&ドロップを行うことで、イメージを確認できます。

細かい部分のデザインをどうするか決まらない場合に、このサイトを参考にすると良いデザインを見つけられるでしょう。

ブブンデザインアーカイブ公式サイト

Elements of Design

Elements of Designは海外サイトのヘッダーや見出し、アイコンなどのデザイン要素をまとめている参考サイトです。サイトは英語ですがGoogleの翻訳機能を活用すれば内容を確認できます。

事例の数はそれほど多くなく、更新も止まっていますが、デザイン要素の特徴や活用事例など参考になる内容は多いでしょう。

Elements of Design公式サイト

Responsive Web Design JP 

Responsive Web Design JPはレスポンシブデザインサイトに特化して、国内外から集めたサイトです。検索はカテゴリや使用しているカラー、使用している言語などで絞り込めます。

スマートフォン・タブレット・パソコンの表示をサイトにアクセスしなくても確認できるようになっています。事例数は5,000以上もあり、全てレスポンシブデザインに特化されているサイトです。

魅力的なレスポンシブデザインが多く揃っているので、使用している言語で検索をかけて参考になるサイトを探してみてください。

Responsive Web Design JP公式サイト

AGT

AGTもResponsive Web Design JP同様に、レスポンシブデザインに特化した参考サイトです。事例数はそれほど多くありませんが、掲載サイトにアクセスしなくても、参考サイト上でページを確認できるのが便利です。

確認したいサイトにカーソルを乗せれば、自動的にページがスクロールされて表示されます。

検索では使用しているカラーと業界カテゴリで絞り込むことができます。

スマホ版のデザイン確認を行いやすい特徴があるので、スマホデザインで悩んでいる場合に参考にすると良いでしょう。

AGT公式サイト

2021年の最新WEBデザイントレンド

最後に2021年の最新WEBデザイントレンドを少しだけ紹介します。

紹介した参考サイト20選をチェックするだけで、最新トレンドの傾向を掴むことはできますが、以下のトレンドを確認してから参考サイトを再度チェックしてみてください。

  • ニューモーフィズム
  • ダークモード
  • 手書き風デザイン

ニューモーフィズム

ニューモーフィズムは、シンプルな白基調の配色で、コンテンツに影をぼんやりと加えることで、立体的に凹凸があるように見せるデザインです。

どこか近未来的で、洗練された印象を与えることができるので、一般的なデザインと一味違うサイトを作ることが可能です。

ダークモード

ダークモードは名前の通り、黒の背景色ベースで作られたデザインです。

スマホアプリやiPhoneのダークモードが適用された影響で、デフォルトで黒背景を取り入れたサイトも増えてきています。

ダークモードで作成することで、目に与える光の影響が少なく、画像や動画を目立たせることが可能です。

また、サイト全体を引き締めて、洗練された印象を与えることもできます。

手書き風デザイン

手書き風のフォントや画像テキストを使用したサイトもトレンドです。

紙に手書きで書いたような文字やイラストを活用して、柔らかく暖かみのある印象を与えられます。

まだあまり多くのサイトが取り入れていませんが、今後子供や女性向けの商材で活用される場面が多くなるでしょう。

まとめ

今回はWEBデザインの参考になるサイトを20選紹介しました。

WEBデザイナーは日頃から数多くのデザインをチェックして、デザインできる引き出しを増やしておくことが大切です。

参考サイトをチェックすればするほど、魅力的なサイトに共通する内容や、不適切な要素などを見つけられるようになるので、今回紹介して参考サイトの中から、使いやすいサイトをいくつか活用してみてください。

ABOUT ME
小山温
「未経験から2週間でWEBデザイナーへ」 がモットーの“週末WEBデザイナー”。 未経験からフリーランスのデザイナーになり、 現在も現役のデザイナーとして 企業や本著者、投資家、士業、スクール、 有名Youtuber関連のWEB、紙のデザインに携わる。 デザイナーとして活動を始めて7年、 クライアントからのリピート率は高く、 5年ほど新規集客なし、 紹介とリピートだけでビジネスを成立。 また、自由を確保するために効率化しつつも、 社員ゼロで毎年8桁の売上を作っている。
【無料LINE講座】週末WEBデザイナー