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

Laura Franz

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

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

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

小さいデバイスとフォントサイズ

レスポンシブなウェブサイトを設計する際には、まず区切り位置を決めるための適切なフォントサイズと、理想的な分量から始めましょう。しかし以下のような場合には、理想的な分量に関しては特に配慮する必要はありません。

手持ちの小さいデバイスは大きいデバイスに比べて、テキストは既に小さく表示されているはずです。ユーザーは小さいデバイスでコンテンツを閲覧する際、デバイスに顔を近づけて閲覧するので、この点は問題ありません。現在支持されている考え方は、フォントサイズを小さいデバイス用に小さくして、分量はそのまま保持するというものです。実際、より適切なフォントサイズを提示すれば、より優れた読みやすさを提供することができます。結果として、理想的な分量とはなりませんが、より優れた閲覧体験を実現できます。

小さいデバイス上の小さいテキストが、ユーザーにピンチやズーム操作を推奨している場合は、レスポンシブ設計はあまり役に立ちません。

左:理想的な分量を確保するために、フォントサイズは手持ちのデバイス用に12ピクセルのヴァーダナ、及び14ピクセルのジョージアに縮小されています。テキストはより読みにくくなっています。 右:フォントサイズは手持ちのデバイス用に13ピクセルのヴァーダナ、及び17ピクセルのジョージアに設定されています。分量は理想的ではありませんが、テキストはより読みやすくなりました。

左:理想的な分量を確保するために、フォントサイズは手持ちのデバイス用に12ピクセルのVerdana、及び14ピクセルのGeorgiaに縮小されています。テキストはより読みにくくなっています。
右:フォントサイズは手持ちのデバイス用に13ピクセルのVerdana、及び17ピクセルのGeorgiaに設定されています。分量は理想的ではありませんが、テキストはより読みやすくなりました。


大きいデバイスとフォントサイズ

レスポンシブなデザインでは、分量とフォントサイズは手持ちの小さいデバイスを利用している人にだけ影響するわけではないことを覚えておいてください。多くの人はまだ、ノートパソコンやデスクトップなどの大きなデバイスも利用しているのです。

レスポンシブ設計の中には、デバイスのサイズに対して拡大・縮小する単一のカラムにテキストを保持しているシンプルなものもあります。これは、(カラムの幅の代わりに) フォントサイズが理想的な分量を維持するために利用されている場合を除いて、洗練された、適切なソリューションとなります。

私たちは、小さすぎるテキストだけでなく、大きすぎるテキストも問題があることを学びました。文字が大きすぎると、読み手の目は通常習慣としているパターンに従って動こうとします。しかし、フォントサイズが大きすぎることによって、水平方向により多くのスペースを必要とし、またユーザーが中心視野と単語を飛ばし読みするパターンを利用して確立した、水平方向の読み進める流れを邪魔してしまいます。

私たちは、紙面に印刷されたテキストよりも、オンラインのテキストを大きめに設定してきました。ユーザーはデバイスを自分の膝、もしくは机の上に置いて閲覧するため、この点は問題ありません。しかし、過度に大きすぎるテキストは読み手に閲覧する速度を落とし、コンテンツの飛ばし読みの調節を強制させてしまいます。水平方向に読み進めることが難しくなり、読み手はテキストの左端を垂直方向に飛ばし読みし始めるでしょう。

文字が大きすぎると、読み手は自分の通常の水平方向のリズムに従って読み進めようとします。これによって、読み手は文章全体ではなく、単語を1つ1つ読み、かつ読む速度を落とし、閲覧するパターンを調節することを強要されてしまいます。

文字が大きすぎると、読み手は自分の通常の水平方向のリズムに従って読み進めようとします。これによって、読み手は文章全体ではなく、単語を1つ1つ読み、かつ読む速度を落とし、閲覧するパターンを調節することを強要されてしまいます。

現在支持されている考え方は、大きなデバイス用にフォントサイズを大きくすることで、分量を保持することです。例えば、下の単一カラムによる設計は理想的な分量を保持しています。しかし、この理想的な分量を大きなデバイス上で実現するためには、記事用のテキストを19ピクセルのVerdana、または22ピクセルのGeorgiaに設定し、またイントロダクションを26ピクセルのGeorgiaに設定する必要があります。

上のレイアウトでは、テキストは100パーセントのサイズで表示されています。このウェブページのテキストは、快適な閲覧にはサイズが大きすぎます。シンプルな単一カラムのレスポンシブ設計は、大きなデバイス上ではより幅が狭いカラムを使用し、読みやすいようにフォントサイズを小さくする必要があります。(拡大図を見る)

上のレイアウトでは、テキストは100パーセントのサイズで表示されています。このウェブページのテキストは、快適な閲覧にはサイズが大きすぎます。シンプルな単一カラムのレスポンシブ設計は、大きなデバイス上ではより幅が狭いカラムを使用し、読みやすいようにフォントサイズを小さくする必要があります。(拡大図を見る

実際、できる限り適切なフォントサイズを保持し、かつカラムの幅を狭くした方がより良い結果を得ることができます。手持ちの小さいデバイス、及びノートパソコン上で閲覧する場合は、ウェブデザイナーのためのオンライン・マガジンであるA List Apartをチェックしてください。

A List Apartのサイトは、手持ちの小さいデバイス上で非常に読みやすくなっています。しかしノートパソコン上では、テキストが大きすぎるため、快適に読むことができません。より短い分量と小さいフォントサイズによって、ユーザーが通常の水平方向の閲覧リズムをサポートすることができます。拡大図を見る)

A List Apartのサイトは、手持ちの小さいデバイス上で非常に読みやすくなっています。しかしノートパソコン上では、テキストが大きすぎるため、快適に読むことができません。より短い分量と小さいフォントサイズによって、ユーザーが通常の水平方向の閲覧リズムをサポートすることができます。(拡大図を見る


次ページ:行間と可読性


Welcome to UX MILK

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

このサイトについて