• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2013/01/21
書いた人:
yukappa!(INO)
カテゴリ:
Web制作   デザイン
タグ
115,386 views

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

NOIMAGE

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

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

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

見出しデザイン.com

01Midashi
http://midashi-design.com/

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

ブブンデザインアーカイブ(見出しページ)

02Bubun
http://bubundesignarchive.jp/mid/

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

WEBサイトカッコイイ(見出しページ)

03Kakkoii
http://fukuoka-web.hustle.ne.jp/find/

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

便利なWebツールを使ってみよう

スタイルシート見出しメーカー

04Style
http://midashi-maker.v-colors.com/

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

画像で見出しを作ってみよう

Mdnデザイン

Webデザイン表現&技法の新・スタンダード」
MDN DESIGN
http://www.mdn.co.jp/di/articles/2364/?page=6


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

HTMLとCSSで作成してみよう

Webクリエイターボックスさん

「Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える」
WEBクリエイターボックス
http://www.webcreatorbox.com/tech/css-heading-list-blockquote/

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

3STREAMERさん

「コピペで出来るCSS3で見出しスタイリング」
3STREAMER
http://blog.3streamer.net/html5-css3/css3-styling-231/

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

Webデザインのレシピさん

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

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


この記事を読んだ人はこんな記事も読んでいます