初めての方が実際にウェブサイトを作ると、どうしても使い易いウェブにならない場合が多いようです。
ここでは、少しでも使い易いウェブサイトを作るにはどうしたらよいかを考えて見ましょう。
ここに書かれている事の大半は、一般のウェブ、特にプロのウェブデザイナが制作したウェブでも満たされていない事です。
残念な話しですが、ウェブ制作のプロさえも、ウェブの使い易さを省みる事は殆ど無いのが実情なのです。
パンくずリストとは正式な用語ではありませんが、ナヴィゲーションにおいて最もよく使われるものです。
具体的にはサイト表紙から当該ページまでの階層を順番にアンカー付きで列挙したものです。
ページの上の方に、
等と言うようなアンカーの列があるのをご覧になった方も多いでしょう(このページにもありますね)。
これが、パンくずリストと呼ばれるものです。
パンくずリストの利点は、検索エンジンなどで途中ページを案内された方が、具体的にどのようなサイトなのかを知りたくなった際にサイト表紙に素早くアクセス出来るようになると言うのがあります。
この他にも、常連の閲覧者が他のコンテンツを見てみたいと思ったときに素早く移動出来るようになるというものがあります。
パンくずリストを実際に作るには、以下のようにすれば良いでしょう。
<p><a href="…">表紙</a> ><a href="…">…</a> >…<a href="…">…</a> ><strong>(現在見ているページのタイトル)</strong></p>
また、更に便利にするには、パンくずリストなどのナヴィゲーションの冒頭に、スキップ用のアンカーを降ろしておきます。
こうする事で、視覚障碍者の方がアクセスする際に余計なナヴィゲーションを読み飛ばす事が出来ますし、モバイルオペラで閲覧している方もスクロールの手間を省いて本文へアクセス出来るようになります。
制作者の場合、文書本文の先頭に必ず<h1 id="TOP">要素を置き、ナヴィゲーションバーの先頭にはここへ移動するアンカーを降ろしております。
以下に例を挙げておきます。
<ul class="forAural"><li><a href="#top">本頁の本文</a></li></ul><ul><li><a href="../WhatIsNew.html">更新案内</a></li><li><a href="http://www.marguerite.jp/Nihongo/">サイト表紙</a></li><li><a href="../index.html">ウェブの作り方</a></li><li><a href="index.html">HTML&CSS入門</a></li><li><strong>使い易いウェブサイトにするには</strong></li></ul><hr /><h1 id="TOP">使い易いウェブサイトにするには</h1>
多くのウェブサイトは、表紙から順番に見てもらう事を前提に編成されております。
その場合でも続きページにしか移動出来ないと言うのでは困ります。
このため、関連する全てのページへのリンクは欠かせません。
理想的にはサイト内の全てのページへのアンカーを用意したいところですが、ページが多くなるとそれは難しいでしょう。
それでも、せめて前後のページと、表紙及びコンテンツのトップページへのアンカーくらいは降ろしておきましょう。
尚、ナヴィゲーションに関しては上記のパンくずリストを代用する事も出来るでしょう。
また、モバイルサイトの場合、余り多くのアンカーを入れ過ぎると却って不便ですので、必要なアンカーを厳撰するといった工夫が必要でしょう。
ページが多い場合は、その中で重要度の高いページと低いページがある筈です。
ページが多過ぎる場合は重要度の高いページを優先してリンクした方が良いでしょう。
特に最重要ページがある場合は、当該ページを除く全てのサイト内のページに、そこへのアンカーを忘れずに降ろしておきましょう。
どれを最重要ページに位置づけるかは、サイトの目的にも依るでしょう。
例えば通販サイトなら商品の宣伝ページこそが最大の見せ場になる筈です。
購入フォームこそが最重要だと言う方もいるかも知れませんが、どんな商品か説明する事無く閲覧者を購入フォームに誘い込んだとしても、購入手続きを執らずに立ち去られてしまうのがオチでしょう。
なるべく多くのページとリンクする事で、検索エンジンのクローラにかかり易くなると言うメリットがあります。
誰かが自分のサイトの表紙以外のページへリンクした場合、そこから検索エンジンのクローラがページを読込んで行く可能性があります。
その様な場合に表紙や最重要ページへのリンクが無いと検索エンジンが肝腎のページをクロールしてくれない恐れがあります。
検索エンジンのクローラは読込んだページの全てのアンカーを追跡する訳ではありません。
サーヴァに掛かる負担や検索エンジンのクローラに掛かる負担を考慮してある程度読込んだらクロールを打切る事があります。
要するに辿り付ける道の多いページはそれだけクロールされ易いと言う事です。
そして機械が追跡し易いサイトは、当然人間にとっても追跡し易いものとなります。
特に最重要ページがある場合は、全てのページからリンクする事で、クローラの読込確率が高まります。
ページの組合せが悪いと、操作性に悪影響が出ます。
PC向けのウェブでは、いくらでもスクロールが出来るとは言え、余り長いページだと読み切るのに苦労しますし、戻りたいときにスクロール幅が大きいと不便になります。
逆にページを細かく分け過ぎると、いちいちアンカーを指定しなければならないので不便です。
アンカーは移動のための道標でもあります。
アンカーが判り難いと、閲覧者はサイト内で迷子になってしまいます。
アンカーには判り易い言葉を使いましょう。
一番良くないのは「ここをクリック」とか「こちら」というものです。
アンカー部分だけを拾い読みしても理解出来るくらいにしましょう。
格好付けのために横文字をアンカーにするのは宜しくありません。
日本語のウェブなら、日本語のアンカーが一番判り易い筈です。
特に重要度の高いページへのアンカーには、より平易な記述を心がけましょう。
サイトは作ったら作りっ放しとなる事もあるでしょうが、多くの場合は更新を行っていく筈です。
いつも来て下さる閲覧者のために、どこが更新されたかを案内するページを用意しましょう。
また、更新案内には必ず更新した箇所へのアンカーを降ろしておきましょう。
このとき、アンカーはハッキリそれと分かるようなスタイルにしておきましょう。
更新案内にアンカーが無いので不便だと言う苦情を頂いた経験があります。一応文字の色は変えていたのですが、やはり文章中に降ろすアンカーに下線は入れておいた方が良いでしょう。
更に言うなら、更新案内だけでなく、必要に応じてサイトマップなどを用意するのも良いでしょう。
ここで言いたいのは、いわゆる色覚障碍者への配慮だけではありません。
配色がおかしいと、一般人も閲覧するのが大変になります。
特に前景色(文字の色)と背景色が近いと、殆ど読めなくなります。
また、背景が黒か黒に近い暗い色の場合、文字の色が暗かったり文字が小さ過ぎたりすると読むのが苦痛になることがあります。
更に背景に画像を用いた場合には、背景画像と前景色がかみ合わないと言う問題が起こります。
読みやすい色遣いを心がけましょう。
文字が小さ過ぎる場合、ブラウザ操作で文字の大きさを調整出来ます。
しかしながら、CSSで文字の大きさを指定する場合にピクセル単位などで指定した場合、ブラウザ操作で調整する事が出来なくなります。
適切と思われる文字の大きさは人によって異なるので、文字の大きさは固定してはいけません。
CSSで文字の大きさを指定する場合、単位は「%」を使えば、閲覧者が設定している文字サイズに合わせて大きさが決まります。
文字の大きさはは「%」単位で指定しましょう。
文字を小さくし過ぎると読み難くなります。
だからと言って全てのコンテンツの文字を大きくし過ぎると却って読むのが面倒になります。
本文の段落などは、デフォルトの文字サイズ即ち「100%」が一番適切でしょう。
その上で見出しなどの大きさは適宜大きくするのが良いでしょう。
いくら制作する側がADSLやFTTHのような高速回線を使っていたとしても、全ての閲覧者が同様の高速回線で見ている訳ではありません。
また、いくら高速回線を使っていても、サーヴァから電話局までの間で渋滞すると結局遅くなってしまいます。
画像などを使い過ぎると、サーヴァによっては異常に時間が掛かる事があります。
20キロバイトでも重いと言う意見もあります)。
閲覧者がPCを使って音楽を聴いている場合に自動的に音楽を鳴らすウェブを開くと、最悪の場合OSごとクラッシュします。
サウンドを自動的に鳴らすようなページは絶対に作ってはいけません。
どうしてもサウンドをコンテンツとしたいのなら、音源ファイル(MIDIやMP3など)へアンカーを降ろして閲覧者の意思でダウンロード出来るようにしましょう。
HTMLで使ってはいけない文字でも解説しましたが、機種依存文字は絶対に使ってはいけません。
実は、数値文字参照を用いる事でこれらの文字を記述する事は可能ですが、やはり実装に依っては巧く表示出来ない場合もあるのでやはり使うべきでありません。
最近ではPDFやフラッシュなど、プラグインを用いる事で様々な表現が可能になっております。
しかしながら、ウェブブラウザに求められている機能はHTML文書を正しく表示する事だけです。
プラグインが用意されていない環境での閲覧も充分あり得ると考えて下さい。
プラグインだけでなく、画像やCSS及びJAVAスクリプトなどもウェブブラウザにおいては必須とされておりません。
これらの機能が無くても、最低限の情報を得られるようなサイト作りを心がけましょう。
具体的には以下のようにします。
<img>要素のalt属性に適切なテキストを与える事で、画像表示の出来ない環境ではalt属性値の文字列に置き換える事で画像の内容を伝えようとします。
複雑なグラフなどの場合はlongdesc属性などを用いる事で解説文書へのアンカーに出来ます。
本来CSSは無くても読めるようなページ作りのために考案されたものですが、CSSが無いと読めないようなページ作りをする者もいるようです。
CSSが無いプレーンな状態でも問題無く読めるようにしましょう。
JAVAスクリプトをナヴィゲーションなどに用いている場合(プルダウン/ポップアップメニューなど)、JAVAスクリプトが使えない環境では代わりのナヴィゲーションテキストが無いと不便になります。
<noscript>要素を用いて、JAVAスクリプトが使えない場合にも適切なナヴィゲーションを提供しましょう。
PDF文書なら同一内容のHTML文書を、フラッシュなら必要に応じて静止画像と代替テキストなど、代替となるコンテンツを用意しましょう。
尚、代替コンテンツとしては窮極的にはHTMLテキストしか使えないと心得ておいて下さい。
どうしても適切な代替コンテンツが作れない場合は、別途コンテンツを要約したサマリをHTMLテキストとして用意するなどしましょう。
どうしてもナヴィゲーションにフラッシュなどを使いたいのなら、必ず代替テキストによるナヴィゲーションを用意しておきましょう。
全てのコンテンツをモバイル対応にする必要はありませんが、モバイルでも喜んでもらえそうなコンテンツなら是非モバイル版も作っておきたいものです。
特に画像系のコンテンツでも待受サイズの画像に出来るなら、モバイル向けには格好のコンテンツとなるでしょう。
或いは小さなコンテンツが中心ならモバイル対応に作っておいてそれをPCでも閲覧するようにしても良いかも知れません。
いずれにしても、日本にはPCユーザの何倍ものモバイルユーザがいる事は忘れないで下さい。
堀北真希うさぎ：昔のボシュロムのを真似たソフトコンタクトレンズ装着場面と仮想TVコマーシャル動画
