みなさん、デザインは好きですか？
そうですよね。私も好きです。
通常は、主にコーディングを行っている私ですが、時折デザインを行うことがあります。
弊社には優秀なデザイナーフジコがいますが、クリエイターの端くれとして負けじと奮起！
…とは言え、やはり良いデザインとは簡単には沸かない。。
よくある方法が、他のサイトや人のデザインを
という訳で、デザインの参考にしているサイトをケース別で集めてみました。
サイト全体のイケてるデザインを探したい！
「WEBデザインの見本帳｜WEBデザイナーのためのデータベース・リンク集、サンプル・配色・参考・ご提案に!!」
| 検索方法 |
・印象から ・色から ・ジャンルから ・キーワードから |
|---|
こちらにお世話になってる方も多いのではないでしょうか。掲載量が多く重宝しています。デザインの印象で探せるので、ヒアリングで伺ったデザイン嗜好から探す際も便利です。
「イケサイ ウェブデザイナーのWEBデザインデータベース」
| 検索方法 |
・ジャンルから ・色から |
|---|
こちらも有名かと思います。ちょっとごっちゃりしてますが、情報量が多いです。
「Webデザインリンク集・ソーシャルブックマーク – straightline bookmark | Web Design Bookmarking」
| 検索方法 |
・色から ・ジャンルから ・その他（言語、Flash、CSS、HTML5、javascript） ・レイアウトから |
|---|
検索方法が分かりやすいです。HTML5やjavasctipt等でも検索出来るので、制作の参考にもなります。ユーザー登録すると、お気に入りやブックマークが出来るのも心憎いですね。
「WEBデザイン参考サイト bookma! v3」
| 検索方法 |
・新しい順 ・古い順 ・ツイート順（Twitter） ・いいね順（Facebook） ・はてぶ順 ・コレクト順 ・閲覧数順 ・その他、登録するとお気に入り登録ができます。 |
|---|
新しいサイトのようですが、ちらちら見えるゴリラ君がかわいいです。他のサイトのようにジャンルや色などの検索とは違いますが、いいね順など他の方の評価で見られるのも新しいなと思います。
「I/O 3000 | Webデザインギャラリー」
| 検索方法 |
・ジャンルから ・タグから ・フリーワード ・Shufftleでランダム表示 |
|---|
掲載情報が豊富で動きもスムーズです。シンプルな作りで、サムネイルも見やすくてストレス無く探せます。
「縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG」
| 検索方法 |
・ジャンルから ・デザインテイストから（フラット、かわいい、JS多用、和風、多言語、etc.） ・サイトタイプから（EC、採用、コーポレート、etc.） ・色から |
|---|
縦長でオーソドックスなレイアウトに特化したサイトです。シンプルな作り、滑らかな動きが心地よいです。最近流行のシングルページ（高級ペライチ）やパララックス効果のあるサイトも検索出来るので重宝します。
ランディングページのレイアウトで悩んでいる…
「ランディングページ集めました」
| 検索方法 |
・ジャンルから ・色から |
|---|
そのまんまですが、ランディングページに特化しています。種類が豊富で更新頻度も高いです。
スマホサイト、iPhoneサイトのデザインで困ってる！
「優れたiPhoneサイトデザイン集 – iPhoneデザインボックス」
| 検索方法 |
・ジャンルから ・色から ・その他（イラスト・キャラクター、グローバルメニュー表示、レスポンシブ、日本・海外、etc.） |
|---|
まずサイトのデザインがかわいらしいのがポイント高いです。検索のジャンルが個性的で、掲載量も豊富。スマフォサイト制作のネタも豊富に掲載しているので、勉強になりますよ。
「スマートフォンサイト デザイン集 AGT smartphone design gallery」
| 検索方法 |
・色から ・ジャンルから |
|---|
サムネイルにマウスを乗せると、画像がスクロールしてページ全体が見ることができます。
フッターやヘッダーなど、部分的なデザインを参考にしたい
「Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト」
| 探せるモノ |
・ヘッダ（タイトルロゴ、ナビゲーション） ・デザイン・装飾系（メインビジュアル、見出し、文字装飾、etc.） ・機能（前へ、次へ、パンくずリスト、etc.） ・コンバージョン（問い合わせボタン、購入ボタン、電話番号、etc.） ・フッター、コピーライト |
|---|---|
| 検索方法 |
・種類別 ・業界別 |
とにかく掲載している種類、区分が豊富で探しやすくて重宝します。
「見出しデザイン.com -Webデザインの“見出し”を集めたサイト-」
| 探せるモノ |
・見出し |
|---|---|
| 検索方法 | ・デザイン（グラデーション、テキストのみ、上線、下線、囲み線、角丸、etc.） |
バナーだけとってもこんなにバリエーションがあるのだと、カテゴリを見ただけでも感心します。ページ遷移すると一覧のサムネイルがぷるんと揺れる動きは、どうでも良いと思いつつもお気に入りです。
「バナーデザインアーカイブ｜バナーのデザインをまとめてチェック！」
| 探せるモノ | ・バナー |
|---|---|
| 検索方法 |
・サイズから（スマートフォンサイズ、Twitterサイズもあり） ・色から ・業種から |
一覧性が高く、業種カテゴリも便利です。
「バナーデザイン・サンプルデータベース」
| 探せるモノ |
・バナー ・ボタン ・タイトル ・メインビジュアル |
|---|---|
| 検索方法 |
・種類（タイプ） ・カラー ・テイスト |
バナーの他に、ボタンなども探せます。イラストや写真など、素材からも探せますよ。
番外編？色んな色を色々見たい！
「原色大辞典」
| 掲載情報 |
・色見本ー原色大辞典、和色大辞典、洋色大辞典、Web216、パステルカラー、etc. ・配色ー色種類別に、背景色と文字色を組み合わせて表示できます ・ストライプー好きなコトバからストライプを作成してしまうという不思議ツール ・成分解析ーコトバシリーズ。好きなコトバから色を解析して調合します。どんな仕組みなのか・・ ・色調合ーカラーコードと比率を入力することで、好きな色を調合出来ます。 ・人気色、カラーピッカー、色検索 |
|---|
「色」への愛が伝わってきます。
見本を見ているだけでもインスピレーションが湧いてきますし、色の奥深さが学べるサイトです。
注意
こちらの記事は、2014年7月現在のものです。紹介したサイト自身や、サイトに掲載されている情報が古い場合やリンク切れをしている場合もありますので、ご注意下さい。
まとめ
ご存知のサイトもあったと思いますが、如何でしたでしょうか？こういったサイトはびっくりするくらい存在するので、定期的に新しいサイトを探してみるとデザインの参考になったり、面白いサイトに出会えたりしますよね。
こういったサイトに取り上げられるような、ナイスなデザインをしていけるようになりたいと思います。
