ホームページそのフォントサイズ、適切ですか？
Webサイトというものは、若い人から、視力の弱いお年寄りまで、様々な人が見に来ます。その際に、大きく問題になるのがフォントサイズです。普段何気なく設定している人も多いと思いますが、今一度考えてみましょう。
小さな文字が読みにくい人は意外と多い
特に若い方に多い気がしますが、フォントサイズが小さい方が、デザイン的にすっきりとしていてかっこいい（もしくは読みやすい）といった風潮があります。
しかし、それは万人がそうであるとは限りません。小さい文字が読みにくいと思う方もいるのです。また、見る人の視力はもちろんの事、OSの違い、モニタの解像度、モニタまでの距離によっても見易さは変わってきます。
例えば、このサイトのフォントサイズはいかがでしょうか？中間あたりの大きさにしているつもりですが、環境によって、または個人差によっては「ちょっと大きくてモサイ(笑)」と思われる方もいらっしゃれば、逆に感じる方もいるはずです。（ちなみに私にとってはもうちょっと大きくてもいいかなと思います。）
Webサイトを作る際に重要視する事は「閲覧者への気遣い」です。「自分に丁度よければそれでよい」ではなく、見ている人の立場になって、考えてみましょう。
実際に気をつけたい点
それでは、具体的に気をつけたい点を挙げてみます。参考になさってくださいね。
モニタのドットピッチ
皆さんは自分が利用しているモニタの解像度とかドットピッチって意識されたことはありますか？そんなことを気にしながら使っている方は少数派かもしれませんね。しかし、文字の大きさに関わる重要な要素。しっかりと確認しておきたいところです。
| インチ | 解像度 | ドットピッチ |
|---|---|---|
| 15インチ | 1024x768(XGA) | 0.297mm |
| 17インチ | 1280x1024(SXGA) | 0.264mm |
| 18.1インチ | 1280x1024(SXGA) | 0.2805mm |
| 19インチ | 1280x1024(SXGA) | 0.294mm |
| 20.1インチ | 1600x1200(UXGA) | 0.255mm |
| 21.3インチ | 1600x1200(UXGA) | 0.270mm |
※XGAやUXGAは、解像度のことを指します。
なにやらパっと見よく分からない表に見えますが、簡単に理解しておきたいことは、15インチ-XGAが最もドットピッチが大きい=フォントサイズが大きく見え、20.1インチ-UXGAが最もドットピッチが小さい=フォントサイズが小さく見えると言うことです。
この大きさの違いはかなりのものです。私も両方のモニタでチェックしていますが、以前メインで使用していた20.1インチ-UXGAでは、普通にWebをブラウジングしていて、しょっちゅうブラウザのフォントサイズを大きくしていました。文字が小さいというだけではなく、画面がそこそこ大きいので、離れて見ているということもあるでしょう。ちなみに、font-size:10pxで長文が書かれていようものなら読みたくなくなってしまうくらいです。
15インチ-XGAや、19インチ-XGA等、ドットピッチが大きい環境で作業をしている方は、特に注意して文字サイズを決定する必要があるでしょう。それらのモニタでかなり小さめなフォントは、20.1インチ-UXGAでは極小フォントになってしまうのです。また、その逆もしかりです。
モニタのインチと解像度は全て同じとは限らない
注意していただきたいのが、上で挙げたインチ＆解像度は一般的なものではありますが、必ずしもセットではないということ。つまり、○○インチは解像度○○x○○とは決まっていないということ。具体的には、21.3インチは1600x1200の解像度とは限らないということです。
ですから、モニタのインチサイズだけではドットピッチは算出できません。必ず解像度も確認しましょう。その両方さえ分かれば計算できます。計算は、ドットピッチ計算機というものがあるので、それを利用するのが早いでしょう。
フォントサイズの指定方法
Webサイト上でフォントサイズを変更するにはいくつかの方法があります。まずHTMLでできるのが<font size="3" ></font>みたいな方法ですが、特別な理由が無い限り、これはお勧めできません。できるかぎりCSSで指定しましょう。
CSSにも px,pt,em,% 等様々な単位がありますが、その中でも相対指定を利用することをお勧めします。px（ピクセル）で固定してしまうと、Internet Explorer6(IE6)で文字サイズが変更できないからです。IE6のシェアは現在（10/1/13/）でもまだ2割程もいますので無視できません。なお、相対指定にはem,%等がありますが、私はよく%を使っています。
フォントサイズの固定について
上でもふれていますが、フォントサイズを固定してしまうのはあまりお勧めできません。
フォントサイズを固定すると、思い通りのデザインにしやすいと思いますが、それが読みにくいユーザもいます。好感度の高いWebサイトを作るには、できるだけ使いやすく、見やすいサイトである必要があります。なるべくなら相対指定をして、閲覧者が自由にフォントサイズを変更できるようにしましょう。
また、当サイトのように、ページ内にフォントサイズを変更できるようにするJavaScriptを設置するのもいいかもしれませんね。
コアターゲットから考える
上記でご紹介しているのは、あくまでもフォントサイズが小さくて読みづらい場合がある、という事を理解した上でサイトを作りましょうということです。小さい文字が絶対にダメというわけではありません。
Webサイトは、何らかのコンセプトや目的があって制作されるものです。そのWebサイトのコンセプト・目的・コアターゲットを想定してフォントサイズを指定することが大切です。
例えば、若者向けのサイトや、デザイン重視のサイトで特大フォントだったりしたら浮いてしまいますよね。TPOに合わせて決定したいところです。
つまり、知識が無く極小フォントを使ってしまうのはWebデザイナーとしてだめですが、きちんとした知識があって、必要に応じて極小フォントを使うのはありだと思います。
Web制作Tips- デザイン
- ├フリーの写真素材を有効活用しよう
- ├デザイナーならこだわりたいカーニング（文字詰め）
- ├文字のジャンプ率で適切なサイトイメージを演出する
- ├TPOを考えてハズさないフォントを選ぶ
- └失敗しない配色の基本
- ユーザビリティ
- ├そのフォントサイズ、適切ですか？
- ├リンクテキストをわかりやすくする
- ├フォームのリセットボタンを考える
- ├リンク切れ時に適切な404ページを表示をする
- └フォームの確定ボタンは右?左?
- コーディング
- ├文法チェッカーで正しい(X)HTML/CSSを書こう
- └インデントで読みやすいソースコードを
- その他
- ├ディレクトリ構造は適切に
- └絶対パス?相対パス?ファイルの指定方法いろいろ
