【保存版】デザイン参考サイト10【欲しいデザインを見つけるポイント】

サイト制作の際に「参考サイト(参考になるデザイン)」があるということは、ディレクションをするにしても、また、自ら作成するにしても、とても便利で、心強いものです。 サイト制作する際のデータの取り扱い方の参考になるのはもちろん、デザイナーとディレクター、または、お客様との、意識の統一するためのツールとしても大変役に立ちます。 つまり、「参考サイト」を共有することで、サイト全体の色彩、雰囲気、構成などの意識のずれがないか、確かめる事ができるのです。 さて、みなさんはどのようなサイトを参考にしていますか? また、「こんな参考サイトがほしい」と思った時、その想像したようなものを、素早く見つけることって、できていますか? 参考サイトをまとめているサイトはいくつもありますが、今回は、うまく参考サイトがみつけられない方の手助けになるよう、探し方も踏まえた「こんな用途の時にはこのサイト!」という厳選サイト10個をお伝えします。

Web Design Clip ★★★★★

WebDesignClip
Web Design Clip(http://webdesignclip.com/

【Design Clipの利点】
Webデザイン制作の上で参考になるクリエイティブの高いWebデザインのリンク集です。

「色から探す」「職種・ジャンルから探す」その他、検索ワードを記入して探すことも可能です。
最新2018年の更新もあります!

LAUNCHには直リンクが張られているので、ソースコードも見ることが出来ます。
DETAILでは、大きい画像プラス、サイトについての詳細情報やタグ付けなどが確認できます。

また、気になるサイトはクリップで印をつけておけます。

クリップ止め画像

クリップ止めされたサイトは、↓のように表示されます。

クリップ止め完了画像

また、クリップ止めしたデザインは、MyClipというところで、まとめて確認することが出来ます。

【Design Clipの欠点】
直リンクは、元サイトの変更に耐えられません。見たかったデザインから、すでに変更されてしまっていたり、リンク切れをしていることもあります。

ただし、アイキャッチ部のデザインだけを見るのであれば、DETAILの画像でなんとなく確認できます。

Web Design Clip [L] ★★★★☆

WebDesignClipL
Web Design Clip [L](http://lp.webdesignclip.com/

【Web Design Clip [L]の利点】
Web Design Clipのランディングページ特化版
Webデザイン制作の上で参考になるランディングページWebデザインのリンク集です。

「色から探す」「職種・ジャンルから探す」その他、検索ワードを記入して探すことも可能です。
最新2018年の更新もあります!

LAUNCHには直リンクが張られているので、ソースコードも見ることが出来ます。
DETAILでは、大きい画像プラス、サイトについての詳細情報やタグ付けなどが確認できます。

【Web Design Clip [L]の欠点】
Web Design Clipと違い、クリップ止めはできません。
直リンクは、元サイトの変更に耐えられません。見たかったデザインから、すでに変更されてしまっていたり、リンク切れをしていることもあります。

DETAILの画像はキャプチャ画像なので、変わることはありませんが、画面全体をキャプチャできているわけではないので、あまり役に立ちません。

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

ランディングページ集めました
ランディングページ集めました(http://lp-web.com/

【ランディングページ集めましたの利点】
一番、メジャーなランディングページまとめサイトの一つです。

「色から探す」「職種・ジャンルから探す」が可能です。
最新2018年の更新もあります!

直リンクの為、ソースコードも見ることが出来ます。
ランディングページに特化し、参考サイトを探しやすく、みつけやすいので、色々な意味で使い勝手が良いです。

【ランディングページ集めましたの欠点】
直リンクの為、元サイトの変更に耐えられません。見たかったデザインから、すでに変更されてしまっていたり、リンク切れをしていて、見たいサイトにたどりつけないこともしばしば。
特に、掲載年が古いページは見られない事が多いです。2017年度の更新も少し少なめです。

WebデザイナーのためのWeb Design Gallery
★★★★☆

WebデザイナーのためのWeb Design Gallery
WebデザイナーのためのWeb Design Gallery(http://design-gallery.biz/

【WebデザイナーのためのWeb Design Galleryの利点】
「色から探す」「職種・ジャンルから探す」「テイストから探す」その他、地域別やタグ別、対応デバイス別といった、細かい検索が可能です。

また、クリックしたサイトと似ているオススメWebデザインが、画面下に表示されるので、参考サイトを見つけやすくなっています。

直リンクに行く前に、キャプチャ画面にとびますので、直リンク先が変更になっていたり、なくなってしまっていても、どんなデザインだったのか、ざっくりと確認することは可能です。

タグ別で「1カラム」を選ぶと、ランディングページっぽいものが多くヒットします。

【WebデザイナーのためのWeb Design Galleryの欠点】
2017年度、2018年度の更新がないのが残念です。

美容・化粧品ランディングページギャラリー
★★★★☆

美容・化粧品(コスメ)ランディングページギャラリー
美容・化粧品(コスメ)ランディングページギャラリー(http://cosme-lp.com/

【美容・化粧品(コスメ)ランディングページギャラリーの利点】
美容・化粧品(コスメ)のランディングページを集めたデザインリンク集です。
その名の通り、化粧品に特化した専門参考サイトという感じです。

「スキンケア」「メイクアップ」「ヘアケア」「ボディケア」などといった分類の中に、さらに細かく「化粧水」「クレンジング」等といった分類がなされています。
また、「ブランド別」といった区分けもできます。

よく使われてる色と割合が分析されており、カラーコードも載っているので、参考になります。

【美容・化粧品(コスメ)ランディングページギャラリーの欠点】
色による分類が出来ません。2018年2月現在において、最終更新が2017年4月です。
直リンクの為、元サイトの変更に耐えられません。見たかったデザインから、すでに変更されてしまっていたり、リンク切れをしていて、見たいサイトにたどりつけないこともあります。

優れたスマートフォンサイトデザイン集
-iPhoneデザインボックス ★★★★★

優れたスマートフォンサイトデザイン集 - iPhoneデザインボックス
優れたスマートフォンサイトデザイン集 – iPhoneデザインボックス(http://design.web-hon.com/

【優れたスマートフォンサイトデザイン集 – iPhoneデザインボックスの利点】
「優れたスマートフォンサイトデザイン集」というものの、PC版も一緒に並べてくれているので、PC・スマホのどちらの参考サイトとしても使えます。
最新2018年の更新もあります!

カテゴリというリンクをクリックすると、そこに詳細があるので「色から探す」または「職種・ジャンルから探す」といったことが可能です。

優れたスマートフォンサイトデザイン集 - iPhoneデザインボックスの絞り込み

【優れたスマートフォンサイトデザイン集 – iPhoneデザインボックスの欠点】
数が全体的に少ないので、「比較したい」、「複数の参考サイトを混ぜてオリジナルを作成したい」といった時には、物足りなく感じるかもしれません。

直リンクの為、元サイトの変更に耐えられません。見たかったデザインから、すでに変更されてしまっていたり、リンク切れをしていて、見たいサイトにたどりつけないこともあります。それでも、割とちゃんとリンクされている方だと思います。

Pinterest ★★★★☆

ピンタレスト
Pinterest(https://www.pinterest.jp

【Pinterestの利点】
ネット上のWebサイトやPinterest上にある画像を分類して、自分のボードにためることが出来ます。

1つのデザインをクリックすると、類似性のあるデザインを、その下に表示してくれますし、その人のクリックする画像の傾向を分析して、より好みであろうデザインをカスタマイズして表示してくれるようになります。
最新のカッコいいデザインなどを検索するにはいいと思います。

キャプチャ画像なので、無くなってしまったり変化してしまうことがありません。
ちなみにボードはこんな感じ↓です。

ピンタレストボード

【Pinterestの欠点】
類似で探していくのには向いていますが、「赤い車のランディングページが知りたい!」などといった時に、検索するのが難しいです。

また、画像収集サービスなので、サイトへの直リンクなどはありません。もっと、大きな画面で見てみたいと思っても、保存されている画像以外のものはありません。

W-FINDER ★★★☆☆

W-FINDER
W-FINDER(http://w-finder.com/

【W-FINDERの利点】
「色から探す」「業種から探す」「テイストから探す」「カテゴリから探す」などが可能です。オシャレなウェブサイトの参考デザインリンク集と銘打っているように、オシャレなサイトが集められています。私にとってはちょっと、わかりにくかったりするので、★は3つですが、使いやすいと言っている人もいるので、好みかもしれません。

【W-FINDERの欠点】
直リンクになっているのですが、オシャレさを追い求めた結果か、アイキャッチ部などが動的になっているサイトが多いので、見たいと思った画像がなかなか表示されなかったり、思っていたサイトと違うんじゃないかと不安になったりすることが多いです。

また、直リンクの為、元サイトの変更に耐えられません。見たかったデザインから、すでに変更されてしまっていたり、リンク切れをしていて、見たいサイトにたどりつけないこともあります。

Retro banner ★★★★★

Retro banner
Retro banner(https://retrobanner.net/

【Retro bannerの利点】
バナーデザイン専門のギャラリーサイトです。最新2018年の更新もあります!

画面の下の方(ページ番号の下)に検索欄があり、
「サイズから探す」「色から探す」「業種から探す」「テイストから探す」などバナーを絞り込む事ができて、一覧でチェックできます。

Retro bannerの絞り込み

バナーをクリックして詳細画面に行くと、選択したバナーで使われている主となる色10色をカラーコード付きで表示してくれたり、同業種の他のバナーデザインを表示してくれます。

バナーデザインアーカイブ ★★★★☆

バナーデザインアーカイブ
バナーデザインアーカイブ(http://banner.keizine.net/

【バナーデザインアーカイブの利点】
バナーデザイン専門のギャラリーサイトです。
「サイズから探す」「色から探す」「業種から探す」などバナーを絞り込む事ができて、一覧でチェックできます。

【バナーデザインアーカイブの欠点】
サイトが重いので、少しストレスです。
2018年2月現在、2017年4月が最終更新のようです。

デザイン参考サイト総括

いかがでしたでしょうか。少しでも参考になりそうなサイトはみつかりましたか?

基本的に、まとめサイトは直リンクが設定されていることが多く、その場合、リンク切れなどはどうしても起きてしまうので、そこは基本どのサイトにも共通のマイナス点になっています。

また、今回使い勝手などを考慮して★を付けさせてもらいましたが、用途によって、必要なサイト、その使いやすさなどは違ってきますので、ご自身でも色々試してみてください。

世の中には本当にたくさんの素敵なページがあります。
それらを参考にすることで、あなたもより一層素敵なWebサイトを制作してくださいね。

新米デザイナー必見!Web広告デザインのポイントと参考サイトの比較

バナー広告とは?(バナー広告の役割)バナー広告の役割バナー(banner)とは(2本の柱につけてスローガンなどを書き、行進の先頭に立つ)旗じるし、(広告・宣伝用などの)...

10月25日まで!最新の売上UPホームページ構築セミナー募集

ライバルと差別化したホームページを作り、少ないリソースで売上を最大化する具体的手法を公開!

細かいABテストや新手法でライバルに差をつける必要がないので、資金や人的リソースの限られる中小企業様に必ず身に着けていただきたい手法です。

今すぐ最新の売れるホームページ集客ノウハウを手に入れる
10月25日まで!最新の売上UPホームページ構築セミナー

関連記事一覧