文章の読みやすさを考える


読みやすさを考える重要なことのひとつに、文字のバランスがあります。

折角来てくれた閲覧者に、きちんと情報を伝える為にも、工夫してみましょう。

大切なのは“ターゲットとなる人に読みやすくする”こと。


文章の文字の大きさ


この文字の大きさは10pxです。文字の大きさはどうですか?

普通の文章を読ませるには、少し文字が小さくてずらそうですが、注釈位にはよさそうです。

 

この文字の大きさは12pxです。文字の大きさはどうですか?

比較的若い人のサイトなら、悪くなさそうです。

 

この文字の大きさは13pxです。文字の大きさはどうですか?

一般的によく使われているサイズです。

 

この文字の大きさは14pxです。文字の大きさはどうですか?大きめに感じますか?

因みに当サイトは14pxで、比較的幅広い年齢層に見やすくしています。

 

 

文字と見出しの関係


■タイトルの文字

文章のこの文字とタイトルの大きさの関係はどうでしょうか。どんな印象を受けますか?

文章文字の大きさが同じだと、少し読みづらく感じませんか?

 

■タイトルの文字

文章のこの文字とタイトルの大きさの関係はどうでしょうか。どんな印象を受けますか?

文章の文字の大きさをそのままに、タイトルを太字にしてみました。

 

■タイトルの文字

文章のこの文字とタイトルの大きさの関係はどうでしょうか。どんな印象を受けますか?

タイトルの文字をさらに大きくするとどうでしょうか?

 

■タイトルの文字

文章のこの文字とタイトルの大きさの関係はどうでしょうか。どんな印象を受けますか?

タイトルに色をいれたら少し見やすくなったでしょうか?

 

■タイトルの文字

文章のこの文字とタイトルの大きさの関係はどうでしょうか。どんな印象を受けますか?

タイトルを大きくして色を入れるとどうですか?

 

■タイトルの文字

文章のこの文字とタイトルの大きさの関係はどうでしょうか。どんな印象を受けますか?

タイトルの文字をさらに大きくするとどうでしょうか?

 

文章の文字の色


この文字の色は#000000です。印象はどうですか?
この色は、いわゆる“真っ黒”です。実は、意外にも一般的にこの真っ黒はあまり使われていないんですよ。なぜでしょうか。

 

この文字の色は#333333です。印象はどうですか?
この色は、少し灰色がかっています。実は、この少し灰色がかっている色は、よく使われています。文字を沢山読ませようという場合、真っ黒よりもおだやかな分目が疲れにくく、読みやすくなる、、というわけです。

 

この文字の色は#555555です。印象はどうですか?
さらに灰色がかっています。管理人的にはこの色は好きなんですが、文字が小さかったりすると少しみずらくなってしまう色かもしれないですね。

 

余白と強弱は大切


下の2つ、どちらが読む気になりますか?

 

1)
話す時も、間と緩急が必要だったりしますよね。文章もそういった変化があったほうが読みやすくなります。例えばこの文章、皆さん読んでますか?改行せずに太字もかっこも使わずににだだだだだ~とかくとちょっと途中で読む気がうせてきませんか?長い文章であればあるほど、改行や()や太字や色などを使って変化をつけていくことは大切です。

 

 

↓「」や太字、改行を加えてみます。

 

 

2)
話す時も「間」と「緩急」が必要だったりしますよね。文章も変化があったほうが読みやすくなります。

「」をいれるだけでも、「間」があき、「改行」をいれると空間ができます。

ただ、だだだだだ~よりも、このほうが読みやすくなりませんか?

 

やっぱり長い文章であればあるほど、改行や()や太字や色などを使って変化をつけていくことは大切です、と書くとどうですか?

 

 

行間も大事。でもJimdoは大丈夫


 Jimdoは、初期設定で“ほどよい行間があくいている”ので特に気を遣わなくていいんですが、行間がつまってることも読みやすさに大きく影響があったりもします。

 

1)

行間が詰まってる感じはこんな感じ。つめつめキツキツ。文字がちょっと重なり気味で
これではちょっと読みにくすぎますね。やはりもう少し余裕があったほうがよさそうです。

 

2)
行間があいた感じはこんな感じ。デフォルトより多めにあけてみましたが、少しあけ気味でしょうか。でも、上記のキツキツと比較してみると、この位あいてても結構よみやすいですね。あまり間延びしても読みにくいので、加減が必要です。

 

アンダーラインにご注意


アンダーラインにご注意!

 

こんな感じで、文字の下にアンダーラインが入っているのを見ることがあります。

私はどうも、これはおすすめしません。

なぜならば。

リンクかと間違えるからです。

実際、カーソルを合わせて、何もなかったら、

“なんだよ~っ!”って。そんなことちょっとでも思われるのは勿体ないです。

 

機種依存文字に注意


機種依存文字

 →(1)(2)(3)(株)(有)※画像で作ってしまう手もあります。

現在のパソコンだとあまり問題がなくなってきましたが、ローマ数字や丸囲い数字は、Mac、windowsなどの閲覧環境によって文字化けする可能性があり、あまりおすすめしません。

できれば、下記のように記号でなく、文字で書き換えましょう。