東京のWeb制作会社LIGLIGならできるおもしろいこと。殿堂入りシェア中型ライダー(二輪)免許を持っているライターの内藤です。本日は、ライダーキック並みの強烈さで役に立つ見本サイトをまとめてみたいと思います。※この記事は、2013年6月25日に公開された記事を再編集したものです。部品に特化した見本サイトをご紹介します。見出しデザイン(h1,h2,h3......その他DTPでも)はじめは見出しデザインに特化した見本サイトまとめ。見出しデザイン.comhttp://midashi-design.com/見出しタグ(h1,h2,h3......)のデザインの見本ですが、DTPなどでもヒントになるものがたくさんあります。ヘッダー部分に凝っても見出しが適当だと全体のデザインが締まらないので、とても参考になります。DTPでは飲食店メニューの見出しの参考になりそうです。見出しメーカーhttp://midashi-maker.v-colors.com/見本......ではありませんが、簡単にCSS見出しが作れるサイトです。色の組合せサンプルが用意されていて、付箋(ふせん)型や上下ラインなどのデザインの種類も一瞬で作ってくれますので、インスピレーションは湧くかも。作った見出しはCSSをコピーして使えます。Generatorhttp://www.colorzilla.com/gradient-editor/こちらもCSS見出しを手軽に作れるサイトです。CSS3を使ったグラデーションを使った見出しが作れます。グラデーションの方向なども選べ、色のサンプルも豊富です。フッターデザインつぎは、フッターデザインに特化した見本サイトまとめ。フッターデザイン.comhttp://footer-design.com/こちらは、けっこう悩ましいフッターだけを集めた見本サイト。実はフッターというのはよく見られます。インターネットに慣れた人は、会社概要や特定商取引法に基づく表記などを見たい場合、必ずフッターに目をやります。最近ではフッターがサイトマップの役割を担っているものも多いため、フッターのデザインは以前よりも重要性が増しているように思われますので、悩んだときにはきっと役に立ってくれると思います。ファビコン(Favicon)つぎは、ファビコンに特化した見本サイトまとめ。ファビコンギャラリー.comhttp://favicon-gallery.com/タブブラウザが普及して久しくなりました。開いたタブから、見たいタブを探すとき、やっぱり一番最初に目をやるのはファビコン。Favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。出典:Wikipediaそうです、タブに表示されるページタイトルの左側にあるアイコンのことです。お気に入り(ブックマーク)に登録しても表示される、あれです。これはすごくサイズが小さいので、その小さい枠の中でどれだけ見やすく個性を発揮できるかがポイントになります。業種別にファビコンが見られるので、とても参考になります。Generatorhttp://favicon-generator.org/こちらのサイトは、画像からファビコンを作成するジェネレータ・手描きでファビコンを作れるエディタ・ここで作られたファビコンを閲覧できるギャラリーがセットになったサイトです。ギャラリー(見本)は玉石混淆ですが、便利なので掲載してみました。部品ごとに検索できる見本サイトCroppy(クロッピィ)http://croppy.org/なんと、ヘッダー・ロゴ・グローバルナビ・イメージ・見出し・バナー・サイドバー・ボタン・フッターと、ほとんどの部品見本を検索できます。その部品が使われている元のサイトも掲載されているので、サイトイメージも湧いてきます。部品のデザインから全体のデザインを考える、という方法もありですよね。コンバージョン」「フッター」という大カテゴリーの下に、ロゴ・グローバルナビゲーション・メインビジュアル・見出し・テーブル(表)・地図・フォーム・ボタン・コピーライト・フッターなど、15の分類で検索ができます。業界別での検索もできるので、作りたいテイストに合わせた検索も可能です。PatternTaphttp://patterntap.com/サイト全体のデザインを検索できるサイトなのですが、部品ごとの検索ができます。found)ページの見本まで検索できます。海外サイトなので若干日本のサイトデザインとは違うかもしれませんが、色での絞り込みなどができるなど、アイディアに詰まったときにはきっと役に立ってくれると思います。業種や色、テイストなどでデザイン全体を検索できるギャラリーサイトWebデザインの見本帳http://www.web-mihon.com/個人的によくお世話になるサイトです。色・業界で絞り込むことが可能ですが、ここの面白いところは「印象から探す」という主観的なカテゴライズがあるところ。「カッコいい・クール」「かわいい・ポップ」「さわやか・健康・癒し系」「高級・リッチ・セレブ」など、クライアントさんが表現しそうな言葉から探せるのがいいです。「青っぽくて清潔感がある感じがいい......」とか、「とにかく高級感を出して欲しい」とか、そういうリクエストをもらうことってありませんか?具体例がなく、そういうリクエストがあったときにものすごく役に立ちます。縦長のWebデザインギャラリー・サイトリンク集http://muuuuu.org/こちらは縦に長いページのデザインに特化したサイトです。それほど長くないページも含まれますが、ランディングページなどの参考になると思います。このサイト自体も洒落ていて、サムネイルにマウスを乗せると、そのサムネイルの中がスクロールしてサイト全体を見ることができます。(FLASHやJSやHTML5など)に加えて、レイアウト(カラム)によっても検索できます。海外サイトも登録されているグローバルなサイトです。ブックマークやお気に入り登録をすることができ、その数も見えるので人気度も分かります。今時の人気デザインの情報収集に向いているのではないでしょうか。ズロックhttp://www.zzrock.net/色・業種・キーワード検索に加えて、レイアウトや種類というカテゴリーがあり、「企画がおもしろい」「UIがすばらしい」などの切り口が気に入っています。サムネイルにマウスを乗せると、一言コメントがついているものがあってとても参考になります(笑えるものもあります)。ちなみに......自分の好きな「なめこ栽培サイト」は、「企画がおもしろい」の中に入っており、一言コメントは「なめこをキャラ化。このワルノリがおもしろい。3000http://io3000.com/業種カテゴリーも多く、見せ方が上手いサイトです。タグでの検索も可能で、「minimum(ミニマム)」などで検索すると、フラットデザインにつながるヒントが見つかるかも。登録年月日からも検索が可能なので、いつ頃の作品なのかがわかるのもいいところです。イケサイhttp://www.ikesai.com/業種の豊富さが魅力の見本サイト。シンプルですが、その分時間が無いときに同業他社のサイトを調査するときはここという感じです。サムネイルが小さめですが、いっぺんにたくさん見ることができて便利です。週刊ウェブデザインhttp://www.dailywebdesign.com/掲載サイトの数が豊富なサイトです。色分けはありませんが、業種や種類でカテゴライズされており、シンプルで見やすいのが特徴。写真素材へのリンク集やロゴデザインの見本サイトもあり、数と更新頻度で勝負のサイトという印象です。Webデザインサンプルhttp://webdesignsample.net/こちらは他のサイトとは趣が異なり、自分の好きなデザインのサイトを登録できるサイトです。一般の人を含めて多くの人が「いいな」と思ったサイトが登録されているので、サイト制作者からだけの視点でないところが魅力かもしれません。ここも「テイストで探す」という検索があり、「かわいい・キュート・ポップ」「ミニマル・シンプル」「美しい・芸術的」などで探すことができます。人によってこの「テイストの感じ方」は違うので、とても参考になると思います。最後に他にも見本サイトはありますが、リンク切れが多いところや登録数が少ないところは省きました。業種別で検索し、Web制作会社のサイトで気に入ったところがあったら、その制作会社の制作実績を見るのも効果的ですね。Webデザインの配色で迷ったときに役立つツールとその使用方法まとめWeb制作のご相談・料金のお見積りはこちらから【株式会社LIGについて】わたしたちは年間150を超えるWebサイトをリリースしている、東京上野のWeb制作会社です。デザインの賞を受賞した制作実績も!Webサイト制作のご相談はこちらより、お気軽にお問い合わせください。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。