わるいHTML

わるいHTML、というより、ページを設計する上でもう少しユーザーの視点を考慮した方がよいものといった方がいいかもしれません。凝ったつくりでクールに見えても、こんなページの真似をしないでくださいね(おこがましいタイトルですが、よいHTMLとのセットで使っているキャッチフレーズのようなものとご理解ください)

無意味な画像の多用

古典的な「わるいHTML」の代表格ですね。改めて言うまでもありませんが、ほとんどの利用者は通信費や接続費を払ってインターネットを使っているのですから、作者の自己主張だけで重量級のイメージを押し付けるのはやはり迷惑なものです。

画像を使うこと自体は決して悪いことではありません。画像でなければ伝えられない情報、あるいはずっと理解しやすくなる情報はたくさんあります(画像が表示できない利用者のために、必ずaltテキストを記述すること)。情報を見やすくするためのアイコン類も、適切に用いれば使い勝手を向上させますし、ページを読もうという意欲も沸きます。

「わるいHTML」になってしまうのは、必要のない画像がたくさん使われていて、ページを表示する邪魔になってしまう場合です(HTTPの仕組みからして、1つの大きな画像よりも複数の小さな画像をロードするほうが時間がかかる)。オンラインドキュメントは印刷物とは違います。何が何でも思いどおりにデザインしようとして、画像を使い過ぎないようにしましょう。

画像の組み合わせのみで、altテキストがまったくないページも困りものです。ページ全部がひとつのイメージ画像だけで構成されているなど、もちろん論外。印刷物と同じ視覚表現が重要な場合は、PDF文書を用意するほうが現実的でしょう。

(不適切な例)こんなページを作ってはいけません(おっと、このリンクも良くないですね。リンクのアンカーは意味のある文にする必要があります)。

ページ全体をテーブルで囲む

HTMLには画面上でテキストや画像を自由に配置する手段が提供されていない(そもそもHTMLはレイアウトのためのツールとして設計されていない)ため、table要素を使って画面全体をひとつのテーブルに仕立てあげ、そのセルの中にオブジェクトを配置するというテクニックが蔓延しました。これはtable要素の本来の役割に反しているだけでなく、利用者にとってもありがたくない副作用があります。

table要素の内容は、その範囲のデータ全てがダウンロードされてからでないと表示されません。最後までデータを調べないと、列がいくつあるか確定できないため、ブラウザは画面表示を始められないのです(HTML4で加わった要素タイプcolgroup, colを使うと、最初に列数と幅の情報を与えることが可能)。普通の段落なら届いたデータから順次表示されていくので、最初の部分を読みながら残りをダウンロードし終わるのを待つこともできます。しかしテーブルの場合、その間ウインドウは空白になったままなので、利用者は置き去りの状態になります(こういうページは、多いんです、実際)。

table要素以外にうまいレイアウトの手段がない場合でも、ページ全体をひとつのテーブルにして利用者をまったくの空白ページで待たせることは避けなければいけません。少なくともこれから何が表示されるかというメッセージだけでも最初に表示されるよう、テーブルの外におくという配慮が必要です。

利用者の選択の自由を奪う

テレビやラジオと違って、新聞や書物は利用者が好きなときに好きなページを読むことができます。Webページもこのような自由度が高く、ハイパーリンクとの組み合わせは従来のメディアでは不可能だった新しい世界を生み出しています。ところが:

ページ選択の自由

作品の読まれ方に固定的なアイデアしかない作者は、利用者も作者の考えた通りに読む(利用する)べきだと思っているようです。サイトの目次や選択肢を示さず、「次へ」というリンクをたどる以外に、先に進む手段を用意しないのです。ひどいときにはブラウザのナビゲーションボタン類(BackとかForward)を隠してしまったりすることもあります!

テクスト論を持ち出すまでもなく、作品の読み方は読者の自由(あるいは創造)です。オンラインハイパーテキストならなおのことそうでしょう。最初に目次を示し、各ページからも目次に戻るリンクを用意して、利用者にページ選択の自由を与えましょう。

ウィンドウをむやみに開かない自由

リンクのアンカーをクリックすると勝手に新しいウィンドウ(あるいはタブ)が開くのも、あまり評判が良くありません。ウィンドウを別に開くかどうかは、利用者の決めること。ウィンドウに限らず、コンピュータのデスクトップ環境を管理するのはユーザーの権利なのです。

「利用者が便利なように」という親切心で別ウィンドウを提供する方もいるかもしれませんね。でも、別ウィンドウを開く機能は、ブラウザに備わっており、利用者が望めば簡単に使うことができます。逆に、別ウィンドウを「開かないようにする」という選択肢は、今のところほとんど提供されていないのです。どんな使い方が便利なのかは、ユーザーに委ねておくのが賢明でしょう。

補足1

一部の検索エンジンの結果リストでは、リンク先のタイトルと合わせて小さなアイコンを表示し、(1)アイコンをクリックすると別ウインドウに表示、(2)文字のタイトルをクリックするとそのままページが切り替わる、と使い分けが工夫されています。アイコンでは機能が分かりにくいかもしれませんが、たとえば

(例)詳しくはごく簡単なHTMLの説明別窓を参照

という具合に利用者が選択できるようにしてあげるのは、状況によっては親切な方法ですね(ただし、target属性を使うためにはTransitional DTDを宣言しておかなければなりません)。

補足2

2003年現在、Operaなど一部のブラウザでは、Preferenceなどで新規ウインドウ(タブ)を開かない設定が可能になってきています。が、こうした設定ができるブラウザはまだ少数であり、標準設定ではやはり新しいタブやウインドウを開いてしまうのです。

画面サイズを変更する自由

本来はブラウザのウィンドウをどんなサイズにするかは、利用者の自由です。画面サイズに応じて、段落のテキストは自動的に折り返します。しかし、上記のようにテーブルを使ってレイアウトを固定され、おまけにwidth属性を絶対指定されたりすると、画面を広くすれば無意味な余白が生じ、逆に狭くするとページがはみ出してしまうという不愉快な状況に陥ります。PDAのように画面サイズを調整できないときは、なおさら使いにくくなってしまいます。使いやすい画面は利用者によって異なるので、これも利用者の選択に任せるようにしましょう。

余計なものを見ない自由

もうひとつ、サイトのホームページを開くときの「通過儀礼」はやめたほうがいいです。よくあるのが、目次ページの前に大きなロゴの(しかもFlashなどのアニメーションになっている)ページを用意しているとか、ページを開くといきなり音楽が鳴りだすというもの。こういうこけ脅しはプレゼンテーション受けするのか(するんです、実際)、企業ページに多いのですが(いや、個人でも結構いるかな)、率直に言って自己満足以外の何物でもありません。サイトのドメイン名だけを入力したときに開かれる「ホームページ」は、そこを必ず通る玄関のようなところですから、そういう場所に押しつけがましい仕掛けを施すのは逆効果です。マルチメディア作品を見てもらいたいなら、そのように明記したリンクを目次に用意しましょう。

ほかにもいろいろ、自由を奪っている例は考えつきますね。作者の考えた使い方を強制して、利用者の選択の自由を奪ってはいけません

特定のブラウザや環境に依存する

Netscape NavigatorやInternet Explorerによって拡張されたタグは、理解できないブラウザがたくさん存在することを頭に入れておかなければなりません。HTMLも一時はこうした拡張を標準として取り入れる試みをしましたが(HTML3.2)、結局これらは「使うべきではないもの」として廃止される方向にあります。

新しい機能を活用して魅力的なページを作る工夫は素敵なことです。しかしそれはその機能を持たないブラウザを使っている人を排除するものであってはなりません。たとえばスタイルシートで適切に文字色やレイアウトを工夫したページは、スタイルシート非対応のブラウザでも、文字のデータとして情報の欠落なしに閲覧できるのです。

「このページは○○4.0以上でご覧ください」などと書いているページは、特定のブラウザに依存していることを自ら認めていると同時に、上で述べた「利用者の選択の自由」を無視したブラウザの押し付けを犯していることになります。この表現によって、何人もの読者(あるいはお客さま)に門前払いをくらわせているということを理解しておくべきでしょう。

環境に依存した文字

文字の色や大きさも環境に依存していることは、意外に気付かれていないかもしれません。モノクロ端末で文字の色が表現できないのは当然ですが、それ以外にも、濃色の背景画像のうえに白文字を使っているページは、画像表示をOFFにしていると何も読めなくなってしまいます(合わせて背景色も指定しておいてください)。

また、小さな文字サイズを指定する場合、同じ10ポイントのフォントでも、モニタの画面サイズ・解像度によって実際に表示される大きさが異なることを念頭に置くべきです。17インチモニタでぎりぎり読めるように設定した文字は、ノートPCの画面で高解像度に設定したときにはほとんど判読不能です。

何も指定しない通常の状態にしておけば、文字は利用者が自分の読みやすい大きさや色で表示することができます。「ハンディがあっても利用できるページづくり」も参照してください。

ちゃらちゃら動くものが多い

画面上にあれこれ動く要素があるページは、落ち着きのない印象を与え、読者の注意が分散されてしまいます。

点滅するテキスト、くるくる画像が入れ替わるGIFアニメーション、オブジェクトが画面上を動き回るDHTML… どれも目をひきつけるので、ここぞというときに、ぜひ注目してもらいたい内容を表現する手法として使われるのであれば、効果的でしょう。

残念ながら、多くの場合これらの動きは、本来注目すべき文書の内容から目をそらさせてしまう働きをしているようです。あるいは動く物体が多すぎて、目がちかちかして結局何も印象に残らない。さらに、煩わしいだけでなく、障碍のある人には読解不能だったりもします。

どうしてもこのような効果が必要な場合でも、何らかの操作で利用者がこれらの動きを無効にできるようにしてください。


このページを読んであまり気分の良くなかった方がいらっしゃったら、ごめんなさい。決してあなたを非難しているわけではありません。せっかくのコンテンツですから、できるだけ多くの方が気持ちよく利用できるように提供していただきたいと思って、陥りやすい落とし穴をあえて記述しました。筆者としては、このページが不要になってくれるのがもっとも望ましいです。