top > コラム > Webデザイン > 初心者でもできる!テキストを読みやすくするデザインテクニック

初心者でもできる!テキストを読みやすくするデザインテクニック

初めてホームページを作るような方にもできそうな、文章を読みやすくするためのテクニックがありましたのでご紹介します。

さらに、より読みやすくするデザインテクニックをいくつか紹介します。

1.フォントの種類を「メイリオ」にする

ホームページで表示するフォントの種類は、閲覧者のPC内に入っているフォントに依存するのですが、どのフォントを優先的に表示するかはCSSで指定できます。

その際、フォントの種類を「メイリオ」、Macの環境であれば「ヒラギノ」を指定しておくと、文字が綺麗に見えます。

当サイトで比較してみます。当サイトでは、フォントの指定を

body {
   font-family:"MS Pゴシック", sans-serif;
}

というように、「MS Pゴシック」を優先的に表示し、あとはユーザのPC内にあるゴシック系のフォントを表示するように指定してあります。

MS Pゴシック

これを、フォントの種類を「メイリオ」に変更してみます。

body {
   font-family:"メイリオ", sans-serif;
}

メイリオ

MS Pゴシックで見られた文字の縁のぎざぎざ感がある程度なくなり滑らかに表示されていますね。10px以下のようなあまりにも小さい文字ですとつぶれて見えますので注意です。

ただ、これは個人的な好みがあると思いますので、お好きなフォント指定してみてください。

2.行間に余裕を持たせる

文字がぎっしりと書かれている場合、行間が狭いと読みにくくなります。行間を文字の1.2倍から1.8倍くらいにすると読みやすくなります。これもCSSで指定します。

p {
   line-height:1.4;
}

ポイントは、単位をつけないことです。単位をつけてしまうと、例えば段落中で一部分だけ文字を大きくしたときなど、文字が重なってしまう場合がありますが、単位をつけないとそれを回避することが出来ます。

3.一行の長さを40文字前後にする

書籍でもそうなのですが、だいたい一行の長さが40文字程度になっています。恐らく、この長さが目に負担をかけないで読める長さなのではないでしょうか。

4.段落間に余白を設ける

文章を書く際は、段落を意識しましょう。区切れるところは区切って、その間に一文字程度の余白を設けましょう。個人的な感覚ですが、一文は4段くらいまでに収めると読みやすいと思います。段落はpタグで囲んで、CSSで下に一文字程度の余白を入れてみましょう。

p {
   margin-bottom:1em;
}

5.見出しと段落にメリハリをつける

見出しは見出しと分かるように、段落とは区別をつけましょう。

  1. 文字を一回り大きくする
  2. 背景色をつける
  3. 先頭に画像などでマークをつけて目立たせる
  4. 見出しと段落の間に数ピクセルの余白を設ける(あまり空けすぎると見出しと段落の関係性が薄まるので注意です)

などの工夫をしましょう。

6.関連性を余白でコントロールする

これは上記で言ってきたことの総論みたいなものですが、要素の周りに余白をあけるほど、その周りの要素との関連性が薄くなります。逆に余白が狭いほど、関連性は強まります。これだけではわかりにくいのでお勧めの記事を紹介します。この記事の「1.近接」を参考にしてみてください。

Webデザインカテゴリの最新記事

目次

※当サイトではWebサイトのことを、一般的な通称の「サイト」、「ホームページ」、「HP」などと表記しておりますが全て同一のことです。


« トップページへ戻る
↑ ページのトップへ戻る