ブラウザやOSの環境でこんなに見え方が違う!  


他の人はまったく「別のもの」を見ているかもしれない

 WEBサイト(ホームページ)は「印刷物」のように固定された情報ではありません。
 現在、最も多い環境はWindows(98SE以降)+Internet Explorer(バージョン5.5以降)という環境でしょうが、その中でも、Windowsの環境設定やInternet Explorerの環境設定によって、同じWEBページでもまったく見え方が違ってきます。
 例を示しましょう。まず、下の画面を見てください。

Internet Explorerでの表示例1
[1]

 これはWindows 98SE+Internet Explorer6で、あるページを表示したものです。
 WEBデザイナーがこの環境しか確認していなければ、これでOKとするかもしれません。
 しかし、このページはもしかするとこのように見えているのかもしれないのです。

Internet Explorerでの表示例2
[2]

 上の[1]と[2]はまったく同じhtml内容のページを、どちらもWindowsのInternet Explorer6で表示したものです。htmlが同じなのですから、違いが出た要因はブラウザやOSの環境設定にあるわけです。
 種を明かせば、まず[1]ではブラウザの背景色がたまたま白になっていますが、[2]では「Windowsの設定に任せる」となっています。そのWindowsの環境設定で、無地背景色が白になっていない(この場合は薄い緑色)わけです。
 Windowsの環境設定で、背景色を白以外に指定しているコンピュータはたくさん存在します。(背景色が白だと、長時間ディスプレイを見続けたとき目が疲労しやすいため、上級者ほど白以外に設定しています。)
 また、[1]ではブラウザ(Internet Explorer)の設定で、文字の設定が「中」になっていますが、[2]では「大」に設定されています。そのため表示されるフォントの大きさが違ってきて、「中央揃え」のcenterタグでの整形が見苦しくなってしまいました。
 中には、自分の見ている画面に合わせて文章を改行整形してしまう人もいます。当然、別の解像度や横幅、文字サイズで見れば、改行位置はずれ、非常に見苦しいレイアウトとなります。
 きちんとしたWEBデザイナーならば、当然こうした基本的なことは理解していますから、背景色を白にしたければ、bodyタグの次に必ず bgcolor="white" という記述を入れ、[2]のようなケースを避けます。また、不用意にcenterタグや改行を使った文字のレイアウトはしません。

 これらはまったく同じInternet Explorer6での違いですが、これが別のブラウザとなると、もっと悲惨なことになります。
 次は、何かと問題の多いことで有名なNetscape Navigator4.Xで同じhtmlを表示させた例です。

Netscape Navigator4.7での表示例
[3]

 画像と文字が重なって、惨憺たる状態ですね。
 これは、文字を読みやすくするために行間の空きをスタイルシートで指定しているところに画像を入れた場合に起きるトラブルです。Internet Explorerでは問題なく表示されますが、Netscape Navigator4.Xではこのように悲惨なことになります。
 これを避けるためには一種裏技のような技術を用います。今ご覧になっているこのページも、文章部分は行間を空けて読みやすくしていますが、Netscape Navigatorで見ても画像が重なるようなことはありません。どうするのかという説明は……htmlの解説コーナーではないのでここでは省略します。

 Netscape Navigatorは、文字の大きさは無制限に変更できますが、ブラウザ側で文字表示を小さくするとさらに悲惨なことになります。
Netscape Navigator4.7での表示例2
[4]

 本文は画像の下に隠れてまったく見えなくなり、バラの画像もほとんどが切り取られ、消えてしまっています。スタイルシートで行間指定をしているだけなのですが、Netscape Navigator4.Xではこうなってしまうのです。
 実際、こういう状態になっているWEBサイトはたくさんあります。作っている人はInternet Explorerでしか見ていないので気がつかないのです。初心者のサイトではなく、プロが作っているであろう大企業の商用サイトなどにも、こうしたお粗末なものが結構あるのが実情です。
 次に、最近愛好者が増えているブラウザOperaで見てみましょう。

Operaで見た例。文字化けしている。
[5]

 今度は文字化けしてしまいましたね。
 別にOperaが特に文字化けするというわけではないのですが、htmlのhead部分に正しく言語指定記述をしていないと、このように文字化けすることもあります。
 headといえば、検索エンジンに拾ってもらえるかどうかもhead内の記述ひとつで決まるのですが、商用サイトでありながら検索エンジン対策をまったくしていないサイトはたくさんあります。
 例えば、Googleはheadよりもむしろbodyの中身を重視する傾向があると言われています。headにいくら検索エンジン用のメタネームを入れたところで、bodyが画像だけで構成された(タイトル文字なども見栄えのよいGIFにしている)ようなページは一向に拾ってもらえません。
 また、検索エンジンは統廃合が激しい世界で、日々、エンジンの仕様も変わっていますから、半年前の常識が今では非常識になっていることもあります。

   WEBページは「印刷物」ではない   

 タヌパックデジタル工房へご依頼くださるお客様の中には、「どこそこの改行位置を〜にして」「文字を気持ち大きく(小さく)」「背景色をほんの少し明るく」などなど、細かな指示をくださるかたがいらっしゃいますが、そのお客様がどのような環境で当該ページを見ているのかが分かりませんので、対応できないことがあります。
 はっきり申し上げれば、多くの場合、要求されていることは、上記のような「環境による見え方の差」をご理解いただけていないためのものなのです。
 ディスプレイの解像度がどうなっているのかも大きな問題です。古いノートパソコンやモバイルPCでは、640×480という解像度がよく使われています。最近の高級機では1280×960が珍しくありません。この2つの環境では、表示面積は実に4倍の違いになります。
 横幅1280に合わせてレイアウトすれば、横幅640のディスプレイでは半分しか見えませんから、面倒な横スクロールバーが出っぱなしになります。とても読めたものではありません。
 逆に、小さなディスプレイに合わせて固定的なレイアウトをすれば、解像度の高いディスプレイでは異様な余白が出て、文字は小さくなり、いらいらさせられます。
 色調は、ディスプレイの調整具合に依存しますし、WindowsとMacでは相当「色味」が違います。
 文字の大きさは、すでに説明しましたようにブラウザの設定に依存しますし、ブラウザ側で文字の大きさを変更できないようにポイントやピクセル値で指定したとしても、WindowsとMacでは使っているフォントそのものが違うので、相当な差があります。同じWindowsでも、Internet ExplorerとNetscape Navigatorでは、13ピクセルという文字の大きさの解釈が違い、一回り違って見えます。ブラウザで標準書体を明朝系にしているかゴシック系にしているかでも違います。無理矢理フォント指定をしたために、ブラウザが書体をわざわざ欧文書体にして表示し、文字化けすることもあります。
 極端な例ですと「この部分を縦書きにできないか」「山崎の『崎』はオオサキではなくタツサキで表示してほしい」「ルビを気持ち大きく振って」などというリクエストをいただくことがあります。これらは印刷物ではいくらでも対処できますが、HTMLでは基本的に無理だと考えてください。無理に対応しても、その結果、トラブルや不都合が増える可能性が高いのです。
 HTMLに関するトラブルの原因は山のようにあり、私たちは日々そうしたトラブルに遭遇し、対処する方法を学んでいます。数をこなさなければ身に付きません。短期間に習得できるようなものではありません。
 Homepage BuilderやFrontPageを買ってきて1週間で使い方を覚え、一見かっこいいサイトをアップしたつもりでも、他の環境で見れば悲惨な画面になっているということがよくあります。また、ホームページ作成ソフトに任せたHTMLソースは汚く、検索エンジン対策も無視されています。問題のあるサイトの多くは、こうしたホームページ作成ソフトで作られています。(ソースを見ればすぐ分かります。 GENERATOR= と、ソフトが余計な自己主張をしていますから。)

 WEBページが印刷物であれば、誰もがまったく同じものを見ているわけですから、「文字を大きく」「色を明るく」などというリクエストにも細かく対応できます。しかし、WEBページは印刷物ではないのです。
 ご自分が見ている画面は、何百万通りもありえる「見え方」のひとつにすぎません。同じページを、隣の人は全然違う色、大きさ、レイアウトで見ているかもしれません。
 もちろん、環境による違いがなるべく出ないような工夫をこらしています。また、場合によってはデザインを多少犠牲にしても、検索エンジン対策を優先させることもあります。通販サイトなどの場合、検索エンジンで拾ってもらえないことには勝負になりませんから、多少無骨なデザインであっても、「検索エンジンに拾われやすい作り」を心がけます。
 WEBサイト作りのコストは、ほとんどが人件費です。お任せくだされば、最小限のコストで最大限の効果を計算したものをお作りいたしますが、細部を気にし始めて延々やりとりをくりかえすと、結局は効果の薄いものを高いコストで……という結果になりかねません。
 ご依頼の前に、まずそのことをどうぞご理解くださいますようお願い申し上げます。
TOPへ
★ご質問は
 
 宛へメールにてお願いいたします。

(WEB情勢は日々刻々と変化しています。価格・コースの内容は変更になることがあります)


03/04/21 updated
リンク