見出しデザインに迷ったらどうする…？参考サイトさんをまとめてみました

2013/01/21

Web上ではよく使用する見出しデザイン。「CSSで作る？それとも画像を使う？」と、デザインに迷ったときに参考になるサイトや、新たな見出しの作り方を学んでみたいときに役立ちそうなサイトをまとめてみました。

Webサイト、ブログ作成時に必要となる見出しのデザイン装飾。
シンプルだったりしっかり目を引くデザインだったり、さまざまです。
今日はそんな見出しをデザインする際に参考になるサイトをまとめてみました。

まずは見出しデザインのバリエーションを知ろう

見出しデザインを取り扱っているデザインギャラリーサイトさんです

100%見出しデザイン！デザイン別にカテゴリわけされています。
実際に見出しが使用されているサイトへジャンプして、
全体のデザインを見ることもできます。

Webデザインをパーツ別に見ることができます
パーツ別、業界別で画像の閲覧ができるので便利！
見出しだけでなく、各パーツのデザインの参考に。

かっこいいWEBサイトを集めたリンク集
関西的なニュアンスで言うと「シュっとした」感じの
スタイリッシュで洗練されたデザインのWEBサイトを紹介してくださっています。

好きな色を4色選ぶ⇒「作る！」を押すだけで
簡単見出しデザインを作ってくれるWebツールです
シンプルに素早く見出しを作りたいときにおすすめ！

Webデザイン表現&技法の新・スタンダード」

http://www.mdn.co.jp/di/articles/2364/?page=6

Illustratorで作成する見出しバーの作り方がわかりやすく紹介されています
画像の見出しは装飾やグラデーションをふんだんに使えるところが魅力的ですね！

「Webサイトの基本要素見出し・リスト・引用文のスタイルを整える」

http://www.webcreatorbox.com/tech/css-heading-list-blockquote/

サンプルとともにコピー＆ペーストで使える見出し・リスト・引用文が
紹介されています。シンプルで使いやすそうなデザインです。

「コピペで出来るCSS3で見出しスタイリング」

http://blog.3streamer.net/html5-css3/css3-styling-231/

CSS3を使って見出しを作成する方法を紹介されています。
リボンやふきだしなど、コピー＆ペーストで使えるサンプルが豊富。

「手間ひまかけずcss3だけでデザインしたい人のためのチュートリアル集22選」
http://www.so-network.biz/css/css3_ui/

「作ってみたい！」と思うようなチュートリアルが22種類も紹介されています！
海外のサイトの紹介が多めです。「こんなこともできるんだ！」と、参考になるものが多いです。