三井 英樹@日刊デジタルクリエイターズ

 深夜に帰宅して家の中が真っ暗でも,自宅ならどこに電灯のスイッチがあるのか迷わないし,どこにぶつかりそうなテーブルがあるのかもわかっています。Webにおける画面のレイアウトとは,ユーザーと機能との間にこうした関係を結ぶためのものだろうと思います。初めて触れても,どこか使いやすく,推測がきく情報配置。それがレイアウトの「力」なのだと思います。

情報の種類によってある程度パターン化されてきている現状

 情報を見やすくする,情報に辿り着きやすくする方法を追求している業態(?)としては,「Webニュースサイト」があります。下記の例は,上段が「新聞系」,下段が「Webメディア系」です。似ている中にも,少し出自が感じられるレイアウトに落ち着いているように思われます。

 ある程度以上の文字数と写真で構成される「コンテンツ」を膨大に蓄積しつつ,いかに,来訪者の目に留めるようにするか。さらに広告ビジネスなどを重ねる――それがこうしたサイトの使命です。

 その大前提は,コンテンツの重要性は提供者が決めるのではなく,来訪者が決めるということです。そのためには,多くの人が興味を持つであろうコンテンツ(大ニュース)以外は,ある程度平等に並べる必要があり,情報は整理されて並べられ,「勘が利く」状態にしておくことが大切です。

 そうした「ゴール」を目指して,バージョンアップしてきた結果(現状)を見ると,レイアウトのパターンを見ることができます。それは,多くの人への共通の「体験」を提供しようとする際に,受け入れられるものの幅はそれほど広くないことを示しているのかもしれません。先ほどの六つのサイトについて,名称を示すエリア,広告のエリア,コンテンツの入っているエリア,という具合に色分けをしてみましょう。


朝日新聞(4778文字)・ 読売新聞(4097文字)・ 毎日新聞(3093文字)

CNET Japan(12038文字)・ japan.internet.com(4936文字)・ ITmedia(5119文字)

 レイアウトと共に,コンテンツにも注意してみてください。文字の大きさ,コンテンツの本数,文字量の大きさ…,レイアウトに密接に関係する項目は決して少なくはありません。そして,それら全部の情報が,何か「意思」を感じるシステムかどうかの分かれる点でしょう。

 上図では,その画面キャプチャを取った時点での文字数もカウントして載せています。こうした文字量は,日々刻々と変化するのですが,大まかに言えば,コンテンツという情報を,どれだけ一度に提供しようとしているかを表しているとも言えます。トップページにたくさん並べるのか,奥のほうに並べてリンクだけをトップに置くのか。そのあたりは,来訪者の特性の傾向をどう読んでいるかにかかっているのでしょう。

 また,コンテンツをどのようにエンドユーザーに渡し,どのようにメンテナンスし,どのようにブランドを印象付けさせようとしているのかもいくつかのアプローチがあります。

 たいていは左上に置かれている「ロゴ」が,どこまで,どんな形で浸透させようとしているのか,という戦略を担う部分です。控えめに置こうとするサイトも,かなりインパクトのある形で配置するサイトもあります。こうしたロゴは基本的には「左上」が定番になり,どのページにも配置され,クリックするとトップページに行くという「迷ったときの対策」に用いることが,徐々に常識化されているようです。

 こうして見ると,「レイアウト」は単なる「(グラフィック)デザイナー」の仕事には見えなくなってきます。どうした情報があり,それをどう使いたいのか,それをどう届けたいのか,様々な要素が絡み合って,成立するものなのです。

インフォメーション・アーキテクチャ(IA)との関係

 料理を作るときのことを考えてみてください。手持ちの材料をすべて並べてみるのが普通ではないでしょうか。作り出して新しい食材が見つかったら,全体の「構成」を考え直すようなことが起こります。

 少し前,よく笑い話の例として出されたのは,amazonのメニュータブです。扱う商品がどんどん増えて行ったら,このメニュータブはいったいどうなるのだろう,という話です。


amazonのパロディ

 この絵は,見た目のおかしさもさることながら,こうもたくさんの「分類」に囲まれてしまっては,ユーザーは自分の欲しい物がどの分類に属するのかを迷ってしまうということを端的に表しています。

 「レイアウト」は,中に組み込む情報でその成否が決まります。お店の良し悪しが,建物の良し悪しではなく,商品の良し悪しに深くかかわるのと同じです。情報における「商品の品揃え」にあたるものは,コンテンツ量だけではありません。「辿り着きやすい良質のコンテンツ」が大切になります。そのためには,綿密な情報整理が大前提です。それを担う職種を,「インフォメーション・アーキテクト(IA)」と呼びます。

 レイアウトは,色の次に感覚的に「こんなもんかな」や「カッコよさそうだ」などと軽く決められがちな分野かもしれません。しかし,最も緻密で様々な要素との連携を持った,UI(ユーザー・インタフェース)部品の一つといえるでしょう。


三井 英樹(みつい ひでき)
1963年大阪生まれ。日本DEC,日本総合研究所,野村総合研究所,などを経て,現在ビジネス・アーキテクツ所属。Webサイト構築の現場に必要な技術的人的問題点の解決と,エンジニアとデザイナの共存補完関係がテーマ。開発者の品格がサイトに現れると信じ精進中。 WebサイトをXMLで視覚化する「Ridual」や,RIAコンソーシアム日刊デジタルクリエイターズ等で活動中。Webサイトとして,深く大きくかかわったのは,Visaモール(Phase1)とJAL(Flash版:簡単窓口モード/クイックモード)など。