ホームページ作成・CGI_________

ホームページ制作時のポイント

自由な発想が売りのホームページですが、ある程度の決まりごと（お約束事）もあります。ホームページ制作時のポイントとして参考までに何点か挙げておきます。

1．作ろうとするホームページは見て楽しむページなのか（画像、デザイン等）、コンテンツ（中身、内容）で勝負するのかを明確にしておくこと。

デザインで勝負するなら当然JavaやFlash、アニメーションGIF等を多用することになり、その結果いわゆる重いページになります。重くてもいいから見に行きたいと思えるよう、とことんやりましょう。逆にコンテンツで勝負するなら無用な音楽や画像をトップページに置くべきではありません。あるデータでは、環境にもよりますが、通常のアナログモデム回線で10秒以内に開くページでないと閲覧者は「戻る」ボタンで帰ってしまうケースが多いそうです。トップページのファイルサイズは10KB程度に収めたいところです。

2．閲覧者全ての人がある程度正しく閲覧できる表現方法にしましょう。

閲覧者は必ずしもあなたと同じ環境（ブラウザやOS）とは限りません。特に古いバージョンのブラウザではあなたの作成したホームページは正しく表現されていないかも知れません。（こちらにブラウザ、OS別の参考データがあります）
正しく表示されない可能性のあるものとして例を挙げると、

• JavaScript、Applet
• 装飾フォント（HGP創英角ホップ体など）
• 機種依存文字
• 半角カタカナ
• 画像・アニメーション

などがあります。筆者はホームページ制作の際にはInternet ExplorerとMozillaのどちらで閲覧してもほぼ同じようなレイアウトで表現されるようにテストを行ってからアップロードしているくらいです。それぞれについての対策を行うには以下の方法があります。

JavaScript、Applet

JavaScriptはもともとはNetscape Navigatorのために作られたスクリプト言語のため、必ずしもIE（Internet Explorer）でも正しく表示されるとは限りません。そこで、それをサポートしていないブラウザ、または機能をオフにしているブラウザのために

とNOSCRIPTタグを入れておきましょう。またAppletについては

というふうに<applet>タグと</applet>の中に代替文字を入れておきましょう。JavaScriptを使用する場合は他にも注意が必要です。例えばリンクをJavaScriptで飛ばすような設定にしていた場合、当然オフにしていれば移動できないといったことになります。そういった場合は通常のリンクを設けるなど、代替の手段を用意しておきましょう。

装飾フォント（HGP創英角ホップ体など）

この装飾フォントは非常に見栄えもよく簡単に利用できますが、例えばIE5の環境の人が装飾フォントを使って作成したホームページをIE4環境の人が閲覧すると正しく表現されません。従って、装飾フォントは使用するべきではありません。どうしても標準フォント以外を使いたい場合はスタイルシートを利用し、以下のように指定します。

body { font-family: verdana,arial,helvetica,sans-serif; }

この場合、指定したフォントの先頭から閲覧者の環境に応じたフォントを適切に表示し、どうしても対応不可能な場合は最後の手段として標準フォントである（どのパソコンにも必ず入っている）sans-serifで表示してくれます。

機種依存文字、半角カタカナ

機種依存文字（マルの中に文字がある、とかローマ数字）、半角カタカナは絶対に使ってはいけません。これに対する対策はありません。

画像・アニメーション

閲覧者の中には、より高速にホームページ閲覧をするため画像やアニメーションを表示しないようブラウザで設定している人もいます。画像を取得するHTMLタグには<img src="*****" width="**" height="**" alt="画像の名前等">とALT属性を入れることにより表示されなかったときの代替文字となります。IMGで画像を取得した際には必ずALT属性を入れるようにしてください。また、画像の大きさの指定も行うようにしてください。WIDTH、HEIGHTそれぞれの値を指定することにより、より速く画像が表示されるようになります。

　という具合に×となってもそれが何の画像であったかが閲覧者にある程度わかります。

3．当たり前のことかも知れませんが、背景が白系のときには文字は黒系、またその逆も然りです。特に背景に画像を使用している場合、その画像が表示されなかったときのことも考えて色指定をしましょう。

4．リンクが切れていないか、必ずチェックをしてからUPしましょう。

意外と多いのがリンク切れです。期待してリンクページを指定したのに、そのページが出てこないと非常にがっかりします。ホームページが完成したら、ローカルでリンクが繋がっているかをテストする癖をつけましょう。
またリンクをURLで指定する際に犯しやすいミスとして、

例えばこのページのトップページを指定するのに

http://www5.plala.or.jp/vaio0630

http://www5.plala.or.jp/vaio0630/

上の2つは、一見同じように見えますが、正しいのは下です。vaio0630というディレクトリの中のインデックスファイルを検索するのに、上の方法だとブラウザはまずwww5.plala.or.jpディレクトリの中を検索し、次にvaio0630ディレクトリを検索し、それからその中を検索します。下の指定方法だと直接www5.plala.or.jp/vaio0630/ディレクトリの検索に入るため、時間の節約になります。（実際の表示時間も速いです）

リンクをURLで指定する際には必ずそのファイル名を指定する、また、ディレクトリを指定する際には/（スラッシュ）で終えるのを忘れないことです。

5．最悪の条件下でのテストも行ってみましょう。

閲覧者にはさまざまな条件が付く場合があります。上記でも述べたように、古いブラウザを使っているためスタイルシートがサポートされていない、表示速度アップのため画像を全く表示しない設定にしている、JavaScriptをOFFにしている等。そこで、少なくともこの3つの条件下でのテストも行い、ある程度「まともに表示される」ページであることを確認しておきましょう。最悪の条件下でも「まともに表示される」ページ作りのための手段がW3CのウェブContent Accessibility Guidelines 1.0です。

このガイドラインは、どんな表示手段（ブラウザ、携帯電話等閲覧方法）、環境（騒音の中での閲覧、色彩欠損の方の閲覧等）においても、これに従えば、 すべての利用者がウェブ内容を入手できるというものです。また、これらの指針に従えば、ウェブ上の情報を素早く見つけ出すこともできます。（と、主張しています。）この指針の原則上の目標は、アクセス性を促進することである、とも主張しています。

このガイドラインはチェックシート式になっており、各チェックポイントにはアクセス性に及ぼす影響力に基づいて1〜3までの優先レベルがあり、各々について簡単にまとめると以下のようになっています。

優先レベル1

1．イメージマップ領域、アニメーション、アプレット、及び、標題音楽のオブジェクト、フレーム、スクリプト、イメージ、ビデオのオーディオトラック等、全ての非テキストエレメントにはそれが表現されなかったときのために相当のテキストを提供しておかなければならない。

2．色によって運ばれた情報全てが色無しでも同じく利用可能であるということが必要である。

3．スタイルシートが使用できない環境で読まれたとしても表現可能な状態であるページ作りをすべきである。

4．サイトの内容に適した最も明瞭で、最もシンプルな言語を用いること。

5．可能な限りサーバーサイドイメージマップの代わりにクライアントサイドイメージマップを使用すべきである。

6．フレーム識別、及び、ナビゲーションを促進するために、各フレームには表題を付ける。

7．テーブルをデーター表として利用する際には、行と列に見出しを付ける。

8．上記に沿えるよう努力したにも関わらず実現不可能なら、テキストだけの代替ページを作成しておいて、そこにリンクできるようにしておくべきである。

優先レベル2

1．色彩欠損の人が閲覧したり、もしくは閲覧者が仮に白黒画面で観たときにも閲覧可能なように、前景色、及び、背景色の組み合わせが十分なコントラストを提供できるようにすべきである。

2．やたらと画像を使うべきではない。適切な表現が存在するときにはむしろイメージよりそちらを使用すべきだ。

3．レイアウト、及び、プレゼンテーションをコントロールするためにスタイルシートを使うべきである。

4．閲覧者に通知することなく現在のウィンドウを変えない。また、別窓を出したり、自動的にリフレッシュすべきではない。

5．やたらと情報量の多いページを作成すべきではない。そういった場合にはグループに分割して各々をリンクさせるべきである。

6．各リンクのターゲットを明瞭に確認する。

7．アプレット、スクリプトを使用するときにはユーザーによってその動きの回避が可能な状態にしておくべきである。

8．スクリプトにおいては、デバイス依存イベントハンドラよりむしろ論理的イベントハンドラを指定する。

9．そのテーブルが意味をなさない限り、レイアウトのためにテーブルを使用することは慎むべきである。

優先レベル3

1．検索機能を付けるなら、ユーザーによって好みの検索方法が選べるような機能を付けておくべきである。

2．ナビゲーションメカニズムへのアクセスを強調して、与えるために、ナビゲーションバーを供給する。

訳のわからない翻訳ですが、つまりはページ上には適宜「戻る」などの案内を設けておくこと、という意味のようです。

以上は私自身が勝手に解釈したような項目もあり、他の人からみれば、別のように解釈されるものもあることをお断りしておきます。

TOPページ(Alt+B)