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

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

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

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

muuuuu.org

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

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

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

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

縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG

 

338 Tweets

217 Shares

1449 Users

2694 Pockets

縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG

https://muuuuu.org

縦長のwebデザインをがむしゃらに集めています。

straightline™　bookmark

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

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

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

straightline bookmark

 

112 Tweets

3849 Shares

2214 Users

1004 Pockets

straightline bookmark

http://bm.straightline.jp

Webデザインの参考・お手本となるサイトを集めた、大きなサムネイルが特徴のWebデザイナー向けWebサイトギャラリー・リンク集。素敵なwebサイトを見つけて、新しいwebデザインのインスピレーションを手にしてください。

io3000

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

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

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

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

I/O 3000 | Webデザインギャラリー

 

300 Tweets

69 Shares

1679 Users

1133 Pockets

I/O 3000 | Webデザインギャラリー

https://io3000.com

I/O 3000は、Webデザインに関わる人のためのWebデザインギャラリーサイトです。国内外を問わず、Web制作の参考となるサイトをセレクトしています。

bookma!

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

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

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

bookma.torch.blue

 

181 Tweets

12 Shares

84 Users

107 Pockets

https://bookma.torch.blue

https://bookma.torch.blue

81-web.com

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

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

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

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

81-web.com

 

4477 Tweets

33 Shares

611 Users

443 Pockets

81-web.com

https://81-web.com

「81-web.com」はWebサイト制作に役立つ、日本の優れたデザインのWebデザイン・Webサイトギャラリー＆リンク集です。

Responsive Web Design JP

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

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

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

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

Responsive Web Design JP

 

258 Tweets

6468 Shares

1270 Users

1535 Pockets

Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギ...

http://responsive-jp.com

日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。

.SG_BOOKMARK

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

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

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

.SG_BOOKMARK

 

5 Tweets

388 Shares

182 Users

104 Pockets

Webデザインブックマークサイト・Webデザインリンク集 .SG_BOOKMARK

http://bookmark.dot-sg.com

Webデザインブックマークサイト Webデザインリンク集の.SG_BOOKMARKは、デザイン性の高い洗練されたWebサイトを集めたリンク集です。webデザインの参考に活用ください。

webdesignclip

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

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

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

Web Design Clip 【Webデザインクリップ】

 

81 Tweets

117 Shares

1784 Users

735 Pockets

Web Design Clip 【Webデザインクリップ】

https://www.webdesignclip.com

WEBデザイン制作の上で参考になるクリエイティブの高いWEBデザインのクリップ集

w-finder

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

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

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

W-finder【ウェブ・ファインダー】

 

421 Shares

124 Users

169 Pockets

ウェブ・ファインダー | オシャレなウェブサイトのデザインリンク集

http://w-finder.com

デザイン性の高い、オシャレなウェブサイトを毎日更新しています。 一時的にコレクションページも作成できます！

gendaidesign

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

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

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

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

現代デザイン

 

15 Tweets

205 Shares

217 Users

255 Pockets

Webデザインリンク集 中面/下層ページも見られる現代デザイン

https://gendaidesign.com

現代デザインは、Webデザインに関わる人のためにWebサイトのトップページ・中面/下層ページを掲載しているデザインリンク集です。Webサイト制作にご活用ください。

iPhoneDesignBox

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

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

iPhoneデザインボックス

 

1 Tweet

2239 Shares

2482 Users

817 Pockets

優れたiPhoneサイトデザイン集 - iPhoneデザインボックス

http://design.web-hon.com

iPhoneデザインボックスではスマートフォン向けサイトでクオリティの高いデザイのみをまとめました。下層ページのデザインも見れ、PCサイトの違いも簡単に比較できiPhoneの最適化の参考にもなります

spscollection

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

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

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

sps collection

 

4 Tweets

172 Shares

109 Users

204 Pockets

スマートフォンサイトのデザインリンク集 sps collection

https://spscollection.com

sps collectionは技術的・デザイン性に優れたスマートフォンサイトを掲載しているデザインリンク集です。スマートフォンからも閲覧可能です。

まとめ

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

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