はじめに

紙媒体のデザインの経験をベースに持つアートディレクターの小原司と、Webディレクターの経験も深いフロントエンド・エンジニアの中村享介に、「文字の読みやすさ」をテーマに話してもらいました。

第1回目は、Webという媒体で、考えなくてはならない読みやすさについての話が中心になりました。Webブラウザという、フレキシブルな媒体に表現する場合の読みやすさから始まり、広告という要素、読み手にとってコストが低くなるナビゲーションなど、話題は多岐にわたりました。

Webで考えなくてはいけないこと

——「テキストの読みやすさ」といっても、いろいろな切り口があると思います。まずは、Webという特性から見た読みやすさを考えてみたいのですが、どうでしょうか。

小原：Webの特性というと、やっぱり「フレキシブル」。紙媒体は物理的なサイズが決まっているので、そこに入る文字量には限界があります。Webの場合は、そのあたり自由ですよね。やりようによってはいろいろ決められるし……。

——となると、デザイナーだったり、エンジニアだったりの「読みやすさ」に対する技量が求められるような気もします。

中村：いや、むしろコントロールできない領域が増えちゃう気がするので、そこはあきらめるしかないのかなあと。結局、クライアントのブラウザの中でレイアウトが組まれているわけなので、そのブラウザ上で文字を大きくされてしまえば、レイアウトはもちろん変わってしまうし。そういうことが普通に起こることを前提に、最適なデザインというか、読みやすさを考えるしかないのかなという気がしますね。

小原：見ている人が自由にできる範囲が広いんですよ。

——たとえば、見るデバイスが変わったりとかですか？

小原：それも、そうです。iPhoneみたいな小さな画面で見る人もいれば、大きな普通のデスクトップのモニタで見る人もいるかもしれないし。文字の色が気に食わなければ、変えることもできるし、サイズも変えられるし、ということろもある。

制作側が意図することの反映

小原：紙媒体って別にそういうのがなくて、もう最終型まで作り上げて「じゃあこれでお願いします」と読んでもらう。でも、Webの場合は「これが読みやすいカタチです」って言っても、実はユーザーの好みで変えられる。それはこっちから見ると、とても読みづらいものにわざわざ変えられちゃう可能性があって。それがWebのいいところなんだけど、悪いところも含んじゃう可能性があったり。

中村：まあ、いろんな見方するっていうのは、ほかのサイトに持って行かれて、その本文だけ取られているなんてことも含まれると思う。そうするとデザインのコントロールなんて、まったくきかない。

小原：僕らがよく使う「後で読む」的なページをストックしておくようなアプリだと、テキストと画像だけ持ってきて、整形はそのアプリがやっちゃうんですね。

中村：ああ、はいはい。

小原：だからぜんぜん意図と違う雰囲気になっていることもあれば、もとがすごい微妙なデザインだったら、逆によくなることもあるわけですよ。

中村：もとのサイトには変なところに広告がいっぱい入っていたりとかね（笑）。

小原：そうそう、本文と本文の間に突然Googleのテキスト広告が挟まっているサイトなんかもある（笑）。広告抜いてくれるわけですよ、そういうアプリは。

広告と読みやすいテキストの関係

中村：見出しの下に広告とか、読みやすさで言えばヒドいよね（笑）。

小原：もちろん、広告効果は高いのかもしれないけど、煩わしい。あと、広告自体がチカチカするとか、アニメーションが許容されているやつだと、もう広告出す側が頑張っちゃえば目立っちゃうわけですよ。

中村：動いているのに目は行くからねえ。

小原：広告って、純粋な内容だけで売るんじゃなくて、仕組みも混じえて売るというか。結局、読者が間違ってクリックしても、アフィリエイト料はもらえるんですよ。なので、ああいうふうな手法になってくるんですよね。混じらせちゃう、本体と。で、間違って本文中のリンクだと思って押したら、それが広告だったっていうことはよくある話で。

中村：アダルト系のサイトとか、ほぼ全部間違いリンクになっていて、一個だけアタリが混じっているとか、ひどい構造になっている（笑）。

小原：そうそう。でも結局、あれはよくできているといえばよくできていて、読ませる必要はないんですよ、アダルトサイトを読む側の欲求が強いので、絶対、頑張るんです（笑）。どれだけ広告があっても、アタリを一個探そうとして押すんですよ。

中村：確かにね（笑）。順番に押していくからね。

CodeGridに広告が入らない理由とは

小原：広告の出し方の効果って、どれだけそれに注目させて、がまんさせるか。耐えられれば、別にいくらでもリンクを押すので。そのコンテンツが見ている側の要求を高く引き出せればオッケーですよね。読みにくいけど。もともとの見る人が持っている興味の度合いっていうのも、読みやすさに関わってしまう。

中村：情報系というか、ニュース系のサイトで最初に全面に出てくる広告みたいな。僕はあれが出た瞬間、閉じたりする（笑）。

小原：日々のルーチンで見ているニュースで、ちょっとだけ気になって飛んでいって、全面広告が一段階挟まったら、「もう、いいや。見出しはわかっているから」って、そこで読むのをやめてしまう。

中村：まあ、だからCodeGridは広告ないんですよ。読みやすさのために。広告を入れて無料にするという考えももちろんあったのだけど、コンテンツに集中してほしいから、それはやだねっていう。

——となると、届ける内容によっても読みやすさや構造が変わってくるっていうこともあるんですよね。

小原：そもそも読みやすさ以前に、届けようとする内容自体を魅力的にしていくという部分なんですかね、それは。それを上げれば、まずは読みたくなる。で、読みやすければより長く、しっかりリピートすることにつながってくる。広告が入ってくると、読みにくくなってくる上に、「次はいいや」っていうふうになってきたりする可能性があるよね。

中村：読みやすさの部分だけ考えるなら、広告はないほうがいいよね。

小原：うん、全然そうですね。

サイトの目的と広告

中村：でもサイトの目的はそれぞれあって、メディアだったら広告も見てもらわないと困るから、広告の読みやすさという点でどう入れるかというのと、アクセスしてもらわなきゃいけないから、コンテンツ自体の読みやすさも考えるんだと思うね。両方のバランスを取ってやるんだと思う。

小原：雑誌か小説か、みたいな感じですかね。成り立たせ方として。本体は安いんだけど広告をいっぱい入れることで成り立たせる雑誌と、内容自体の単価で売っていく小説と。

中村：……小説に途中で広告入ったらおもしろいですね（笑）。

——（笑）

中村：小説読んでいて、次どうなるんだろうとページをめくったら……。

——全面広告（笑）

小原：やだよね（笑）。小説ですごく重いシーンで考えさせられること書いているのに、ページめくったら「10kg痩せた！」とかになっちゃったら（笑）。

中村：（笑）

小原：だから、内容によるのかもしれないですよね。僕らがやっているCodeGridに関しては、どっちかというと小説的というか。もちろん内容は小説じゃないですけど、中身を読んでほしい。そもそも、儲けるというのが主体じゃないというのもあるんですよね。この事業で会社を成り立たせようというわけではない。儲ける気がないっていうか、その出発時点がそれじゃないっていうことだね。

中村：CodeGridの一番の目的は、やっぱ技術情報をちゃんと目いっぱい伝えるということだから。まあ、ある程度収益がないと続けていけないんで、お金は必要っていうのはあるんだけどね。

小原：そうなんだけど、それによってコンテンツを侵すっていうことはしないということだよね。

中村：うん、そうそう。目的はやっぱり伝えることなんで。

CodeGridの読みやすさは？

——では、現在のCodeGridの中に、「読みやすさ」はどれくらい実現されているんでしょうか？

中村：う〜ん、今ってまだデザインが完成されていなくって、微妙なところではあるんだけど。もとのデザインから本文の部分っていうのは、ほぼいじっていない状態で移植*しているんですよ。

*注：CodeGridのデザインリニューアル

2013年11月にCodeGridのWebアプリのデザインを、比較的大きく変えました。

で、もとのデザインっていうのは小原さんまだ入っていなかったんで、僕がやっていたんです。そのときにやったのは、1行の文字数をこれぐらいにしようというのを一応決めました。特にWebだとブラウザ広げればいくらでも、ずらーっと長くなっちゃうのがあって、それだと全然読む気がしない。新聞とか1行が短いのは、読みやすいためっていうのはあるじゃないですか。ただ、新聞ぐらいに短くなっちゃうとコードが読めない（笑）。いろいろ参考にして、1行の文字数は決めましたね。

あとは、ブラウザの幅によって変わらないようにするというところ。僕は紙で読むのに慣れているので、目的のことが書かれてる場所で覚えていたりするから、リフローされてしまって文字の折り返し地点が変わったりすると、わかんなくなるんですよ。CodeGridの場合は読者がコード見ながら、ブラウザを半分にしている可能性とかもあって。そのときに同じように見えてほしいな、というのがあったんですよね。

小原：なんかそのへんって、どういうコンテンツを出していくかということで、読みやすさのとらえどころが、変わってくると思うんですよね。CodeGridの場合は、技術的なことなんで多分一回見て終わりじゃなくて、実際に試してみて戻ってきたりとか。

そういう想定で考えると、文章の中の自分のランドマークみたいなものを自分で覚えていて、そこに辿り着けるというのを大事にするのは必要。ぱっと見て終わっちゃうサイトは、一度に見られる情報量がわっと入っていて、そのときに読んでいる人のウインドウサイズに合っていればいいじゃないですか。

CodeGridはまだまだ

中村：あとは、そんなにレスポンシブにもしたくないなあと思っていて。

小原：そうそう、レスポンシブがいいとか悪いとか言うんじゃなくて、CodeGridの場合は、同じようにアクセスできる情報が用意できていればいいんですよね。「あの記事をPC読んでいて、今少し電車で時間があるからスマホ読みたいな」といったときに、「あの記事」がすぐ見つかるっていうのが、読みやすさにつながるんですよね。

ま、使いやすさみたいな部分ですかね。……というのが今どれくらい自分たちのCodeGridの中で実現されているかっていうと、いっくらでもやらなきゃいけないことがあるんじゃないかという状態にあるんじゃないかと思いますね。

中村：まだまだだね。でも、読む側の「慣れ」もあるからねえ。

小原：そう！そうなんですよ。

中村：変えると、使いにくくなったとか、読みにくくなったとかいう意見がどうしても出てしまう。まあ、それはしょうがないんだよなと思うんだけど。

小原：慣れって超えられないですからね、その人がかけた時間なので。そこはもう、自分たちが信じる。こっちのほうが前より絶対いいんだから！と。

実現したい読みやすさとは

——今はできてなくても、将来的にこういうふうに変えていくつもり、というのはありますか？

小原：去年のリニューアルで記事ページの左にナビゲーションを付けたんですが、実はそれはすごく弱くしてあるんですよ。あえて。それは本文を読んでいるときにナビゲーションのことを忘れられるように、目に入ってこなくなるように考えているんです。

ただ、それも今それがいい状態で成り立っているかといえば、まだまだかなあと思っていて。今、僕が問題に思っているのは、目次の部分と、シリーズの部分が、一体化しすぎちゃって、パッと見て「目次ほしい」と思ったときに、辿りつけなかったりといったことかな。探してないときは目立たなくて、探しているときにちゃんとわかるようにしたい。

——そんなことできる？

小原：いや、やってますよ、デザイナーはみんな。そういう読みやすさを意識している人は、いっぱいいます。どうやるのって言われると、唯一の答えがあるわけじゃないんですよ。僕がやるとすると、読みやすくするためには、まず情報の設計が必要。必要ないものが入ってくると絶対読みにくくなるんですよ。

なので、必要なものだけまずまとめる。で、……なんだろ「スコープ」っていうんですかね、ユーザーが意識しなくても見える範囲。スコープ内で何を出すかってところをやって、「これいらないよね」「いるよね」という順位付けをやっていくんです。つまり、本文を読んでいるときには、ナビゲーションの見出しや目次は目に入ってこなくていいはずなんですよ。

でも長いシリーズになってくると、前のどんなのだっけ？となりますよね。そういうとき、雑誌とかだと最初のページに戻って「あったあった」ってやっていくじゃないですか。Webもほしいと思ったときに、それが出てくるものがいいんです。

——それが「探してないときは目立たなくて、探しているときにちゃんとわかる」ということですね。どんな手法がありますか。

小原：いろいろ手法はあって、よくあるのは、閉じちゃうこと。でも、閉じているものを開く行為は、ユーザーのコストがかかるんです。まず、開くってボタンを探してボタンにマウスを持って行って、押す、開く。で、開いた状態を再度目で認識して「あ、ここにあった」と探す、押す。けっこうステップがあるんですよ。

中村：面倒だよね。

小原：なので、もう、もともとこの位置にあって、その位置が変わらなないんだったら、あそこにあったというランドマークみたいな状態で、つまり位置で覚えていくんですよね。わりと人間は位置で覚えていく。あそこに目次あったはずで、見たらある。もうその時点で、ボタンにマウスを持って行って、押すという工程がカットされるんですよ。だいぶコストが減るんです。

でも逆にそれはその情報が、もともとあることにはなっちゃうんで、そいつは目に入る可能性があるんですよね。だから、それはデザイナー側でちゃんと情報設計を意図して、これを本文に対して、どう強めたり弱めたりするかを考えないといけない。そのバランスがデザイナーのさじ加減だと思うんですよね。全体として考えるんです。

ナビゲーションがあると読みにくい？

小原：でもWebで難しいのは、いろんな機能が画面に一度にきちゃうところなんですよね。

中村：そうだね、紙と比べてもナビゲーション入れなきゃいけないとか、どうしても機能がいろいろ入ってきちゃうのは邪魔なんだよね、読んでいるときは。でも、ないと「移動したい」と思ったときに困るから。

小原：そう、紙ってツールは移動したいと思ったときに動かすのは、手なので考えずにやれる。でも、マウスでカーソルを動かすっていうのは、手を動かすと似たようなことではあるんだけど、かなり意識しないと動かせない。……あれ？読みやすさの話じゃない？？これ（笑）。

——うーん、でも読みやすさっていろいろ考えることがありますよね。広いですよね。

小原：単純に文字を読ませるときの読みやすさも重要だし、そこに辿り着くまでの環境づくりというか、世界づくりみたいのも読みやすさだし。目に入ってくるものは、なんでも読みやすさに関係してくる。

中村：これまで話に出てきた、関連する広告とかナビゲーションとかも、結局読むのには邪魔なものだけどサイト的には必要なものだから。そういったものもどう扱うかということが大切だよね。

（次回へ続く）

ここまでのまとめ

• Webの「フレキシブル」な特性を踏まえて、すべてをコントロールすることはできないのを前提に、読みやすさを考える必要がある
• サイトの目的に合わせた広告の入れ方で、読者の読みやすさを考える
• 何度も読み返すアーカイブ的なサイトか、興味のあるときだけ訪れるサイトかで構造が変わる
• 何度も訪れるサイトは、コンテンツがあった場所、テキストが配置されていた場所を覚えていることが多い。その定常性を壊さないことが大切
• 読みやすくするためには、スコープ内で、ユーザーにとっての情報の重み付けをしていく設計が必要
• 重要コンテンツに集中できるデザインが理想。ナビゲーションなどは、コンテンツに集中すると見えなくなり、必要なときには見つかるのがいい
• ユーザーの目に入ってくるものは、すべて読みやすさに関係してくる

（取材・文・構成：丸山 陽子）