ヘッダーをスキップ

Useful より Usable なウェブページを (2005年4月18日)

すぐれたウェブページとはどういうページの事を言うのだろうか? 図書館のウェブページ作成を担当して6年の間、よりよいウェブページを作ろうと試行錯誤する中で、“Homepage Usability: 50 Websites Deconstructed.” Jakob Nielsen, Marie Tahir (New Riders Press, 2001) という本に出会った。この分野の第一人者であるJakob Nielsen氏が、有名ウェブサイト50を俎上に、ユーザービリティの視点から容赦ない評価を下すという嗜好の本だ。それまで、これといった手本もなく暗中模索で自分なりにベストを尽くして納得のいくページを作っていたつもりだったが、この本を読んでウェブページ作成に対する姿勢が根底からくつがえった。

ウェブページの評価は100%ユーザによるものだ。作成にあたっては、当然そのページを使う人の身になって考える必要がある。それもまた自分なりにそうしていたつもりだったが、甘かった。この本をちょっと読めば、ウェブページの構成要素一つ一つのあり方について、いかに自分が無自覚だったかが露呈するのだ。文章にしてみると、いずれも当たり前のことになるのだが、例えば「リンクの名前はそのリンクをクリックした先に何があるのか分かる(想像ができる)表現にしないといけない」「あるリンク名は同一ページ上にある他のリンク名とはっきり内容の違いが分かる表現にしないといけない」「リンク名は常に一般的な言葉を使い、造語は使わない」「リンクはテキスト・画像に関わらず、それがクリックできる事が一目でわからないといけない」「逆にクリックできないものは、クリックできそうに見えてはいけない」「動画は(特に動き続けるものは)極力使わない」などなど。

この本をきっかけにウェブ・ユーザビリティに関する書籍を乱読し、たどり着いたのが、css(Cascading Style Sheet)なる技術を使って、ウェブページのデザインをHTMLから完全に切り離し、画面をほぼテキストのみで構成したスタイル(今皆さんが見ているこのウェブサイトがそうです。)構想から9ヶ月を擁して作ったひな型の作成にあたっては、ウェブページ作成者がさほど高度な技術的知識を必要としない範囲で、最高のユーザビリティを追求したつもりだ。このひな型に、ずうずうしくも MoogaOne なる名称を与えて、他の図書館ウェブページ作成者に無料で配布する。MoogaOne はどんな職種のどんな種類のページにも適しているわけではないが、図書館のように多機能型・多メニュー型のページにはかなり効果的だろう。

どれほど「役に立って」も、「使えない」ウェブページは存在する意味がないどころか、ユーザにストレスを与えるという意味においては有害でさえある。Useful より Usable を目指さないといけない。手前味噌で恐縮だが、MoogaOneのマニュアルに掲載した雑考を以下に添付したい。これを読んでユーザビリティ魂に火の点いた方は、ぜひ筆者(松山)に連絡を頂きたい。またMoogaOneに興味を持った方にはMoogaOneのページを見ていただきたい。

<ウェブページユーザビリティ雑考>

文字こそ大切

ウェブページは視覚的要素の強いメディアです。そのため多くのデザイナは画像を多用します。それも背景や装飾にとどまらず、タイトルやリンクボタンにもバナー画像やアイコン画像を多用します。リンクを文字ではなくアイコン画像にすれば、一目見ただけでそのリンクの意味が分かる。本当にそうでしょうか?

それは普段私たちが「非常口」「男女トイレ」「道路標識」などをアイコンで認識しているため、なんでもアイコンの方が分かりやすいと錯覚しているだけではないでしょうか? 非常口やトイレのアイコンは一つの国または世界中で統一使用を前提に作られ、実際そのように利用されるものです。その結果、多くの人が繰り返し目にするため、分かりやすく「なる」のです。

あなたが作っているホームページはどのくらいの人が見ますか? あなたが作っているホームページにしか使われていない、あなたの思いついたデザインのアイコンが本当にユーザに分かりやすいと思いますか? マイクロソフト社のエクセルの[表示]-[ツールバー]-[ユーザー設定]で、全てのツールバーにチェックをして表示してみてください。あなたがしようとしていることは、ここで確認できます。

リンクを文字ではなく画像にしてしまうことは、「リンクの文字は青」「既読リンクの文字は紫」というウェブページの常識に従わないことを意味します。「それがリンクであるかどうか」「そのリンクを既にクリックしたかどうか」が分からなくなることを意味します。せっかく万人に受け入れられている最も分かりやすいルールがそこにあるのに、使わない手はないでしょう。

またボタンのように見えるバナーほかの画像も問題です。クリックできるものとそうでないものは、その違いが「露骨に」分かるようにしておかなければなりません。

文字は画像に比べて解釈の幅が狭い。つまり、適切な表現さえすれば、意味伝達の誤差が画像よりも少ないのです。ウェブページにおいては、文字こそが大切です。

伝えたい vs. 知りたい

ウェブページはポスターではありません。また、パンフレットほか印刷物でもありません。ポスターの出来栄えはポスター自体を見て評価すれば事足ります。では、ウェブサイトのトップページの画像をプリントしたものを見て、ウェブページの評価が出来るでしょうか? できませんね。なぜなら、ウェブページはユーザが完全に主導権を持って操作する過程で評価されるものだからです。

このことは、ウェブページの構成・デザインはおろか、内容も規定してしまいます。つまり、すぐれたウェブページは、「作成者が伝えたい情報ではなく、ユーザが知りたい情報を載せている」のです。ウェブページ作成者は、往々にして組織の上部から「これこれの点をウェブ上でアピールしたい」旨の要求を受けるケースがあります。これらのプレッシャーと闘いながら、本当にユーザが知りたいものとそうでないものを厳しく吟味しながら、構築していかねばなりません。

そうやって、戦っているあなた自身、トップページ上のあるメニューが他のメニューより重要と思いこんでいませんか? 各メニューの重要性はユーザが決めるものであり、同じユーザであってもアクセスのたびに異なるニーズを持っている事を考えれば、必然性がない限り、あるメニューを他より大きくしたり、目立たせる事は控えたほうが良いといえます。その事によって、他のメニューが目立たなくなることは、特定のユーザの欲しがる情報へのアクセスが遅れることを意味します。

長いものには巻かれた方がいいか

ウェブページは構成やデザインの自由度が非常に高い表現メディアです。ビジネス文書のように日付の位置や書き方、時候の挨拶、ほか決められた様式があるわけではありません。新聞のテレビ欄のように横にテレビ局、縦に時間軸のように決められたレイアウトもありません。そのため、訪れるウェブサイトによって、含まれている内容はほとんど同じであるのにもかかわらず、それらがどこに置かれているか、どういうタイトルがつけられているか、どういう順番で並んでいるかは、バラバラの状態です。新しいサイトを訪れたユーザは、いわば初めて目にする機械をマニュアルなしで操作することを強要されているのです。

この事は、われわれに「できるだけ奇抜な表現・特殊な技術は使わないほうがよい」という教訓を与えてくれます。マニュアル中「トップページのメニュー名を決める」でも述べたように、ごく普通の日本語を使い、内容が想像できないような造語は避ける事、アニメーションほか動く画像や文字は極力使わない事、他のサイトで一般的に使われている表現・構成に従う事が、万人に使いやすいサイトを作るコツです。

ここはどこ? 私は誰?(…って、それくらいは分かってるけどさ)

ウェブサイトを見るときに、ユーザが必ずトップページから見てくれるとは限りません。Google などのサーチエンジンの検索結果から1階層、2階層下のページにいきなり飛んでくる事が、ままあります。そんな時、ユーザが「ここはなんという団体の誰が作ったページで、今どこにいて、どこをクリックすればどういう情報を得られるのか」を分かりやすく提示してあげる必要があります。

MoogaOneにも採用されているパンくずリンク(おそらく『ヘンゼルとグレーテル』からの命名)は、表示されているページのトップページからの相対的関係を示すとともに、上の階層へ戻る筋道を与えてくれます。

ウェブサイト全体の階層を少なくすることも有効です。MoogeOneではトップページに、メニューに加えそれらに含まれるサブメニューをも表示させたことで、全体として1階層分少なくて済むように設計されています。(例えば、いくつかの異なるレストランのメニューを同時に比較検討するときは、全ての店のメニューを開いておいたほうが、1回1回開けたり閉めたりするよりも、やりやすいですよね?) これによりユーザのホッピング(階層を行ったりきたりする)回数が減少することになります。

各ページに適切なタイトルをつける事も重要です。タイトルはブラウザのタイトルバーだけではなく、お気に入りや編集時のタイトル一覧表示などさまざまな場所で表示されます。タイトルをつけないと、全ての表示が「無題」「NewPage」などになり、作成者にも不便、ユーザにも不親切です。タイトルはスペースの問題で最初の数文字しか表示されないケースが多いのでMoogaOneでは「組織名 ページの内容」ではなく「ページの内容 組織名」の順にしてあります。

最終的には人間が頼りです

不思議なことに多くのウェブサイトでは、そのサイトを運営する団体・企業の連絡先を見つけるのに苦労をします。また、いくら探しても分からない事がままあります。「ウェブサイトはそれ自身で完結すればよいので、電話番号や住所は不要」という考えなのでしょうか? もしそうであれば、明らかな間違いです。

どんなにユーザビリティに富んだウェブページを作ったとしても、それがリンクしあう多数のページの集合(いわゆるハイパーテキスト)である限り、ユーザは、ページ間を行ったり来たりのホッピングを繰り返さないと、目的の情報にたどり着けないのが常です。そんな時、「このページの運営組織の人間に聞けたらどんなに楽か」と誰もが思うのではないでしょうか? 組織名、代表電話番号、住所、ほか連絡先は、最も分かりやすい形で提示されるべきです。もしそのことによって電話が殺到するのであれば、それは「ウェブページではユーザのニーズが満たされていない」つまり「ウェブページ作りに失敗している」事を意味しているのではないでしょうか?

<< 前のコラム | 次のコラム>>