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

  • 2018.2.20
  • 2019.6.20
  • 21,271 Views

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

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

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

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

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年度の更新がないのが残念です。

優れたスマートフォンサイトデザイン集
-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広告デザインのポイントと参考サイトの比較

コメント

「【保存版】デザイン参考サイト【欲しいデザインを見つけるポイント】」に対する1件のコメント

    カテゴリー別記事

    デザイン

    成約率を高め売上につなげる

    Webデザインの基本から最新のノウハウまで公開

    無料資料ダウンロード

     

    1,800社以上の支援実績に裏づけされた
    『LPO大全』(実行手順シートつき)

    1,800社を支援する中で気づいた『LPO』の重要性と正しい手順・ノウハウを公開します。

    資料ダウンロード

     

    【リスマガ限定】出版したばかりの
    代表長橋の書籍『第一章』を無料プレゼント!
    DX時代のデジタルマーケティング攻略本

    10年間の中小企業支援実績から導くノウハウ、最新の対応策をまとめました。

    資料ダウンロード

     

    YouTube動画マーケティングがわかる
    企業チャンネル最新攻略法

    YouTubeで企業チャンネルが成功するために実践した施策を公開します。

    資料ダウンロード

     

    労務費・外注費・経費を削減して売上アップ
    専門チームを外部で育てるラボ型のWebチーム

    経費を削減して売り上げアップする方法を無料で公開!

    資料ダウンロード

    MAIL MAGAZINE

                   

    最新のマーケティング情報をお届け。デジタルアスリートのメルマガでしか手に入らない情報を受け取りましょう。

    井上春奈

    デジタルアスリート株式会社
    D2C戦略部 デザイナー
    プログラマーを経て、デザイナーとして株式会社リスティングプラス(現・デジタルアスリート株式会社)に入社。

    LPデザインやバナーのデザインを中心におこなっています。 フォトショップをメインに使用しているため、イラストレーターはまだまだなところもありますが、メンバーの助けてもらいながら日々精進しています。

    仕事で大事にしていることは、楽しく仕事をすることと、会社には私の働き方に柔軟な対応をしてもらっていますので、その分、成果を出せるように最大限努力することです。 趣味は、絵を描くこととマーダーミステリーやボードゲームなどです。

    記事一覧を見る

    X

    【売れるLPとは?】
    1800社以上の支援実績に
    裏付けされたLPO大全

    CVを増やすLPOのポイントを解説! 初めてのLPOでも大丈夫、リサーチや コピーライティングですぐに使えるLP改善テンプレート付き!

    無料でPDFファイルをダウンロードする