WEB制作における永遠の課題「適切なフォントサイズ」について

こんにちは！メディアエクシードです。
今回はWEB制作における永続的な課題「適切なフォントサイズ」について解説していきます。

「このフォントサイズじゃ読めない」
「大きすぎてデザイン性を下げる」
等、社内では様々な意見が飛び交うと思います。
今回の記事はあくまでも「みんな違ってみんな良い」といった観点でお話しさせて頂きます。
千差万別、十人十色、WEBサイトをより良くしたい気持ちはみんな一緒です。

【デザインにおけるフォントサイズ観点】
近年におけるWEBデザインでは、最小ベースフォント(基本フォント)は16px～14pxとなっています。
この基準は、2015年からGoogleが推奨するフォントサイズです。

また、近年(2020年現在)はフォントサイズが小さいWEBサイトが数多く見られます。
原因としては「百聞は一見にしかず」の如く、文章ではなく視覚的な情報を優先するように、ユーザーのWEBリテラシーが進化したことが考えられます。
WEB黎明期と比較すると、PCの標準スペックが大幅にグレードアップし、大容量の画像や写真が使用できるようになったことも要因の一つです。

過去のGoogleインターフェースを見比べても、テキストやリンクは最小限に抑えられ、ユーザーの目的に最短でたどり着けるよう進化しています。

WEBデザインの役割としては「より多く情報を簡潔に伝える」事が重要であり、上記事項を配慮する場合
必然的にベースとなるフォントサイズは下がる傾向が多いと言えるでしょう。

【ユニバーサルデザインにおけるフォントサイズ観点】
ユニバーサルデザインとは、視覚的/アート的デザインとは異なり
出来るだけ多くの人が利用できることを目的としたデザインを指します。
日常に潜む意外と気づかない"あれ"が、ユニバーサルデザインなこともしばしあります。

私たちの身近なもので例えるとすれば、下記等がそれにあたります。

・ペットボトルから落ちないキャップ(落下防止)
・ICカード各種(差し込み口の逆側に凹凸がある)
・シャンプー/リンス容器(どちらかの横に突起が付いている)

このような「溶け込むデザイン」こそがユニバーサルデザインとなります。

iPhone発売から13年が経過する今年、今や圧倒的な普及率のスマートフォンですが
現在もフィーチャーフォン(ガラケー)ユーザーの高齢者や老眼の方、色盲の方等には、コントラスト比が少ない場合に可視性が著しく低下する可能性があります。

そのため、前述したフォントサイズ基準であるフォントサイズも18～20px等に変更する必要があります。

【弊社の規定フォントサイズ】
弊社では複数のオウンドメディアを運営しております。
オウンドメディアでは主にブログでの記事発信が必然的に多くなりますので
「色んな方が読める」
「より読みやすいフォントサイズ」
といったところがカギとなります。
PCサイトはもちろんSPサイトでの可読性を重視し、下記のように規定しております。

h1 { font-size: 32px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 22px; }
h5 { font-size: 16px; }
p {font-size: 16px; }
span { font-size: 14px; }
.breadcumb { font-size :12px; }
.copyright { font-size :14px; }

文字に強弱をつけることで、より伝えたいことを簡潔にまとめることができますね。

【まとめ】
弊社では比較的若年層向けのWEBメディアの勢力が強いですが、今後より多くの年齢層に発信していきたいと考えております。

日進月歩のWEB業界で、こうした懸念点も今後は改善していこうと考えております。

#フォントサイズ #ユニバーサルデザイン #メディアエクシード