サイトの見やすさはフォントから！フォントのユーザビリティ４つのポイント

こんにちは、本日も朝から事務所の横にある温泉を堪能してから仕事をしている角田（つのだ）です。
コンテンツマーケティングにおける記事は、その内容に興味のあるユーザーに検索エンジンで見つけてもらい、内容を読んでもらうものです。その読んでもらう文字が読みにくいものになってしまっていたら本末転倒！
今日は、どのような人に対しても読みやすいフォントを表示させるための情報を整理しました。

フォントのユーザビリティとして、下記の点に注意してページを作成しましょう。

1.フォントのユーザビリティ４つのポイント

1-1.機種依存文字は使用していないか？（使用する場合は画像で挿入する。）

最近では少なくなっているとは思いますが、機種によっては文字化けして全く読めなくなってしまう可能性もあります。
下記の様なものが機種依存文字と言われるものですので、このようなものは極力使わないようにしましょう。

1-2．行間を適度にあけているか？（”line-height:150%;”程度以上あける。）

下記の画像をご覧下さい。

行間がつまり過ぎていると読みにくい印象がありますよね。
私の場合、確実にどのようなサイトを作る時もCSSで行間を設定しております。デフォルトの設定のままページを公開する事はほとんどないと思ってください。
だいたい150%で設定しています。

<p style="line-height:150%;">line-height:150%;</p>

1-3．フォントサイズは固定せず、ターゲットとして設定したユーザを考慮したフォントサイズに設定されているか？

下記の画像をご覧下さい。

フォントが小さいと読みにくいですね。
これはユーザビリティを考慮すると、ターゲットとするユーザの特徴（特に年齢など）を考えて、高齢の方が対象となる場合は、文字を大きめにするなどの配慮が必要です。
私の場合は、100%や、1.0emなどの相対的な単位を設定する場合が多いです。

<p style="font-size:150%;">font-size:150%</p>
<p style="font-size:1.5em;">font-size:1.5em</p>

1-4．ユーザのPCやブラウザの環境に依存する特殊なフォントなどは利用しない。

下記のようにいろいろなフォントが使えれば良いですが、機種や、ページを見ているユーザが持っているフォントによっても見え方が全く変わってしまうので、フォントの種類は変えない方が良いでしょう。

CSSでいうと”font-family”は変更しないのが無難です。

2.WEBフォントについて

WEBフォントとは、CSS3から策定されたWWW上からフォントを表示する技術のこと。
インターネット上のフォントファイルを読み込むので、ユーザの環境に依存せずに利用できますが、フォントファイルを読み込むのに時間がかかってしまったり、そもそも日本語のWebフォントは利用できるものが少なかったり、ライセンス費用が高かったりしますので、ユーザビリティだけを考えると、現状ではあまり利用しない方が良いでしょう。

まとめ

いかがでしたでしょうか？
フォントサイズや行間まで、ちょっとしたことですが細かくユーザビリティを考えて対応することにより、サイトの見やすさが大きく変化します！
ユーザビリティはユーザーにサイトの目的を達成してもらうための要素としてとても重要なものですので、上記の点をしっかりと踏まえてサイトを構築しましょう！

こちらの記事もよく読まれています

WordPress（ワードプレス）とは？

ショッピングサイトでもLTV（ライフタイムバリュー）を考えてリピート率を上げるために必要なこと

売れてないショッピングサイトに絶対的に不足しているものとは？

“(direct)/(none)”ノーリファラー/参照元無しの８つの原因