意味の違いは見た目にも分けよう
人は、見栄えの違うものに意味の違いを感じます。そのため、話の中で情報の意味合いが異なる部分は、色や形などの見た目を他の部分と分けておくことで、違いをよりハッキリさせることができます。
たとえば、箇条書きや表はデータをわかりやすく表現するものですが、そこだけ形が変わっているために、データの領域であることがよりハッキリするという効果も併せ持っているわけです。
まずは、文章の見た目にメリハリをつけてみましょう。HTMLで正しくタグ付けされた文章なら、CSSなどのスタイルシートを用いて自由にデザインを変えることができます。次に3つほど、基本的なポイントについて説明します。
見出しの文字サイズにメリハリをつけよう
新聞を読んだとき、大きな文字で書かれた見出しほど注目してしまうものです。このように見出しのサイズをその重要性に合わせて大きく見せることで、「どこに・何がある」のかがよりわかりやすくなります。
- 見出しの文字サイズが小さい文章
- 見出しの文字サイズが大きい文章
1番目と2番目では、2番目の方が「どこに・何がある」のかがわかりやすくなっています。見出しがより目立つようになったため、本文の内容を示す目印としての機能がうまく働くようになったからです。文字サイズが本文よりも大きい見出しほどよく目立つわけです。
ただし、本文の内容によっては、2番目の方は少々しつこさを感じさせるかも知れません。落ち着いた印象を持たせたい場合には1番目の方が適切と言えます。見出しの文字サイズが小さいほど落ち着いてみえるわけです。
以上のような見出しなどの文字サイズと本文の文字サイズの比率を、デザイン用語では「ジャンプ率」と呼びます。ジャンプ率の違いは、次のような働きをします。
- ジャンプ率が高いほど、文章にメリハリがつき、活気ある印象になる。ただし、高すぎると、見出しと本文が分離した印象になって、かえって読みづらい
- ジャンプ率が低いほど、落ち着いて格調高い印象を与える。ただし、低すぎると、見出しが見出しとしての機能を果たさなくなり、読みづらくなる
見出しの適切な大きさは、伝えたい印象や、基本となる文字の大きさ、余白や行間とのバランス、見出しのレベルによっても変わってきます。いろいろな大きさを試して、あなたの文章に合ったものを考えてみましょう。ちなみに、一般的なウェブブラウザ上で表示される標準状態での見出しの大きさは、大半の人が「しつこさ」を感じるようです。
なお、CSSでは文字の大きさをfont-sizeプロパティで指定します。たとえば、大見出し(h1要素)の大きさを本文の文字サイズに対して2倍にしたければ、h1 { font-size: 200% }と記述します。
見出しと本文の行間を近づけよう
人は、見た目がまとまっているものに、意味のまとまりを感じます。話の中で意味のまとまりがあるブロックは、見た目にもまとめておきましょう。
文章の中で1番大きな意味の固まりは見出しのレベルなので、まずは見出しとその本文との行間を近づけてみましょう。
- 見出しの上下間隔が均等な文章
- 見出しを本文に近づけた文章
1番目よりも2番目の方が、どこで何を説明しているのかわかりやすくなりました。このように、見出しとその本文が表示される距離を縮めておけば「同じブロック」だということがわかりやすくなります。
逆に、情報のブロックとブロックが離れているほど、意味としても離れた印象を出すことができます。たとえば、段落と段落の間は単なる改行より行間隔が広いため、意味として違う部分だとわかるわけです。ただし、見出しにしても、段落にしても、情報のブロックをあまり離しすぎると文章としてのまとまりが無くなります。いろいろな間隔を試して、あなたの文章に合ったものを考えてみましょう。
なお、CSSではmarginプロパティを使うことで、特定の情報ブロックに対して上下左右のマージンを指定することができます。たとえば、大見出し(h1要素)と他の部分との間隔を、上20ピクセル、下5ピクセル、左右0ピクセルと指定したければ、h1 { margin: 20px 10px 0px 0px }と記述します。
重要な部分は他と色を変えてみよう
人は、他よりも色合いの強いものに目が向きます。
- この商品をお使いになる前に、取扱説明書を必ずお読みください
- この商品をお使いになる前に、取扱説明書を必ずお読みください
この例のように、強調している部分を目立つ色に変えることで、より重要性が感じられるようになります。ただし、この例のような強調があちこちで見られると、インパクトが薄れて効果が無くなるので注意しましょう。
なお、CSSでは文字色の指定をcolorプロパティで指定します。上の例では、強い強調(strong要素)を赤100%、緑5%、青5%の色にしています。その場合、strong { color: rgb(100%,5%,5%) }と記述します。
