第四回 ウェブサイトのナビゲーションを考える

ウェブプロデューサー養成講座
株式会社電通 CC 局

中嶋淳＋及川直彦

中嶋淳

1989 年入社。CC 局（当時はPR 局）配属。オリンピック招致コンサルティング、ビジネス情報ビデオ企画制作、デジタル関連企業戦略立案、CD-ROM 企画制作などの後、怒涛の企業ウェブサイト構築屋となる。

及川直彦（株）電通 CC 局業務推進 5 部 主事。
1988 年（株）電通入社。ビール、自動車、海外自治体な
どの PR 作業、情報通信産業関連の CC 作業などを経て、現在はウェブサイトの企画プロデュースを担当。

290 INTERNET magazine 1997/7

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

前回のまとめ■ウェブには、情報提供型、課題解決型、娯楽提供型の 3タイプがある

ψWEB
PRO
DUCE
R

前回は、世の中のウェブサイトをおおまかに「INFORMATION：情報提供型」「UTILITY：課題解決型」「ENTERTAINMENT：（広義の）娯楽提供型」の 3 つのタイプに分類してみました。
そして、それぞれのタイプごとに、ウェブプロデュースの「勝負どころ」を整理してみました。

「 I N F O R M A T I O N 」のタイプで 重 要 な の は「 U p d a t e：情 報 の 鮮 度を保 つ 更 新 性 」、
「 U T I L I T Y 」の タ イプ で は「 F u n c t i o n：効 率 的 な ア ク セ ス を 実 現 す る 機 能 性 」、
「ENTERTAINMENT」のタイプでは「Expression：魅力的な世界観を醸成する表現性」、と■ CASE1 のサイト例

いった具合に、それぞれ発信サイドの限られたリソースや、受信サイドのアクセスの環境の制約の中で、力点の置き方が変わってくる、というわけです。

そして前回は、その中で「ENTERTAINMENT」に不可欠な「Expression」を豊かにする第一歩として、簡単にできるグラフィックスの工夫についてご紹介しました。

今回は、これに続いて「UTILITY」に不可欠な「Function」の工夫をナビゲーションシステムに絞って見てみましょう。

Welcome to CNET.COM

jhttp://www.cnet.com/
中でデザイナーとエンジニアとのコラボレーションにナビゲーション進化論<table> タグで左右に分割している。

よる取り組みが始まったわけです。
今回は発達段階を追って「ナビゲーション」の進■ユーザーを的確に導く■ CASE2 のサイト例

化とそれぞれの「意味」を追ってみたいと思います。のような紙のメディアと異なり、ページの順番など

に制約されず、多様な情報アクセスの道筋を設ける<table> ＋ GIF イメージパーツ

ナビゲーションとは？
ウェブサイトに限らず、デジタルメディア上での表現というものは、コミュニケーションビジネスにかかわる者として悩み多いものです。たとえば、書籍ナビゲーションのパターンとその変遷■ CASE 1 ：ことができるようになったのはよいのですが、かえっ初めてナビゲーションということをウェブで意識して、そこでこれまでにない問題が表面化しました。

たものと言えば、<table> タグで画面を分割し、側「クリックしているうちに、自分がどの階層にいる面もしくは上面に、つねに全体の構造が分かるインのかを見失ってしまう」

デックスをナビゲーションバーとして表示しておく方「どこに行けば自分の欲しい情報があるのか」法です。

「何回もクリックしても、行きたいところまでたどそこをクリックすると、自分が最初に選んだ項目り着けない」の最初のページに戻らなくても、ダイレクトに別の「そもそも、どこをクリックしたらいいのか分から項目に「横飛び」ができるわけです。データをローない」

ドする速さを優先させるならば、今でも優れている

こうした問題に対して、これまでのビジュアルグ

Honda.com
jhttp://www.honda.com/
履歴順に階層構造 GIF が上部に位置し、GIF をクリックすれば、それぞれの階層に戻ることが可能。

■ CASE3 のサイト例

方法と言えます。

ラフィックデザインとは異なる視点（というか昇華▼ meaning of navigation ：画面コントロールさした視点）による「インタラクティブ・インフォメせる要素を1 か所に常に表示させる（たとえ画面スーション・デザイン」という概念が90 年代前半にクロールで消えてしまったとしても！）ことによるユ生まれました。世界最初の「情報建築家」（「今月ーザーオリエンテッドな操作環境の提供。のキーワード」参照）であるR. S. ワーマン氏によるさまざまな書籍や、ユーザー認知心理学の巨匠、ド■ CASE 2 ：ナルド・ノーマン氏などによる体系をもとに、紙やGIFイメージパーツ + ロケーション把握支援

工業意匠というレベルでのデザインからデジタルメ

CASE1 の進化形として位置付けられます。インディアへの展開がなされてきました。また、ウェブデックスがアクセスしているページごとに変化し、そINKTOMIプロデュースにおいても、制約の多いHTML 技術のれによって、たとえば、いま自分がいるページのイ悪い例。フレームが両方とも展開してしまう。

jhttp://www.inktomi.com/

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1997/7291

ンデックスGIF だけ色を変えるか、色が変わってい

とくに、Netscape が3.0 になった時に、彼ら曰る全体のGIF を丸ごと入れ換えるかして、ユーザーく「IMAGE SOURCE MANIPULATION 」と銘打

■ CASE4 のサイト例

ったJava Script によるGIF イメージのon mouseがサイトのどこにいるかを理解させるものです。
ただし、これは、いちいちイメージパーツをローデ（マウスをターゲットのGIF の上に持っていくとGIFが変化する）によるコントロールの出現には、腰がィングしてしまうのが難点です。
▼ meaning of navigation ：ユーザーがどの階層抜けたものです。これ以降、徐々にHTML だけではに位置しているのかをつねに表示させ、ロケーショ満足のいくサイト構築ができなくなってきています。

ンの把握を支援する環境の提供。

もちろん、1 つの<img src> エリアに複数のGIF を■ CASE 3 ： <frame>

かし、細々したGIF ナビゲーションエリアの場合、IBMフレームが登場したことで、ナビゲーション問題どこをクリックしたのか分からなくなることが多かっjhttp://www.ibm.com/

は一気に進化して、これまでのような考え方をよりたことを考えると、ユーザーのマウス操作効果を考インテリジェンスに実行できるようになりました。

慮した、極めてインタラクティブなナビゲーションとたとえば、CASE1 の要素と組み合わせると、つ言えるでしょう。ブラウザーによって使えなかったり読み込むのですから、重くなることは事実です。しねに上下左右にあり、スクロールしても画面内に常Studio Archetype によるデザイン。

するのは問題ですが。

駐しているナビゲーションエリアの構築が可能とな▼ meaning of navigation ： on mouse 効 果ったわけです。最近では、frame の border=0 を用（適当に名付けてますが…）によるトピック選択のいると、Windows 95 環境ではシームレスな画面構

ユーザー自身による確認環境の提供による、より自成ができます。

発的なコンテンツへのかかわり方の形成。

しかし、これをCASE2 と組み合わせると、「最悪」とも言える事例になってしまうのですから、HTML の進化に惑わされてはいけません。

■ CASE 5 ： Plug-in、Java 言語
フレームなどと組み合わせながら、さらに各種のかりに縦二分割したフレーム構造で、左がナビゲプラグインによる付加機能やJava 言語などにより、ーションエリア、右がコンテンツエリアとします。ユナビゲーションは洗練され、かなりの意味で「何でーザーであるあなたは当然左に並んでいるいくつかもあり」になりました。のGIF インデックスの中から選択するでしょう。ユ

とくに、Shockwave 技術の進化は、出現当初ーザーとしては当然、右側だけページが展開していよりインテリジェンスナビゲーションを予期させるもくと思ったら、実際は両方のフレームが同時に展開のであったのですが、Shockwave for Director のフしてしまうのです！

ァイルサイズが大きいという点と、フレームを越え

これでは、一体何のためにフレームでナビゲーシてのアクセスコントロールに若干無理があったためョンエリアを常駐させたのか分からなくなってしまい（Director 5 で解決したのですが）、ナビゲーション

ますよね。同時に複数のHTML ファイルを読むだけで効果的に利用されるという例はあまり多くはありでも重くなるのに…。最悪です。

ませんでした。

ただしこの「CASE2 ＋フレーム」にもある程度が、FutureSplash（今ではMacomedia Flash）の解決策として、ナビゲーションエリアのHTML フの出現により、世界が大きく変わったのは、ご存じァイルをtarget のHTML ファイルが完全に読み込まのとおり。単なるGIF の反転だけでなく、画面一杯れ た あ と に 展 開 さ せ る Java Script 拡 張 タ グ

利用したエフェクトはもはやCD-ROM と同じレベル「onLoad」をtarget 側のHTML ファイルの<body>での操作性が提供できるわけです。

タグに埋め込めば、ある程度は我慢できるようにな

また、Java アプレットも最近ではブラウザーにJITるわけです。このJavaScript を用いたフレーム分割コンパイラーが内蔵されているため、場合によってはナビゲーションの歴史的大型サイトとしては懐かし効果的なナビゲーションとして活用され始めました。

トップにインデックスを表示しているメニューバーがあり、それがマウスを合わせると反応する。
クリックしてその下の階層に入ると、それと連動してメニューバーも伸びていき、自分がいる位置や、ほかの項目との関係が一目瞭然で分かる。

■ CASE5 のサイト例

sitesakamoto

jhttp://www.kab.com/m/siteskmt/
Macromedia Flash を使用。インデックスの項目にカーソルを合わせると反応する。

WEBPRODUCEのwww.missionimpossible.com がありましたね。
当時はよく解析していたものです…。

Studio Archetypej http://www.studioarchetype.
com/home.html

Java になると、ほとんど「何でもあり」です。ここまで技術的に可能な状況となった場合、どういうイ▼ meaning of navigation ：ナビゲーションのた

ンタラクションがユーザーに関心を持たせながらコンめに、ユーザー環境を悪くしては決してならない。

テンツをブラウズさせられるか、という、より認知心理学的なアプローチが求められてきているようです。

■ CASE 4 ：▼ meaning of navigation ：インタラクティブ効

Java Script による GIF コントロール

果による、コンテンツブラウズへの付加価値提供。

前のほうでも出てきましたが、Java Script の出✘

現によりHTML が大きく強固なものとなったのは、そしてさらに、ここまでまったく触れていない

HTML の進化をリアルタイムで体験されたみなさん

ActiveX を利用してしまえば、もうWWW ブラウザなら自明のことですね。

ーの限界などどこかへ飛んでしまう世界が現実のモ

292 INTERNET magazine 1997/7

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&DR/GA

jhttp://199.170.0.74/

Java を用い、レイヤー構造を積み重ねたアニメーションを切り替えることによって、サイトの情報の構造を明確にするだけでなく、情報自体に構造的な意味を付け加え、楽しくブラウズできるようにしている。

ノとなっています。Microsoft Agent などを見てしたち返り「何のためのナビゲーションなのか」といまうと、きっちりと<table> や<frame> を使って苦うことを頭に置き、階層構造やコンテンツの情報の心してきた時代が甘酸っぱくさえ思えます。97 年後性格などによって、どのような手法が最もよいかを、半には、Netscape、Microsoft ともバージョンアその都度、検討するよう心掛けましょう。

ップの正規版を出してきます。そのころにはよりイ✘

ンテリジェンスな操作環境でウェブを楽しめるはず。

次回は、残りの「Update」について、そのヒン何も最新の方法を使えばよい、というわけではあトを探ります。

りませんが、名ウェブプロデューサーとしては基本に

Hot Word

今気月のになーるキワー

ドMicrosoft Agentjhttp://www.microsoft.com/
activex/gallery/
この中に5M バイト近いコンポーネントがある。
これをダウンロードしてみると、音声認識対応のアラジンの魔法の精が画面をブラウザーを飛び越して縦横無尽に動き回る。

Informati
onArchitecs✛「情報建築家」「ニューヨーク・タイムズ」のウィクデイ・エディcom/）。

ション1 冊には、17 世紀の英国を生きた平均的な人今回取り上げたStudio Archetype 社の創業者が一生の間に出会うよりもたくさんの情報が詰まっ

Clement Mok 氏（彼は最近ではNetObjects 社でている」（リチャード・ソール・ワーマン『情報選択Fusion を開発したことでも有名ですが）や、R/GAの時代』の創業者 Bob Greenberg 氏、前回も取り上げた日本実業出版社）✘Vivid Studio の創業者 Nathan Shedroff 氏など、情報の量が増えている。そして、ますます複雑にアメリカウェブデザインの巨人たちは、すべて何らかの形でこの会議にコミットしている、いわば、なっている。この傾向は加速する一方です。

ウェブプロデューサーたるもの、自らの構築してTEDists として有名な人たちです。

いるサイトが、実は、この情報洪水に荷担している、今回、我々が取り上げた「ナビゲーション」といということを自覚しなければならないはずです。そしうテーマも、ワーマン氏が提唱する「情報建築」て、この洪水をやわらげ、人々がほしい情報にすぐ「情報デザイン」という本質的なビジョンを実現すにたどり着けるように、そして、それを理解できるる、重要な要素の1 つと言えましょう。

✘

ように、提供することを自覚しなければならないと思います。

ウェブで表現することを単なる情報発信として位その際にぜひとも参考にしたいのが、「情報建築置付けるならば、これまでのメディア（たとえば、こ家 」 リチャード・ ソール・ ワーマン氏 ですういう雑誌！）でも全然問題ないわけです。コンピ（http://www.ted.com/rsw.html）。
「情報建築家」

ュータメディアやWWW はよく考えれば使い勝手はとは、ワーマン氏の定義によると、次のようになり悪いし、文字は読みづらいし、と悪いところだらけます。

です。それにもかかわらず、多くの情報建築家たち✘

がウェブプロデュースに取り組むのには、デジタルメ

情報建築家

ディアにしかない「インタラクション」という魅力、

1. データに内在するパターンを構成し、それによ言い換えれば無限の可能性があるからでしょう。さり複雑さを明快にする人。
2. 情報の構造あるいは地図を作り、それにより理3. 明快さや人々の理解、情報の構成についての科学といった時代のニーズに向けた21 世紀の専門職」

ARCHITECTS

Richard Saul Wurmanっているなか、「理解」というキーワードの重要性に

jhttp://www.ted.com/rsw.html

人々が気付き始めているからだと思われます。今こ解に導く道筋を発見させる人。

（ Richard Saul Wurman

らにはウェブサイトの構造が極めて複雑なものにな

INFORMATION

そ、我々の出番だと。
事実アメリカの大学では、こうした「インタラクティブ情報デザイン」についての講座や授業がいた

Graphis 社）る所で開設され、またこうした授業の講師としてウ✘ェブデザイナーたちが教鞭を取り、次世代のウェブ「どうしたら情報の理解を可能にさせるか」といビジネスをより強固なものにしているのです。

う彼の「情報建築家」としての数々のデザインや著技術の進化によって、彼ら「情報建築家」が次作が生み出してきた「情報デザイン」という概念は、はどのようなインターフェイスを開発し、より魅力彼が主宰するTED という会議を舞台に、多くの情的に私たちを「理解」に導いてくれるか。楽しみに

報通信技術のビジョナリー、経営者、デザイナー、しながらも、彼らに負けないような「グッと」くるクリエイターと共有され、支持され、さまざまなフサイトを構築したいと思う今日このごろです。

TED Conferences

jhttp://www.ted.com/

ィールドで深められてきました（http://www.ted.

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1997/7293

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.