サイズ感とバランスが大事! レスポンシブにおける分量とフォントサイズ

Laura Franz

Laura Franz氏はマサチューセッツ大学ダートマス校の教授であり、大学院のウェブ・インタラクションデザイン学科のコースで、ウェブタイポグラフィーなどの様々なクラスで教鞭をとっています。

この記事はSmashing Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。

Size Matters: Balancing Line Length And Font Size In Responsive Web Design

分量と可読性

タイポグラファーたちは、1世紀近くに渡って目の水平と垂直方向の動作の関係性について執筆してきました。1928年、Jan Tschichold氏は中央揃えのテキストをやめて、左揃えのテキストを採用することを提唱しました。彼は、(垂直に)左端に揃えられたテキストによって、目が各行を (水平移動して) 読み終えるごとに左端に戻ることができ、読み手の可読性をサポートすると主張しています。

理想的な分量:45~75文字

水平方向による閲覧動作を容易にするための規則はたくさんありますが、そのうちの1つは合理的な分量のテキストを作成することです。James Craig氏は、自身の著書である「活字によるデザイン」 (初版は1971年に出版され、現在は第5版が販売されています) の中で、以下のように述べています。

文字がたくさん並べられた長い行は、読み手を疲弊させる。読み手はそれぞれの行を初めから終わりまで読み、また次の行へと移動しなければならない…また短すぎる行は、通常1つの単位としてみなされる単語や語句に分けられることになる。

もし流し読みをするタイプの読み手が長い行にうんざりしてしまえば、よりテキストの左端だけにざっと目を通すようになるでしょう。また、もし積極的な姿勢で閲覧する読み手が長い行に飽きてしまうと、テキストの同じ行を偶発的に2度繰り返して読むことでしょう (「重複」と呼ばれる現象です)。

一般的に、65文字 (ローマ字の2.5倍) が完璧な分量であるといわれています。この数字から派生した、全てのデザイナーが目指すべき理想的な分量の幅は、1行につき45~75文字 (空白と句読点を含む) とされています。(私を含む) 多くのウェブデザイナーが、この規則を直接ウェブに応用させています。しかし私は、この幅を45~85文字に広げることができることに気がつきました。

分量とウェブにおける文字

ウェブデザイナーたちも、テキストに対する合理的な分量を検討し始めました。それに関する情報源はたくさんあります。初期の著書は、Mark Boulton氏のようなタイポグラフィーに対する詩的なアプローチが採用されており、彼は「emダッシュからhanging-punctuation(句読点などを行ボックスの外に置くこと)を知る」などと述べたりしています (「より良いタイポグラフィーのための5つのシンプルなステップ」)。後期の著書には、Harry Robert氏のようなより技術的なアプローチが採用されています (「技術的なウェブタイポグラフィー:ガイドラインとテクニック」)。

分量における最近の発達といえば、レスポンシブデザインにおける役割です。より多くのデザイナーが、レスポンシブ設計の区切り位置を決めるために、行の長さを利用しています。Chris Coyer氏は先日、レスポンシブを手がけるウェブデザイナーたちが常に分量に注意を払えるように、行の長さをテストするブックマークレットを開発しました (「テキストを45~75文字に設定するブックマークレット」)。

しかし、優れた分量は読みやすいテキストのための規則の1つにしか過ぎないのです。

フォントサイズと可読性

優れた、読みやすいフォントサイズもまた、読みやすいテキストを作成する際に必要な要素です。この規則は決して目新しいものではありませんが、多くのレスポンシブなサイトが優れた分量を実現するために、小さすぎる、または大きすぎるフォントでテキストを作成していることを考えると、この規則を繰り返し呼び掛ける必要があります。

静的ウェブページとフォントサイズ

レスポンシブウェブ設計の利点の1つは、ユーザーが手持ちのデバイス上で閲覧する際に、ピンチやズーム操作をしなくても良いテキスト、つまり読みやすいテキストを提供することです。設計が (以下の2つのページのような) 静的である場合は、たとえ理想的な分量を設定しても効果はありません。スマートフォンのような小さいデバイス上では、テキストが小さすぎて読むことができないからです。

左:メインとなるカラムは優れた分量 (45~85文字の部分が黄色で強調されています) を有していますが、レスポンシブ設計でない場合、ピンチやズーム操作をしなければ、テキストは小さすぎて読むことができません。 右:このフォントサイズ (左側のカラムは13ピクセルのヴァーダナ、イントロダクションには18ピクセルのジョージア、そして記事には16ピクセルのジョージアが使用されています) は、ノートパソコン上では快適に閲覧できるサイズです。

左:メインとなるカラムは優れた分量 (45~85文字の部分が黄色で強調されています) を有していますが、レスポンシブ設計でない場合、ピンチやズーム操作をしなければ、テキストは小さすぎて読むことができません。
右:このフォントサイズ (左側のカラムは13ピクセルのVerdana、イントロダクションには18ピクセルのGeorgia、そして記事には16ピクセルのGeorgiaが使用されています) は、ノートパソコン上では快適に閲覧できるサイズです。


次ページ:小さいデバイスとフォントサイズ


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて