The Web Design Group presents:

オンライン・ハイパーテキストの様式

Tim Berner-Leeのstyle guideをもとに、Arnoud "Galactus" Engelfriet氏が書いた文書です。

最新バージョンは以下から得られます。
<URL:http://www.htmlhelp.com/design/style/>


 ある検索エンジンによると3,000万にものぼる文書が、ウェブ上にあるそうです。殆どすべての領域のトピックをカバーしていると言えます。文書は読み難らかったり、その情報が見つけ難くかったりした場合、他の文書に移行しまいます。そこで、このスタイル・ガイドは、あなたの文書を読み易くするお手伝いをします。

用 語

 HTML文書(ウェブ・ページとも言われます)は、情報を読み手に提供する一つのユニット(単位)です。オンライン文書には、本と同じように章・ページ・脚注があります。このガイドでは、論理的に一纏まりになっている文書の組をサイトといっています。

 この様式案内(スタイル・ガイド)を読むには、HTMLやウェブの機能についての知識が必要です。WDGのHTML参照(JP)に、ここで述べられるHTML要素のより詳しい記事があります。

概 要

 ウェブ用の文書を書く場合その文書は、大きな文書の集まりの一であることが多いと思います。サイトは、一般的な構造に従い、全ての文書を論理的に配置しておかなければなりません。個々の文書自身も 配慮ある構造を持っていなくてはなりません。

 文書にとって、様式も大変重要なポイントです。一般的な様式を使えば、読み手はそのサイトを有効に利用できます。大切なこととして、文書の位置付けの表明画像やアイコンを使い、装置に依存しない書き方をすることです。また、文書の検証を忘れないことです。

目 次

この様式案内(スタイル・ガイド)について

 このガイドは、まだ試験的なものです。コメント、示唆、推奨する点がありましたら連絡下さい。


ハイパーテキスト文書の構造

 ウェブを書くににあたって構造を二つに分けて考えておくべきです。
 はじめは、あなたのサイトがあり、そこに接続したり誘導したりする方法があるということです。この操作がし易く、従って読み手が時間の浪費にならない様にすることは大切です。
 次に、個々の文書間の構造があります。

 一般的に注意しておくべき、二三の点があります。

検索され易くする

 今日では、検索エンジンで検索され易いということは大変重要なことです。読み手は、検索を通してサイトを見つけ出します。どのような方法で探すにしろ、一つのものを探すには余りに多くの文書がウェブ上にあります。それ故に、検索エンジンがあなたのサイトを適切にインデックス化できるようにしておかなければなりません。

 普通、検索インデックスには文書のはじめの数行を使います。検索結果にこの短い説明を表示します。何かの理由でこれと異なるテキストを望む場合、 <META>要素で以下のようにします:
<META NAME="description" CONTENT="Your description here.">
 ここでは、HTMLマーク付けは使えませんし、文字も1,024(2バイト文字では、512)以下でなければなりません。

 同じく、特別なキーワードを追加することもできます:
<META NAME="keywords" CONTENT="Keyword, keyword, keyword.">
 これらのキーワードは、文書内にあるもの(言葉)を使います。キーワードが多すぎると(上限を7つとしているブラウザもあります)、全てのリストが無視されてしまいます。

読み手の関心は内容にある

 伝統的なメディアでは広告やチラシの目的は、メセージを伝えるために読者の注意をつかむことです。ウェブ上では、すでに注意を掴んでいます。読者は、あなたのサイトのURLを見つけ、何かの情報を見つけるべくそこに来ているのです。ウェブサイトはテレビ広告のように考えるべきはありません、読み手が寄った目的である情報を提供するものです。

 画像でうんざりしたり、画像を嫌うものではありません。サイト本来の目的から外れないようにしておくことです。プラッグ=イン・バックグラウンド音楽や動画も或る目的を持ちますが、サイトのメッセージにとって本質的でないならば、そこだけに読者の注意を集めるようではいけません。提供しているもののプラッグ・インを持たない読者を、そのプラグ・インがないと言うだけで排除してはいけません( 機械装置で悩ますな)。

 また、或る主題についてもっと情報があるのなら、そのサイトに記載しておくべきです。単に、「より詳しい情報がいるなら、連絡してください。」と電話番号を書くだけといったことはしないように。

誘導手段として画像は使わない

 全ての文書は、イメージ・マップを使わない普通のリンクをインデックス・ページから張るようにします。検索エンジンは、サイトを誘導するイメージ・マップを使うことはできません。サイトを利用する際に画像の読み込をしていない人でも誘導できるようにしておきます。

 イメージ・マップは、読み込むのに時間がかかります。それ故に、主となるインデックス・ページではこれを避けます。インデックス・ページは、すぐに利用できる様に、 読み込みを早くしておきます。

技術的な詳細は隠しておく

 文書が自動的に生成されたり、スクリプトによって周期的にインデックス化される場合、何処かにそのことについての情報を入れておきます。これをテキストとしては書かかないで、 コメントとして書きます。読み手には見えません。

 同じ様に、プラッグ・インを使うならビュアーをダウン・ロードできるようにリンクを書き添えておきます。こうして、文書が読めないことのない様にしておきます。

 文書内のリンクについての説明は通常は必要ありません。フォーマットが普通と異なっていたり、サイズが大きい場合だけ説明を附けておきます。例えば、1.44メガバイトのAVIムービーなら、"(AVI, 1.44MB)" と言った説明をリンクのあとに書き込みます。


ウェブ・サイトの構造

 WWWにとって大切なものは、クロス・リンクをつくる能力、検索エンジンで文書を見つける能力そして著者では予見できない方法でトピックを追跡編集(フォーロウ)する能力です。あなたのサイトの構造を明確に確立することが、重要です。あなたのサイトがどの様に組織化されているのかを読み手が同定できない様なら、戸惑ってしまい、他のサイトに移ってしまいます。樹状(木)構造は、サイトの組織化に良い方法です。

 ウェブ・サイトに樹状(木)構造を使い、文書は一枚の葉に相当し、枝は文書のリンクに当たります。主インデックスは、木の幹になり各文書への道筋を示します。このインデックスというの方法が唯一のものであると言う保証はありません。 読み手は常にファイルをブックマーク(しおり)にでき、検索エンジンで所在を決めそこへ直接行くこともできます。個々の文書も 文脈から離れて単独で使われことも考慮しておくべきです。

 樹状(木)構造を追いやすくするには、文書のディレクトリー構造が樹状(木)構造に反映される様にしておかなければなりません。性質の異なる話題のディレクトリーを作り、例えそれに関する文書がただ一つか二つしかない場合でもディレクトリーを作成しておきます。将来、その話題に関する情報が増えて、配置構造があればトラブルを減らせることになります。現状のウェブで参照を作り換えようとすることは、悪夢です。

 自分のサイトの内容を論理的なグループに分けておくことは、どのような読者を想定するかにかかっています。初心者には、固定的な構造、「案内ツアー」といった、が情報を誘導するのに助けになります。経験者では、紹介を飛び越してすぐに興味のある資料へ行きます。この様な読み手は、情報の組織化について自分で予想をたてています。サイトが読み手の予想と異なった構造を取っていたら、困惑し回避できる方法が見つからない場合はサイトを離れてしまいます。

 参照を作成する場合そこにどの様なタイプの情報が在るのかを記載しておくと役に立ちます。読み手は、リンクされている文書を読むどうか決めることが出来ます。 例えば、「ステップ・バイ・ステップの イントロダクションは練習(チュートリアル)にあります。」乃至は「技術的な詳細は、 参照部門から入手できます。」

 全ての文書は、一つ以上の方法を通して入手できる様にしておくべきです。組織化されたインデックスはサイトを一覧したい人の助けになり、アルファベット順内容表・別の基準から見た代替えインデックスは非常に役に立ちます。情報が詳しい技術的なものの場合や文書が非常に多い場合は、サイト内検索エンジンを追加してあると有用です。


単一文書の構造

 イントロダクションで述べたように、一つのオンライン文書は一冊の本乃至は脚注専用に対応するものです。普通、文書はこの中間にあり、一つの情報に関連する複数の文書があるということです。ここで最も重要なことは、各文書は、十分に定義された概念を持っていることです。サイズを減らすというだけの分割や小さいもの単なる寄せ集め等は、一般的にいって良い考えではありません。

 情報が幾つかの文書に分けられていると、読み手が個々の文書を読み込まなければなりません。遅いネットワーク接続(または混雑)場合は読み手が思うより、時間がかかります。

 しかし、大きな一つの文書も不利な点があります。画面上に合わない(ブラウザ画面に一度に表示される大きさ)場合、スクロールしなければならなくなります。最初の数画面内で興味のあるものに出会わなかったら、そこを離れていきやすくなります。これを防ぐのに単に文書を分割するのではなく、概観や内容表を先頭にもってきておくことです。

 特別な話題の情報全てを一つの文書やアーカイブ(文庫)/圧縮版にしておくのは役に立ちます。読み手はそれを保存し、オフラインで読めます。

 文書のサイズを示すのは、大まかな値でいいといっても困難で、読み手側の画面上で文書がどの位占めているのかを予想することが出来ないからです。こちらから制御できる幾つかの一つは、読み込み時間があります。文書の読み込みの一般的な速度は、1K/秒位でしょう。遅いもモデムの人もいるし、物理的な接続は速くてもネットワークが混雑してることもあります。

 関連する注意。文書内の 誘導画像は、幅を450ピクセル以下にします。大部分のブラウザ画面は、この位のサイズで、画像が大きいと水平方向にスクロールして見ることになります。整形文についても、同じ理由から最高75文字符号(一バイト文字符号)にしておきます。 いつも読み込んでいるものより少しでも大きな文書を読む場合水平にスクロールするのは、飽きあきするものです。

 目次を作るのは、そこから得られる文書に直接リンク可能ということだけを意味しません。関連文書(例、"Next"、"Previous"、"More")間のリンクがあると、読み手は毎回目次に誘導されないで(ラセン階段症候群と言われます)済みます。


参照とそのコピー

 自分の制御範囲外のサーバーに在る情報への参照の場合、そのコピーを自分に所に置きたくなります。これがいい場合もありますが、それに反対するもっともな理由もあります。

 文書を元の場所にしておく理由は:

  1. 文書が制作者によって更新された場合、リンクは自動的に更新された情報を参照し、文書の変更を遠隔サイトからチェックし続ける必要はありません。
  2. 読み手が何処から接続して来るかによっては、他のサーバーの方がより速い接続になっていることもあります。
  3. 文書を自分のサーバーにコピーするには、著作権者の許可を必要とします。参照が出来ないこともあります。

 コピーする理由:

  1. 情報が単に暫定的に入手できるものの場合(例えば、新しい作品)、コーピーを取っておく必要があります。コピーが入手できるようにしたいなら、制作者の著作権に抵触しないことを確認しておかなけrbあなりません。
  2. 情報の一部でそれが更新されることもあるものをを参照したい場合、そのバージョンを確保するにはコピーします。
  3. 問題にしたい或る局面についての情報が幾つかの文書に在る場合があります。それら結合する場合、別々の文書へのリンクでは読み手を困惑させます。適切な情報を選びそれを一つの文書に纏めるのは、より良いやり方です。

意味あるリストとインデックス

 既に、クール(定番)なリンク集、RFCsやFAQのリスト乃至特別な話題の情報、が数多くあります。そこへ1000番目のリンクのリストを追加するよりも、個人的な視点や注釈付や特別な興味の情報リストをつくりましょう。最上のWWWページとは、ページそのものが語る、意味在る何者かを持っているページのなのです。


文書の様式

 文書のスタイルは、探したい情報を見つけ出すために読み手が一覧するのを手助けします。スタイルがいいと、特殊な文書を理解し易くし関連情報へ飛び易くなります。同じ「骨格」やテンプレートをすべての文書に使い、要素は全ての文書で同じ機能に使われているかを確認します。これで、長期間にわたる文書の保守が楽になります;全ての文書が同じスタイルを分け合っているので、情報の抽出が自動的になされます。

 次のことが大変重要です::


全ての文書に署名する

 情報の重要な側面として、著者がわかることです。ハイパーテキストでは、これは簡単でー著者のホーム・ページにリンクを張ったり、電子メール住所を記載したり、コメントを送るフォームを作ることです。普通 < ADDRESS>要素がこの目的に使われます。

 著者のホーム・ページの代わりに"About"文書(この文書について)を置き、そこに著作権について・否認・リンクを記載します。長い署名のある文書の散在を防ぐことになります。これで、情報区域を"Copyright"という言葉のある Copyright &copy; 1996 by Nameの類の"About"文書へのリンクに限定します。

 コメント・示唆・リンクについての連絡情報を記載しておくことも重要です。これは通常、"mailto"にこの目的用の電子メール住所URLを記載することではたせます。テクスト内の住所の記載を常に確認しておき、メールプログラムを利用して皆があなたに電子メール出来る様にしておきます。例えば、文書を印刷した場合もはやリンクそのものは作動しませんし、URLも分からなくなります。


文書の位置付けの記載

 諺にある通り、「ウェブ・ページは常に作成中です」(All Web pages are permanently under construction)。あの不評な「作成中」のロゴを付けることは何の目的にもならないが、或るセクションがまだ完成していないと言う注意は役に立ちます。たとえ全部読めるようになっていなくとも、そこ迄でも十分な読者もいます。用意が整っていないページにはリンクはしないことです。

 最終更新乃至修正の日付は必要です。文書のはじめに在れば、読み手は既に読んだものかどうか、そうであれば転送しないと迅速に判断できます。これはまた、 全文書が一定のスタイルを持っていることが何故重要なのかの説明にもなります:読み手が欲しい情報を探し出す手助けになります。


文脈を外れても文書を有用にしておく

 前述した 樹状(木状)モデルに従ってサイトを構築していても、何処へでも飛び超えられます。検索エンジンから文書を見つけたり、以前にブックマークにしたのもあります。この理由から、読み手は予測している経路を経るという保証はありません。

 特別な順番になっている文書なら、逐次的な流れに従うことは重要なことです。途中に飛び込んだ人を助けるの為に文書セットを書き換える必要はありませんが、全く経路を見失うのを防ぐに十分な情報が在るべきです。このための幾つかの方法があります:

 必ず、索引・概観文書へ誘導する方法が在るかを確認しておく。

バック・リンク(直前へ戻る)

 ウェブは直線的ではない構造になっているので、読み手はどの地点からでもサイトに来れます。或る文書に戻るよう強いるリンクは意味がありません。ブラウザは既にバック機能を持っていて、今閲覧している一つ前に戻れるようになっていて、前と言っても必ずしも構成上の前である必要はありません。 ブラウザから見ると、文書でのリンクはすべて 前方リンクです。リンク/アイコン誘導の目的は、制作者が設計した構造に沿った閲覧を助けることにあります。こうするには、論理的な構造が見える様にリンクを加えますが、文脈外でも役に立つことを確認しておきます。例えば、 「上」(目次)・「前/次」(同じ構造上の続き)・「詳細」(文書上での話題についてのより詳しい文書)などです。

文書のタイトル

 このタイトルは、検索エンジンによって検索結果をリストするのに、ブラウザによってブックマークをラベルするのに使われので、文脈外でも分かるものにしておくべきです。最新でホットな話題に場合は「イントロダクション」の意味はないでしょうが、「グーテンベルグ計画 -- イントロダクション」と言ったものは必要です。タイトルは64文字符号(一バイト)以内に収めます;ブラウザ画面ややブックマーク・リスト上で文字切れしないためです。


画像&アイコンの使用

 HTML文書では、画像を色々な目的に使いますが、よく使われるのは ロゴ・マーク誘導アイコンとしてよく使われます。

 どの場合でも画像は小さいことが大切です。ウェブ上で、画像は千の言葉にもまして価値がありますが、すぐ千バイト以上を使います。読み込みに非常に時間がかかるので、文書に本当に必要な画像に限定し出来るだけ小容量のものを導入します。また例え必要な画像であっても、その画像が読み込まれない場合でも文書は機能するかを確認しておきます。遅いリンク先の読み手は、画像を読み込みたくなくなります。 代替えテキストALT textが、これを解決してくれる重要な道具です。

 文書をより速く表示するには、 IMG要素でWIDTHとHEIGHT属性を並記します。この属性は画像の幅と高さを指定して、ブラウザは適切なサイズのボックスを描くのに使います。それに続いて文書の残りを表示し、後でボックス内に画像を読み込みます。これは、テーブル表示の計算をも容易にします。

 大きな画像を提供したい場合は、小さな見本を使います。ユーザーは、この画像の予告版を素早く見られます。画廊の様に画像が多い文書では、このことが特に重要です。画像がテキストに必要なら画像を行に組み込みます。画像へのリンクを加えることもでき、画像を読み込まない様に初期設定している人もこの特別な画像を容易に読み込めます。

 文書サイズについての注意に従えば、文書とインライン画像合わせて60キロバイトいかに出来るだけ抑えます。画像を全て別のディレクトリーに置くように推奨されていて、そうすれば全ての文書から同じ画像を参照できます。画像はブラウザのキャッシュに貯えられているので、一度読み込めば後は各文書はキャッシュから再読み込みができます。

ロゴ

 印象深くするために、ロゴをヘッダーの代わりによく使います。典型的には、ページの表題名と画像ロゴです。出来るだけ画像は小さ目にし、センスある代替えテキスト、これが受け入れられる型です。以下の代替えテキストについての注意に加えて、代替えテキストがロゴテキストに置き換わることを確認しておきます。「会社のロゴ」では置き換えにはなりません。「何々会社」とします。ヘッダーに画像が来る場合、画像読み込みを切ったブラウザで一覧すると代替えテキストが表示されます。

誘導アイコン

 アイコンは、サイトをどの様に誘導するかを分かりやすくする良い方法です。テキストと違って、リンクは所在を見つけ易くなります。勿論、そのサイトでアイコンが一貫して使われている場合にはうまく働きます。全ての文書で同じテキストや同じ論理的用途では同一アイコンが使われていることを確認しておきます。例えば、「ホーム」を示すアイコンは常に、現行の文書から見て「ホームページ」として機能している文書に行かなければなりません。利用者が表中にある文書を読む場合、アイコをリンクされていないものに置き代えましょう、というのはその見え方は同じのままですから。

 アイコンの意味が明確であり、有効な代替えテキストが付随していることを確認しておきます。幾つかの標準となる誘導用のアイコンがあります。アイコンの意味を識別しやすくする為にアイコンの基本としてこれら標準を使います。例えば、拡大鏡は局所検索エンジンを指すために一般的に使われます。

 大きな誘導画像で画像の情報が変更する時読み込み時間を減らすいい方法は、幾つかのの小さな画像に分け、各々に場所を分担させることです。画像を読み込む場合画像が次々と配置され、境目のない様子になります。

有効な代替えテキストを使う

 IMGタグのALT属性で、画像自身が読み込まれない場合表示するテキストを設定します。画像の意味を置き換えるるべきで、画像の説明ではありません。どんなケースでも、画像をどの様にして読み込むかの指示はありません。

 色々な理由から、代替えテキストには可成りの制限があります。1024文字符号(一バイト)より長くしてはいけませんし、マーク付けがあってはいけません。しかし、IMGタグそのものはHTMLマーク付けで囲われ、代替えテキストは表示の際マーク付けを継承します。テキストの様に画像をマーク付けするには適切なHTMLタグを使わなければなりません。例えば、画像が文書の主見出しとして機能するには、文書に <H1><IMG SRC="logo.gif" ALT="The XYZ Company"></H1>を使います。会社のロゴであり、レベル1の見出しとして表示されます。  Alan Flavellによる、画像に於ける 良い代替えテキストの選択の考え方という優れた記載があります。


一つのブラウザ用に書かないこと

 文書がローカル・ネットワークでの使用を意図していないなら、読み手がどの様なブラウザを使っているのか前もって知ることは出来ません。一つのブラウザ向けに書けば、不必要に読み手を制限してることになります。

 ブラウザ特有また実験的な要素を使うことと多くのブラウザに不要なものをもたらすがそれを意識していてHTMLを書くこととの間には違いがあります。ブラウザ特有な要素を使う場合読み手に "Download NetXploder 4 NOW!"と告げで問題を回避するようにしておきますが、ブラウザ特有の資材が無視されてもなを働くようにブラウザを整えます。

 ブラウザ特有の要素の使用が文書にとって必要で、他のブラウザ上でうまく弱められない場合、情報が得られる代替え手段を提供していきます。例えば、文書に複雑なテーブルがあれば、そのテーブルのショット画面を作っています。


正しくタグを使った仕事を

 HTML文書のボディ部分に実際の情報がきます。この情報はブロック要素内に来て、この要素は更に適切なテキスト-レベル要素でマーク付けされます。ブロック要素には、見出し・パラグラフ・リストなどがあります。テキスト-レベル要素には(例) <EM>、 <CITE>や <TT>などがあります。

 ブロック要素で、文書の意味を明確に表わせます。内容がどういうものなのかを記述する正しい要素を使わなければなりません。

 それはさておいて、特殊な要素がブラウザで正しく作動しない場合、ブラウザや文書でそれを調整します。別のブラウザでは、その要素を考えてた様に処理しなく、調整もそこでは出来ません。例えば、見出しは飛び越え(途中にH2がなく、H1からH3へ直接)てはいけません、特殊な見出しがシステム上でおかしくなるからです。ブラウザを再構成します。ブラウザでそう出来ないなら、その儘受け入れます。

 サイトが期待通りに見えない、例えばインデックス化ロボット・文字ブラウザ・音声機序によって、ことを考慮しておきます。テキストが構造に従ってマークされていたら、慣れ親しんでいない状況下でも作動します:テキストが特殊なブラウザ用に手直したら、別のものでどの様に見えるかを予想する方法はありません。

 最近のブラウザなら殆ど、全てではないにしても、 HTML 3.2の要素をサポートし、標準的でない要素もサポートしています。これらは実験的で別のブラウザではサポートされていないか違ったサポートになります。注意して使用し、これらの要素がなくても文書がやはり作動するかを確認しておきます。

レイアウトにテーブルを使う

 特別な方法で文書をレイアウトする技術として、テーブルで文書全体を描こうことが最近ポピュラーになっています。セル内で個々にマーク付けするので、他の方法では出来なくても、色々な要素を容易に配列できます。

 この技術には、幾つかの不利な点があります。まず一番目に、特別な注意を払っておかないとテーブルをサポートしていないブラウザで混乱を起こすことになります。二番目は、全テーブルやその中の画像を全て読み込まないと大きなテーブルのレイアウトの計算がなされないことです。これでは、文書の表示時間が大幅に増えます。

 三番目は過剰なレイアウトによって、HTMLの大きな利点を失ってしますことです:レイアウトをブラウザ自身や読み手の選択で調整する能力。テーブルがピクセル単位で指定されていたり、画像が次々と配置されている場合は、特に危険です。ブラウザ画面がテーブルより小さいと、読み手は水平方向のスクロールを余儀なくされます。これは、人を困らせることの一つです。

見栄え対構造

 テキスト-レベル要素はおおきく三つのグループに分けられます。プレゼンテーション要素( BITTなど)は、内容であるテキストの 見栄えにのみ関わるもので、一方構造化要素( STRONGEMCITEなど)は、テキストの意味を記述するものです。三番目のグループにはIMGやAといった要素があり、あることに向けての動作があります。

 出来るだけ構造化要素を使うように薦められています。ブラウザが、走行中のプラット・フォームで得られる最適の様式でテキストを再現表示する様に出来るからです。例えば現行文字イタリック体が得られない場合、強調テキストは別の色で表示されます。ブラウザが、テキストが強調されたものであると分かる場合にはこれが可能です。テキストが体裁(プレゼンテーション)要素であるI(イタリック体)とだけ指定されていると、これは(強調と)分かりません。このことは、引用やブック・タイトルでも同じです。

 体裁要素は、これで普通に再現表示されるなら、大変有用で、例えば参照リストのブック・タイトルなどで。

 HTML 3.2は以前はブラウザ特有であった FONT要素を正式に特定しています。これは十分注意してして使うか、そうでないなら使用を避けるべきです。文書表示制御上間違ったもにになります。使う場合多くのブラウザの状況は、指しているフォント名・色・サイズの意味を遵守してないでテキストが違って表示される、と言うことを胆に命じておかなければなりません。見出し(ヘッダー)や特定の論理マーク付けの代わりに、使ってはいけません。論理的構造にそって適切にマーク付けした文書をまず書いて、どうしても必要なら、フォント・タグをただ強化の一選択肢として使います。

 体裁問題の良い解決法は、 スタイル・シートを使うことです。或る一つのHTML文書乃至はサイト全体の見栄え用のスタイルを示唆する文書に分けることもできます。


オンライン側面だけの回避

 WWWはHTML文書の最も一般的な目的ではありますが、それしかないといったものではありません。WWW上でさえ、読み手のアクセス方法はあなたのとは違います。幸いにも、HTML上で文書が適切に書かれているなら、このことは重要ではありません。言語が構造化されたていると言うことで、装置非依存性が可能になります。たとえ制限があっても、どのプラットフォーム上で閲覧可能です。

 参照文書にとって、索引やホーム・ページでもそうですが、特に重要なことは印刷が出来るかということです(印刷可能性)。有用なテキストは、やはりハード・コピー版が好まれます。テキストに系統立てられた参照が豊富で、その参照先はオンライン・バージョンでしか機能しないなら、印刷された文書は稀なものになります。

 特によく知られている局面は、"click here" 症候群です。アンカー用テキストとして"click here"や唯"here"としたハイパーリンクのことです。ユーザーはマウスを使うものだと想定しているだけなく、周囲のテキストから注意を反らします。読み手は、正しい"here"を選択しているかを確認するのに再度周囲のテキストを読み直さなければなりません。ハイパーリンク・アンカーはそれ自身で理解できるものでなければなりません。

 同じ様に、「Xについての情報は以下の このリンクから入手できます。」や「 技術的な詳細にはここをクリック」といったものは、避けられるべきです。実際のテキストにリンクを組み込むには、テキストを理解するのにリンクを追うよう要求されない方法でします。最初の例での付け足しのテキストでなく、Xについての説明文書にXという最初の記載にリンクします。この文書をオフラインで読む人は、直接Xについて詳しいことを見い出すことはできませんが、文書は読めます。


機序で悩ませない

 前にいったように、"click here"は悪い例のアンカー・テキストです。印刷した際テキストを読み辛くすると言う理由ばかりでなく、ユーザーがマウスを使うものとしブラウザ操作を知らないものとしているからです。はじめてグラフィカル・ブラウザを使うのでない限り、ユーザーはウェブの移動仕方を知っています。

 インターネット上で得られる殆どの資源へのハイパーリンクを作れるという可能性は、装備をもうこれ以上追加する必要はないと言うことです。WWWが開始された頃は、インターネットについての文書サービスには、ファイルえを保存やメール・サーバーの利用やコンピュータへの接続についての基本的な構築法を含まなければなりませんでした。今では、これら全てが簡単なリンクで達成でき、ユーザーから技術的な詳細は見えなくてすみます。

 そこで特別な形式のファイルを提供する場合も、一覧したり演奏したりするにはプログラムを何処から保存するのか、ファイルをどのディスクに保存しどの様にして圧縮するのかといった議論はなくなりました:ただ、リンクを追加しファイルを識別する正しいMIMEタイプをサーバーが送るかを確認するだけです。


文書の検証

 文書がどのブラウザでもうまく読まれることを確認するには、文書がHTMLの構文規則にしかりと則しているかを確認しておきます。自分でする必要はなく、コンピュータがやってくれるものなのです。構文間違いをチェックするのに幾つかの道具があります。完全な概観は、 検証サービスのWDGリストを見てください。

 文書が期待通りに表示されたからといって、それで全てのブラウザで正しいくこの様に表示されると思わないで下さい。ブラウザは間違ったHTMLを調整するように設計されていて、時には構文間違いを完全に修正することさえ可能で、その結果でき上がって表示したものです。しかし、この様な調整は通常ブラウザの解析に依存していて、将来の版では、(更新された解析を持って)間違ったHTMLを別のやり方で修正するかもしれません。

文書のテスト

 文書が検証をパスしても、全てのプラットフォームで意図通りに作動するとは限りません。様式上の問題もチェックするプログラムもあります。構文的に正しい文書も読み辛いこともあり、それは画像の代替えテキストを忘れたり、不要な空白文字・深すぎるリスト・見出しが、階層的に使われていなかったりと言ったことに由来しています。

[ホームへ]


Web Design Group
Last updated: 01 Feb 1997
Copyright (c) 1996 Arnoud "Galactus" Engelfriet.
E-mail: galactus@htmlhelp.com.


翻訳版覚書

 この文書の原著は、
Web Design Groupの [Hypertext Style: One-part version]
 "http://www.htmlhelp.com/design/style/style.html" で、
翻訳許可を受けています。翻訳版は、翻訳からくる間違いがあり得ます。

 「Tim Berner-Leeのstyle guide」の日本語翻訳版は、
 [オンライン・ハイパーテキストのためのスタイルガイド](http://kanzaki.com/docs/Style/)に在ります。

iso-2022-jp(JIS) 版で、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
URLは、"http://www.asahi-net.or.jp/~bd9y-ktu/design/style.html" です。

Yasutaka Kato 加藤泰孝
<email:y.kato@personal.email.ne.jp>
<email:ykato-ind@umin.ac.jp>

Last modified 98.4.19