実績お客様の声コラム会社概要ミッションステートメント求人情報(KOIL)会社案内ダウンロードお問い合わせサイトの見やすさはフォントから!フォントのユーザビリティ4つのポイントHOMEコラムサイトの見やすさはフォントから!フォントのユーザビリティ4つのポイントこんにちは、本日も朝から事務所の横にある温泉を堪能してから仕事をしている角田(つのだ)です。コンテンツマーケティングにおける記事は、その内容に興味のあるユーザーに検索エンジンで見つけてもらい、内容を読んでもらうものです。その読んでもらう文字が読みにくいものになってしまっていたら本末転倒!今日は、どのような人に対しても読みやすいフォントを表示させるための情報を整理しました。フォントのユーザビリティとして、下記の点に注意してページを作成しましょう。目次1.フォントのユーザビリティ4つのポイント1-1.機種依存文字は使用していないか?(使用する場合は画像で挿入する。)1-2.行間を適度にあけているか?(”line-height:150%;”程度以上あける。)1-3.フォントサイズは固定せず、ターゲットとして設定したユーザを考慮したフォントサイズに設定されているか?1-4.ユーザのPCやブラウザの環境に依存する特殊なフォントなどは利用しない。2.WEBフォントについてまとめ1.フォントのユーザビリティ4つのポイント1-1.機種依存文字は使用していないか?(使用する場合は画像で挿入する。)最近では少なくなっているとは思いますが、機種によっては文字化けして全く読めなくなってしまう可能性もあります。下記の様なものが機種依存文字と言われるものですので、このようなものは極力使わないようにしましょう。1-2.行間を適度にあけているか?(”line-height:150%;”程度以上あける。)下記の画像をご覧下さい。行間がつまり過ぎていると読みにくい印象がありますよね。私の場合、確実にどのようなサイトを作る時もCSSで行間を設定しております。デフォルトの設定のままページを公開する事はほとんどないと思ってください。だいたい150%で設定しています。style="line-height:150%;">line-height:150%;</p>1-3.フォントサイズは固定せず、ターゲットとして設定したユーザを考慮したフォントサイズに設定されているか?下記の画像をご覧下さい。フォントが小さいと読みにくいですね。これはユーザビリティを考慮すると、ターゲットとするユーザの特徴(特に年齢など)を考えて、高齢の方が対象となる場合は、文字を大きめにするなどの配慮が必要です。私の場合は、100%や、1.0emなどの相対的な単位を設定する場合が多いです。style="font-size:1.5em;">font-size:1.5em</p>1-4.ユーザのPCやブラウザの環境に依存する特殊なフォントなどは利用しない。下記のようにいろいろなフォントが使えれば良いですが、機種や、ページを見ているユーザが持っているフォントによっても見え方が全く変わってしまうので、フォントの種類は変えない方が良いでしょう。CSSでいうと”font-family”は変更しないのが無難です。2.WEBフォントについてWEBフォントとは、CSS3から策定されたWWW上からフォントを表示する技術のこと。インターネット上のフォントファイルを読み込むので、ユーザの環境に依存せずに利用できますが、フォントファイルを読み込むのに時間がかかってしまったり、そもそも日本語のWebフォントは利用できるものが少なかったり、ライセンス費用が高かったりしますので、ユーザビリティだけを考えると、現状ではあまり利用しない方が良いでしょう。10:00~18:00(セールス目的のお電話はご遠慮ください。)電話でお問い合わせするメールでのお問い合わせ・ご相談お見積もり依頼や詳しいご相談をされたい場合にはこちらのリンクからお問い合わせフォームをご活用ください。メールでお問い合わせする会社案内ダウンロード社内で検討されたい方のために実績などをまとめた会社案内をPDFでご用意しています。ある中小企業個人情報セキュリティー推進協会より認証を受けております。ダウンロードお問い合わせPDF無料ダウンロード。