3-05　バランスをとって文字や文章を並べる

2008.12.25 THU

chapter 3 balance［バランス］

05　バランスをとって文字や文章を並べる
制作・文＝境祐司

文書構造とビジュアルデザイン

ひとつの記事は見出し、リード、小見出し、本文などから構成されている。HTMLではもっとも上位の見出しにh1要素（レベル1）、本文はp要素で段落としてマークアップする。「＜p＞タイトル＜/p＞」という段落に対して、CSSで文字サイズを大きくして、見出しとして表現することも可能だが、文書構造が壊れてしまうので、このようなコーディングは推奨されない。Webデザインでは、「構造」を意識した作業が前提になっているため、記事を構成する要素が欠けたり、情報の重要度があいまいになってしまうことはない【1】。つまり、機械（サーチエンジンのプログラムや音声読み上げソフトウエアなど）に対しては適切な情報を提供していることになる。

それでは、ブラウザに表示されるページを閲覧している人間に対してはどうだろうか。これはビジュアルデザインの良しあしの問題となる。「読みにくい」、「どう見てよいのかわからない」、「ゴチャゴチャしていて混乱する」など、サイズや余白のとり方、情報の並べ方に失敗すると、コンテンツの内容がどんなにすばらしくてもよい評価は得られないということになってしまう。

対象ユーザーによって「バランス」も異なる

通常、見出しは本文よりも太く、そして大きく表示される。デザイナーではない一般の人でも、文書のタイトルは大きくしたり、色を濃くするなど本文より目立たせるはずだ。重要なのは見出しと本文のバランスである。たとえば、スポーツ新聞や週刊誌などは特大・極太の見出しで強烈なインパクトを出している（「ハンマーヘッド」と呼ばれる）が、ファッション雑誌の場合は大きく扱っても太い威圧感のある見出しにはしない（たとえ太くしても文字色の彩度を落とすなど過剰な表現を和らげる工夫をする）【2】。ミディアムで落ち着いたページデザインを演出している。Webサイトの場合も同様で、シルバー向けの旅サイトと若者向けのゲームサイトでは、バランスのとらえ方がずいぶんと変わってくるものだ【3】。

文字サイズ、行幅、行間、余白を意識する

CSSがそれほど普及していなかったころのWebページはとても読みづらかった。行間が指定されていなかったからだが、ちょっと行間を空けるだけで可読性を向上できる【4】。また、1行の文字数にも注意しなければならない。ウインドウの幅いっぱいに数行の文章が表示されていると、目で追っていくのが苦になる。段組みにして行幅を制限したり、余白などの確保も必要だ。

余白には、文章の流し込みによってできる余白、意味改行の余白、その他、見栄えを優先して改行を加えたときにできる余白などさまざまある。字間、行間、改行、改段によってつくられる余白、段とページ全体の余白など、こまかく見ていく必要がある【5】。読みやすさというのは、文字のサイズ、一行の長さ、行間の比率、余白によって決まってくる。ただ、繰り返しになるが読みやすい、読みにくいは閲覧者によって変わる場合があるので、まず対象とするユーザー層をよく理解しておくことが重要といえる。