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

  • 2018.2.20
  • 2023.9.19
  • 24,459 Views

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

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

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

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

Web Design Clip ★★★★★

design_reference1

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

【Design Clipの利点】
Webデザイン制作の上で参考になるクリエイティブの高いWebデザインのリンク集です。
更新頻度も高く、最新2023年のデザインもあり、その数は4,800件を超えています。

「色から探す」「職種・ジャンルから探す」その他、検索ワードを記入して探すことも可能です。

design_reference2

詳細ページには、アイキャッチ部分のデザインがあり、詳細情報やタグ情報を確認できます。
直リンクが張られているので、対象サイトに遷移し、ソースコードも見ることができます。

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

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

Web Design Clip [L] ★★★★☆

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

【Web Design Clip [L]の利点】
Web Design Clipのランディングページ特化版です。
Webデザイン制作の上で参考になるランディングページWebデザインのリンク集です。更新頻度も高く、最新2023年のデザインもあり、その数は2,400件を超えています。

「色から探す」「職種・ジャンルから探す」その他、検索ワードを記入して探すことも可能です。

design_reference4

詳細ページには、アイキャッチ部分のデザインがあり、詳細情報やタグ情報を確認できます。
直リンクが張られているので、対象サイトに遷移し、ソースコードも見ることができます。

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

詳細ページの画像はキャプチャ画像なので、変わることはありませんが、画面全体をキャプチャできているわけではないので、全体をみたい場合は適していません。

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

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

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

「色から探す」「職種・ジャンルから探す」が可能です。

直リンクが張られているので、対象サイトに遷移し、ソースコードも見ることができます。
ランディングページに特化し、参考サイトを探しやすく、みつけやすいので、使い勝手が良いです。

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

Retro banner ★★★★★

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

【Retro bannerの利点】
バナーデザイン専門のギャラリーサイトです。
2023年の時点で13,000以上のデザインがあります。

design_reference13

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

design_reference14

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

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

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

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

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

design_reference8

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

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

Pinterest ★★★★☆

design_reference9
Pinterest(https://www.pinterest.jp

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

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

キャプチャ画像なので、無くなってしまったり変化してしまうことがありません。
保存したものは、下記のように表示されます。

design_reference10

【Pinterestの欠点】
画像収集サービスなので、Webサイトへの直リンクがあるのは一部のみです。

W-FINDER ★★★☆☆

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

【W-FINDERの利点】
「色から探す」「業種から探す」「テイストから探す」「カテゴリから探す」などが可能です。
オシャレなWebサイトの参考デザインリンク集と銘打っているように、オシャレなサイトが集められています。

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

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

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

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

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

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

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

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

【WebデザイナーのためのWeb Design Galleryの欠点】
2017年度以降の更新が少ないです。

デザイン参考サイト総括

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

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

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

世の中には本当にたくさんの素敵なページがあります。
それらを参考にすることで、あなたもより一層素敵なWebサイトを制作してくださいね。 新米デザイナー必見!Web広告デザインのポイントと参考サイトの比較

コメント

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

    コメントは受け付けていません。

    カテゴリー別記事

    デザイン

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

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

    無料資料ダウンロード

     

    勝てるメッセージとシナリオで成果を出し続ける
    「YouTube広告運用マスターガイド」

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

    資料ダウンロード

     

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

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

    資料ダウンロード

     

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

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

    資料ダウンロード

    MAIL MAGAZINE

                   

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

    井上春奈

    デジタルアスリート株式会社 D2C戦略部 デザイナー プログラマーを経て、デザイナーとして株式会社リスティングプラス(現・デジタルアスリート株式会社)に入社。 LPデザインやバナーのデザインを中心におこなっています。 フォトショップをメインに使用しているため、イラストレーターはまだまだなところもありますが、メンバーの助けてもらいながら日々精進しています。 仕事で大事にしていることは、楽しく仕事をすることと、会社には私の働き方に柔軟な対応をしてもらっていますので、その分、成果を出せるように最大限努力することです。 趣味は、絵を描くこととマーダーミステリーやボードゲームなどです。

    記事一覧を見る