小さいデバイスとフォントサイズ
レスポンシブなウェブサイトを設計する際には、まず区切り位置を決めるための適切なフォントサイズと、理想的な分量から始めましょう。しかし以下のような場合には、理想的な分量に関しては特に配慮する必要はありません。
手持ちの小さいデバイスは大きいデバイスに比べて、テキストは既に小さく表示されているはずです。ユーザーは小さいデバイスでコンテンツを閲覧する際、デバイスに顔を近づけて閲覧するので、この点は問題ありません。現在支持されている考え方は、フォントサイズを小さいデバイス用に小さくして、分量はそのまま保持するというものです。実際、より適切なフォントサイズを提示すれば、より優れた読みやすさを提供することができます。結果として、理想的な分量とはなりませんが、より優れた閲覧体験を実現できます。
小さいデバイス上の小さいテキストが、ユーザーにピンチやズーム操作を推奨している場合は、レスポンシブ設計はあまり役に立ちません。
大きいデバイスとフォントサイズ
レスポンシブなデザインでは、分量とフォントサイズは手持ちの小さいデバイスを利用している人にだけ影響するわけではないことを覚えておいてください。多くの人はまだ、ノートパソコンやデスクトップなどの大きなデバイスも利用しているのです。
レスポンシブ設計の中には、デバイスのサイズに対して拡大・縮小する単一のカラムにテキストを保持しているシンプルなものもあります。これは、(カラムの幅の代わりに) フォントサイズが理想的な分量を維持するために利用されている場合を除いて、洗練された、適切なソリューションとなります。
私たちは、小さすぎるテキストだけでなく、大きすぎるテキストも問題があることを学びました。文字が大きすぎると、読み手の目は通常習慣としているパターンに従って動こうとします。しかし、フォントサイズが大きすぎることによって、水平方向により多くのスペースを必要とし、またユーザーが中心視野と単語を飛ばし読みするパターンを利用して確立した、水平方向の読み進める流れを邪魔してしまいます。
私たちは、紙面に印刷されたテキストよりも、オンラインのテキストを大きめに設定してきました。ユーザーはデバイスを自分の膝、もしくは机の上に置いて閲覧するため、この点は問題ありません。しかし、過度に大きすぎるテキストは読み手に閲覧する速度を落とし、コンテンツの飛ばし読みの調節を強制させてしまいます。水平方向に読み進めることが難しくなり、読み手はテキストの左端を垂直方向に飛ばし読みし始めるでしょう。
現在支持されている考え方は、大きなデバイス用にフォントサイズを大きくすることで、分量を保持することです。例えば、下の単一カラムによる設計は理想的な分量を保持しています。しかし、この理想的な分量を大きなデバイス上で実現するためには、記事用のテキストを19ピクセルのVerdana、または22ピクセルのGeorgiaに設定し、またイントロダクションを26ピクセルのGeorgiaに設定する必要があります。
実際、できる限り適切なフォントサイズを保持し、かつカラムの幅を狭くした方がより良い結果を得ることができます。手持ちの小さいデバイス、及びノートパソコン上で閲覧する場合は、ウェブデザイナーのためのオンライン・マガジンであるA List Apartをチェックしてください。
次ページ:行間と可読性