webコンテンツにおいて重視される要素はいくつもありますけど、その中の一つに可読性というものがあります。これはその文章がどの程度読み易いか、ということです。デザインである程度までは何とかする事も出来ますけど、デバイスの問題等どうにもならないこともあります。

そうしたことをどの程度考慮して作るべきなのか、どういう場合が想定出来て、どうであればある程度は許されるのか…といったことを考えてみます。

という訳で、以下に可読性に関係する事、直接は関係なくても可読性に影響してきそうな条件を考えてみました。

可読性とは

最初に定義をしておくと、可読性とは、素早く読めるか、理解しやすいか、読んでて疲れないかという事です。これらにおいて可能な限り優れたものを作ることが、コンテンツと、それを届けようとする各セクションに関わる人が考えるべきことだという事になります。

可読性とコンテンツ

まず、何はなくともコンテンツです。文章が読み易いものであることを可読性が高いという言い方をするのは聞いたことがあるかと思います。そのうち、コンテンツ自体が読み易い内容であるかどうかをリーダビリティー(readability)と言います。

リーダビリティーに関わってくるのは

• 文章量
• 図版率
• 内容
• 表現、言葉遣い

といったものです。コンテンツを作る人は、自分の書いている文章の長さ、文字と図の割合、内容、表現の複雑さ等を届ける相手に適したバランスにしなければいけません。

可読性の低いコンテンツ

この点において、最低のリーダビリティーを誇るのは法律に関する文章や公文書、ルールブックの類でしょう。それらは普通の文章と比較して可能な限り抜け道をなくし、読み手に解釈させる余地を作らない為どうしても文章が冗長になるというコンテンツ自体の特性を持ちます。

可読性の高いコンテンツ

反対に最高のリーダビリティーを持つのは絵本の様なコンテンツという事になるかと思います。子供でも読め、図版率も図に偏り、スッと頭に内容が入ってきます。

実際、これから下に挙げていくような条件で閲覧者の読解力はいくらでも下がります。仮に対象年齢が高めのコンテンツであったとしても、読んで欲しいシチュエーションでそのコンテンツの歩み寄るべき姿勢は変わってきます。言葉選びに関しても必要なければ平易な言葉を使ったり、表記ゆれや書式の統一、略語の濫用を避ける等もありますね。

可読性とデザイン

行間や文字のサイズ等、読み易いデザインがされているかどうか、その見た目の読み易さをレジビリティー(legibility)といいます。コンテンツのリーダビリティーが如何に高くても、このレジビリティーが考慮されていないと可読性は下がります。

レジビリティーに関わってくるのは

• 文字間隔
• 行間
• 段落
• フォント
• 配色
• スクロール
• ページング
• 組方向

といった要素。我々の様なデザイナー、ディレクターが主に考慮する事ですね。デザイナーは文字と行と段落の空け方、使用するフォントやウェイト、文字色と背景色、縦書きか横書きか、等を考慮、調整して読み易くします。

可読性を下げるデザイン

実際に存在する文章デザインで可読性が低くなってしまっているのは新聞の様な行間の狭いものや雑誌などですよね。これらは低価格で届けられる情報量を多くしたいために紙の品質を上げられず、一面における文字が多くなっています。それにより版面率が上がって窮屈になっていますね…当然媒体としての都合が大きいです。

webは版面率を下げたところで余分にお金がかかったりしないので、この制約からは簡単に逃れられます。行間を広げてもデータ量増えないですしねｗ しかし版面率を下げる為に面積を大きくし過ぎると、今度は視線の移動、スクロールの長さ、ページングという問題が出てきますから、ほどほどにという事ですね。

色のコントラストが弱かったり、強くても彩度がきつすぎると目が疲れて読みにくくなります。コンテンツの文章量が多い(リーダビリティーの低いコンテンツ)場合は必然的にレジビリティーを高めることが最優先になります。だから本文にはあまり色を使えない、という事が理屈でわかりますね★

反対にロゴやキャッチ、リード文などは文章が短くて簡単明瞭な表現が多い(リーダビリティーの高いコンテンツ)ため、レジビリティーの方には印象の構築、装飾等の遊びが出てくるということになります。

可読性を上げるデザイン

実際に存在するものでレジビリティーの高いものと言えば、交通標識やサインシステム等がそうなのではないでしょうか。標識は遠くからも読み易く、可読性だけでなく判読性や視認性も高いユニバーサルデザインというものに基づいています。

ではwebでも行間、段落、は大きければ大きいほどいいかと言うとそうでもないですよね。画面の大きさ、視線の移動などを考えると最適な加減というものがあるでしょう。配置したいコンテンツの場所、分量に応じてどういうフォント、色、スペースを使うか、という事ですね。

可読性とデバイス

読みやすく工夫されたコンテンツ、見やすいデザイン。それらをデバイスが正しく意図通りに、または多少都合よく対応してくれるか、という部分です。

ここから先の3つは主に利用者側の環境に関する話で、作り手が作った現物よりも基本的に劣化、つまり可読性が落ちる要素を挙げていくことになります。

デバイスの読み易さに影響する要素は

• 画面の大きさ
• 透過光デバイスか反射光デバイスか
• 描画能力と解像度

といったようなものがあります。画面は小さければ小さいほど可読性は落ちますけど、携帯性や場所をとるかどうかとの兼ね合いで最適なサイズが選ばれます。描画能力も同じですね。アンチエイリアスがかかって逆に読みにくい、ジャギーが出て目が疲れる、というような事態が考えられます。

透過光というのはPCやタブレット、スマートフォンの液晶、Kindle Fire等の直接発光した光を見るタイプのもので、反射光というのはプロジェクター、Kindle Paperwhite等の一部の電子書籍リーダー等の発した光を一度反射させて見させるものです。透過光の方が目が疲れやすく反射光の方が疲れにくいのですが、反射光は光量が低くお昼の野外では見づらいという欠点もあり、やはり状況によるという感じですね。

プリントアウトした方が間違いに気づきやすいワケ – A Successful Failure

透過光と反射光についてはこの記事が詳しいです。

デバイス自体の解説ページも参考になります。

可読性と状況

webコンテンツが読まれる環境です。どういうシチュエーションで読んでいるかによって可読性も左右されるはずです。

• その場の明るさ
• 移動しているか
• 集中できる状況かどうか
• 距離

といった要素があります。

その場が明るすぎると特にモバイルデバイスは見づらくなりますよね。室内でPC、タブレットを見るときはそう見づらくはならないですけど、電力の節約のためにディスプレイの明るさを下げている場合、下げていなくても屋外で使用する場合、見づらくなります。確実に屋外で使われるであろうモバイルオンリーのコンテンツはコントラスト強めに…等のことを考えたりします。

移動中にスマートフォンを見ている状況というのはあまり好ましくはないですが、地図アプリ等そういう状況がありがちなものもあります。

騒音や、気が散る状況で使われがちなwebサイトやアプリなんかもあるのではないかと思います。当然可読性は低くなります。

スクリーン、デスクトップディスプレイ、タブレット、モバイルデバイスの順にデバイスとユーザーの距離は近づいていきます。文字に十分な読み易さを持たせる必要の度合いは変わってきます。

可読性とユーザー

ユーザーがどういった特徴を持つ人かです。如何に環境やデバイスまでが最高の状態であったとしても、最終的にそのコンテンツを読むのは人です。

• 視力
• 色覚
• 読解力
• モチベーション

と言ったことがユーザーにとっての可読性に影響を与えます。

視力が低くなるのは別に老化や体質に限りません。疲れていれば、若い人でも小さい文字や薄い文字を使うのに体力を使うので、更に内容や言い回しが難しかったりするとキツイです。色に頼った差異で表現していると、色覚の弱い人は読みづらくなります。

読解力は年齢や学力にも変わってきますが、大人だって読みづらい文章にはそれなりに体力を費やすものです。マンガは疲れてても読めるけど論文は無理だったりします。

以上のこと全てが相まって、読もうとする気力を下げてしまうとダメです。それでもどうしても読まなければいけないという義務感を持っている人は読むわけですけど、優先順位は下がってしまうかもしれませんね。

終わりに

このように、仮にコンテンツ側が努力をしてもデザインがダメだったり、デバイスがダメだったり、ユーザーのいる場所が最悪だったりするわけですけど、そう言う事も織り込んでデザインするとしたら、コンテンツを作るとしたら、という話しでした。

通常可読性と言えば上二つのコンテンツ、デザインについての事が論じられることが多いですが、実際に制作したコンテンツが意図通りに受け手に伝わってはじめてコンテンツは意味をなすわけで…下の三つで挙げているデバイス、状況、ユーザー等の要素も、確かに可読性に関わる要素だと言えます。

上記のような事を考慮するのであれば可読性については良ければ良いほどいいとも言えますが、逆に受け手側の条件が揃っていることが想定されるコンテンツであれば、コンテンツとデザイン面で過剰に歩み寄る必要がない場合もあると思います。その場合はビジュアルであったり費用との折り合いをつけやすくなりますね！

上記のセクションは、先日書いたコンテンツが利用者に利益をもたらし制作者の目的を果たすまでの7つのことという記事で述べた、

1. 目的(Purpose)
2. 内容(Contents)
3. 設計(Design)
4. 媒体(Interface)
5. 状況(Situation)
6. 利用者(User)
7. 行動(Action)

というフローの2から6のセクションに対応しています。コンテンツを制作する時、これらそれぞれのセクションが可読性において関わると思うので、それぞれにおいて重要視する事が決まっていれば、自ずとサイトの作りも定まってくるのではないでしょうか。