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

サイト制作の際に「参考サイト（参考になるデザイン）」があるということは、ディレクションをするにしても、また、自ら作成するにしても、とても便利で、心強いものです。

サイト制作する際のデータの取り扱い方の参考になるのはもちろん、デザイナーとディレクター、または、お客様との、意識の統一するためのツールとしても大変役に立ちます。
つまり、「参考サイト」を共有することで、サイト全体の色彩、雰囲気、構成などの意識のずれがないか、確かめる事ができるのです。

さて、みなさんはどのようなサイトを参考にしていますか？
また、「こんな参考サイトがほしい」と思った時、その想像したようなものを、素早く見つけることって、できていますか？

参考サイトをまとめているサイトはいくつもありますが、今回は、うまく参考サイトがみつけられない方の手助けになるよう、探し方も踏まえた「こんな用途の時にはこのサイト！」という厳選サイトをお伝えします。

Web Design Clip　★★★★★

Web Design Clip（http://webdesignclip.com/）

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

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

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

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

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

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

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

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

Web Design Clip [L]　★★★★☆

Web Design Clip [L]（http://lp.webdesignclip.com/）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Pinterest　★★★★☆

Pinterest（https://www.pinterest.jp）

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

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

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

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

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

W－FINDER　★★★☆☆

W－FINDER（http://w-finder.com/）

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

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

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