トップページとは、あるサイトやコンテンツ群の入口にあたるページであ る。ここでは、なるだけ多くの人に、トップページからそのサイトないのコン テンツにアクセスしてもらいたいことを前提に、トップページ設計を考える。 トップページは、そのサイト内のコンテンツに対する案内役であり、どのよう なコンテンツが用意されているかを、一覧して分かりやすくブラウズする人に 知らせる役割がある。
なお、ここでの設計の価値観は著者(西村)の経験や主観が大きく盛り込ま れており、一般的な合意に至っているかは定かでない。自分が、そのサイトか ら情報を取り出したい、というときにどういうトップページ設計ならば 分かりにくい、使いにくいかを考えて、それを避けるよう に設計すれば、おのずと良い設計となるであろう。
悪い設計のトップページへのリンクを、各事例毎に作成したので、参照の こと。ただし、最近は悪い設計のページがなかなか見当たらない上、以前ここ のページで悪い設計だと例を挙げたページの多くは、その後、設計を改善した ので、ここで挙げる例は少なくなってしまった。
コンテンツを一覧するのにスクロールの手間がかかる。また、ページの下の方 にリンクされているコンテンツは、ブラウズする人が気が付かない可能性もあ る。(ニュースサイトの場合は、仕方無くもあるが)
トップページにおける見ためのデザインに凝りすぎるためか、コンテンツ へのリンクが分かりにくいページがある。より多くのコンテンツを含むサイト ほど「ここをクリックするとコンテンツ一覧が見られる」というサイトマップ を用意すべきであろう。分かりやすく分類されたリンクはブラウズする人を目 的のコンテンツにスムーズに誘導できる。
文字や画像の点滅、アニメーション広告で目を引く、という目的ならばあ る程度は仕方がないが、Webページから必要な情報を受け取ろうとしてブラウ ズする側にとってみれば、うっとおしいことこの上ない。Webページ自体が目 新しかった、１０年前ならまだしも、現在では、アニメーションや点滅によっ て、そのWeb サイトから情報を得ようとする際に好印象を持つ人は少ないであ ろう。さすがに最近は、有名企業のトップページには、このような例はあまり 見られなくなった。
少々年をとってくると、小さい字は見にくくてイヤになる。お年よりのことも 考えよう。
フォントの大きさが相対指定されていれば、ブラウザ側で見えるサイズを変更 することができるが、絶対指定されているとブラウザ側で大きくして見ること もできない。
通常の設定では、リンクのついた文字にはアンダーラインが引かれているが、 この設定が変更されており、通常の文章とリンクのついた文字との区別がつき にくい場合がある。画像にリンクが張られている場合も同様であり、確実にそ こにリンク先があることを明示する工夫は必須である。
できれば、トップページはブラウザの基本機能のみで、プラグインソフト を使わなくても正しい表示ができるようにしておくべき。そして、プラグイン ソフトをインストールしていないユーザがブラウズするときにも、同じ情報を 受けとることができるよう、十分な配慮を要する。Flash程度なら、特殊なプ ラグインとも言えない程、一般化してきたとは言えるが。
「このページは●●ブラウザのみ正しく表示できます」といった類のページは、 その他のブラウザを愛用する人々を最初から排除している。せめて、最近のメ ジャーなブラウザである、IEおよびNN双方での表示を確認しておくこと。片方 のブラウザにしか使うことのできないタグは使用しない事。
Microsoft Word において作成した文書は、HTML文書として保存できるが、そ のHTML文書は、Internet Exproler でないと正しく表示できない場合があるの で、気をつけること。
もしあなたがプロならば、2,3年ほど古いバージョンのブラウザも自分の マシンに残しておき、それを使って表示を確認しておくのが望ましい。
最近のブラウザは、HTML4.0 に準拠しているとはいえ、その文法に従って も、微妙に見えかたが違う場合もあるので、複雑なレイアウトの場合は特に、 見えかたは要確認だ。例えば、情報大教員紹介のペー ジ を Mozilla Firefox ブラウザで見ると、どうなる？
トップページについては以上に述べたが、その他のWebページを、どのように 設計していくべきか、については、情報システム学科 水谷先生のオ ンラインテキストに含まれるHTML 文書の書き方が詳しい。なかでも、
は非常に参考になる。それ以外のコンテンツも、この演習の内容より詳細な点ま で解説してあるので、より知識を深めたい人は必見である。