Webデザインをする時、何か参考なるサイトなどを探してイメージを固めてから制作に入る人も多いかと思います。

バナーやロゴなど、よく作るカテゴリごとに「ここを見ればOK！」と思うサイトをいくつかストックしておけば、探す手間も省けます。

しかし、普段作らないカテゴリに取り掛かる際には、まずは参考探しから…と、やや気が重くなりますね。時間もかかることと思います。
そこで今回は、web関連のデザインをする時に参考にしたいサイトを、カテゴリ別に自分なりにまとめてみました。

デザイナー以外にも、デザインの方向性を決めたいディレクターなどにも役立つと思います。

制作物別・デザインギャラリーサイト

時間がないとき、サイト１つ１つを見ていくのは非常に時間のかかるもの。
「一気に色々なサイトのデザインが見られる」をポイントに、ギャラリーサイトをご紹介。
作る予定がなくても、見ていて楽しいサイトばかりです。

Webサイトデザイン

まずはwebサイトデザイン全体から。業界、webサイトの形態、色、デザイン別などカテゴリー別に見られサイトを中心に集めてみました。

MUUUUU.ORG(ムーオルグ)　　　　muuuuu.org

こちらのサイトは、現場レベル・業務中にwebデザイナーが参考にしやすい、が目的のギャラリーサイト。
クオリティの高いサイトが多く、3,000サイト以上が掲載されています。
業務中に探すことを想定して作られているため、レスポンシブ対応はしていません。

I/O 3000　　　　Io3000.com

国内外のサイトを取り扱い、タグ付けがされており、共通デザインが見つけやすいギャラリーサイトです。
シャッフル機能もあるので、目的がない時の閲覧でも偏りがなく見ることができます。
こちらはレスポンシブ対応しているので、スマホから見やすいところが嬉しいサイト。
スマホ用デザインを中心に見たい時・PCがない打ち合わせの場面などにも役に立ちそうです。

WebDesignClip　　　　www.webdesignclip.com

国内のデザイン・アイデア・技術優れたサイトをクリップしてあるサイトです。
自分で気に入ったデザインをMyClipとしてストックしておくことができます。
こちらのサイトはなんと、スマホで見た時のデザインをサムネイル一覧で見ることができるページがあります。レスポンシブ時代にはありがたいですね。

Webパーツ

ブブンデザインアーカイブ　　　　Bubundesignarchive.jp

Croppy　　　　croppy.org

１サイトを作るに当たって、気にしなければいけないことは本当にたくさん。
メニューやボタン、見出しなど特に指定されないこともある部分は、迷う部分でもあり、気が付いたら同じようなデザインばっかりになっていたな…ということもありがち。パーツごとまとめたサイトで引き出しを増やしましょう！

ランディングページ

WebDesignClip L　　　　Lp.webdesignclip.com

ランディングページ集めました。　　　lp-web.com

最近は縦長のwebサイトも増え、ランディングページとは一体…となったこともありませんか？そういった時におすすめなのがランディングページだけを集めたサイト。
前述のWebDesignClipのランディングページ特化版であるWebDesignClip Lでは、ヘッダー固定や入力フォームがあるページなどタイプ別で絞って見ることができます。

バナーデザイン

banner gallery　　　　bannergallery.net

バナーはとても奥が深い！

こちらのサイトは、3,000以上のバナー広告をサイズ別に見ることができるサイト。
業種や色を指定して絞ることもできます。

Banner Matome　　　　Bannermatome.com

合計19,000を超えるバナーが掲載されており、とにかくたくさんデザインを見たい時に便利なサイトです。テキスト風や、立体風、イラストバナーなど表現別に探せるのが便利なポイント。

ロゴデザイン

logopond　　　　logopond.com

「いつもはクライアントからもらうロゴを使っているけど、今回はこちらで制作することになった！」という時もあるかと思います。
こちらは世界中のロゴを集めたサイト。とにかく掲載点数が桁違い（数万点）です。
海外のクオリティの高いロゴをタグやカテゴリーで絞って探すことができるの強みです。

logo stock　　　　logostock.jp

インスピレーション掻き立てられる海外のロゴもいいですが、やはり和文を使った参考が見たい、国内のロゴデザインを見たい、という場合にはこちらのサイト。
こちらのサイトのいいところは、ロゴのコンセプトや客観的な印象も合わせて記載されており、制作に役に立つこと間違いなし、なところ。
デザイン制作においての考え方が養われます。

イラスト

Illustbookmark（イラストブックマーク）　　　　www.illustbookmark.info/

web制作するに当たって、イラスト制作もすることもあるかも。そんな時に一度見ておきたいのがこちらのサイト。
色々なタッチのイラストや、イラストを使用したパーツなどを効果的に使用したサイトを集めています。イラストに合わせたwebデザインを制作する際にも役立ちそうですね。

自分なりにデザインストックを貯めてみる！

参考にしたいデザインを自分でもストックしたい、という時に私が使っているのがPinterest（ピンタレスト）です。
こちらはInstagramといったSNSとは違い、ほとんどユーザー同士が交流する要素はありません。画像をどんどんボードにピンしていくような感覚で使えるツールです。
ピンタレストでは、webに限らずデザインがたくさんピンされており、気になるボードをフォローすることで自分が見たいジャンルに絞ったデザインアイディアを毎日取り入れることができます。
ピンタレスト内だけではなく、外部の画像も引用してピンできるので、デザインストックがスマートになるのも良い部分ですね。
アプリもあり、デザイン以外のファッションやDIY、写真、食べ物なんかも多くピンされており、暇な時にもついつい覗いてしまいます。

いかがでしたでしょうか。参考になるサイトはまだまだたくさん。
自分なりの参考ブックマークをどんどん増やしてみてください。