The Universal Web

2.0 単語

画面読書における単語レベルの可読性 — 大文字・小文字、間隔、行長、階層、平明な文章 — を、目と心が実際にどう読むかについての現代的な理解に基づいて。

13 min read

このページはAIの支援を受けて翻訳されました。正文は英語の原文です。

セクション 1.0 は判読性 — 個々の字形を解像できるかどうか — を扱いました。このセクションは一段上の、可読性に進みます。単語、行、文章のまとまりを、楽に、速く、理解を伴って読めるかどうかです。この区別が重要なのは、あらゆる字形テストに合格したページでも、窮屈な間隔、マラソンのような長い行、平板な階層、要点を隠した文章によって、読者を疲弊させうるからです。判読性は書体の性質であり、可読性は読書体験全体の性質です。そして現実世界の失敗の大半は、後者で起こります。

2005年版はこの領域をうまく整理していました — 大文字・小文字、間隔、行長、階層、文章の質 — そしてその実践的な助言は、理論ほどには改訂を必要としません。最も変わったのは読書のプロセスそのものについての私たちの描像であり、その描像は説明しておく価値があります。実践的なルールがなぜ機能するのかを説明してくれるからです。

2005年以降に変わったこと

2005年には、タイポグラフィの助言の多くが単語形状モデルに依拠していました。熟練した読者は単語をその全体のシルエット — アセンダーとディセンダーが形づくる「Bouma shape」のパターン — で認識する、という考えです。このモデルは乗り越えられました。読書科学における合意は、Kevin Larson による2004年の心理学文献のレビューで影響力あるかたちで論じられ、その後20年の研究で補強されたとおり、並列文字認識です。読者は単語を構成する文字を同時に識別し、単語の認識はその文字レベルの証拠から組み上げられます。単語の形状の寄与はわずかで、文字の同一性がほぼすべてを担います。2.1章が、大文字・小文字への帰結を詳しく取り上げます。

対照的に、眼球運動のメカニズムはすでに十分確立されており、その後は確認が積み重なるだけでした。読書はなめらかな滑走ではありません。目は素早い跳躍 — サッカード — で動き、そのあいだに短い停止 — 固視 — が挟まります。固視はおおよそ5分の1秒から4分の1秒で、視覚的な取り込みのほぼすべてがそこで起こります。各固視のうち、鋭い細部を届けるのは中心の小さな領域(中心窩)だけです。その周囲のより広い範囲は、目が次の跳躍を計画するのを助ける粗いプレビュー情報を供給します。熟練した読者は固視点の右側の数文字を取り込み、短く予測可能な語を読み飛ばし、理解がつまずいたときには時折後方へ跳びます(回帰)。

このモデルは、タイポグラフィのルールを俗説から工学へと変えます。快適な行長が機能するのは、行末から行頭へのリターンスイープが、ページ上で最も長く、最も誤りやすいサッカードだからです。十分な行間が機能するのは、リターンスイープが誤った行に着地するのを防ぐからです。均一な語間が重要なのは、単語間のスペースこそがサッカードの計画が頼りにするランドマークだからです。ラグ組みが両端揃えに勝るのは、両端揃えがそのランドマークを不均一に再配分し、サッカードの照準を乱す一貫性のない間隔の川を注ぎ込むからです — これはすべての読者にとって実在するコストであり、ディスレクシアやロービジョンの読者にとっては深刻なコストです。

固視点 — 中心窩 — で鮮明なのは7〜9文字だけの文。そのあいだ傍中心窩は、次のサッカードのための粗いプレビューを供給する。

間隔、行長、そして更新された数値

Version 1 の指針は、調整を加えつつ生き残っています。

  • 語間。 均一に保つこと。ウェブでの両端揃えは避けること。ウェブのハイフネーションと行揃えのエンジンはいまも粗雑です。両端揃えがどうしても求められるなら、ハイフネーションを有効にし、狭い幅で結果を確認してください。
  • 字間。 小さなサイズと大文字にはわずかに字間を広げるという2005年の提案は有効ですが、現代の本文書体は本文サイズではデザイナーによって正しく間隔が設定されています — より重要な要件は許容性です。WCAG 2.2 のテキストの間隔基準(1.4.12)は、ユーザーが字間、語間、行間、段落間隔を広げてもコンテンツが耐えることを要求します。その上書きがレイアウトを壊さないよう設計してください。
  • 行間。 本文では文字サイズのおおよそ1.4〜1.6倍。長い行には高いほうの値が必要です。WCAG 自身の参照点は、段落内で最低1.5の行間です。
  • 行長。 2005年の1行55〜65字という目標は、いまも健全な中心です。おおよそ45〜75字の範囲なら快適に読めます。現代的な洗練はレスポンシブ性にあります。行長を ch ベースまたはコンテンツベースの単位で設定してビューポートをまたいで保ち、200% ズーム(WCAG 1.4.4)とリフロー条件(1.4.10)のもとでは、行長が崩壊するのではなく、品位をもって縮退しなければならないことを忘れないでください。

階層と情報のかたち

書体の階層が可読性の章に居場所を持つのは、サッカードが文のなかに閉じ込められてはいないからです — 読者はページも同じやり方で、サンプリングし、跳びながら渡り歩きます。見出しレベル間の明確なサイズとウエイトのコントラスト、セマンティックな見出し要素の誠実な使用(それはスクリーンリーダーのユーザーにとってのナビゲーションの骨格を兼ねます)、見出しの上のゆとりある空間 — これらすべてが、自分の居場所を見つけるコストを下げます。見出しとリンクは、それを特徴づける語を先頭に置いてください。読者は — とりわけ見出しリストやリンクリストを流し読みするスクリーンリーダーのユーザーは — 最初の2、3語で判断します。

印刷由来のインデントと間隔の慣習はいまも役立ちます。段落は字下げするか、間隔を空けるかのどちらかにし、両方はしないこと。そして読者の目が一度で学べるよう、その合図を一貫させることです。

タイポグラフィとしての文章

2005年の章は文章の質で締めくくられていました。それは正しいことでした — どんなタイポグラフィの設定も、読者が構文解析できない文章を救えません。その後の歳月は、この論点を制度化しました。プレインランゲージの実践はいまや複数の国で標準や政府の義務として成文化されており、WCAG 3.0 の草案は明快な言葉をそれ自体アクセシビリティの一次元として扱っています。実務のルールは、もとの版が精神において引用したものと変わりません。ありふれた語、短い文、能動的な構文を選ぶこと。詳述の前に要点を述べること。読者に資さないものを削ること。まれな語ともつれた構文の上では固視は長くなり、回帰は増えます — 平明な文章は、単に礼儀正しいのではなく、測定可能なほど読みやすいのです。

CSS では

p {
  max-width: 65ch;        /* measure, set in characters */
  text-align: left;       /* ragged right keeps word spacing even */
  text-wrap: pretty;      /* better rag, fewer orphans */
}

推奨事項

  • 可読性をシステムとして扱う。書体の選択、間隔、行長、階層、文章の質は、ともに失敗し、ともに成功する。
  • 本文の行長は45〜75字の近辺、理想的には55〜65字に保ち、ズームとリフローをまたいでレスポンシブに維持する。
  • 行間は文字サイズの1.4〜1.6倍に設定する。行が長いほど多めに。
  • ラグ組み(左揃え)を使う。ウェブでの両端揃えを避ける。
  • WCAG 1.4.12 に基づくユーザーの間隔の上書きにレイアウトが耐えることを確認する。
  • セマンティックな見出し構造の上に、サイズ、ウエイト、空間で階層を築く。見出しとリンクは要となる語を先頭に置く。
  • 平明に書く。ありふれた語、短い文、要点を最初に。
  • 判断に迷うときは読書モデルに導かせる — サッカードの照準をより予測しやすくし、文字をより識別しやすくするものはすべて、読者に逆らうのではなく、読者とともに働いている。

参考文献