◆「見る人」、「読む人」の状況を考えよう (パソコンの環境は千差万別 !! )
回線スピードが遅い人もいる
ブロードバンドが普及したと言っても、見ている人がみな速い回線を利用しているわけではありません。遅い回線(ナローバンド)でも、表示に時間がかからないよう、極力ページは「軽く」しましょう。
画面サイズに注意
小型のノートパソコンは、表示画面が800×600ドット程度(横×縦)です。ページをレイアウトするときは、小さな画面で見ている人のことも考えましょう。特に「横スクロール」が入ると、とても不便です。
色の表示
画面の表示色は、256色、65000色、1600万色(フルカラー)などいろいろあり、見ている人によって環境は違います。背景色や文字色などは、パソコンの機種やブラウザの影響を受けにくい、ウェブセーフカラー216色を利用しましょう。
ブラウザの種類はいろいろ
「Internet Explorer」 「Netscape Navigator」 「Mozilla」 「Opera」など、ブラウザにはいろいろな種類があります。またバージョンによって、見え方が違うこともあります。ブラウザ固有のタグなどを、使わないように注意しましょう。
外字や機種依存文字は使用禁止
文字化けの原因となる、外字、機種依存文字は使用できません。「自分は見えているが、他の人は読めない」という状況が起こります。丸付き数字、ローマ数字などは機種依存文字です。
特殊効果を使ったページの強調。でも、やりすぎは禁物
「文字が点滅する」、「テロップが流れる」、「アイコンが揺れる」、「音楽が流れる」など、動きや音を使ってページを強調するのは、考えもの。極力、使わない方が良いでしょう。「静かにじっくり見たい」人の方が、圧倒的に多いのです。
◆画像やリンクに関すること
画像の大きさに気を付ける
画像データは文字に比べ、ファイルサイズが大きく、表示に時間がかかります。最近のデジカメ写真は画質が良くなった分、ファイルサイズも大きくなっています。小さく加工してから掲載するなどの、配慮を忘れずに。
imgタグでは、画像の幅と高さを指定する
幅(width)と高さ(height)は、必ず指定しましょう。画像の読み込みに時間がかかっても、サイズがわかっていると、テキスト部分が先に読み込まれるため、体感速度は速くなります。
imgタグでは、代替テキストを指定する
画像に対する代替テキスト(alt)は、必ず指定しましょう。画像を表示しない(できない)環境の場合、画像の代わりにこのテキストが表示されます。また目の不自由な人に対して、「音声読み上げ」を行う際も、このテキストが使われます。
「戻る」というリンク表記
単に「戻る」となっているリンク表記をよく見かけますが、ページの階層が深くなると、どこに戻るのかわからないことがあります。ブラウザの「戻る」ボタンと区別するためにも、「トップページへ戻る」、「目次へ戻る」のように、リンクの飛び先は明確に示すことが大切です。
「工事中」のページ
クリックした先のページで、「ただいま工事中」と表示されるのは困りもの。見ている人に、余計な時間と手間をかけさせてはいけません。ページが未完成なら、リンクを張らなければよいだけのことです。
フレームからのリンク
フレーム構成のページから、外部のページにジャンプするときには、必ずフレーム枠を解除しておきましょう。他の人のページを、自分のフレーム枠内に表示するのは、マナー違反です。 (良くない例)
◆著作権とアクセシビリティ(accessibility)
他人の権利を侵害しない
創作されたコンテンツ(文章、画像、楽曲など)には、著作権があります。他人の権利を侵害しないよう、十分注意しましょう。ホームページを作成する上で、次のような行為は、権利侵害に当たります。
- 他者のホームページ画像や文章を、無断で利用する。(著作権の侵害)
- タレント、有名人の写真を無断で掲載する。(パブリシティ権の侵害)
- 友達の写真を無断で掲載する。(肖像権の侵害)
- 他人の個人情報やプライバシーを公開する。(プライバシーの侵害)
ウェブ・アクセシビリティ
ホームページ情報に対する「アクセスのしやすさ」のことを、ウェブアクセシビリティといいます。パソコンの性能、機種、解像度、回線速度に関わらずアクセスできること、高齢者や障害を持った人でもアクセスできることが、今、重要視されています。W3Cでは、アクセシビリティのガイドラインを策定しています。また日本では、2004年6月にアクセシビリティのJIS規格が定められました。
(アクセシビリティについての関連リンク)