bake
その1 文字の大きさ1

    <HTML>
    <HEAD>
    <TITLE>文章タイトル</TITLE>
    <META HTTP-EQUIV="Content-Type"CONTENT="text/html;charset=x-sjis">
    </HEAD>
      
    <BODY>
    <BASEFONT SIZE=3>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    if(navigator.appVersion.indexOf("Mac") != -1){
        document.write("<BASEFONT SIZE=4>")
    }
    //-->
    </SCRIPT>

    …………ホームページの内容……………

    </BODY>
    </HTML>


 インターネットエクスプローラー(以下IE)・ネットスケープナビゲーター(以下NN)共、デフォルトの文字サイズは3になっています。ホームページを閲覧する場合、もっとも頻繁に表示される文字の大きさがこのサイズだと思って下さい。閲覧側のブラウザでフォントサイズを指定できますが、おのおのの閲覧者が一番慣れていて読みやすいのがこのサイズだと思っていいと思います。
 しかしMac上では、この文字サイズがいくらか小さめに表示されるのです。
 具体的に言いますと、Windowsでの解像度が96dpi(1インチあたり96ドット)に対してMacの解像度は72dpi。1ポイントは1/72インチなので、Macで12ポイントの文字を表示する場合は12ドット四方の文字になります。ところがWinではこれが96/72×12=16ドット四方の文字になってしまう。だからMacでちょうどいい大きさの文字はWinでは「ちょっと大きくてマヌケな文字」になり、Win上で「字面の美しいちょっと小さめの文字」を指定するとMac上では「小さくて読みにくい文字」になってしまうワケです。
 この解決策としてMac版のIE5には「画面解像度」を設定できる機能がついています。が、初期設定項目としての設定なので今ひとつ使い勝手がよくありません。


 小説などの長い文章を画面で、しかも小さい文字を読むのは非常に疲れることです。面白いオンライン文章を求めてネットサーフィンしてきた人が「ちょっと読んでみようかな」と思って立ち止まってくれた物の…延々と続く小さな文字にうんざりして途中で読むのを止めてしまう、という事はけっこう多いんじゃないでしょうか。
 こんな事を言うのも、私自身が色々なオンライン文書を途中まで読んではよく投げ出しているからです。確かに文字が小さい方がぱっと見の字面は綺麗なんですが…ディスプレイで小さい文字を読むことは(しかも長文!)相当に辛い。まして接続料金を払っているのですから、何となく時間に追い立てられながら読んでいる感じなんですね。
 そういう状態で小さい文字を追うことは、よっぽどそのお話が好みに合っていなければ難しい。


 IE・NN共、Ver4以上のブラウザであれば、スタイルシートの指定が可能です。これを使えば、ピクセル単位で文字の大きさを指定でき、WinもMacも関係なく同じ大きさの文字を表示する事が可能になります。ただし、当然スタイルシートに対応しているブラウザに対してのみ有効な方法です。ついでに言えばこの指定をしてしまうという事は、ブラウザのフォントサイズを変更して、閲覧する人が自分の見やすいサイズに変更する自由を奪ってしまうという事でもあります(NNは変更できますが、IEでは変更できません)。


 この項目の一番上の枠のなかにあるのが“Macでの表示文字を大きくする”仕掛けです。HPデザインに関する本なんかには必ずと言っていいほど載っている物ですから、使っている人も多いでしょう。

 上の枠の中の<BASEFONT SIZE=3>から</SCRIPT>までがその仕掛けです。
 まず<BASEFONT SIZE=3>は「このページの文字のサイズは3ですよ」という意味です。そしてその下<SCRIPT LANGUAGE="JavaScript">から</SCRIPT>までがJavaScriptといって、その時の条件によって表示を変えてくれる仕掛けです。
 if(navigator.appVersion.indexOf("Mac") != -1){というのは「この文書を見ているのがMacだったら」という意味です。Webで文書を閲覧する時、閲覧者はnavigator.appVersionという情報を文書の置かれているサーバー(プロバイダのサーバーです)に渡します。indexOf("Mac") != -1というのは、その情報の中に"Mac"という文字が含まれていたら、という意味。含まれていたら下の行を実行します。実行するのは"<BASEFONT SIZE=4>"と文書の中に書き出しなさい、という意味のこと。これが実行されれば、フォントのサイズは4になります。
 つまり「普通の時はこのページの文字はサイズ3で、Macで見ている時はサイズ4で表示して下さい」という意味になります。
 意味なんか判らなくても、赤い文字の部分をコピー&ペーストすれば使えますが、ちょっと覚えておくと後から得するかもしれません(笑)。ヒマな人は覚えておいて下さい。
 もし「ちょっと小さい文字がいいな」というんであれば<BASEFONT SIZE=3>32に変更して下さい。ついでにdocument.write("<BASEFONT SIZE=4>")の行のSIZE=4SIZE=3に変更。
 やることはこれだけ。たったこれだけでMacで見にきた人にWinと同じ大きさの文字を読んでもらえるのです。簡単な事でしょ?


 Webというのは「色々な人が見に来る」場所です。若い人もいれば年輩の方もいる。10年前の機械を大切に使っていて、それでネットサーフィンをするバリバリのパワーユーザーもいれば、買ったばかりのiMacを詳しい人に接続してもらって見に来る女子高生もいます。
 それぞれの方が、ブラウザの設定として、一番読みやすい文字サイズ(デフォルトのまま)を指定しています。私の知る限りでは、多くの文書を閲覧する人ほど大きいフォントサイズを指定する傾向があるようです。(IEでサイズを最大に設定していた人は、月30時間以上オンライン文書を読んでいる人でした)
 面と向かって話すのであれば、相手を見て言葉を変える事もできます。でもHPでは「日頃文字を読まないコギャルちゃん相手だから、大きい文字で表示してあげよう」なんて事はできません(不可能ではありませんが…お客様に自己申告してもらう事になるでしょう)。


 「読みやすさ」というのはなかなか判らない物です(こんな事書いてる私もまだ修行中の身です)。けれどありがたい事に、この世の中には大変優れたお手本が山ほど存在しているのです。一日のヒット数が千以上の人気サイトがそれ。
 そういうHPへ行って、どんな文字が使ってあるかとか、どんな風にレイアウトしてあるかとかを見てみましょう。ついでにブラウザの「ソース表示」で、どんな作り方をしているかも覗いてみましょう。たぶん、決してデザインに凝りまくった事はしていないと思いますよ。
 「文字の大きさ」というのは「読みやすさ」を決める重要なポイントです。色々なサイトを見学して、じっくり考えて決めて下さい。