[webデザイン] 「見た目的に」読みやすいテキストにするためのアイデア
ウェブデザインで考えないといけないことってたくさんあると思いますが、その中でもテキストに関することをまとめてみたいと思います。「意味的に」読みやすいというのではなくて、「見た目的に」読みやすいデザインを考えてみます。そして、それにまつわるcssの設定も挙げていきます。
テキストの色
どんなに文字が大きくても、どんなに文字が太くても、白い背景に書いた白い文字は読めません。ということで、テキストの色は大事です。
デフォルトでは、白い背景に黒い文字、というのが多いと思います。ただ、サイトによっては、テーマカラーというのが決まっていて、背景色の変更ができない場合もあると思います。そのときには、文字の色と背景の色の明度に差をつければ読みやすくなります。フォトショップなどであれば、HSBのBの数字を変化してみましょう。
実際に長文を書いてみて、目が痛くないか、読みやすいかを見てみましょう。
ちなみに、cssでの文字の色の設定は、colorです。わかりやすいですね。bodyタグに設定すれば、ほとんどの要素に対して文字の色が設定されます。背景色の設定は、background-colorです。
テキストの大きさ
テキストと背景の色が違っても、小さすぎると見えません。テキストの大きさも重要です。
海外のデザインを見てみると、文字が小さいことがよくあります。例えば、海外で作られたwordpressのテーマをそのまま使うと、なんだか文字が小さすぎるような気がします。これは、気のせいではありません。実際に小さいのです。
アルファベットはとてもシンプルな形をしています。一方、日本語は、「あ」とか「ぬ」などといった、複雑な形をしているのが多いです。さらに漢字もあります。一つの文字が少ない線で構成されているアルファベットは小さくても判別できます、しかし、たくさんの線で構成されている日本語の文字は、線と線が重なり合ってしまうため、サイズが小さいと判別しにくくなってしまいます。
一つ一つの文字が識別できないと、それがストレスとなり読みづらくなってしまいます。ですので、アルファベットより大きいサイズにすべきです。
逆に大きすぎると、画面に一度に載せることのできるテキスト量が減ってしまいます。タイトルなどは大きすぎても構いませんが、本文は控えめにしておきましょう。
また、モバイルで見る場合は、デスクトップの画面で見るよりも至近距離で見ることが多いので、少し文字が小さめでも構わないと思います。もしモバイルでcssを切り替えるなどの対応をしている場合は、テキストの大きさも小さくするように設定してみましょう。
cssでの設定は、font-sizeです。個人的には、14pxとか16pxくらいがいいんじゃないかなと思います。また、px以外にも、基準の文字の大きさをベースにサイズを指定する、%やemなどの単位も使えます。pタグや、divタグに設定するのもいいですが、全体に設定するのなら、bodyタグに設定するのもいいと思います。
左右の文字との間隔
文字が一つ判別できても意味がありません。文は複数の文字で成り立っているので、必ず左右に別の文字があるわけです。この左右の文字との距離も大事です。
左右の文字との距離が近いと、ごちゃごちゃした印象を与えてしまいます。また、実際に読みづらくもなります。実際に例を見てみましょう。下の4つの文は、それぞれ文字の間隔を変えて書いています。
これは文字の間隔を0pxにした文章です。これは文字の間隔を2pxにした文章です。これは文字の間隔を5pxにした文章です。これは文字の間隔を10pxにした文章です。
どうでしょうか。ひとによって読みやすさの違いはあると思いますし、テキストの大きさにもよるので、いくらに設定するのがいいという答えはありません。ただ、0だと息苦しさはありますよね。また、文字の大きさと同じで、間隔もとりすぎると逆に読みづらくなってしまいます。
cssでは、letter-spacingで設定します。pタグやdivタグなど個別に設定するか、bodyタグで全体に設定しましょう。
上下の文字との間隔
文章が一行で終わるとは限りません。というより、複数行になるのが普通でしょう。各行の上下の間隔も、読みやすさに大きく影響を与えます。
ウェブで文章を読む場合は、本を読む時とは違い、指で読んでいる部分をさすことは少ないです。目で追っていくしかないので、上下の行がすぐ視界に入ってくると、どの行を読んでいるかわかりづらくなってしまいます。そのため、上下の間隔も適度にとりましょう。
これも、広すぎると、次の行に行くときに目が大きく動かなくてはいけないので、広すぎは厳禁です。
cssでは、line-heightで設定します。フォントの大きさの1.5倍くらいに指定すればちょうどいいんじゃないかなぁと思います。
1行の長さ
先で、上下の文字との間隔を考えましたが、「次の行に移る」ときの動作でネックになるのが、1行の長さです。あまりに長いと、次の行を探すのが大変で、読みづらくなります。
ストレスなく文章を読むためには、文をスムーズに読めることが大前提ですが、一番大きな問題は「次の行に移る」ときに起こると思います。読んでいる先が大きく動くし、次の場所を探さないといけないからです。これをスムーズに行うためには、前の行の終わりと次の行の始まりが離れすぎないことが大事で、そのためには1行の長さを設定しなければいけません。
実際には、文章は、pタグやdivタグに入れることが多いと思います。そのため、cssで設定する場合は、文章を入れているこれらのタグに対して、widthを設定します。大体、1行に30から40文字くらいが入る程度の幅にするのがいいのではないかと思います。
たまに、ウィンドウの端から端までテキストを書いているサイトを見かけますが、すごく読みづらいなぁと思います。
段落の前後
意味的なつながりで文章をまとめたものが段落です。これは他の段落と区別できるようにしておいた方がいいので、スペースをもうけた方がいいでしょう。
cssでは、marginを使って設定します。margin-bottomだけでもいいので、設定することをおススメします。
まとめ
いかがでしたでしょうか。文字と背景の色、テキストの大きさ、左右との間隔、上下との間隔、段落の幅と前後の間隔、一つ一つ適切なスペースを与えてやれば、とても読みやすくなると思うので、ぜひ参考にしてみてください。