この世にあふれるウェブサイトの多くは、読むのが苦痛なくらい細かいテキストをびっしり詰め込んでいます。どうしてなのでしょう？スクリーンに、そんなに情報をぎゅうぎゅうと詰め込む必要はありません。これは、スクリーンが今よりずっと小さかった時代に遡る、悪しき慣習的集団勘違いです。ですから、

フォントサイズを調整させないで

様々なウェブサイトを見るたびに、ブラウザの設定を変えさせるなんて、ダメです。

びっしり詰まったページのがカッコイイなんて言わないで

情報が詰まって混雑したページは、見栄えもしません。むしろ不快です。ユーザビリティの観点からいっても、望ましくない。なんでもかんでも詰め込んで、読者に丸投げするのは、怠惰です。読者の私たちが、考えて、大切な情報を拾い上げる、という制作者がするはずの作業を行うはめになる、というのもダメです。

スクロールがキライなんて言わないで

そうしたら、全てのウェブサイトをキライになることになってしまいます。スクロールに悪いことなんてありません。ほんとうに全く。本のページをめくるのが間違っていないのと同じくらい、フツウのことなのです。

テキストは重要ではないなんて言わないで

一般にウェブデザイン、といわれるものの95%はタイポグラフィです。

眼鏡をかけろとか言わないで

スクリーンをなめてしまいそうに近づいている私の顔をなんとかしてください。ゆったりと後ろにもたれ、リラックス姿勢で読めるものをお願いします。

五つのシンプル・ルール

1. 長いテキストには標準フォントサイズ

今、皆さんがご覧になっているこのフォントサイズは、大きくありません。ブラウザがデフォルトで表示するテキストサイズです。いわば、ブラウザが「よかれ」と思って決めてくれたサイズなのです．

私たちはウェブサイトを見る時、文字を大きくしたり小さくしたり、環境設定を変更するなんて面倒なことはしません。すぐに読み始めたいのです。そして、そういう細かい設定を調整しておくのはサイトを作る側です。見る方ではありません。

おそらく始めは、大きなフォントサイズで、美しいレイアウトをデザインするのは難しいと感じるでしょう。しかし、その苦労を乗り越えることがシンプルで、見やすいサイトを作ることにつながるのです。（近日翻訳公開予定）サイトに情報をびっしりと詰め込むのは難しいことではありません。でも、シンプルで使いやすいサイトにすることは難しい。作業を始めてみると、まず何よりもデフォルトの文字の大きさにショックを受けることでしょう。しかし翌日にはもう100%や1em以下の文字なんて見たくなくなっているはずです。はじめは大きく見えるのですが、すぐに、どうして多くのブラウザがこのサイズをデフォルトのテキストサイズにしているかが分かるのです。

2. アクティブな余白を

テキストにも呼吸する余地が必要です。余白スペースを使う、というのはデザイナーのオタク的なこだわりでも、好みの話でもありません。

「カラム幅はフォントサイズと調和させなければならない。広すぎるコラムは目が疲れるし、心理的にも良い効果をもたらさない。狭すぎるコラムは読みづらいし、読者が次の行へとどんどん目を動かさなければならず、意欲を失わせるもととなる」 ヨセフ・ミューラー・ブロックマン『グリッドシステム』

テキストの周囲に余裕があれば、大切なところに集中しやすくなり、読む側のストレスレベルを軽減することができます。べつに、ウインドウ全体をびっしり埋め尽くす必要はないのです。そして余白スペースがよく見えるというのは、べつに偶然の産物ではありません。機能的デザインの理論にもとづく結果です。ウェブサイトは盛りだくさんに詰め込まないとならないと誰かおっしゃいましたか。

ミューラー・ブロックマン「カラム幅の問題というのは単なるデザインやフォーマットの話ではない。読みやすさの問題と同等の重要さを持つものだ」

しかし、行の長さ（テキストカラム幅、メジャーとも呼びますが）が長過ぎないようにも注意しなければなりません。ページの左右には十分な余白を設け、次の行に視線を移しやすくする必要があります。見る側にフォントサイズも、ウインドウサイズも調節させてはいけません。繰り返しになりますが、ウェブサイトを開いたら、何もせずに読める状態が良いのです。上述のようなカラム幅は理想です。スクリーンの端から端まで延々と続くテキストは、最悪です。

基本的には：一行に10-15ワードがルールです。リキッドレイアウト、100%フォントサイズ、カラム幅50%（ウィンドウ幅に対して）というのが、ほとんどのスクリーン解像度に適した目安でしょう。

3. 目にやさしい行間を

専門家の意見はこうです:

行間が狭いと記事を読むスピードが損なわれます。上と下の行の文字が一度に目に入ってしまうからです。目の焦点が合わせづらいし、読者に無駄なエネルギーを使わせて、余計に疲れさせます．行間が極端に広すぎるときも同じです。

デフォルトのHTMLの行間は狭すぎます．行間を広げればテキストはだいぶ読みやすくなります。140%というのが目安になります。

4. 明確なカラー・コントラスト

言うまでもないような内容ですが、もし、以下のようなコンビネーションが未だに大丈夫だと思っている方がいたら、、

  • 薄いグレーの背景にグレーのテキスト
  • 雪のように白い背景にシルバー系のテキスト
  • 黄色の背景にグレーのテキスト
  • 赤の背景に黄色のテキスト
  • 赤の背景に緑のテキスト、、など（以下略）

その方は断じてウェブデザイナーではありません。ただの傲慢なデザイナーです。ウェブデザイナーだったら気づくはずです。それでは誰も読む人がいないということに。おふざけはやめて、正気に戻って、何を書いたのかきちんと読ませて下さい。 注：スクリーンデザインでは、強すぎるコントラスト(完全な白対黒)もあまり理想的ではありません。テキストがチカチカしてしまうからです。目安は#fffに#333です。

5. イメージとテキストは分ける

私たちはテキストを検索したり、コピーしたり、保存したり、カーソルでマークしたりしながら読みます。画像内にテキストがあるのは、たしかに多少おしゃれですが、おしゃれはウェブの優先事項ではありません。もっと大切なのはコミュニケーションとインフォメーションです。そしてインフォメーションは読みやすく、使いやすく、引用しやすく、送信しやすくなければなりません。

もし、画像とテキストを分けては、良いサイトが作れない、とおっしゃる方がいらっしゃれば、残念ですが、もういちど、一から勉強し直したら？と申し上げるしかありません。