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

font

この記事は約 2 分で読めます。


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

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

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

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

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

1-2.行間を適度にあけているか?(”line-height:150%;”程度以上あける。)

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

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

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

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

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

2.WEBフォントについて

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

まとめ

いかがでしたでしょうか?
フォントサイズや行間まで、ちょっとしたことですが細かくユーザビリティを考えて対応することにより、サイトの見やすさが大きく変化します!

ユーザビリティはユーザーにサイトの目的を達成してもらうための要素としてとても重要なものですので、上記の点をしっかりと踏まえてサイトを構築しましょう!

コンテンツマーケティングの教科書7ステップガイド

成功しているECサイト店長は知っている
コンテンツマーケティングで継続的なネット集客を実現し、売上アップに成功するための最新の方法を理解できます!

STEP-1 コンテンツマーケティングとは?
STEP-2 “コンセプト”と“ペルソナ”を設定する
STEP-3 集客用ブログを構築する(Wordpress編)
STEP-4 集客用ブログを構築する(SNS活用編)
STEP-5 無料オファー設定・LPの作成方法
STEP-6 ステップメールでファン・顧客を作る方法
STEP-7 リピーターを獲得するメールマガジン活用方法

ダウンロード

最新の記事情報が取得できます。