Webデザイン参考サイトまとめ

ウェブデザイン用の参考サイトまとめ

個人的によく使うウェブデザインギャラリー･参考サイト集をまとめて見ました。

探そうと思えばこれよりももっと大量にあるのですが、使い勝手や手軽に見て回れる数には限りがあるので、徐々に増やしていけたらと思っています。

どのサイトも、たくさんのウェブデザインを集めているサイトですが、集まっているwebデザインの内容が微妙に違います。毛色の違うサイトをいくつかブックマークしておくと良いのかもしれません。

 

参考サイト１：webデザイン全般参考

広告・商業色が強いランディングページというよりもコーポレートサイトや、少しおしゃれな商品ページ、ブランディングページ、一般的なサイトが多いウェブデザイン参考サイトをまとめました。

MUUUUU.ORG

https://muuuuu.org/

ウェブデザインの検索方法

• 取り扱いジャンル別
• デザインイメージ・要素別
• サイトカテゴリ別
• 色別

縦長のクオリティの高いウェブサイトを集めたデザイン参考サイトです。

SANKOU!

https://sankoudesign.com/

ウェブデザインの検索方法

• Webサイト、LP（ランディングページ）、コンテンツページ
• サイトカテゴリ別
• 取り扱いジャンル別
• デザインの雰囲気別
• デザイン構造・要素別
• 動き別
• 色別

分類が多く、ステキな◯◯という要素をピックアップしたカテゴリや、ページや要素の動きのカテゴリで検索できます。

I/O 3000

https://io3000.com/

ウェブデザインの検索方法

• 取扱ジャンルのカテゴリ
• タグ別（デザイン要素・構造別）
• 色別
• 年代別
• シャッフル

それぞれに何件ウェブデザインが掲載されているかの数字と、グラフ付き

文字での検索も可能です。

 

Web Design Clip

https://www.webdesignclip.com/

ウェブデザインの検索方法

• 現在の登録数表示
• キーワード検索
• メインカラー・サブカラー検索
• レイアウト検索
• 取扱ジャンル別
• タグ別（レイアウトやいいね！デザイン等）

上のリンクはウェブデザイン用参考まとめサイトですが、ヘッダーに別カテゴリーへのリンクがあり、日本国内、世界、ランディングページ、スマートフォンサイトの参考サイトを見ることができます。

 

81-web.com

https://81-web.com/

ウェブデザインの検索方法

• 取扱ジャンル別
• 色別
• タグ別

検索機能の種類は多くありませんが、サムネイルの下についているプラスマークをクリックすることでお気に入りができるブックマーク機能付きの参考サイトです。

 

参考サイト２：レスポンシブデザイン参考

パソコン版、スマートフォン版両方のウェブデザインが一目で確認できる参考サイトを集めました。最近では、パソコン画面よりもスマートフォン画面でサイトを見る人が増えているようなので、スマートフォンでの優れたデザインも確認できるのが利点ですね。

また、パソコン画面を見ているだけでは思いつかなかったデザインの参考にもなりそうです。

 

bookma!

https://bookma.torch.blue/

ウェブデザインの検索方法

• キーワード検索機能のみ

クマが可愛い参考サイト。キーワード検索機能のみのシンプルな機能。画面も、ブラウザでひらけば２つの画面に表示されたウェブデザインがずっと並ぶシンプルなデザインです。シンプルな分、わかりやすいです。

パソコン、スマートフォン両方のサイトデザインを一目で確認することができます。

 

RWDJP

https://responsive-jp.com/

ウェブデザインの検索方法

• カテゴリ別
• 色別
• 使っている技術別
• サイトタイプ別

日本国内、スマートフォン、タブレット、パソコンの画面でみたサイトのデザインがまとめられているデザイン参考サイトです。スマートフォン、パソコンでの画面表示はよくありますが、タブレットサイズでもプレビューすることができます。

 

参考サイト３：ランディングページ参考

上の２つにあるおしゃれさ、スタイリッシュさよりも、広告バナーの飛び先や一枚ペラのランディングページなど、どちらかというと商業・広告色の強いランディングページが一覧で観れる参考サイトをまとめてみました。

 

LPアーカイブ

https://rdlp.jp/lp-archive

ウェブデザインの検索方法

• カラー別
• カテゴリ別
• イメージ別
• 更新日別

総掲載数表示。ウェブデザインをクリックすると、詳細ページに移りそこから関連ワードのタグを使って別デザインを見ることもできます。また、お気に入り機能で気に入ったデザインをブックマークできます。

 

ランディングページ集めました

http://lp-web.com/

ウェブデザインの検索方法

• 新着ランディングページ
• カラー別
• カテゴリ別
• 更新月別

一番上の色がついた四角がカラー別分類のアイコンです。新着サイト一覧には、文字通り新着のサイトが表示されますが、リターゲティングされたようなサイト表示もしているような気がします。

 

イケてるランディングページまとめ

https://zero-s.jp/lp-media/

 

ウェブデザインの検索方法

• カラー別
• ジャンル別
• イメージ別

ランディングページまとめサイトの中では、どちらかというとゴチャゴチャ感の少ないすっきりとしたウェブデザインをまとめているサイトです。上で紹介したウェブデザインの紹介とかぶる部分もあります。

 

 

 

まとめ

今までは必要な時に参考サイトを観て回っていたり、ピンタレストを活用していたのですが、ピンタレストでは最新の情報かどうかがわかりづらいためデザインサイトもチェックするようになりました。

各サイト1日に更新される数は数件のため、たくさんブックマークをして観て回ればいいと思うのですが、一人が短時間で観て回れる数は限られているので、一例としてあげてみました。