読みやすいテキストデザインを考える

Web Design

Posted  Updated 

私は究極の面倒くさがりなので、RSS チェックなんかはスマホ片手に全身をブランケットでくるんで、ついでにゴロンとしてしまいます。このコードスニペット登録しとこう、とか思うと起き上がって PC で開いてコピペして……と効率の悪さは否めませんが。

すると、いろいろなページの PC ビューとスマホビューを見るようになります。そこで考え始めたのが掲題のとおり。

ブログで儲けるには読みやすくなければ! しんどくならないようにスマホでは<p>の中身が3行くらい! 改行多めが正義だ!

こんな情報を、デザインに傾倒してきた私は「ほぇ〜」という思いで読んでいました。プロブロガーとやらにもブログ飯にも興味ないし、狭いスマホサイズで3行なんて余裕でムリと今でも高をくくっております。

そもそも私は活字中毒だったので、無意味な改行が嫌いです。ウェブで一字下げる云々は好みの問題だと思いますが、テキストベースのコンテンツで段落を表す<p>を使う限り“まとまりの意義”は必要です。現代人は本読まないもんな〜懐かしの携帯小説みたくスカスカにしないといけないのか〜と<br>による改行と<p>の段落で唇を噛みながらなんとか妥協してきました。

こんな自分の意に反することをせずとも、デザインでなんとか読みやすくできれば問題ないのです。

読みやすい文字サイズ

このコンテンツ本文は15pxだったのですが、このように改行を多用せずに長文を書くと、PC ビューはぶわっと文字が並ぶのでちょっとみっちりして見えました。本文とサイドバーが2カラムで並んでいるので、メインの導線ということでさらに目立たせるよう大きめにしてもいいかもしれません。

なお、タブレットはひとまず置いておきます。レスポンシブデザインだとかなり数字が乖離する場合があるので、複数カラムのレイアウトでは特にスマホ&PCとは別途指定がいいと思います。

サイズ表示例
16pxあのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
15pxあのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
14pxあのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
13pxあのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

レスポンシブデザインというと、視認領域が狭いモバイルデバイスでは PC ビューのメインカラムをギュッと縮小するのが一般的で、フォントサイズは据え置きなケースが多いです。当ブログでは今回、スマホでは以前と同じ 15px ですが、PC では 19~20px で大きく表示させるようにしてみました。PC のほうが画面と目との距離が開くであろうことを考慮しています。

読みやすい行間隔

まずlineーheightの単位ですが、1.81.8em180%も同じではあります。しかし相対指定のemや絶対指定のpxなんかは親要素で計算された値がそのまま子要素にも継承されるため、たとえば子要素でフォントサイズを変更していると行間が想定と変わるといった現象が起こります。具体的には小さくしてれば行間が広すぎたり、大きくしてれば狭すぎてテキストが重なってしまったりですね。

メンテナンス性を考えると、各要素のフォントサイズに合わせて計算してくれる単位ナシの書き方が最適解だと思います。

話を戻しまして、当ブログはlineーheight: 1.8;。フォントサイズの0.5〜1文字ぶんくらいの間隔が私は読みやすく感じます。1.5 でだいたい0.5文字分くらい、2 で1文字分くらい。

サイズ表示例
normalあのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
1.5あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
1.8あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
2あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

ここで考慮すべきはもう一点、marginpaddingによる左右の余白です。特にスマホ。画面の端からテキストまでの余白が 10px の場合と 20px の場合ではかなり印象が違います。余白 10px に対し行間 2em だと私にはなんとなくバランスが悪く見えます。こういうのもいろいろ試して自分好みを見つけたいですね。

読みやすい文字間隔(カーニング)

昨年末、自動で字詰めできるCSS3プロパティfont-feature-settingsが話題になりました。

ええやん!と思い1ヶ月ほど試しましたが、このブログではハマりませんでしたね…値も多いのであれこれ試したんですが。

詰めるのではなくむしろ空ける、letterーspacingもアリだと思います。少しあけてやるだけでサラッとスタイリッシュかつ読みやすくなります。

特にワンカラムのレスポンシブでwidthを%指定していると楽なんですが、モニタによってはオラオラオラオラー!みたいなテキストの洪水になります。実機がなかったとしても、PC ブラウザ標準の開発ツールやウィンドウサイズ変える系アドオンで確認しておくべき項目ですね。

フォントの問題

デスクトップ、タブレット、スマホ、それぞれ表示できる画面のサイズが大幅に違ううえ、ブラウザや内蔵フォントも違います。

明朝体大好きマンである私がここまでゴシック体を前提に考えてきたのは、レンダリングが汚い Windows でのMS明朝がぶっちゃけ許せなかったのが背景です。メイリオも嫌いなので Windows でもヒラギノを使っていますし、fontーfamily指定ではヒラギノに続き游ゴシック、未だにダメ押しのOsakaときてメイリオでした。まぁフォントなんてクライアントワークでなければ自己満足みたいなものなので、自分の環境で許せればいいんです。

単純に紙ベースの書籍チックで好きなのもありますが、なんとなく文字間隔も詰まりすぎていない気がするのも明朝体はポイントが高いです。DTP とは〜と怒られそうですが、横書きのウェブにおいては程々にあいていた方が読みやすいと思っています。ガラケー時代からletterーspacing: 1px;大好きでした。

私のフォントに対する葛藤はこんな感じで始まるのですが、そもそもなぜウェブサイトで使われるフォントはゴシック体が多いのでしょうか。英字圏だとセリフ体もバリバリなのに。

ゴシック体と明朝体の違い

ゴシック体明朝体
見本
飾りないひげやウロコがある
抑揚ないある
メリット視認性可読性

太くて大きいゴシック体は目立つし、留めや跳ねが分かりやすい明朝体は読みやす……あれ? 明朝体でええやん……?不思議なものでこの表のメリット部分は個人差があり、私とは全く逆に感じる人もいます。

標識などでゴシック体が使われるのはウエイトが均一で遠くからでも視認性・可読性が高いという理由ですが、せいぜい手が届く距離でしか見ないウェブでは、デザイン的でリッチな装飾をドロップシャドウなどでまかないフォントは簡素だった時代を経て、今はフラットデザインなどのミニマル志向な流れから相変わらずゴシック体なのではと踏んでいます。尤もらしいこと言って、すべて勝手な憶測ですが。

このように大きさも文字間隔も字幅も行間隔もなにもかも違う(厳密には印象の部分が強い)ので、コレ!という正解は基本的にないですよね。できるだけ読みやすくするのは前提としても、その読みやすさって誰を基準に判断するの?とか言いだすとお手上げです。

私が「ヒラギノゴシックのテキストデザインはこうだ!」といっても、ヒラギノ明朝ならまた調整し直したいみたいな。そんな感じです。

Webフォントで明朝体はまだ早い?

Web フォントでよさげな明朝体に…と思っても、本文用なら字数の多い日本語フォントをサブセット化すらできず、しかも自サーバにアップして使うとなると、今度は表示速度との戦いに移るだけなのが目に見えています。

Google Fonts には3種類の和文明朝体がホスティングされており、自分でフォントファイルを準備せずとも利用することはできます。しかしこころ明朝は本文向きでなく、はんなり明朝はカーニングに難あり、さわらび明朝はちょっとウエイトが太いかなーということで見送りました。

その結果、ご覧のとおり今回はヒラギノ明朝体、游明朝体を使ってみました。国内サイトは圧倒的にゴシック体が多いので印象づけになるといいんですが……いやはや悩ましい。

当ブログのサーバは mixhost ですが、他のレンタルサーバでは和文 Web フォントが無料で使えるところもあるようです。通常 Web サービスは表示速度のテストなどもパスしてリリースしているはずなので、そういったものを使うのも手ですね。


記事の半分くらい読みやすいテキストデザインから横道にそれてしまいましたが、Web コンテンツの大半はテキストです。言い換えるとレイアウト、グローバルメニュー、フッターなど要素別のデザインについ気を取られがちですが、Web デザインの質の半分以上はテキストデザインが関係していると考えられます。

直帰率だのアクセス数だのと嘆く前に、基本に立ち返って Contents of King ことテキストを見直してみてはいかがでしょうか。