3.知っておきたいエトセトラ

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

読みやすさを考える重要なことのひとつに、文字のバランスがあります。折角来てくれた閲覧者に、きちんと情報を伝える為にも、工夫してみましょう。

大切なのは読みやすくすること。

文章の文字の大きさ

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

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

 

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

若い人なら、見えるかもしれませんが・・・。

 

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

かつてはよく使われていましたがパソコンによっては小さいですね。

 

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

かつては一般的に使われていましたが、まだ小さめですね。

 

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

因みに当サイトは16pxです。

 

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

大きく感じますか?このくらいだと年齢層の幅も広くなってきますね。

文字と見出しの関係

■タイトルの文字

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

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

 

■タイトルの文字

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

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

 

■タイトルの文字

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

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

 

■タイトルの文字

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

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

 

■タイトルの文字

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

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

 

■タイトルの文字

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

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

文章の文字の色

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

 

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

 

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

余白と強弱は大切

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

 

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

 -------------------------

 

 

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

 

 

-------------------------
話す時も間と緩急が必要だったりしますよね。文章もそういった変化があったほうが読みやすくなります。例えばこの文章、皆さんはどこを読みましたか?

太字をいれると注目が集まり、改行をいれると空間がうまれ読み手のストレスが軽減されます。

長い文章であればあるほど、改行や太字などを使って変化をつけていくことは大切です。

-------------------------

 

行間も大事。

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

 

1)

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

 

2)
行間があいた感じはこんな感じ。初期設定より多めにあけてみましたが、少しあけすぎでしょうか。でも、上記と比較してみるといかがですか?あまり間延びしても読みにくいので、加減が必要です。
行間があいた感じはこんな感じ。初期設定より多めにあけてみましたが、少しあけすぎでしょうか。でも、上記と比較してみるといかがですか?あまり間延びしても読みにくいので、加減が必要です。

アンダーラインにご注意

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

 

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

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

なぜならば。

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

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

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

機種依存文字に注意

機種依存文字

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

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

記号でなく、⑴でなく(1)というように文字で書き換えましょう。

※かっこと1の組み合わせです。

 

実は「プチ☆カスタマイズ」の☆は機種依存文字です。あえて使ってみていますが、検索結果では☆は空白になったり・マークになったり環境によって表示がかわってしまう可能性があるのです。