Liner Note

要約：サイドバーの役割を再検討し、サイドバーにどういった情報をどこに入れれば閲覧者が最もハッピーかを考えてみました。

サイドバーいらない論に始まって、リキッドカラムデザイン^*1 なんかを話してお休みしていたブログデザインの話ですが、ヤスヒサさんのサイドバーの行方という記事をみて、また少しずつ考えていました。

えーと、本筋を話す前にちょっとおさらいしておきましょう。まず、サイドバーいらない論では、サイドバーは一般的に過去ログや他のカテゴリなどのリンクをたどることによって、その人の考えを知るきっかけができたり、コメントを追うことができる風に使われているんじゃないかと指摘しました。しかし、その役割は必ずしもサイドバーに担わせるべき類のものではなく、そうすることによって却って読者の本文に対する注意力を削いでしまっているのじゃないかとも言いました。その上でマルチカラム（段組）ではなく、1カラムもメリットあるよという話をしました。

しかし、よくよく考えてみるとこの展開も1カラムのメリットだけを挙げて、マルチカラムのメリットを話せていない点で考察が甘いよなという感じもしていました。実際、サイドバーも役立つ局面は十分あるはずです。その点、サイドバーに載せるべき・載せたい情報を吟味しているヤスヒサさんの記事は面白いなと思ったのです。

サイドバーの役割ってなんだ？

さて、サイドバーにおける最も効果的な情報の配置が上記のように現在一般的に使われている用途でないのならば、いったいどういった情報をどこに配置したらよいのでしょうか。

そのためには、そもそもサイドバーの役割とはいったい何なのかを考える必要があるでしょう。人によって諸処あると思うんですが、今のところ私は、その役割はユーザに本文をよりよく理解してもらうための助けになることだと考えています。なぜかというと本文の印象を強くするためには、本文とは別の位置＝サイドバーに本文の理解を助けるコンテンツを並べる必要があるからです。

もうちょっと詳しく書いておきましょう。

まず理由の前提として、1カラムだとどうしても全体的にメリハリのない単調なデザインになりがちというのがあります。また、ウェブ上の文章は基本的に斜め読みされるものです。ですから、本文と注釈・補足あるいは参考リンクを一緒に載せても、どうしても本文の要旨的な部分以外は印象が薄くなってしまうのではないでしょうか。ですから、そうした情報をサイドバー部分に配置し、意図的に本文とは異なるようにメリハリをつけていくことで、ページのメインコンテンツである本文の読解の助けになることができるのです。

具体的に何を載せるのか

えーと、文章でいろいろ書いてばかりいても始まりません。少し具体的な話をしましょう。

まず1点目、本文の読解を助けるものですが、例えば以下のようなものをサイドバーに添えてみると良いんじゃないでしょうか。

注釈や附記など本文の補足となる文章

本文の補足や附記など本文の補足となるものです。余談や雑談なども本文と一緒にするとメリハリが無くなりますので、適宜分離した方がよいと思います。

この手のコンテンツを文末脚注でまとめるとページ内移動が発生し、視点移動の関係上本文を見失ってしまう可能性がありますが、サイドバーはその点本文と並列関係にあるので、その問題は解消されるのではないでしょうか。SWAのWebページさんなんかは本文と附記がきれいに分離されていて、読み物として非常に良質なデザインになっています。

イメージ画像など本文を読解するための助けになるもの

短文なら良いですが長文でテキストのみとなると、全体として文字の羅列といった印象が出てしまい、テキスト字体の上手下手とは関係ないところで、ユーザを取り逃してしまう可能性があります。ですので、例えばデジモノに埋もれる日々さんのコラムのように見出しを敢えて画像化して要点を強調してみたり、あるいは文章に関連する画像を掲載してみると読者が読む支えになると思います。

ただ、本文と密接な関係のある画像（本文の根拠となる資料図・概念図など）はあくまで本文に位置づけられるものなので、アクセントとして使うのか、それとも本文の一要素として使うのかを考えて、明確に区別すべきだと思います。

参考となるページへのミニリンク集

例えばAの話をしたいけど、そのためにはBを前提として理解していないといけないというケースを考えましょう。ここで、Bの話をしてしまうと、構成上AとBどちらの話がしたかったのかわかりづらくなる場合があります。なので、とりあえずわからない人はリンク先で勉強してねというリンクを張っておくというケースがあるかと思います。

これをサイドバーに持ってくることで、読者はそれが前提となっていること、（理解できていない場合）それらを読めばいいことを一目で判断できるようになります。これは上記の「注釈や附記など本文の補足となる文章」を広義に考えたものに含めて良いかもしれません。

参考文献へのリンク

例えば、書籍からの引用や書籍の要約がある場合、書影付きのオンライン書店へのリンクがあれば、視覚的に他者の意見の援用をしているのだと判断しやすいでしょう。

本文全体の目次など全体を俯瞰できるツール

長文になると、全体の構成が複雑なものになり、読者としては「今何を読んでいて、この人は何を言おうとしているのか」が曖昧になりがちです。

そうした所に陥らないために、目次をサイドバーに貼り付ける形で提供する^*2 ことで、全体の見通しが良くなりますし、リンクを張っておけば各見出しにスクロールを何度もすることなくたどり着くことが出来ます。

Kanzaki.comさんでは、各中見出しに目次表示ボタンをつけていますが、サイドバーでの表示も向いているかと思います。

あとはサイドバーでコメントとか、あるいはサイドバーを丸々Wikiにしてみるとかも実験としては面白いかなとは思うんですが（＝コメント欄で吸収できない読者のフィードバックを掲載する）

1. 閲覧者のブラウザ幅に応じて自動的、あるいは閲覧者自身の手動操作によって最適な段組数に変形するデザインのことだと自分は定義してます[戻る]
2. CSSでいうとposition: fixed[戻る]

キーワード：

• ウェブデザイン
• ユーザビリティ
• 情報の設計

この記事はシリーズものの一篇です。ブログのIA研究シリーズのそのほかの記事もよろしければご覧ください
このシリーズ記事のフィード