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

Laura Franz

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

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

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

行間と可読性

これまで、私たちはレスポンシブデザインにおけるフォントサイズと分量の関係について注目してきました。しかし、行間もまたユーザーの閲覧に影響を与えます。

行間は水平方向の動作に影響する

ユーザーは水平にも垂直にもコンテンツを閲覧するため、テキストの行は、織物のように縦横無尽ではなく、水平に見ることをを促すべきです。

行間が詰まりすぎると、ユーザーの目の水平方向の動きを衰えさせ、テキストの左端の流し読みを促してしまう恐れがあります。また、ユーザーに同じ行を繰り返し読むことを強要する可能性もあります。一方、行間が緩すぎると、テキストの行が視覚的に「浮遊している」ように見えてしまいます。行は一つのまとまりの単位ではなくなり、垂直方向による流し読みがより難しくなってしまいます。

完璧な行間は存在しませんが、大体フォントサイズの150%が最適な場合が多いです。

完璧な行間は存在しませんが、行間をフォントサイズの150パーセントで設定することが重要なポイントとなります。

行間150%指定

上:行間が詰まりすぎると、ユーザーの水平方向の閲覧の流れを衰えさせ、重複を増やしてしまいます。 下:行間が緩すぎると、テキストの行が互いに浮遊している状態になります。

上:行間が詰まりすぎると、ユーザーの水平方向の閲覧の流れを衰えさせ、重複を増やしてしまいます。
下:行間が緩すぎると、テキストの行が互いに浮遊している状態になります。


行間とフォントサイズ

行間を設定することは、様々な要素 (フォントファミリーや分量、フォントサイズ、言語) の複雑なバランスを調節するということです。レスポンシブデザインにおいて最も重要な要素は、驚いたことに、フォントサイズなのです。

小さい文字は、より多くの行間を必要とする傾向にあります。余裕のある行間は、目が小さい文字を認識するのをサポートし、また読み手が小さいテキストに疲れた際には、水平方向の目の動きを促してくれます。

左:150パーセントに設定された行間は、iPhone上ではやや詰まり過ぎています。 右:左と全く同じのテキストを少し緩めの行間で作成すると、目の水平方向の動きを促進し、読み手が文字の形を認識するのをサポートします。

左:150%に設定された行間は、iPhone上ではやや詰まり過ぎています。
右:左と全く同じのテキストを少し緩めの行間で作成すると、目の水平方向の動きを促進し、読み手が文字の形を認識するのをサポートします。


綿密にチェックして、規制規則を破る

レスポンシブな構成をデザインする際は、大きなデバイス上でテストを実施する方が容易に行うことができます。デスクトップのブラウザのサイズを迅速に変更することができるからです。しかし、デスクトップ、またはノートパソコンのブラウザ上で設計を行うことは、テキスト以外のことに多くの時間を費やすことを意味しており、また同じテキストが小さいデバイスでどのように機能するのかをチェックするのにあまり時間をかけることができません。

分量を用いてレスポンシブサイトにおける区切り位置を決めている場合、おそらく文字や可読性にも配慮していることでしょう。なので、引き続き分量を気にかけてください。これが良いスタート地点となります。しかし、テキスト上の文字が適切に機能しているかどうかを確かめるためには、小さいデバイス上で、時間をかけてテキストをじっくりチェックしてみてください。分量や行間、必要であればフォントサイズのバランスを調節してください。

全てのルールは破られるためにあるということも、覚えておいてください。Jan Tschichold氏は自分で生み出したルールを覆し、自身の仕事の大部分において中央揃えのテキストを使用していました。また必要に応じて、分量よりもフォントサイズを優先させることも大切です。(小さすぎない) 優れたフォントサイズは読みやすいですし、 (大きすぎない) 優れたフォントサイズは、目の水平方向の動きをサポートします。そして、適切な行間を伴う優れたフォントサイズは、読み手が探している情報を見つけるサポートをしてくれるのです。

その他の参考資料

・「より良いタイポグラフィーのための5つのシンプルなステップ」Mark Boulton氏

・「技術的なウェブタイポグラフィー:ガイドラインとテクニック」Harry Roberts氏、Smashing Magazine

・「適切な分量を選択しよう」The Elements of Typographic Style Applied to the Web

・「我々はどのように読むのか」Jason Santa Maria氏、A List Apart

・「 (行の長さをテストするための) テキストを45~75文字に設定するブックマークレット」Chris Coyier氏

・「文字とレイアウトの方法」Jordan Moore氏


Welcome to UX MILK

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

このサイトについて