JOURNAL | ROSTRATA.net

電子メディアで文章を読む

電子メディアのディスプレイにおける、文字・文章の読みやすさ。反射光と透過光の話。

2009年末にAmazonにおける電子書籍販売がはじめて紙媒体の書籍販売数を超え、そしてAppleのiPadの発表。いよいよ本格的に盛り上がってきたタブレット型の電子メディア。

新聞や書籍の文化・習慣や出版業界の構造は国ごとに、特に日本は欧米諸国とは大きく違う面もあるので、電子出版自体が日本でどのように受け入れられて行くのかはまだ分かりません。(そもそもKindleはまだ日本版出てないし、iBooksはアメリカだけとか…)
コンテンツは置いといて、Kindleというツールの話です。

読むことに特化したツールとしての、Kindleのアプローチ

Amazon Kindleの画面は、単純に見ると「今時なぜ白黒?」「昔のゲームウォッチみたい」な地味な見栄えですが、これこそが最大の特徴と言えます。E Inkという電子ペーパーシステムを採用していて、その画面は透過光ではなく反射光なのだそうです。

この点について詳しく書かれたブログ記事(Amazon Kindle:「反射光の電子ブック」という革命的に新しいメディア)より引用させて頂きます。

紙の本もそうだが、物体に反射した光が目に入る。これが反射光。一方、テレビやパソコンのモニターはブラウン管や液晶やプラズマディスプレイが光を発して いる。これが透過光メディアだ。
E Inkを使ったキンドルは、電子本デバイスでありながら、透過光ではなく反射光なのである。

E linkとは何か

E link自体は2002年6月に現E Ink社が発表した電子ペーパーです。
凸版印刷のウェブサイトによると、E Inkの表示原理はマイクロカプセル型電気泳動方式:基材面にコーティングされた透明なマイクロカプセルの中に、帯電した白と黒の粒子があり、電圧を掛けて顔料粒子を移動させることで表示するとのこと。

(図版は凸版印刷E Inkページより)

砂鉄が入っていて磁石のペンでお絵かきするおもちゃのような感じでしょうか…。

とにかく反射光であるというのは、文字を読むという目的には最適なものであるというのは、KindleやソニーのReaderをはじめとして,世界で数十種類の電子書籍端末のほとんどで採用されていることからも分かります。

透過光メディアはまぶしい

私は発光するディスプレイが嫌いです。
嫌いというか、仕事で1日中見つめる反動で必要に迫られなければ出来るだけ見たくない。
本や雑誌をわざわざ電子化してまぶしい画面で読むなんてありえない。
と思っている人間なので、電子メディアでありながら反射光という点にとても好感が持てます。

もちろん、美しい写真や映像はパソコンやテレビのディスプレイだからこその表現ですが、それは「見る / 観る」であり、文章を「読む」となるととてもストレスを感じてしまいます。

画面照度を下げればよいという問題ではなくて、心理的に疲れるような気がするのですが、反射光と透過光での心理的な違いについて興味深いことも書かれていました。

透過光メディア(テレビ、パソコン、ケータイ、iPhone)は、情緒的・主観的でのめり込みやすい。一方、反射光メディア(紙、映画、そしてキンドル)は、分析的・批判的で客観的に冷めて見ることになる。

なるほど、これはウェブサイト制作の際の「文字校正はパソコンの画面ではなく一度プリントアウトして校正した方が見落としにくい」という理由としても説得力があります。

プロダクトそのもののデザインや連動するコンテンツストアの面で評価されがちですが、こういった点で大きな特徴を持っているというのは面白いですね。
私は読む手間や保管場所が必要だとしても、紙として実存する物が好きなので電子書籍にはあまり興味ないのですが、Kindleはぜひ欲しいなと思いました。

AppleのiPadは電子書籍リーダーの枠を超えた可能性を持っているので、あまりこの比較に意味はないかもしれませんが「iPad + iBooks は雑誌や写真集も豊富で楽しげな本屋さん」「Kindle + Amazon は小説や新聞が豊富な落ち着いた本屋さん」という感じで棲み分けられていくのでしょうか。

関連面白記事
「なぜ,誰もE Inkを攻めてこないのか」 – 日経エレクトロニクス – Tech-On!
アップルが電子書籍で最初に教科書を狙う理由 – My Life in MIT Sloan

ウェブサイトの文章も出来るだけ読みやすくするKUFU

ウェブコンテンツでも、新聞記事などが読めたり、読み物として充実したブログを書く人が増えたりと、「集中して文章を読む」ことが一昔前よりも増えてきています。
パソコンのディスプレイが透過光であることは変えられませんが、ちょっとした工夫で読みやすくなります。

  • 文字サイズ [ font-size ]
  • 行間 [ line-height ]
  • 1行内に含まれる文字数 [ width ]

表示範囲が限られたディスプレイでは、この3点が密接に関連しています。
読みやすいように文字サイズを極端に大きくしているサイトもありますが、必ずしも「大きい=読みやすい」ではないように思います。

人は読んでいる箇所に焦点をあてながら、視界に入っている今後の文章量を意識しながら読み進めます。このセンテンスはとても長そうなのか、すぐ終わりそうなのか。なので文字サイズを大きくして画面上に数行しか表示されない状態では文字は読みやすいものの、文章を読むという点ではストレスとなります。

余裕のある行間、折り返した時に次の行を見失わない程度の1行の幅、適度な文字サイズをバランスよく調整する必要があります。

  • 背景色と文字色のコントラスト

コントラストが弱いと読み辛いのは当然ですが、極端な明度差では細かい文字ではチラツキを起こします。

よく、ユーザビリティーに極端に配慮したサイトなどで、HTMLそのままの真っ白背景、真っ黒の文字、真っ青のリンクにされたものを見ますが、透過光であることを考慮すると個人的にはそれがベストではないと考えています。コントラストの強い状態から、2つの色を少しだけ歩み寄らせた状態が最も読みやすいと思います。

最近のウェブデザインのトレンドとして「繊細なノイズのあるテクスチャを背景にする」というのがあるようです。(Design Trends (Predictions) in 2010の中盤「Texturized Background」の項目参照)
個人的な見解ですが、これは背景の光の拡散を押さえる、またテクスチャは上に乗る文字との僅かな距離感を生み出すことになり、結果として文字の読みやすさにつながっているのでは、と考えています。

これらはちょっとしたCSSの調整で変えられる部分なので、ぜひ調整してみましょう。

Posted on 2010/01/29IDEAS and TOOLS

Leave a Comment

Archives

Translate by Google

to English, to Spanish, to French


Seeing is Believing.