• サイトマップ

見出しと本文の関係

Webサイトは文字情報がメインになるので見出しと本文の関係が非常に重要です。 文章の読みやすさにかかわる問題ですし、 この関係がしっかりしていると見た目にも美しい印象を与えることができます。 見出しと本文をレイアウトする際は以下のポイントに注意して見てください。

• 見出しと本文との距離
• 見出しのサイズと色
• 見出し・本文の表現方法

見出しと本文との距離

見出しと本文との距離は実は大事です。 近接の原則の通り離れすぎると関係が薄くなってしまいますし、 近すぎても見にくくなってしまいます。 内容や見出しのサイズにもよりますが、見出しと本文の距離は文字サイズ、 1文字分ぐらいが最適だと思います。 見出しのサイズが大きくなる場合はもっと離れていてもよいでしょう。

見出しのサイズと色

見出しのサイズは本文よりも文字サイズが大きい方が好ましいです。 見出しと文字の論理構造を考えても、本文よりも見出しの方が階層が上なので、 しっかりと関係を反映したデザインが必要だからです。 また、ユーザは見出しを読み、本文が必要な情報なのかどうか判断しているので、 見出しはユーザの視線をひきつけるものでなくてはなりません。 文字サイズが同じでも色を目立つ色にする、 太字にするだけで同じ効果を得ることができます。

見出し・本文の表現方法

見出し・本文は表現方法を凝ることでサイト全体のクオリティをあげることができます。 いくつか表現方法の例を紹介しましょう。

見出しを画像で表現

見出しを画像で表現することで美しく文章を見せることができます。 しかしユーザが文字を選択してコピー＆ペーストできない というようなデメリットもあります。また、画像のalt属性を正しく指定ないと、 検索エンジン、音声・テキストブラウザで正しくないようが伝わらないので注意が必要です。 情報提供型のWebサイトなどではこの表現は控えた方がいいかもしれません。

Webサイトは文字情報がメインになるので見出しと本文の関係が非常に重要です。 文章の読みやすさにかかわる問題です...

見出しにアイコン、約物(ビュレット)をつける

文章は頭にアイコンや約物をつけましょう。約物とは文字記号のことです。 これらをつけることで簡単に見出しを引き立たせることができます。 また、ページ全体にリズムを与えることにもなります。 工夫しだいでいろんな雰囲気を演出することができるのでオススメです。 約物には■や▼などが一般的に使用されているようです。 また、アイコンなどの画像のalt属性には「＊」「→」などの記号を指定すると テキストブラウザなどでも意図が伝わりやすくなります。 アイコン内容によって適宜記号を指定してみてください。 ちなみに表示例ではサンプルなのでアイコンのalt属性は「アイコン」としています。

箱組みを利用する

見出しと本文を箱組みにすることで関係を強調することができます。 またページの中で目立つので強調したい情報を入れるとよいでしょう。

応用として、 見出しの幅に合わせて箱をつくることでスッキリとしたレイアウトを実現できます。 これを並べればリズミカルなレイアウトになるでしょう。 ただしあまり情報量が多いと形が崩れるので充分に検討することが必要です。

見出しと本文の関係

Webサイトは文字情報がメインになるので見出しと本文の関係が非常に重要です。 文章の読みやすさにかかわる問題です...

見出しと本文の関係 Webサイトは文字情報がメインになるので見出しと本文の関係が非常に重要です。 文章の読みやすさにかかわる問題です...

見出しと本文の関係 Webサイトは文字情報がメインになるので見出しと本文の関係が非常に重要です。 文章の読みやすさにかかわる問題です...

見出し、本文ともに画像化する

見出しの画像化は上で紹介しましたが、本文も画像化する方法です。 好きなフォントが使用できる上、見た目にも美しくなります。 また自由な文字表現が可能なのでいろいろな工夫ができます。 しかし、これもユーザが文字を選択してコピー＆ペーストできないというデメリットがあります。 また、画像のalt属性を正しく指定ないと、 検索エンジン、音声・テキストブラウザで正しくないようが伝わらないので注意が必要です。 画像のサイズが大きくなるので閲覧環境によっては表示時間もかかってしまうのでよく考えて使用しましょう。

見出しや本文の画像化に関する注意点

見出しや本文の画像化に関する注意点として、 適切なマークアップ怠ってしまう場合があるという点があります。

例え画像にしたとしても、 見出しは<Hx><img></Hx>というようにマークアップした方がスマートです。