ワールド・ワイド・ウェブの素晴らしさは、驚くほど多くの人々にリーチできることです。ウェブはますます重要になり、私たちの生活のあらゆる側面に影響を与えています。ウェブサイトをデザインする際、多くの潜在的な閲覧者層にリーチしたいと考えるのは当然です。しかし、Macで開発されたサイトは、デザイナーがシステムによる情報処理の違いを考慮しなければ、他のプラットフォームでは驚くほど見栄えが悪くなってしまうことがあります。Microsoft Windowsはウェブ上で最も普及しているプラットフォームであるため、Windowsモニターでも愛用のMacと同様に美しく表示されるようにサイトを調整することは、幅広いユーザー層を維持するために不可欠です。
同じプラットフォーム上でも、2つの主要なWebブラウザ、Microsoft Internet ExplorerとNetscape Navigatorの間には大きな違いがあります。こうした違いへの対処法については、2000年4月号の「Zap Common Browser Bugs（ブラウザの一般的なバグを解消）」とMacworld.comのhttp://[removed-link]/2000/04/create/browserbugs.htmlをご覧ください。
まさにあなたのタイプ
Macユーザーは、文字が小さいサイトによく遭遇します。目を細め、悪態をつき、そして興味が湧いたらブラウザの設定でフォントサイズを大きくします。おそらく、こうした頭を悩ませるサイトのデザイナーは、MacとPCの解像度の違いを認識していないのでしょう。
Mac OSのデフォルト解像度は72ppi（1インチあたり72ピクセル）で、1ピクセルは1ポイントと等しくなります。つまり、12ポイントの文字の高さは12ピクセル、72ポイントの文字の高さは72ピクセル（1インチ）ということになります。Windowsユーザーは96ppiの解像度からスタートし、Windowsでは12ポイントの文字の高さは16ピクセルになります。
この違いにより、4.0（およびそれ以前の）ブラウザでは、Windows では目立たない文字が Mac では判読できないほど小さく表示されることがよくあります。逆に、Mac では判読できる文字が Windows PC では見づらい文字に見えてしまうこともあります。しかし、Internet Explorer 5 (IE5) の Mac 版では、デフォルト設定が 16 ピクセル、96 ppi になっているため、この問題は発生しません。Netscape も、新しいバージョンの Navigator で同様の対応をとっています。これは、Web ユーザーの問題解決になるだけでなく、Web サイト デザイナーにとっても役立ちます。Mac 版 IE5 と Netscape Navigator 6 で作業内容を確認することで、Windows プラットフォーム上での文字の見え方をより正確に把握できます。
ピクセルベースのスタイルシート
しかし、4.0ブラウザは依然として使用されているため、クロスプラットフォームのサイズ問題は今後もWebを悩ませ続けるでしょう。この問題を回避する方法は2つしかありません。
Zenアプローチ： サイズ設定は避け、カスケーディングスタイルシート（CSS）でフォントファミリーを指定します。CSSの詳細については、https://www.w3.org/style/css/ をご覧いただくか、https://www.alistapart.com/stories/fear にあるチュートリアル「スタイルシートへの恐怖」をお読みください。CSSの基本については、サイドバーの「カスケーディングスタイルシート」をご覧ください。
カスケードスタイルシート
フォントファミリーを指定することで、本文のテキストが各訪問者にとって快適なサイズで表示されるようになります。多くのデザイナーは、印刷物における完全なコントロールに慣れているため、この方法を嫌います。しかし、これは最も互換性が高く、確実な方法です。
ピクセルパーフェクトなアプローチ フォントサイズをどうしても制御しなければならない場合があります。そのような場合は、スタイルシートでピクセルを指定する必要があります。（補足記事「ピクセルベースのスタイルシート」をご覧ください。）ピクセルは、画面解像度、プラットフォーム、ブラウザの種類、バージョンに関わらず、ピクセルです。この手法はNetscape Navigator 3以前では正しく表示されませんが、そのブラウザをまだ使用しているごく一部のユーザーにはデフォルトのフォントが表示されるので、問題ありません。
サイトが適合する場合...
サイトのマスターテンプレートを完成させ、満足げにため息をつき、Windowsユーザーのクライアントにレイアウトの最終承認を待つことを伝えます。数分後、怒りの電話がかかってきます。「会社のスローガンを見るのに、スクロールダウンしないといけないんです！」
何が起こったのでしょうか？Windowsのタスクバーはデフォルトで画面下部に表示されますが、Mac OSでは画面の右側がハードドライブ、保存ファイル、エイリアスのアイコンのために確保されています。クライアントはデスクトップの重要な部分を見やすいようにブラウザウィンドウのサイズを調整していたため、ブラウザウィンドウの奥行きがあなたのものほど深くありませんでした。
モニターサイズだけを考慮してデザインした場合にも、同様の問題が発生します。固定されたWebレイアウトでは、サイトが訪問者の大きなモニターの隅に押し込まれているように見える場合があります。また、小さなモニターでは幅が広すぎて、訪問者が左右にスクロールせざるを得なくなる（あるいは、むしろ離脱してしまう）可能性もあります。
モニターやブラウザのクローム（Web閲覧時に使用するボタンやテキストフィールド） が小さいため 、訪問者によっては600×400ピクセル未満の使用可能領域しか利用できない場合があります。しかし、そのスペースに合わせてデザインすると、1,600×1,200ピクセルといった大型モニターではサイトが見苦しく見える可能性があります。
答えは、Webの流動的な性質を受け入れ、訪問者のOSやウィンドウサイズに合わせてコンテンツがリフローするようにすることです。サイドバー「Liquid Liquid」は、サイトをフローに合わせるためのガイドです。
リキッドアプローチは水平方向の問題には対処できますが、垂直方向はどうでしょうか？訪問者が重要なコンテンツ（ナビゲーションツール、ロゴ、見出しなど）を見るためにスクロールダウンする必要がないようにしたい場合は、垂直方向の最初の380ピクセル以内に配置してください。
ガンマ、ガンマ、ヘイ！
プラットフォームによって標準のガンマ設定は異なります。簡単に言うと、Macのデフォルトのガンマ1.8は、Windowsの各種デフォルト設定よりも明るく見えます。この違いを無視すると、繊細なアースカラーが泥のように見えてしまいます。
クロスプラットフォームのガンマ補正は、Adobe Photoshop 5.5 (Web 画像エディタ ImageReady 2.0 を含む) および Fireworks 2.0 に組み込まれています。
これらのプログラムをお持ちでない場合は、2 つの低価格のシェアウェア アプリと次の手順が役立ちます。
アプリの一つはGammaToggleです。5ドルのシェアウェアコントロールパネル「GammaToggle FKEY」は、https://www.acts.org/roland/thanks/からダウンロードできます。インストールすると、command + Shift + 9キーでMacとPCのガンマ設定を切り替えることができます。
Photoshopの古いバージョンをお使いの場合は、Furbo Filtersのご利用をお勧めします。39ドルのシェアウェアであるFurbo Filters Webmasterパックは、www.furbo-filters.comからダウンロードできます。（情報開示：私はこのアプリケーションの開発に協力しました。）インストールすると、Photoshopの「フィルター」メニューでMacとPCのガンマを切り替えることができます。https://WWW.Furbo-filters.com/: ブラウザプレビュー
Photoshop 5.0 以降を永続的に Windows ガンマ スペースに設定するには (印刷用のデザインも行う場合は推奨されません)、次の手順を実行します。
1. Photoshop を起動します。
2. 「ファイル」→「カラー設定」を選択し、「RGB 設定」を選択します。
3. 表示されるダイアログ ボックスで、RGB ドロップダウン メニューを sRGB に設定します。
4. コントロールパネルに移動し、ColorSync を選択します。
5. 「システム プロファイル」ドロップダウン メニューで、「sRGB プロファイル」を選択します。
 | 私のウェブを彩るWindowsとMacの両方のWebブラウザで正しく表示できることが保証されている色は216色のみです。これらの「Webセーフ」カラーは、NetscapeカラーキューブまたはWebセーフパレットと呼ばれます。 可能な限りWebセーフカラーを使用してください。特に、大きなカラーフィールド、タイポグラフィ、背景には注意が必要です。それ以外の色は、 8ビットモニターでは ディザリング（ドットに分解）され、16ビットシステムではシフト （意図しない色に変化）されます。ディザリングとシフトリングの例については、「見苦しい色」をご覧ください。 FireworksとPhotoshop 5.0以降にはWebセーフパレットが含まれています。お使いの画像エディターにWebセーフパレットが含まれていない場合は、https://www.lynda.com/hex.html からダウンロードしてください。画像をGIFファイルとして保存する際に主要色のずれを防ぐには、32ビットまたは8ビットモードで作業してください。 野獣の中の美女プラットフォームの違いは避けられない事実です。Linuxの台頭、Mac OS Xの登場、そして携帯電話、Palmデバイス、自動車追跡システムへのWebの普及は、最も経験豊富なWebデザイナーでさえも躍起になる理由です。しかし、適切な戦略を立てれば、こうした違いにも対応し、何百万人ものユーザーがアクセス可能なページを作成できます。そして、それこそがWebデザインの真の美しさなのです。 |
Jeffrey Zeldman は Web デザイナー ( https://www.zeldman.com ) であり、Web サイトを作成する人向けのサイトである A List Apart ( https://www.alistapart.com ) の編集者です。
2000年9月70ページ www.macworld.com
