第16回　見出しを積極的に差別化する手法とは？

Webサイトの主役は文字であることは、前回解説した通り。そして、文字情報には見出しがつきものである。文字内容を見てもらうためには、効果的な見出し。これを目立たせるデザインも考えなければならない。一般的には、見出しは普通サイズや色、太さで本文と区別するが、もっと積極的にページの雰囲気を表す仕掛けを考えて、差別化に貢献する方法を考えてみたい。

デザインパターンによっては文字色の濃さを調整し、スタイル全体が適度な目立ちをキープできるように気を配ること。形を変える時は色も見直すことを原則とすべし。

 

 

本スタイルの見出しは【図1】のように、上下に2本の手描き風ボーダーが入るものを考えた。HTMLのソースは、【HTMLソース】を確認してもらいたい。

レンダリング結果を見て欲しい。この場合、見出しのボーダー色は濃い。というのも、テキストを明朝にする計画なので、文字は細くインパクトに欠ける可能性があるからだ。本作例のスタイルは以下の【ソース1】の通りである。

 

 

では、もしこの見出しが「見出し」と「キャッチ」のグループで構成されていたらどうすればよいか。見出しには上位レベルのh2を使い、キャッチには下位レベルのh3を使ってマークアップする。最終的に2つの要素はdivタグでひとまとめにしておいた。その部分のソースは【HTML2】の通りだ。

前のパターンではh2に対して背景画像を指定し、上下のボーダーを表示させていた。このパターンではそれをやめて、h2には中央の水平線を背景画像に指定する。水平線は単一の画像で、繰り返しなしのものを中央に置いた。

上下のボーダーはdivのclassとして指定した。今回はフォントをゴシックとするため、前回よりもボーダー色は薄くして目立ち具合を押さえている。これで全体としては前のスタイルと同じような印象になるはずだ。

 

 

 

あとは本文テキストの色設定を、黄みがかった背景色を念頭に黄色い色相よりのダークカラーから選択すればできあがりだ。ちなみに手描き風のボーダーは、【図2】のようにphotoshopのブラシツールから、それらしいノズルを選択して縮小、調節して作った。

グローバルナビゲーションのように、１つのサイト（あるいはページ）で１つしか登場しない要素がある。このような「フォーマット化したい素材」には、idセレクタでスタイルを指定すると便利である。同一のidに属するタグのスタイルは、いちいちセレクタを割り振らなくても前ページで統一可能だ。一方、テキストスタイルや、画像の周囲に付ける余白設定など、ピンポイントで付けたいスタイルはclassにしたほうが良い。そうしておけば作ったスタイルは、サイト全体で使い回ししやすいのだ。