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

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

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

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

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

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

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

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

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

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

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

五つのシンプル・ルール

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

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

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

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

2. アクティブな余白を

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

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

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

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

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

グッド・ニールセンと残念なニールセン。ユーザビリティキングは最近、自身の記事に余白と幅上限を設けました。(左)古いレイアウトは100%スケールです。(右)もうちょっと行間があればパーフェクトなんですが。

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

3. 目にやさしい行間を

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

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

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

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

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

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

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

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

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

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

広めて下さい

読みやすいウェブサイトを広めたい、と思って下さったかた、どうぞ100E2Rを広めて下さい。このページにリンクバックし、100% Easy-2-Read(100E2R)を皆さんにお知らせください。ご参加いただければ、貴サイトを以下のリストに追加させていただきます。

100E2Rの広め方

あなたのサイトを2行でまとめてコメント欄でご紹介ください。

素敵なページは、こちらでリストに追加させていただきます。（私個人が、デザインが好きかどうかとは関係なく）もちろん、ポルノ、スパム、政治関係はご遠慮ください。プロのサイトをお待ちしております。

100E2R組合メンバー様

1. Das Magazin: DAS MAGAZIN スイスの人気週刊誌で、発行部数は週770,000にのぼります。
2. Asoboo: 外国人になりたい日本人と、日本人になりたい外国人のためのインターナショナルSNS
3. James Starkie: グラフィックアーティスト／デザイナーで、センスの良いシンプルな100E2Rデザインのショーケースを運営されています。
4. Praegnanz: ドイツのウェブログ。まさに100E2R。
5. Synapps: ガジェット、コミュニティサイト専門。LinuxとMacも。
6. Piqniq: 日本国内在住の外国人ファミリー向けSNS。
7. KA203: モスクワMIREA instituteの学生サイト
8. Dadako: 国際的に活躍するHawken King 氏のサイト。
9. Katzenbach:変貌するメディア展望を綴るブログとブロゴスフィアについての修士論文のためのスクラップ。
10. Kilian Muster: タイポグラファー、ブロガーそしてポッドキャスター。東京在住。すばらしい100E2Rのお手本。
11. Glorum: 興味深いweb2.0系。まだ進化中のようです。
12. Engtech: ブログ、プログラミング、ネット・トレンド、マーケティングなどギーク情報満載。
13. Blue Fountain Blog: コメントは　”Don’t look at our main site whatever you do.”
14. Protos: Kristian Tのクリエイティブ系サイト。インターネット・カルチャー、イノベーション、ユーザーインターフェイス、ブランディングと成功のシナリオ。
15. Neunzehnhundert: ドイツ語ブログ。「私たちは水槽を泳ぐ二つのさまよえる魂です。何年も、何年も、同じところをぐるぐると泳ぎ、私たちの得たものは何だったのでしょう」
16. NVAC: 米The National Visualization and Analytics Centerのサイト。
17. Corum: Corum Web Designsはシンプルウェブデザインの専門集団です。Flash, Javaなどを使用しません。
18. TagCrowd: TagCrowd web app のブログ。
19. Jens: ウェブ, XHTML and CSS についての色々。
20. HTML-Experts: スクリーンデザインをHTML/CSSのプロトタイプに。
21. Adub: ユーザビリティやシンプルさに重点を置いたウェブアプリケーションデザイン。
22. De Amicis: ソフトウェア開発企業のテスティング支援。
23. Connexin: Heikoのドイツ語サイト。
24. Gwersi Cymraeg: ウェールズ語。のようです。
25. rsart: ゲーム業界について。
26. Southsea Republic: Cameron Rileyのブログ。
27. Yalf: ウェブ開発会社サイト。
28. am Design: ウェブ・エージェンシー。
29. Enrique Pardo: 写真、旅行、デザインを扱うフランス語ブログ。