長い文章だから読まれないのか。タイポグラフィの英知をDTPに学ぶ

心得其の324

スカスカのハリーポッター

活字離れが進み、コンテンツにおける「長文離れ」も進行しています。ちなみに「活字離れ」とは活版印刷から転じた、読書離れを意味する慣用句で、個人間での電子メールや「LINE」でのコミュニケーションは含まれません。と、わざわざ断りをいれなければ、「文字を見ている」ことを理由に「むしろ活字に親しんでいる」と、無知な主張をする若者が現れるほど活字離れは深刻です。

いっそすべてを短文にする……ことは不可能です。日本テレビ系列で「ハリー・ポッター祭り！」と題して、シリーズ映画が断続的にテレビ放送されていますが、物語に深みを与える数々のエピソードが割愛されています。テレビ放映時間の制約によるものかと、DVDを借りて確認しても、やはり省かれていました。映画版は映像や音楽によって増した魅力もあるのでしょうが、反対に映画版を「ノベライズ」したとしても、話がスカスカになることでしょう。

これはすべてのコンテンツに通じます。情報を削るには限界があるのです。すなわち、活字離れに合わせて、内容を薄くするのは本末転倒ということ。そこで今回は、長文のまま読ませる工夫を紹介します。

丸ゴシックの巨大文字

ブラウザのフォントサイズを、丸ゴシックの20ポイントに設定していたのは40代前半の主婦です。長時間小さい文字を見ていると肩が凝り、頭が痛くなると言います。自動車運転で眼鏡使用を強制されない程度の視力を持つ私ですが、執筆仕事が増えてからテキストエディタのフォントサイズを10.5ポイントから14ポイントに上げました。

小さい文字は読みづらいのです。長文になれば、読者のストレスが増大するのは当然です。そこで、長文コンテンツは文字を大きめに設定します。「大中小」ボタンを用意します。JavaScriptなどでフォントサイズを可変式にするのも悪くはありませんが、その機能に読者が気づかない可能性もあり、初期設定から大きな級数（フォントの大きさ）にしておきます。

10年ほど前にはフォントサイズを指定しないことが推奨されていましたが、デザイン面からの不都合も多く、こちらは積極的にお勧めしません。

何故、文字は小さくなったのか

一方、デザイナーはフォントサイズを小さくしたがります。「英字新聞風」のポロシャツや小皿のように文章を扱い、可読性をないがしろにするのは、小さい方が段組も管理しやすく「文字」という図案の存在感を弱めることによって、全体の調和を取りやすくなるからです。デザイン重視のサイトなら、これも正解です。しかし、長文コンテンツにおいては、日本語の特性への理解が必要です。

英字新聞はアルファベットが詰め込まれている印象があります。しかし、よく見ると一行中の単語数は多くて6～7語で、3語で終わることもあります。また、英文はすべて単語ごとに、空白で区切られています。対する日本語は、句読点による区切り以外は連続して文字が並びます。助詞のたびに空白文字で区切ることもありません。和文を英文と同じ「デザイン」にすることに、そもそもの無理があるのです。

空間を制御する

長文コンテンツでは一行の文字数も制限します。一行を長くすると、次の行を探すときに迷子になる読者がいるからです。かつてメルマガブームのころ、一行の文字数は30～40文字以内といわれていたのも同じ理由です。改行記号で一行文字数を制限すると段組が崩れるので、イメージカットを配置するなどして調整します。

さらに長文を読ませるためには2つの「空間」を活用します。まずは「行間」です。

新聞、雑誌、書籍。すべての紙メディアは「行間」に面積を割いています。紙面という物理的制約があるなかで、「無印字面積」を確保しているのは、行間の取り方が読みやすさに直結するからです。DTPを学んでいれば「常識」に属しますが、Webしか経験がないと知らない「コツ」です。

本文を特別扱いする

次の空間は「余白」です。

スタイルシートならば「padding」ですが、これに限ったことではなく、文章を配置する上下左右の余白をしっかりと取るということです。左右をメニュー（ナビゲート）とし、本文を真ん中に配置する「3カラム」のサイトの場合は、特に注意が必要です。本文が左右のメニューに近すぎると、視線が迷子になるからです。人の注意力は想像以上に散漫で、読書の途中に「目移り」することはざらにあります。これを避けるために、本文周囲に十分な「余白」を用意してあげて「視線の浮気」を防ぐのです。

さらに上下の余白にも意識を払います。理想的には3～5行、最大でも10行（一行文字数により異なる）を「段落」として区切り、こまめに大きめの余白をいれ、訪問者の集中力に小休止を与えます。さらに次の段落の小見出しをいれるなど、興味を持続させる工夫も効果的です。

DTPが参考になる日

とあるWeb企業の広報誌をめくると、行間は狭く本文フォントはゴシック体で、余白も不十分。DTPの初心者がよくやるミスです。端的に言って読みづらいのです。しかし、この体裁はコンテンツでは珍しくありません。

長文は読まない（読まれない）

とする主張の理由の何割かには「読みにくい」が含まれています。FlashやjQueryなどインタラクティブな技法については多く語られていますが、「読みやすさ」についての指摘に出会うことはまれで、可読性を確実に高めるであろう「Webフォント」もいま1つ普及していません。

セピアの背景写真の上に、焦げ茶色の文字を載せます。デザイン性は高くても、文書は読みづらくなります。DTPの世界では「白フチ」を付けて可読性を高め、最新のCSSでは同等の機能を実現しています。縁取りを実装していないブラウザでは「影」を全方向に配置することで実現する方法があります。これはかつて「QuarkXPress」のエクステンション「しろふち君」と同じアプローチです。

WebとDTPは同じ道を歩んでいます。そして、読みやすさ、活字の扱いについてはDTPに一日の長があります。Web業界がDTPから学べる技法は多いのではないでしょうか。