2018夏のweb制作無料相談会(名古屋当日)
2018夏のweb制作無料相談会(名古屋当日)
2015.05.19

美しいWebデザインをタイプ別に!見ないと損するパーツ別ギャラリーサイトまとめ

榊原
(編集部注*2013年6月25日に公開された記事を再編集したものです。)

中型ライダー(二輪)免許を持っているライターの内藤です。
本日は、ライダーキック並みの強烈さで役に立つ見本サイトをまとめてみたいと思います。
Web屋さんはご存じの方も多いかもしれませんが、ブログをしている一般の方、Webデザイン・DTPに興味のある方、お店を持っている方なども必見です!

目次

  1. 部品に特化した見本
  2. 部品ごとに検索できる見本サイト
    • Croppy(クロッピィ)
    • ブブンデザインアーカイブ
    • PatternTap
  3. 業種や色、テイストなどでデザイン全体を検索できるギャラリーサイト
    • Webデザインの見本帳
    • 縦長のWebデザインギャラリー・サイトリンク集
    • straightline™_bookmark
    • ズロック
    • Webデザインギャラリー I/O 3000
    • イケサイ
    • 週刊ウェブデザイン
    • Webデザインサンプル
  4. 最後に

【こちらもおすすめ】
Webデザインの参考になるギャラリーサイトまとめ33選

部品に特化した見本

部品に特化した見本サイトをご紹介します。

見出しデザイン(h1,h2,h3……その他DTPでも)

はじめは見出しデザインに特化した見本サイトまとめ。

見出しデザイン.com

見出しデザイン.com

見出しタグ(h1,h2,h3……)のデザインの見本ですが、DTPなどでもヒントになるものがたくさんあります。
カテゴライズは、グラデーション・テキストのみ・テキスト非画像・上線・下線・丸・四角・囲み線・斜線・点線・角丸。
ヘッダー部分に凝っても見出しが適当だと全体のデザインが締まらないので、とても参考になります。
DTPでは飲食店メニューの見出しの参考になりそうです。

 

見出しメーカー

見出しメーカー

見本……ではありませんが、簡単にCSS見出しが作れるサイトです。
色の組合せサンプルが用意されていて、付箋(ふせん)型や上下ラインなどのデザインの種類も一瞬で作ってくれますので、インスピレーションは湧くかも。
作った見出しはCSSをコピーして使えます。

 

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator

こちらもCSS見出しを手軽に作れるサイトです。
CSS3を使ったグラデーションを使った見出しが作れます。
グラデーションの方向なども選べ、色のサンプルも豊富です。

フッターデザイン

つぎは、フッターデザインに特化した見本サイトまとめ。

フッターデザイン.com

フッターデザイン.com

こちらは、けっこう悩ましいフッターだけを集めた見本サイト。実はフッターというのはよく見られます。
インターネットに慣れた人は、会社概要や特定商取引法に基づく表記などを見たい場合、必ずフッターに目をやります。
また、最近ではフッターがサイトマップの役割を担っているものも多いため、フッターのデザインは以前よりも重要性が増しているように思われますので、悩んだときにはきっと役に立ってくれると思います。

ファビコン(Favicon)

つぎは、ファビコンに特化した見本サイトまとめ。

ファビコンギャラリー.com

ファビコンギャラリー.com

タブブラウザが普及して久しくなりました。
いっぱい開いたタブから、見たいタブを探すとき、やっぱり一番最初に目をやるのはファビコン。

Favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。Favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。

出典:Wikipedia

そうです、タブに表示されるページタイトルの左側にあるアイコンのことです。
お気に入り(ブックマーク)に登録しても表示される、あれです。
これはすごくサイズが小さいので、その小さい枠の中でどれだけ見やすく個性を発揮できるかがポイントになります。
業種別にファビコンが見られるので、とても参考になります。