ウェブデザイン - 参考にしたい見出しデザイン | Technolog.jp - ICTウェブマガジン

ウェブデザイン – 参考にしたい見出しデザイン

ウェブデザインにおいて、見出しタグ(h1, h2, h3等)は各ページのデザインの善し悪しを分ける重要な要素です。しかし、多くはテキストベースであるため、常套的になりやすく、ウェブデザイナーの頭を悩ませます。今回はそのブレークスルーになるような参考にしたい見出しデザインをご紹介します。

cultural solutions uk

cultural solutions uk

[]
h1 {
background: none repeat scroll 0 0 transparent;
color: #FFFFFF;
font-family: “Century Gothic”,Arial,Helvetica,sans-serif;
font-size: 95px;
font-weight: bold;
letter-spacing: -5px;
line-height: 75%;
opacity: 0.8;
text-shadow: 0 1px 1px #999999;
}
[/css]

フォントに指定された”Century Gothic”は柔らかい中にもインパクトがあります。letter-spacingやline-heightを狭く取っているのが特徴で、全体のバランス感が良いと思います。

jonwallacedesign

jonwallacedesign

[css]
h2 {
color: #820F00;
font-family: Calvert Light,”Cambria Regular”,”Cambria”,Georgia,”Times New Roman”,Times,serif;
font-size: 3.3em;
letter-spacing: -3px;
padding-bottom: 6px;
text-shadow: -1px 0 rgba(0, 0, 0, 0.4), 0 -1px transparent, 0 1px rgba(255, 255, 255, 0.4), -1px -2px transparent;
}
[/css]

こちらもletter-spacingを詰めることでフォントの存在感が強調されています。さらにtext-shadowを入れることで立体感を出しています。

クイーンズアベニューα

クイーンズアベニューα

h1タグ内の先頭の文字のみをspanで括り、そこだけ別の色を使用しています。この方法であれば、任意の箇所のみフォントサイズを変更するなど柔軟な装飾が可能ですね。

Third Culture Studios

Third Culture Studios

こちらは、単語単位をspanで括り、CSSを適用しています。細かなタイポグラフィデザインを施したい場合に有効な手段かもしれません。

英字の場合、エイリアスの効いたフォントの種類が豊富なので、日本語では必ずしも上述したサイトのような質感にはなりませんが、テクニックとしては参考にしていただけると思います。