デザイナー必見!WEBデザイン参考サイト12選まとめ【2019年最新版】

         

デザイン

デザイナー必見!WEBデザイン参考サイト12選まとめ【2019年最新版】

2019年02月12日 8:00 

デザイナー必見!WEBデザイン参考サイト12選まとめ【2019年最新版】

おはようございます!社員Aです👩

今回は、私がWEB制作の際に参考にしているWEBデザイン参考サイトを一挙まとめたいと思います!

インスピレーションの一つとして、暇な時にも眺めています。



 

muuuuu.org

WEBデザイン参考サイトとしてはかなり有名なサイトですので、知っている方も多いかもしれません!

縦長のトレンドWEBデザインが多数掲載されています。更新頻度も高く、海外サイトも多く見ることができ、見るだけで勉強になります。

また、下記条件でサイトを絞り込んで探すこともできます。

  1. 業種
  2. デザインテイスト
  3. サイトのタイプ
  4. サイトカラー

 

straightline™ bookmark

こちらも有名なWEB参考サイトです。1日1〜2サイトのペースで追加されているので、いつ見ても新鮮なデザインを見ることができます。

上部のtag listをクリックすると、下記の条件で絞り込みができます。

  1. サイトカラー
  2. サイトタイプ
  3. 言語(日本語・英語など)
  4. サイトレイアウト

 

io3000

シンプル系からポップなものまで最新トレンドのWEBサイトが多く更新されています。

straightline™ bookmarkに比べると更新頻度はやや低めですが、その分クオリティの高いサイトを厳選しているような気がします。

こちらのサイトも右上のメニューより、絞り込みができます。

  1. サイトカテゴリ
  2. サイトカラー
  3. タグ
  4. アーカイブ(月別)
  5. シャッフル(ランダム表示)

 



bookma!

最近リニューアルして、PC・SPの両方の表示をひと目で見れるようになりました。

また、上部のスマホアイコンを押すとスマホサイトだけの一覧も見ることができるので、コーダーさんにもおすすめの参考サイトです。

絞り込み機能などはありませんが、くまのロゴアイコンを押すと、サイト内検索ができます。

 

81-web.com

一覧をマウスオンすると、サイトカラーやカテゴリ・タグなどを見ることができます。

また、Facebookでのシェア数やはてブ数も分かるので、みんなが参考にしているサイトが探しやすいです。

下記で絞り込み検索もできます。

  1. サイトカテゴリ
  2. サイトカラー
  3. タグ

 

Responsive Web Design JP

私もこのサイトのヘビーユーザーなのですが、PC・タブレット・スマホの表示がひと目で見ることができるのが魅力です。

また、ピックアップされたサイトも他の参考サイトに比べて洗練されたクオリティの高いものが多いので、見るだけで勉強になります。

下記で絞り込み検索もできます。

  1. サイトカテゴリ
  2. サイトカラー
  3. 使用されている技術
  4. タイプ

 



.SG_BOOKMARK

こちらは昔からあるWEB参考サイトで、日本のサイトだけでなく海外のWEBサイトも更新されています。

下記で絞り込み検索ができます。

  1. 業種
  2. サイトデザイン
  3. サイトカテゴリ
  4. スタイル
  5. サイトカラー

 

webdesignclip

2019年2月9日現在、1,800を超えるサイトが登録されています。

下記で絞り込み検索ができます。

  1. メインカラー
  2. サブカラー
  3. サイトレイアウト
  4. サイトカテゴリ
  5. タグ
  6. 特集

 

w-finder

サイドに絞り込み条件が設定できるようになっており、探しやすい見た目も好きです。

下記で絞り込み検索ができます。

  1. サイトカテゴリ
  2. 業種
  3. テイスト
  4. カラー

 



gendaidesign

WEB参考サイトの中では珍しい、下層ページのデザインまでひと目で見ることができるサイトです。

他の参考サイトは「このサイト良いな」と思っても、下層ページを見たい時はわざわざそのサイトまで行く必要がありますが、このサイトはひと目で下層ページのデザインを確認できるので、下層ページの参考デザインを探したいときにもおすすめです。

下記で絞り込み検索ができます。

  1. サイトカテゴリ
  2. タグ
  3. アーカイブ(月別)

 

iPhoneDesignBox

スマホのWEB参考サイトに特化したサイトです。

スマホはメニューの位置やデザインがトレンドによって変わっていくので、そういった部分を参考にするのにもおすすめです。

 

spscollection

こちらもスマホサイトに特化したサイトです。1日1サイトの高頻度なペースで更新されています。

下記で絞り込み検索ができます。

  1. サイトカテゴリ
  2. カラー
  3. アーカイブ(月別)

 

まとめ

様々なWEBデザイン参考サイトをご紹介しましたが、それぞれのサイトに特徴があるので、用途に合わせて使い分けています。

下層ページのデザインを作りたい時・海外風デザインを参考にしたい時・スマホデザインを参考にしたいときなどブックマークしておくとおすすめです!

 

 

関連記事

この記事を書いた人

社員A

入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています!トレンドの情報を発信できるようにがんばります☺