Liner Note

要約：ウェブサイトでのコンテンツとナビゲーションを意味的に明示した上で、後者をブラウザに委ねることでウェブサイトの相互運用性向上に役立つんじゃないかという試み

明けまして‥というにはちょっと遅いですね。卒業論文を書いていて1ヶ月ほどお休みしていましたが、そろそろ書き初めにしましょう。

さて、たまにGoogleで探し物をしている時、昔読んでブックマークした記事に出会って読み返すことがあります。さっきはposition:fixed大嫌い：agendaを読み返していたんですが（内容については一度読んでください）、始め読んだときには、この理由というか補足説明にあるWorld Wide Webはハイパーテキストという概念を応用した「ハイパーテキストアプリケーション」で、ブラウザはハイパーテキストアプリケーションのビューワー。当然ウェブログもハイパーテキストアプリケーションという意味がいまいちつかめませんでした^*1 （改めて読んでみたらしっくりきたんですが）。

末尾でも「ページ上部へ移動」とか「スタイルシート切り替え」とか「サイト内検索」とか、本質的にハイパーテキストインスタンスには必要のないものだから。それはブラウザの仕事だとして触れていますが、改めて「ハイパーテキストアプリケーションのビューワ」としてブラウザ側がやるべき領域と「ハイパーテキストアプリケーション」としてのウェブサイトがやるべき領域について考え直さないといけないと思わされました。

ブラウザの役割、ウェブサイトの役割

その各々の役割について考えていた時にInfoperience – ナビゲーションの落とし穴という記事を読みました。ここでは、ナビゲーションをウェブサイト側が担当すると、制作者によるナビゲーションエリアの設計ミスが起こりやすいとしつつ、最後には極論としつつもナビゲーションと内容物を分離するべきではないかと述べています。

ナビゲーションエリアは、ユーザにサイトの基本的な機能を提供するインターフェイスである。しかしそのエリアのデザインを間違えれば、ユーザの操作を不本意に制限してしまうという全く逆の役割を果たしてしまう。

極論から言えば、そもそもコンテンツとナビゲーションを一枚の HTML の中に記述するということ自体が間違っているようにも思えるのである。素のドキュメントとしての価値が下がり、せっかく論理的にマークアップされた文書が、加工・再利用されにくくなってしまう。

また、本来ユーザはサイトの情報構造などというものに興味はない。ユーザは必要な情報を早く見つけたいだけなのであって、すばらしく計算されたサイトの設計などはどうでもよい。ただ便宜上、サイトの構造を理解していれば自分の判断で必要な情報にたどり着けるので、仕方なく全体を把握しようとするだけである。

それと同時に、制作側がどのような順番で情報を見せたいかということもユーザには関係がない。とにかくシンプルな構造にしてさえくれれば、ユーザは好きなようにそれを利用できるのだ。そのためには、ドキュメントは様々なコンテクストや利用方法に耐えられるように、ナビゲーションと内容物を分離するべきである。そして、サイトによって異なる方法で情報構造を示すのではなく、そういった機能は「ブラウザが提供すべき」なのではないだろうか。

Infoperience – ナビゲーションの落とし穴

多様な機器

私はこの意見に賛成です。ブログの普及によってある程度のデファクト・スタンダードができたとはいえ、ナビゲーションの設計が個々人の設計能力に委ねられている以上、その設計ミスにより利用者を迷わせてしまうことは否めません。だとしたら、ウェブページからナビゲーションを分離し、ブラウザの一部として統合・標準化していったらよいのではないかと思います。

そして、その場合のロードマップをこんな感じで考えています。

1. ウェブサイトにおけるナビゲーションの記述方法を仕様として標準化する（HTML5・microformatなどの仕様を活用してなんとかならないか考える）
2. 標準的な仕様・技術が出来ることにより、機械的なナビゲーションの生成（ブログやウェブサイト作成ソフトなど）が行いやすくなる
3. 多くのウェブサイトがその標準に従うようになり、ナビゲーションに関する要素が文書中（埋め込みか参照かはさておき）に記述されるようになる。表示の可否も含め、その表示・動作方法はWebブラウザに委ねられる（後方互換性を考慮し、対応しないWebブラウザのウェブサイト内での表示方法も当面は必要になるでしょう）。

このようにコンテンツとナビゲーションを「分離」、つまり「ハイパーテキストアプリケーション」としてのWebを操作する部分を「ビューワ」であるブラウザ側に委ねていくことで、

• ナビゲーションの一貫性・信頼性が保証できるようになる（サイト毎の一貫性→Web全体での一貫性）
• ナビゲーションが不十分だったサイトにおいても利用者が操作に迷わなくてすむようになる
• “広大な”サイドバーナビゲーション領域が整理され、一画面の本文表示領域が増える
• アクセス環境（PC、携帯端末、プリンター、音声ブラウザ…）や利用者の要求に応じて表示・動作方法を変更（＝最適化）することが出来る

という効果があり、結果として

• ユーザビリティ・アクセシビリティの底上げが図れる
• 機器に依存しないウェブ^*2 へより近づく

ということになります。

「分離」と書いているのは、「コンテンツ」も「ナビゲーション」いずれも一枚の文書中に記述するので分離という言い方はやや不正確かもしれないからと思ったからです。マークアップの観点からは「明確化」と言った方がいいのかもしれません。

ただ、全てのナビゲーションをウェブページから「分離」すればいいわけではなく、サイトイメージの重要な要素である（トップページへのリンクを含む）サイトロゴや、例えばECサイトにおける「買い物かごに入れる」など重要なナビゲーションは、あえてウェブページ中に常時表示させておくことが必要でしょう（特に重要な要素を他のナビゲーションと並列に表示すると、かえってナビゲーションの中に埋没してしまいかねないため）。

「ナビゲーション」とは

さて、「コンテンツ」と「ナビゲーション」と抽象的に書いてきましたが、その「ナビゲーション」は具体的にどういうものを指すのか。本などを参考にしながら、以下のように分類してみました。

名称	役割	具体例
グローバルナビゲーション	全体構造の把握や最上位階層にあるリソースへの移動
ローカルナビゲーション	現在地の把握や同階層・下階層にあるリソースへの移動	ローカルナビゲーション（横の構造を明示） パンくずリスト（縦の構造を明示）
コンテキストナビゲーション	文書に関係するリソースを把握したり、移動したりする	関連情報（参考にした情報、類似した情報、読解上の前提となる情報）へのリンク ページ分割リンク ランキング（当該カテゴリにおける記事のアクセスランキングなど）
リモートナビゲーション	全ページに共通してアクセス可能にしておくべき情報	著作権表記 作者への連絡先（メールアドレス・電話番号）または連絡フォーム
補足型ナビゲーション	上述したナビゲーションを補足し、目的のリソースを見つける手助けをする	サイト内検索 サイトマップ ページガイド 索引
	サイトマップや索引は単独のページとして設置されるイメージがあり、その場合はナビゲーションではなく情報構造そのものを提示することが役割であるため、コンテンツそのものになりますが、アップルのページ下部にあるナビゲーションのように詳細なローカルナビゲーションのような小さなサイトマップを記述する方法もあり、これはナビゲーションの一種だと言えるでしょう。

モックアップを作る

言葉でいろいろ言っていても伝わらないと思うので、試しにモックアップを作ってみました。なお、このプロトタイプはあくまでも表示の一例であって、実際にはこれと異なった他の表示方法も考えられます（例えばページ分割リンクや関連文書をブラウザ側にではなくコンテンツ直下に表示するなど）のであしからず。

モックアップ例：Apple

今回はAppleのKeyNoteの紹介ページを土台に作ってみました。Appleは割とナビゲーションや構造がしっかり出来ているページですが…

サイト構造をファイラーのように表示してみた例。ページの目次も下部に表示。

サイト構造をデスクトップアプリケーションのメニューバーのような感じに表示してみました。ただ、両者は機能が全く違うので、これも単純に移植するわけにはいきませんが。

ノートPCのページを見たいということで、Appleサイト内を「ノート」で検索。

構造がわかるのであれば、パンくずリストとして表示することも出来るでしょう（現実的にはグローバルナビゲーションなどと両方表示する必要があるでしょう）

分離の恩恵を最も受けるのは、画面領域が限られるモバイル機器かもしれません。ただ、どのように表現するかは工夫が必要ですね。

グローバルナビゲーションは初期状態で展開されているべきと言うことであえて分離していません。ただ、初期状態では小さすぎて構造の把握や移動が難しいので、どうにかしたいは思っています。サイト内検索は検索バーに統合、ウェブ検索と適宜切り替えることができます。

下の目次ボタンか、二本指で左方向にスワイプ（右から左へ指を滑らせる）することで、ページの構造を見ることが出来ます（目次をポップアップさせても良いかも）

視覚化してみましたが、ちょっと微妙かな…

モックアップ例：Liner Note

おまけで当サイト中の記事をでも作ってみました。

記事の一覧は時系列、タグ別、あいうえお順、被ブックマーク数順、被コメント順でそれぞれ表示可能です。スペース的に記事を一覧するというより、前後リンク（コンテキストナビゲーション）の拡張という意味合いで設けました。

サイト内を「サイドバー デザイン」で検索した例

モックとしては作りませんでしたが、その他のUA…例えばプリンターなら印刷用CSSをわざわざ作らなくとも、本文領域だけを印刷することが出来るでしょうし、音声ブラウザはナビゲーションをより効果的に利用することが出来るなどといった効果があるでしょう。

まとめ

繰り返しになりますが、要するにブラウザにサイトナビゲーションを担わせることで、ウェブサイトはハイパーテキストアプリケーションとしての柔軟性・相互運用性を向上できるんじゃないかということが言いたかったのでした。分離まで受け入れられるかは別として（例えばHTML5のように）個々の情報をグローバルスタンダードな意味で明確化して、ブラウザがそれに応じてユーザに適切に提示するくらいの方向性はそろそろ見えてきてほしいと思うところです（上記のナビゲーションは部分的にrel/rev属性で表現可能なわけで、そこから何か始まらないかな）。

その他参考にした記事

• ウェブデザインとは何か（Jintrick Archives）
• サイトのナビゲーションとしてサイドバーを採用すべきでない理由 (agenda)
• 我的春秋: link 要素をナビゲーションに利用することの注意点（改訂）
• link要素覚書
• Webアクセシビリティの未来が見えない（関連記事）

1. Webはハイパーテキストのアプリケーション＝応用、実装例としてのWebという点をど忘れしていたのでしょう‥[戻る]
2. このような考え方をDevice Independence（機器に依存しない）といいます（神崎さんによる参考情報）[戻る]
3. この定義だと、ブログパーツやら広告やらはどちらにも属さないのだけど、とりあえずそれはここでは触れないでおく[戻る]

キーワード：

• アクセシビリティ
• ウェブはこうあってほしい論
• ウェブデザイン
• 情報の設計