ユーザビリティ、モバイルサイトで気をつけたいフォントの話
スマートフォンによるWebサイト閲覧が普及して、レスポンシブWebデザインはいまやWeb制作の必須条件となりました。PC、タブレット、スマートフォンそれぞれの画面サイズを考慮して、ページをデザインする必要があります。ユーザビリティを考える上でも重要です。
きっかけは、2015年4月21日にグーグルが実施したアルゴリズム変更でした。このとき以降、スマートフォンに最適化されたサイトが検索で優遇されるようになりました。不適切な場合は「ページがモバイルフレンドリーではありません」と判断されて、検索順位を落とされてしまいます。
WordPressなどのCMSでサイトを構築する場合、レスポンシブWebデザイン対応のテーマを利用すると効率的です。オリジナルのデザインで、PC、タブレット、スマートフォンそれぞれの端末に合わせたレイアウトを用意する場合は、統一性をもたせたデザインをCSSで設定しなければなりません。
ところで、デザインというとビジュアル要素を考えがちですが、読みやすいテキスト情報の設計も大切です。
そこで、モバイルフレンドリーなWebサイトを構築するために、テキストをどうデザインすべきか、重要な３つのポイントを考察します。
適切なフォントのサイズと種類
テキストの分量が多いからといって、フォントのサイズを小さくするとユーザビリティが損なわれます。文字のサイズは18px程度がよいでしょう。最小でも15pxです。
一般的にフォントには、セリフとノンセリフの２種類があります。日本語でいえば、セリフは明朝体であり、ノンセリフはゴシック体です。文字の先端が装飾されている形状がセリフで、先端がすぱっと切れているか丸みを帯びている形状がノンセリフです。
スマートフォンの場合はデバイスフォントにも左右されます。iOS6は明朝体が標準フォントでした。しかし、現在iOS9のシステムフォントSan Franciscoはノンセリフです。
スマートフォンのサイトでは、特別な場合を除いてノンセリフのゴシック体を用いたほうがよいでしょう。画像で明朝体を使うことも可能ですが、視認性がよくないこと、SEO対策にも問題があることなどから、あまりおすすめできません。
適切な改行と段落、そして文字数
PCサイトの個人ブログには「これはポエムですか？」という改行を多用した文章を見かけます。しかし、改行を増やすと、モバイルサイトでは逆に読みにくくなる場合があります。
というのは、スマートフォンを横向きに持てば問題ありませんが、縦に持った場合、１行で折り返す文字数は少なくなります。改行が多いと、句読点が行の先頭になったり文章がバラバラになったり、読みにくくなる可能性があるからです。
PCと異なって、スマートフォンは縦にも横にも使うことができる端末です。画面の縦横に関わらず統一感があり、読みやすいユーザビリティを考慮すべきです。
企業ブログやオウンドメディアのコンテンツは、段落でまとめたブロック構成のテキストがよいでしょう。ブロックの場合折り返すことができるので、ディスプレイの先頭に句読点が置かれる可能性は低くなります。読み応えのあるデザインの方が、信頼感も与えられます。
ひとつのブロックは200〜500文字程度に抑えて、改行をすると読みやすくなります。つまり、ツイッターのツイート１回から２回分相当です。コンテンツの最大文字数も1,500文字程度にします。
適切な見出しのウェイトとジャンプ率
本文をただ流し込むだけでは、非常に読みにくくなります。適切な改行とともに、見出しを設けた方がよいでしょう。見出しによって文章は読みやすくなり、ユーザビリティを向上させます。コンテンツの構造化もできます。
見出しは、本文よりもウェイトを変えたり、サイズを大きくしたりすると目立ちます。フォントのウェイトとは文字の太さです。レギュラーのフォントよりボールド（太字）を用いた方が、テキストにメリハリが生まれます。
サイズを変える場合には、本文１に対して、1.5〜２倍にすると変化が生まれます。本文と見出しの大きさの比率を「ジャンプ率」といいます。雑誌では極端に大きなタイトルや見出しが使われることがありますが、モバイルサイトでは画面の制約があります。
モバイルサイトではビジュアルはもちろん、テキストの読みやすさがユーザビリティを向上させるために重要です。特にお役立ちコラムやブログ記事では考慮しなければなりません。
株式会社キャパでは、アプリの企画・開発についてご相談を承っています。
アプリを作りたいので、具体的な提案が欲しい。頭の中にあるアイデアを本当に実現できるのか知りたい。予算内に収まるのか？
などのお客様のご相談に、親身に応じます。
