こんにちは！
4月より、デザイナーとしてウノウの末席に加わらせていただくこととなりました。山崎と申します。
周囲が凄いエンジニアの方ばかりで、毎日チビりそうになりながら（？）仕事をしています。
いきなりのラボブログ当番で、さて何を書いたものやら、というところなのですが、このブログをご覧いただいている方々にはエンジニアさんが多いということで、「デザインはよくわからない」と苦手意識を持っている方も少なからずいらっしゃるはず。そんな「デザインとかようわからん」な方々に向けて、Webサイトの「デザイン」について、本当にベーシックな部分から少しずつ少しずつ解説してみようと思っています。
すでにガシガシWebデザインをやっている方々には物足りない、退屈な内容になってしまうかもしれませんが、どうぞよろしくお付き合いください。
というわけで今回は、「テキストを読みやすくする」です。
FlashだリッチコンテンツだRIAだ何だと叫ばれて久しい今日この頃ですが、とはいえBlogにWiki、SNSの日記など、なんだかんだでWebサイトの中身の大部分は「テキスト」です。テキストを制する者はWebデザインを制する……はさすがに言いすぎにしても、「テキストの読みやすさ」がWebサイトの品質に与える影響は馬鹿にできません。
今回は、そんな「テキスト」の読みやすさのためのポイントをいくつか解説してみようと思います。
なにはなくともまず行間を広げる。
まずは、こちらの画像をご覧ください。
行間設定の例 posted by (C)フォト蔵
一番上が何も指定していない状態。中央が適度に行間をあけたもの、下が行間を必要以上に大きくあけたものです。
IE、Firefoxなどのデフォルトですと、CSSなどで何も指定しない場合、ちょっと行間（行と行の間のスペース）が詰まりすぎていて、ごちゃっとした印象になってしまいます。行間を少しあけてやると、それだけで行の分離がよくなり、横方向に視線がスムーズに流れていきます。
行間が狭いと、
- 行の一番最後まで読んだ後、次の行の先頭に視線を移動するときに、「どれが次の行なのか」がぱっとわかりにくくなり、ストレスになる。
- ぱっと見の印象が「ごちゃごちゃしている」印象になり、「読みにくそう」という印象を与える
具体的な目安としては、だいたいline-heightを130～180%くらいの範囲で、
- 一行の長さ（ブロックの幅）が長い場合にはやや広めに
- 一行の長さが短い場合はやや狭めに
- 行が長い場合は次の行の頭がどこにあるのか、戻っていく間にわからなくなりがち（＝行の間が離れていたほうが、次の行がどれか、が判断しやすい）
- 行が短い場合は、次の行の頭がどこかはすぐにわかるので狭くてもよい。また、行間を広げすぎると行ごとにバラバラな印象になり、ブロックのまとまりが悪くなる
1行の長さに気を使う
個人的にDTP方面のことを勉強していたとき、1行あたり何文字だと読みやすいか、なんていう議論を色々と見かけました。
- 1行が長すぎると視線の横移動が大きくなりすぎて目に負担がかかります。
- 短すぎると視線の移動が多すぎるのと、単語が切れ切れになることもあって、文章が頭ににすっとはいってこなくなります。
＃とはいえリキッドレイアウトの場合や、ユーザが文字のサイズを変えた場合のこと、また、閲覧環境がそれぞれ違うことまで考えると、「最適な一行の文字数」を設定するというのは難しく、そういう意味ではエラスティックレイアウトって結構いいかもしれない、と思ったり。
文字間
文字間、つまりCSSでいうところのletter-spacingですが、こちらも少しあけてやるとすっきりすることがあります。 「色々調整してみたけどどうしてもなんだかごちゃっとしてしまっているな」と思ったときにはこのプロパティに「.05em」とか指定して、ほんの少しだけ文字間を空ける、ということを試してみるのもひとつのテです。
文字色と背景色のコントラストを十分に
文字と背景の色は、ちゃんと文字が読めるよう、コントラスト（明度差）をちゃんとつけるようにします。
黒背景に青文字など、明るさが近いと文字が認識しづらくなります。
だからといって真っ白な背景に黒文字、黒背景に白文字などだと今度はコントラストが強すぎて、目が疲れます。
ですので、例えば#FFFFFFの背景に#666666の文字、など、文字の色を背景色に近づけてあげる、背景色を文字の色に近づけてあげる、などしてコントラストが高すぎないよう設定してやると、目に優しい、落ち着いた読みやすい印象になります。
また、見た感じ「なんとなくごちゃっとした印象だなぁ」「もうちょっと文字細くならないかな」と思うような場面でも、文字と背景のコントラストを下げると、（実際の文字の太さは何もかわらないのですが）印象として文字が細くなったように見えますので、そういった場面での調整にも使えます。
文字の背景に模様や写真は敷かない
模様や写真などは大抵の場合文字を読むのに邪魔にしかなりませんので、文字のある領域の背景に敷くのはできるだけ避けます。 何かの理由で背景を敷く場合は、シンプルなグラデーションなど、文字を読む上で邪魔にならないようなものがオススメです。
段落とインデント
小学生の時の作文では、「段落の頭は１字下げ」みたいなルールがありました。
ですがこれをWebページのテキストに適用して、段落ごとに最初の一文字下げると、デコボコした感じになって、どうもすっきりしない印象になりがちです。
ひと段落あたり長い文章を書く場合にはその限りではないのですが、多くの場面では一字さげたり、text-indentを設定したりせず、ブロックの左に一本の線が浮かび上がるくらいにしたほうが、整然とした、すっきりしたものに仕上がると思います。
下線、太字、色
文字に下線をつけたり、太字にしたり、途中で色を変えたりするのは、「読みやすさ」という点からは、本来はできるだけ避けたほうがいいこと、です。なぜかというと、人間の目は目立つ部分についつい視線をひっぱられてしまうので、そういう部分があると、そちらが気になってしまって、スムーズに文字を読むということが難しくなるからです。
とはいえリンク部分には下線がないとリンクであることが分かりにくいですし、太字や文字色の変更も「伝える」という意味ではうまく使うととても効果的です。
要はそのテキストで何を伝えたいのか、何を表現したいのか、どう感じてほしいのか。そういった「目的」をうまく果たせる事。それが一番大切です。クリエイティブにいきましょう！
以上、ちょっと抽象的な話が多くなってしまいましたが、何かの参考になりましたら幸いです。 次回以降は色やカタチ、画像の扱い、アイコン、ユーザビリティについてなど書いてみるつもりです。その他「これについて知りたい」とか、何かリクエストなどあれば、コメントなどでお知らせくださいませ～