ホームページ制作-TIPS

Webデザイナーの方々のコメントを中心に、Webページを制作する際に考慮すべきTIPSをまとめてみました。筆者独自の見解もありますが、制作に慣れないうちは時折目を通していただくことをおすすめします。他ぺージと一部重複する内容もありますがご容赦ください。(このページの内容は、予告なしに変更されます。) 問い合わせはこちらまで

●増加するWebサイトと品質のアンバランス

ビルダーやオーサリングソフトの発達によって、個人でも容易にWebサイトを制作し開設することができるようになった。サイト数は増え続け、単純なキーワードで検索すると数10ページに及ぶ結果が表示される場合もある。ITの発展は好ましいことではあるが、コンテンツが伴わないサイトや類似サイトが増え、欲しい情報が分散化するのも問題である。たとえば、「defrag」を検索すると、日本語ページは「Google」で7000以上、英語版ではでは約390,000のページが見つかる。いずれ日本も、検索のテクニックだけではなかなか絞り込めない、USAのような状況になるかもしれない。今後、サイトを登録する側、開設する側が、ユーザー側に立った配慮とモラルを実践していくことが重要であろう。

さらに、Webページを制作する場合、Webデザイナー抜きで制作するケースが多く見られる。特殊フォントを多用したワープロで作成したHTML文書を何の恥じらいもなくアップして公開したり、Webセーフカラーにも変換せず十分に圧縮もしていない画像を使用したり、インターネットの世界での基本を理解せず、そして守らない制作者が急増している。このページでは、そのような制作者に警鐘を鳴らすと共に、ユーザー側から見やすいWebサイトの構築をめざす制作者のための原則とテクニックを紹介することをねらいとしている。(インターネットユーザーを対象とした内容に限定する。)
●TIPS1-サイト登録公開編

○情報提供の規模に応じた登録を

サイトに関係の薄いキーワードを付加し混乱させたり、コンテンツが伴わないのに大それたタイトルを付けたり、仲間内だけで使用するサイトなのにメジャーな検索エンジンに登録することは避けよう。インターネットはもともと汎用性のある情報提供が目的である。限定ユーザーのための掲示板や名簿などは、個人情報保護の観点からも検索エンジンに登録すべきではない。逆に、第三者の役に立つ情報であれば詳細なキーワードを付加して、積極的に登録すべきである。

○検索エンジンに応じた登録を

最近は、登録申請時にキーワードを指定できるものはほとんどなくなり、URLを登録すると巡回ロボットが情報を収集してくれるタイプのエンジンが多くなった。しかし、キーワードを「meta」文ではなく、表示されたテキストから抽出するエンジンもある。このような場合は、やってはいけないことなのだが、抽出して欲しいテキストをページ上に背景色で指定するなどしてアクセスアップを狙うサイトもある
。(これを嫌うエンジンもある。)さらにページの階層によっても、ここまでキーワードにする?というほど精密な抽出を行なうものもある。リンクされたページを抽出の対象としたくないなら、「meta」文でロボットの抽出をコントロールするなどの工夫が必要である。(個人情報には特に注意。)各エンジンのこうした特性を理解しないと、検索結果のサマリーに「...Japanese only」や「あなたは...人目の...」などが表示されることになる。「meta」文を無視するロボットは厄介である。

○タイトル文は大胆で目立つように

不安や自信のなさそうな印象を与えるタイトル文は極力避ける。見てもらいたければ、「XXX必見」、「豊富なXXX」など目立つ言葉を並べてみる。何せクリックしてもらわなければカウントは増えないのである。ただし、Yahoo などの厳しいエンジンは、派手なコメントを嫌い登録されないかもしれないので、懲りずにまたトライしてください。さらに、タイトル文の長さなどもそれぞれの検索エンジンで異なるので注意する。まれに、「無題ドキュメント」のままのページが見られるが言語道断!

○メタ文を活用する

メタ・キーワード文やメタ・コンテンツ文は、公開前に必ず設定し、定期的に見直し更新する。これを怠るとアクセスアップの可能性はまずない。多くの開設者が何年も気づかないでいるので、SEO対策として、とにかく更新して欲しい。

○完成してから公開せよ

登録に時間がかかるのは理解できるが、工事中の段階で公開したり、検索エンジンに登録申請を行なうべきではない。見るものには未完成の印象を与えるし、検索エンジンの登録も却下されたり、運良く登録されても、キーワードや紹介文に「工事中」が表示されたり、工事中のページのキーワードが欠落するなど、後の修正に手間と時間がかかるかもしれない。

○商標登録と同タイトルの有無を確認する

商標登録されているタイトルを無断で使用し、公開してから気がつくことがある。相手からクレームされた場合は、こちらのタイトルを変更することになるかもしれない。商標登録されていなくても、他に同じタイトルのサイトがあるかもしれないので、制作段階で検索エンジンでサーチするなどしてあらかじめ確認しておこう。検索結果に同じタイトルが突然複数表示されたら、最初に登録した相手も驚くだろうし、こちらも後ろめたい気がするはずである。商標をめぐる法的な闘争にならないよう注意して欲しい。

○文字コードを統一する

各ページのキャラクタセットが、すべて「日本語シフト-JIS」なら問題ないが、ブログが「EUC」だったり、異なるキャラクタセットのページが混在すると、検索の対象ページからドロップされるサーチエンジンもあるようだ。登録前に確認しよう。

○半角カタカナは絶対に使うな

ウェブページに半角カタカナを使用すると、それらの文字は、文字化けの可能性があるだけでなく、サーチエンジンの対象にならない可能性が高い。使用した半角カタカナで検索してみて欲しい。これは、結果的にサーチエンジンからのアクセス数を伸ばせず、SEO対策としてもマイナスで、ビジネスの伸びを止めることになる。検索の対象となる全角カタカナを使用してください。

○タグのクリーンアップを

通常、公開するとソースコードまで丸見えになる。非効率な、<P></P>、<font></font>の連続や重複タグやネスティング等、ビルダーのクリーンアップ機能やソースエディタを使って、できるだけきれいにしてから、プット(put)しよう。制作者にとっても、編集の際に、分かりやすくなるはずである。

○リンクの扱いに注意せよ

リンクを貼る場合は、オーナー側の注意事項を確認の上、必要に応じて許可を得る。リンクフリーと記載されていても「メールでご一報ください。」、「トップページにお願いします。」、「フレームお断り!」といった制限のあるサイトが多い。また、他のサイトからリンクされる程、アクセスアップだけでなく一部のメジャーな検索エンジンでは検索順位が向上する可能性が高くなる。小さなサイトでもリンクを貼ってもらう努力を惜しむべきではない。
 
●TIPS2-基本デザイン編

○ページの階層を深くしない

階層(ページの親子関係)は極力浅くするべきである。当サイトはページ内リンクを含めても最深3階層で構成されているが、特にコンテンツの量が豊富なサイトほど浅くするべきである。理由は、探しやすい、目的のページに辿り着きやすい、アクセス時間も短くて済むからである。何階層まで許容できるかは、回線速度を基本とするユーザー環境に依存する。少なくとも、使用頻度の高い情報は、3ステップ以内の操作で表示されるようにデザインしたいところである。これより深くするなら、補助機能として「サイト内検索」やサイト全体のマップを提供すべきだろう。

○トップページに7つ以上のボタン(メニュー)を置かない

メニューが多過ぎると、ユーザーはと惑うだけでなく、使いにくいという印象を受ける。どうしても必要なら、ユーザーにとって主要な(頻繁に使われる)メニューとそれ以外のもの(たとえば会社概要等)にくくり、配置しなおしてみるとよい。たとえば、あまり使われないメニューは、フッター近くの目立たないところにテキストで配置する等の差別化をすることにより、優先度の高いメインメニューをより強調することができる。

○ワープロ的な制作は止める

Webデザインは、一般のレイアウト・デザインよりも、さらにさまざまな制約を考慮しなければならない。たとえば、横サイズはモニターの領域に依存するし、縦サイズはいくらでも伸ばせる。ワープロのような詳細な書式設定もできない。不確定要素と曖昧さの世界であり、すべてのユーザーから高い評価を受けるのは窮めて難しい。いかに多くのユーザーに受け入れられるサイトを作れるか、デザイナーとユーザー、両方の視点でページのコンテンツやレイアウトを十分に検討しなければならない。その意味では、制作者のデザイン能力と知識が厳しく問われる世界でもある。コンテンツもデザインも不十分なサイトについては、誰も何も進言してはくれない。ただ、アクセスが増えないだけである。

○グリッドシステムを採用する

グリッドの法則を採用し、これをCSSやテーブルで定義することにより、統一感のあるページを作成できる。これは、分担して作成する場合などに効率的であり、あとから画像配置を容易に換えたり、ロゴ・メニューの位置を統一できるなどメリットが大きい。CSSで指定する場合は、CSSを無効にした際のレイアウトも考慮してデザインしよう。

○ユーザー環境に応じた配慮を

回線速度、モニターの種類、画面の大きさ、ブラウザの種類、フォントの大きさ、サウンドのオン・オフなど、ユーザーの環境はWeb側からは見え難い。それなりの配慮をしよう。たとえば、フレームを使うならフレームをサポートしないブラウザのユーザーが「非フレーム」を選択できるようにデザインする。特に、重いサウンドやビデオなどのオプションは、必ずユーザー側からオン・オフを選択できるように設計して欲しい。また、クッキーを使用するプログラムは、クッキーを無効にしているブラウザには使えない。

○ファイル名に長い日本語は使わない

日本語のドメイン名が話題になっているが、ファイル名に漢字(2バイト文字)は厳禁、ドメインに日本語(漢字)を使用することもできれば避けたい。これらは、FTPやサーバーの種類によりエラーになる可能性があり、日本語をサポートしていないパソコンでは当然文字化けする。さらに、全角・半角の混合も避けたほうが良い。また、インターネットでは大文字・小文字の違いも認識するが、基本は小文字である。URLに秩序無く大文字を使用するのも間違いの元である。(ex http://homepage5.com/~test/PeRoPeRo公式ウェブサイト.html)ファイル名は、半角英数字+許されるキャラクタで指定する。スペースも厳禁。


○フレームは無理に使わない

フレームを採用する際にはさまざまな考慮事項がある。まず、一度に複数のページを読み込むため表示に時間がかかリ、低速回線ユーザーには大変鬱陶しい。狭い画面では情報量が限られスクロールが発生しやすく見にくい。フレームに対応していないブラウザもあり、非フレームのページも制作しなければならない、など。特に、ページの仕様が完全に固まっておらず、新たな階層が発生する可能性のある場合などは要注意である。文書レイアウトと異なり、変更が難しいのである。このため、フレームを採用したサイト管理者の多くがリニューアルに苦労している。言い換えれば、仕様・階層が完全に決まっており、テキスト中心の軽いページで構成され、情報量も変動しない場合は、フレームを採用すれば統一感がでるしコンテンツも分かりやすい。
なお、通常、それぞれのフレームセット・ページもばらばらに検索対象となるため、検索者が混乱する場合が多い。

○フレームで切り替わるページのURLを表示する

「お気に入り」に追加してもトップページのURLしか保存できないのは、階層の深いサイトでは大変困ることである。フレームを使用したサイトでは、リンク先にジャンプした後、新たなフレームセットを読み込むことで、異なるURLを表示することができる。(target="_top"を指定する。)ただし、読み込みに時間がかかり、htmlファイルの数も増える。

○フレーム内に他のサイトを表示しない

フレームを使用したサイトで、他のリンク先をクリックした際に、フレーム内にそのサイトを表示してはならない。訪問者は、あたかもリンク先ページがフレームサイト内にあるかのような錯覚を受けるし、リンク先の制作者はいやな気分になるはずである。(target="_top"またはtarget="_blank"を使うのが望ましい。)自分のページを他のサイトのフレーム内に表示されたくないなら、Javaスクリプトで制御できる。

○ナビゲーションのコンテンツを全部表示する。

通常、左フレームにナビゲーションメニューを表示する構成が多いが、途中で切れてしまい、スクローリングバーも表示されないページがある。(scrolling="NO")高解像度で制作しているデザイナーが低解像度のモニターを考慮しない場合にこうした間違いを生む。ナビゲーションフレームの全体を小さくするとか、「scroll="AUTO"」にして、どの解像度でも表示されるように配慮しよう。

○全画面表示で左右スクロールをさせない

パソコンの標準画面は横長であるが、多くのWebページは縦長である。ページの最後まで読んで他のページに行きたいとき、そこにリンクがないとページの頭までスクロールしなければならない。フッター付近にも他ページへのリンクか「上へ」ボタンぐらいはセットしておきたい。一般に、800x600ドットのモニター画面でブラウザを全画面表示した際に、横スクロールバーが表示されてはならない。それぞれのブラウザのウインドウには余白があり、制作者はこれを考慮して横幅を決めなければならない。

○ウインドウを開き過ぎない

ブラウザのウインドウを何個も開くと、すぐにリソース不足を招くし、ユーザーにとっては閉じるのが面倒になる。また、モバイルなどではマルチウインドウに対応しないブラウザもある。マルチウインドウでの比較などを目的とする場合、そのページを常に表示しておかなければならない場合などを除いて、「_blank」はできるだけ使わないように設計するのが好ましい。

○ファイルの指定には相対パスを使う

プロバイダの都合や、他サイトのファイルを表示するなどの場合を除いて、画像ファイルやHTMLファイルの表示の指定は相対パス(ex ../image/gazou.jpg)で行なう。確かに、URL(ex http://xxx.xxx/~xxxx/image/gazou.jpg)やフルパス(ex homepage/image/gazou.jpg)で指定しておくとHTML文書の保存場所の変更が発生した場合など、指定を変更せずに済むかもしれない。だが、表示までの待ち時間は圧倒的に長くなる。一般のブラウザは、サーバーに画像ファイルをリクエストした時、相対パスで指定されたファイルは、サイト内に保存されているとみなされまとめて読み込もうとする。しかし、URLで指定されたファイルは、その都度そのサイトに接続しなおして読み込むことになる。つまり、そのページに指定された「http:」の数だけ接続しなおして読み込むため、何倍もの時間がかかってしまう。(ブラウザの能力に依存する。)

○特殊なオブジェクトはできるだけ使用しない

プラグインのインストールを必要とするオブジェクトは、必要性がなければ、使用しないほうが無難である。FLASH 等のオブジェクトを使用するのは、それらの効果が明らかに期待されている場合に留めるべきである。非力なパソコンのユーザーにわざわざ重いプラグインのダウンロードを強要するサイトはリピーターを増やせないかもしれない。

最近は、必要のない動く装飾品を多用するページが増えてきた。JAVA や FLASH の教則本のサンプルから抜き出してきたような、一度見たらもうけっこう、といった印象のデコレーションが多い。コンテンツがまるで不足しているのに、ホームページだけ動きまくる素材で一杯。本来 JAVA はセキュリティ機構やネットワーク関連の機能が充実しているネットワーク言語であり、Webページの装飾を目的としたものではない。JAVAのコードは、JAVA仮想マシンによって変換され実行されるため表示が遅くなる欠点がある。JAVA の読み込みのために、肝心のコンテンツがなかなか表示されないのではユーザーは鬱陶しくてかなわない。JAVA スクリプトやアプレットの使い方を誤らないように注意しよう。プラグインも同様である。ポピュラーなものを最小限度でまかなうようにデザインするべきである。参考までに、動き続ける JAVA スクリプトを挿入したページを開くと、CPU 使用率が数%から一気に100%近くにまで上昇することもある。同時稼働する他のアプリケーションへの影響も考慮しよう。

○オープニングムービーはスキップ可能にする

Flashなどのオープニングムービーをトップページに採用するサイトが多い。その都度異なる意味のあるコンテンツが見れるなら別だが、2度目からは回避したいと考えるのが普通である。1分以上経過しないとメニューが表示されないなど厳禁である。ムービーを採用するなら、スキップ用のボタン等を必ず付けて欲しい。

○BGMのオンオフを可能にする

ページのイメージに合致したBGMは効果的であるが、突然音がでると困る場合もある。音楽が流れるページを制作するなら、BGMを流す前に警告し、必ずスイッチをつける。トップページで突然BGMを流すことは避けよう。(<embed>タグはブラウザの種類に依存しないが、<bgsound>はIEのBGM専用なので使わない方がよい。)

○背景と文字のコントラストを考慮する

背景色と文字色の組み合わせが悪いために、大変読み難いサイトがある。可読性を要求される(テキストでコンテンツを表示する)サイトでは、この配色の設定がアクセスカウントに大きく影響を与える。背景色と文字色のコントラストや色彩の対比で、訪問者の読む意欲は変わってくる。確実に読ませたいなら、背景色と文字色のコントラストを高く明確にする。淡い背景に淡い文字色は見難いだけでなく、見る意欲を減退させる。淡い背景にコントラストがほどほどの文字は、始めてみた印象は強烈ではないが、長時間読むには眼にやさしく感じられる。

○テキストと背景の配色に配慮する

高速回線を使用する制作者は気づかないかも知れないが、低速でアクセスした場合に、まずテキストが表示されるのが一般的である。しかし、たとえば、背景を指定なし、背景画像を黒系、テキストを白、に指定すると、背景画像が表示されるまでの間、結局白の背景に白文字となり実質テキストは見えない。これがイライラを生む。またリンク色やVリンクの色も背景や全体でのバランスを考慮して配色しないと、読み難い、色のバランスが悪い、という印象を与えてしまう。読み込みのどのタイミングでも、テキストがはっきりと読めるように配色しなければならない。

○背景色は必ず指定する

ブラウザによりデフォルトの背景色は異なる。MacのNNは、指定しないグレーで表示されるため、背景が白に合わせた画像を使用すると思い通りの効果が得られない。Windowsでは、IEもNNもOSの配色設定に準拠しデフォルトは白である。の背景が白のページを作成する場合には、<body>タグに「bgcolor="#ffffff"」を必ず指定する。

○個人情報はサーバーに保存しない

一般的に、公開掲示板に投稿する際、個人情報を含めるかどうかは、投稿者が決めることであり、サイト側はその個人情報が原因で発生するトラブルに対する責任を負う必要はない。しかし、アンケート、ショッピング等で収集した個人情報が、盗用されたり他の目的で使用されたなら、それはサイト管理者の責任である。個人情報はセキュリティ機能付きのサーバーに保存するのが当然であるが、それができないならメールデコードなどを利用しサーバー側に保存しない様に配慮するべきである。何せ、ブラウザのURLにフォルダ名を追加しただけで保存ファイルのインデックスを表示してしまうサイトが数多く存在している。依頼主が個人情報の保護に関して安易な考えを持っているなら、制作者はその重要性を理解させ、より安全な仕様に変更するよう働きかけるべきである。

○インデックスページ を必ず作成する

フレームを使用した企業の Web ページに見られることがあるが、ルートディレクトリに「index.htm(l)」というファイルがない場合、URL にディレクトリを指定するとファイル一覧が丸見えになってしまうことがある。各ページのデザインやコンテンツには気を配るが、ディレクトリ(フォルダ)やファイルのパーミッションについてはチェックが甘くなりがちである。FTP 等で必ず適正なパーミッションを設定し情報漏洩を防御しなければならない。特に、顧客データや販売データなどの企業機密情報を含むファイルを保存しているディレクトリについては、ディレクトリにもインデックスファイルを配置するなど、二重三重に配慮する必要がある。

○無駄なトラフィックを発生させない

たとえば、画像ファイルなどの重いパーツを異なるファイル名で複数作成しリンクすると、当然サイト内でも無駄なトラフィックが発生する。パーツを重複して持つことは特別な理由がない限り極力避けよう。また、HTML のタグの重複も無駄なトラフィックを発生させる原因になる。スタイルシートで定義できるものは定義し、高機能ビルダーがあれば重複タグの削除機能を使用するなどして、タグの実行の効率化を図ろう。

○プリントへの対応

印刷させたいページは、A4サイズに収まるようデザインする。横幅を固定する場合は、印刷可能領域とブラウザの余白の違いに注意し、右端が切れないように、必ずブラウザでプレビューする。また、Web用に最適化された画像を表示サイズで印刷すると当然粗なる。あらかじめ、印刷用の画像を縮小表示しておく必要がある。画像容量が増えるため、表示と印刷品質のバランスを検討しておこう。

○標準フォントを使う

それぞれのOSで、システム標準フォントは異なる。Windows では、「MS P ゴシック」、「MS P 明朝」、Mac OS では、「Osaka」、「平成角ゴシック」、「平成明朝」などである。ターゲットユーザーのパソコンに組み込まれているかどうか定かでない特殊フォントの使用は極力避けるべきである。指定したフォントが組み込まれていないパソコンでは、標準フォントに置き換えられて表示されるため、レイアウトずれを起こす可能性が高く、逆効果の可能性が高い。

○機種依存文字は使わない

○に数字などの特殊文字の文字の多くは、OSや機種によって見え方が異なる。Windowsの特殊文字、Macの特殊文字、メーカーが決めた特殊文字など、環境により文字コードが異なる機種依存文字を使用してはならない。どうしても使用しなければならない場合は、その文字だけ画像にするなどの工夫をする必要がある。

○クッキーを使わない

クッキーを使用して会員ページにジャンプするサイトは多いが、いつもと異なるパソコンやクッキーを受け取らない設定のブラウザからアクセスできないサイトがある。IDとパスワードで保護するページを作成する場合は、クッキーを有効にしていないユーザーでも、問題なくアクセスできる仕様にする。ほとんどのユーザーは、クッキーが何かも知らないはずである。クッキーを使用するなら、その説明を表示するなどの配慮も必要である。
●TIPS3-制作編
 
○ビルダーよりテキストエディタを使う

ビルダーは HTML を理解していないビギナーには好評である。しかし、すべての HTML タグの機能をカバーしているわけではなく、便利ではあるが欠陥もある。画像の切り貼りや表の挿入などは大変容易にできるが、詳細なオプションの指定や DHTML コードの生成などには向かない。複雑なステートメントには対処できないと考えておこう。カバーできる範囲は、ビルダーの種類によっても異なる。制作者は、いずれかの時点で、ソースコードを開き直接編集することを余儀なくされるだろう。まず、HTML の基本を習得した上で、ビルダーを有効に使って欲しい。

○HTML のバージョンを明記する

そのページで使用している HTML のバージョンをコメント行で明記しておく。この情報を使用することはまず無いと思うが、ブラウザのレベルによっては HTML の対応範囲が異なるため、何かの表示エラーが発生した際の問題判別の一助になるかもしれない。通常はページの1行目に次の様に記述しておく。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

○文字コードセットを指定する

日本語のWebページで使用できる文字コード(漢字コード)は、SJIS、EUC、JIS(ISO-2022-JP)の3つである。通常の Windows ビルダーは、初期設定値が「SJIS」類になっているはずである。間違えて指定しても、ブラウザが自動認識して正しいコードで表示してくれるはずなのだが、特殊な文字がページの最初の方に含まれていると、認識を誤り文字化けが発生することがある。このため、特別な理由がない限り、次のような「meta」文を記述しておく。
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">(SJIS の例)

○ホームページ(トップページ)は軽くする

ホームページ(index.html)は、最初に表示されサイトの顔となるページである。そのサイトの印象や目的が明確に伝わるように作るべきである。そのためには、絶対に重くしないことである。ホームページが「重い」という印象を与えると、他のページが軽くても、ユーザーは、「リピートしたくない」と感じるものである。また、ホームページにプラグインの必要な大きなファイルを使用することも避けよう。 気持ちよく再訪問してもらいアクセスを向上させるためには是非守って欲しい。

○画像は必ず大きさと代替テキストを指定する

「img」タグには、必ず 「width」、「height」を指定しないと計算処理のため表示が大変遅くなる。これらを指定することにより、あらかじめ画像の大きさが決まり、全体の配置も決まるので、ブラウザは画像の読み込みを待たずに、それ以降のテキストも速く表示することができる。また、画像の表示を無効にしているユーザーやテキスト表示のみのブラウザを使用しているユーザーのために、特別な理由がない限り、代替テキスト(alt)も必ず指定しておこう。

○画像は必ず Web 用に最適化する

Web で使用する画像処理のポイントは、画質と減量のバランスを適正にすることである。まず、Web で許される(ブラウザで表現できる)色数に変換し、可能な限り減色する。そして本来の目的にかなう、ぎりぎりのところまで圧縮する。もちろん、圧縮しにくい画像や鮮明さが命の画像もあるだろうから、それに応じた許容範囲を決めるということである。よく単純なタイトルロゴを巨大な容量のままアップし、顰蹙をかっているサイトがある。このような場合、たとえば、16色に減色すれば数百バイトで済むかもしれない。これが当然である。画像の展示が目的のサイトならともかく、このような基本的なエラーは絶対にしてはならない。(サイトの評判にもアクセスカウントにも影響する。)さらに、優秀なフォトレタッチソフトを使用すれば、あらかじめ「アンチエイリアス」を無効にしたり、フィルターをかけることで、画像の鮮明さを擬似的に向上させることもできる。まず、大きな画像は、GIFとJPEGで減量・比較し、最適化したものを使用すべきであり、それでも重ければ、分轄表示も検討してみるとよい。

○重いロールオーバー画像の使い過ぎを避ける

JavaScript を使用し、ナビゲーションメニューにカーソルを合わせると文字や背景の色が変わるロールオーバー効果が得られる。これは、2種類の画像を切り替えるのだが、メニューが多く、凝れば凝るほど読み込む画像が増え、ページを重くする。たとえば、選択したメニューの前に、共通マークを表示させるだけにすれば、読み込む画像は1種類で済むため表示も速いし、制作時間も短い。ユーザー側では、選択しているメニューが明確に把握できる。

○画像のサイズ縮小は避ける

「大」、「小」(サムネイル)の2つのサイズの画像が必要なのに、「大」で「小」を兼ねようとするのはご法度である。というのは、ブラウザ上で大きな画像を縮小表示する場合と、サムネイル画像をそのままのサイズで表示する場合とでは、表示される画像のサイズは同じでも、表示されるまでの時間が全く異なる。読み込むファイル容量を考えれば当たり前のことである。リンク先の大きな画像をサムネイルとしてリンクページに表示することなどもいけない。基本は、読み込む時間を短くすることである。きちんと表示サイズに合わせてサムネイルを作ろう。

○リンクのない立体画像や下線付テキストは使用しない

いかにもリンクが貼られているような印象を与える、ボタン系の画像、バナーのような立体画像は使用しない。また、下線付のテキストも、ワープロの世界では「強調」を意味するが、ネットでは一般に「リンク」を意味し、ユーザーは無意識にそこをクリックしようとする。こうした、誤解を招く表現は可能な限り避けなければならない。

○リンクは画像とテキストに貼る

リンクを貼りたい画像とテキストがある場合、面倒がらずに両方にリンクを貼ろう。画像だけだとネットワークエラーにより画像が表示されなかった場合など、ユーザーは困惑する。この場合はテキストにリンクが貼ってあれば対処できる。バナーをクリックする習慣がついているユーザーは「リンクは画像に貼られている」という先入観念があり、迷わず画像をクリックするはずである。両方にリンクを張れば解決できる。なお、テキストリンクの下線は、リンクがあることの目安であるが、あまりに下線が多いと読み難くなる。このような場合は、スタイルシートで「下線表示なし」を標準にすることができる。ただし、部分的な使い分けは混乱の元になるので、サイト全体での標準をどちらにするかをまず決定しよう。

○サイト内リンクはページの頭に配置する

ユーザーが行ったり来たりするページのリンクは、最も速く表示される部分(コンテンツの画像などが表示される前に表示される部分)、すなわちヘッダー部分に仕込むのが良い。「このページじゃなかった」と感じた時、そのページの表示が完了するまで待たずに、すぐ他のページに飛べるのは、低速回線ユーザーにとっては大変ありがたい。

○派手な素材は使い過ぎない

数 KB 程度のバナーでも使い過ぎるとページを重くする。それぞれの画像サイズを最適な大きさまで修整しよう。また、サイズが小さくても、多色かつ複雑な模様を使用すると圧縮効率が低下し、意外に重いファイルになってしまうこともある。ロゴやバナーなど小さな部品は、できるだけシンプルな方が効果的であり容量も少なくて済む。

○複数のブラウザで確認する

現在のビルダーソフトは、ブラウザと同様に、HTMLの基本タグやオプションをすべてサポートしているわけではない。完成度 50%程度と考えておこう。タグを閉じるのを忘れたり、サポートされていないタグオプションを使ったり、複雑な表を挿入した場合など、エラーがあっても分からないこともある。従って、必ず、複数のブラウザで確認する必要がある。パソコンユーザーを対象とするWebページなら、少なくともインターネットエクスプローラとネットスケープコミュニケータの最新版で確認したい。なぜこんなに違うの?と驚くページも必ずあるはずである。テキストの多いページは、フォントサイズの設定によってもレイアウトが変わってしまうことが多い。ひとつのブラウザに依存した作り方をしてはならないし、そのブラウザでしか表現できないタグは極力使ってはならない。(Win+IE、Win+NN、Mac+IE、Mac+NN、Win+液晶、Mac+液晶など、制作環境と異なる環境でテストする。)

○低速回線環境で確認する

おそらく、制作者の開発環境は、ISDN,ADSL,LAN環境が多いであろう。反して、日本のユーザーの半数はまだ低速アナログ回線を使用しているはずである。少なくとも、56kモデム環境でのテストは必ず行なってください。特にメディアの再生を行なうページや画像の多いページなどは、表示までの時間を計測し、許容範囲を越えているなら再度減量の可能性を検討して欲しい。アナログモデム環境がどうしても構築できないなら、表示速度を予測して表示してくれるビルダーやユーティリティを使ってシュミレーションしてみるべきである。

○色と明るさを信用しない

自分のモニターで見える色彩や明るさを絶対的なものと考えてはならない。同じ Windows 系のモニターでも機種により驚くほど色彩の違いがある。Windows と Macでは明るさがまるで違う。特に写真画像の見え方などは極端で、Windows パソコンでわざわざ明るく修正した画像が、Mac のモニターでは白っぽく色が飛んでしまうことがある。Windows用のフォトレタッチソフトの中には、Mac用モニターでの明るさを再現してくれる機能を持つものがある。Mac 環境を持たない Web 制作者は、少なくともこうしたソフトを利用して確認して欲しい。

○ドット単位の微調整をするなら

ほんの1ミリ程度下げたい、とか半文字文広げたい、などの微調整を行ないたいことがある。最近のビルダーでは、ワープロほど精度の高い調整はできない。(HTMLがそこまで成長していない。)このような場合は、空白1文字を打ち込んでフォントの大きさを絶対指定したり、またはダミーの画像ファイル(たとえば1ドットの透過ファイル)を準備し、それを挿入して必要な大きさまで拡大する。こうすれば読み込みの負荷も気にせずデザインできる。

○表を正しく使う

Web ページをレイアウトする際に、テーブル(表)は不可欠な部品である。しかし、使い過ぎはパフォーマンスを低下させるし、ブラウザによっては表示の差異も著しい。特に、空のセルがあると、メジャーなブラウザでもセル枠が表示されなかったり、指定したサイズと異なって表示されたりすることもある。元々 HTML で表を記述すること自体が視覚上分かり難い。枠線を表示したい空のセル内には、「1ドットの画像」または「1文字(スペース)」を入力しておけばよい。また、複雑な表や表のネスティングは極力避けよう。(ブラウザによって見え方が異なる場合が多い。)

○リンクされたら確認する

リンクまたは相互リンクの要望があると、自分のサイトをリンクしてくれるのはありがたいので、通常無条件にOKしてしまう。必ず、一度相手のサイトを訪問し、正しくリンクされているか、適切な紹介文が記載されているか確認しよう。紹介文は、自分のサイトが第三者からどのように見られているかを知るための貴重な情報でもある。また、リンク用のバナーも作成しておき使用を促がしたい。(定期的に「逆リンク」検索サイトで確認しよう。)

○自動リフレッシュの注意

サイトの引越しを行なうページを作成する場合、一定時間待ったらそのURLへ飛ぶために、「meta」タグを使って自動リフレッシュを指定するのが一般的である。リフレッシュは引越し以外にも宣伝ページやタイトルページなどによく使われる。ところが、このリフレッシュ機能に対応していないブラウザが意外に多い。このような場合、手動で宛先をクリックし移動するようにデザインする必要がある。この配慮を怠ると、ユーザーは先へ進めない。

○ファイルをダウンロードさせる際の注意

ダウンロードさせるファイルは容量を明記、画像はサイズ(ex 640x480)も明記、複数あれば圧縮ファイル(.lzh,.zipなど)も準備する。ダウンロード後の処理が複雑なら、Webページに手順を記載するか、Readmeファイルを作成して共にダウンロードさせる。また、ファイルの再生にプラグインが必要な場合は、そのプラグインの入手方法を表示する。通常、ファイルの近くにダウンロードサイトへのリンクを作成しておく。
 
●TIPS4-その他

○問い合せ先メール・アドレスを必ず明記する。メールソフトを起動するか、メールアドレスを知られたくない場合はブラウザでメールできるようにメールデコード機能を追加する。(必要ならソース非表示とする。)

○複製・転用、著作権、免責事項について記載する。少なくとも、リンク・フリー、内容の無断掲載禁止などを明示する。

○使用する部品、素材については、著作権・使用権・制限事項を確認しておく。

○更新したら、どこが新しいかすぐにわかるように「New」、「Update」などのマークを表示する。(履歴も更新する。)