アクセス向上大失敗 www.igros.net
Last updated 2004/8/15
コメントバック 対応

フォントの大きさ -ホームページリニューアル-

次頁 > 段落(改行)の幅
[PR]特集 Amazon.co.jp レコメンドコンテンツ



フォントの大きさについて、最も適当なサイズについて考えてみたことがありますか。
HTMLの基本フォントサイズは3になっていますよね。
これが最も読みやすい? 私の答えはノーでした。

最近は1ページに多くの情報を詰め込む傾向が強く、必然的にスペースの問題から、小さい文字を多用するケースが増えているようです。
また、フォントサイズ3は「野暮ったい」感じがあり、どうしてもフォントサイズ2などに走りがちですよね。

このHTMLで指定されたフォントサイズ3とか2の実際の大きさは、どのように決まっているのでしょう。
これはブラウザの文字サイズに依存しています。
インターネットユーザの約95%が、マイクロソフトのInternetExplorerを使っていると言われていますが、このInternetExplorerのデフォルト文字サイズは12pt(ポイント)です。
つまり、HTMLで記述したフォントサイズ3は12ptサイズの文字と言うことになります。

このように考えると、読みやすい文字は何pt文字か?、と考えた方が正しいと言えますね。
さて、工学的にはどの位が良いのでしょうか?
残念ながら歴然としたデータ収集ができず、結局得意なコジツケで結論を導きました。

WordやExcel、その他、各種製品ソフトウェアで利用されている、デフォルトフォントサイズです。
Wordの場合10.5pt、Excelは11pt、その他、だいたい11ptが基本のようです。
であれば、電子文書を閲覧する機会から学習した「読みやすい」フォントサイズは、11ptあたりと考えられます。
だから、HTMLフォントサイズ3=12ptは野暮ったい印象を受け、フォントサイズ2=10ptは細かく感じるのかもしれません。

ではどうやって、HTMLフォントサイズ3を11ptにすれば良いでしょうか?
これにはスタイルシートを使う方法が最も簡単だと思われます。
スタイルシート(CSS:Cascading Style Sheets)は、ページの見栄えや細かいデザインの定義などに広く利用されています。
これを使い、font-size: 11pt; と定義すると、HTMLフォントサイズ3=11ptに変更することができます。
(詳しい設定は、スタイルシートHOW-TO系の他サイトを参照ください)

しかし...、勘のいい人は既にお気づきだと思いますが。
ブラウザにはアクセシビリティ(例えば、目の弱い人への配慮とか)向上のため、文字の大きさを変える機能が備わっています。
表示-文字のサイズ-最大/大/中/小/最小、がこれにあたる部分です。
デフォルトは上述のとおり[中]ですが、人によっては[大]を選択し、より自分に読みやすい大きさを選択している人もいます。
スタイルシートで11ptと定義すると、ブラウザによる文字サイズの変更は効きません。
つまり、何が何でも11ptで読め! と言うことになり、せっかくのアクセシビリティを殺す結果になります。

この問題を解決する方法として、font-size: xx%; のように、相対的大きさ、%で定義すればOKと思われます。
12ptを11ptにする場合、92%比になりますから、font-size: 92%; とすれば、HTMLフォントサイズ3は約11pt、しかも、ユーザ本意で文字サイズの変更も可能です。

随分、長い文章になってきましたが、もう少し続けます。
かつて大型計算機で仕事をしていた時、今のようにモニタに向かってプログラムを見直す作業より、リスト出力し、検証する機会が圧倒的に多かったものです。
産業医の定期健康診断を受けた時、視力の低下についてアドバイスを受けたことがあります。
今も視力は、0.03-0.02の近眼ですが、私はてっきりモニタが視力低下の最大原因と思っていました。
しかし、産業医いわく、目にはハッキリしたコントラストが最も良く無い、例えば、白い紙に黒い細かい文字がビッシリ、それを皿のように長時間見続けるような状態こそ、著しく視力を低下させる。
まさにプログラムリストを追いかける作業そのものです。

これをブラウザページに置き換えてみると、ページの背景はデフォルトで白、文字は黒です。
目が疲れる=読みにくい、と言うことでしょうか。
そこで良く使われる手法が、背景を少しグレイ(灰色)にするなどの方法です。
しかし、私のリニューアルでは、作成するGIF(画像)の生産性を考えると、GIFの背景も合わせてグレイにする作業が気にいりません。

結局、得た答えが、文字の色を気持ち黒よりグレイ化させ、ほんの少しで良いからコントラストを和らげる、と言うモノでした。
もっと大胆に和らげないと効果が無いかもしれませんが、色交じりで読みにくくなっても洒落になりませんので、黒(#000000)に対し(#2E2E2A)で統一させることにしました。
この色は、先に示したカラーコンセンプトにも含まれる色です。


<<< トップ << テーマトップ < 前頁次頁 > 段落(改行)の幅 >>

www.igros.net
[PR]特集 Amazon.co.jp レコメンドコンテンツ



Copyright(C) アクセス向上大失敗 All Rights Reservd.
version2.0