今回は,先日筆者の勤務するはてなのサービスの一つである「はてなダイアリー」で起こった,使いやすさに関する問題を取り上げてみたいと思います。使いやすさの向上のためにデザインを変更したところ問題が発生し,それをプログラミング言語であるところのJavaScriptを使って解決した,というお話です。

 その問題とは,「文字の大きさ」に関するものです。

 ブラウザには,文字のサイズを変更する機能が用意されています(図1)。例えばInternet Explorer(IE)なら「表示」メニューの「文字サイズ」から「最大」「大」「中」「小」「最小」の五つの段階を選ぶことができます。Firefoxも「表示」メニューの「文字サイズ」から選ぶことができますが,「大きく」「小さく」というメニューになっており,より自由に表示サイズを変更することができます。

図1:ブラウザでは文字サイズを変更できる

 ちなみにOperaは「ズーム」という考え方を導入していて,文字だけでなく画像のサイズなんかも変化します。

まずは,ありがちなお話から

 こうした文字サイズは,利用者が自分の好みや見やすさに合わせて,人それぞれ,自由に変更しています。例えば一つの画面により多くの情報を表示させたい,という人は文字サイズを小さくしていますし,逆に小さい字だと見づらい,という人は文字を大きくしているわけです。

 この機能は意外とよく使われる機能です。それは人によって「見やすい」と感じるサイズは大きく異なるからなんです。こうした設定の変更をあまり行わない傾向にある,比較的パソコンに詳しくない,年齢が高めの方であっても,こと文字サイズに関しては設定を変更していることがあります。これは,人間,歳を重ねてくると,どうしても視力というのは衰えてくるというか,老眼が始まったりするからです。

 筆者ははてなに入る前はウェブ系ではないシステム・エンジニアをやっていて,お客さんには年齢の高い方も何人かいらっしゃいました。その中にはフォント・サイズを大きく設定してパソコンを使っている人をよく見かけました(そういう方の多くは,OS自体のフォント・サイズも大きくしているので,画面を見ればすぐにわかりました)。

 企業がパソコンを全面的に導入することはもうとっくに当たり前になっていますし,家でパソコンを使っているという人も年齢を問わず多くなってきていますから,フォント・サイズの設定って,結構重要なわけです。

 で,ブラウザの話に戻ると,フォント・サイズの挙動について,IEとFirefox(やOperaなど)では,ちょっと違いがあります。その一つは,フォントのサイズをCSSで設定した場合の挙動です。以下の例を見てください。

<p style="font-size: 16px;">あいうえお</p>
<p style="font-size: 12pt;">あいうえお</p>
<p style="font-size: 100%;">あいうえお</p>
<p>あいうえお</p>

 このHTMLのstyle属性では,一番上は16ピクセル,2番目は12ポイント,そして3番目は100%という,現在のフォント・サイズにたいする割合を指定しています。そして最後は,何も指定していません。これらのHTMLをブラウザで表示させると,IEでもFirefoxでも,フォントのサイズが標準に設定されていれば,四つの「あいうえお」は同じサイズに見えると思います。これらの指定の違いは,フォント・サイズをブラウザ側で変更した場合に表示に現れてきます。

 Firefoxでは,サイズの変更にあわせて,すべての「あいうえお」の大きさが変化するので,違いは現れません(図2左)。しかしIEの場合は,無指定か,パーセントで指定した下の二つの「あいうえお」はフォント・サイズが変化するのに対し,上の二つ,サイズを固定サイズで指定した場合は,サイズが変化しません(図2右)。

図2:フォント・サイズの変化とブラウザ。Firefox(左)とIE(右)

 したがって,ピクセルやポイントといった,固定のサイズで文字の大きさを指定しておいた場合は,ウェブサイトをデザインした側が,自分の思った通りの文字サイズで表示させる,といった目的があるのであれば(IEの場合だけでは),それを達成することができるのです。しかし,逆に利用者が自分の見やすい文字サイズで見る,といったことができなくなってしまうため,使いやすさの観点から言えば,あんまりいいとは言えないと思います。

 ですから,フォント・サイズはパーセントで指定したほうが良さそう,というのは重要なことです。しかしこれはそもそも,フォント・サイズを指定していなければ起こらない問題ですし,サイズ固定のフォント指定を行わなければ済むことです。しかもエンジニアというよりは,デザイナー向けの問題なのかもしれません(もちろん第8回「デザイナーとともにより良いサイトを目指そう ~『はてな』のやり方」でも触れた通り,こうしたことをエンジニアも知っておくことはすごく大切だと思っていますので,無視していいってことじゃありませんが)。

 そして,今回はてなダイアリーで起こった問題も,やはりそこではありませんでした。

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら