2010年01月04日

複数カラムレイアウトをどう活かすか

ソーシャルブックマーク  はてなブックマークに登録  この記事をクリップ!  Yahoo!ブックマークに登録  Google Bookmarks に追加  Buzzurlにブックマーク  del.icio.us に登録  | 
顔写真
ユーザビリティコンサルタント
三木 順哉

本実践メモでも以前に取り上げたように、ここ数年、横幅900px以上を採用するサイトが増えてきています。

画面横幅を900px以上にするメリットとデメリット。右端が欠けることに注意

横幅の拡大によって、情報を掲載できるスペースは拡大し、実現できる表現の幅も広がります。
もちろんそれらは喜ばしいことですが、自由度が増すからこそ、効果的なスペースの使い方をきちんと考えることがますます重要になります。今回はカラムを複数に切ったレイアウトについて、スペースをどのように活かすべきかを考えてみたいと思います。

複数カラムの使用は、メッセージを分散させる

カラムを複数に切って情報を提供することは、1つのページに複数の役割を与えることを意味します。 もちろん、ナビゲーションなどページにとって必要な機能もありますが、より多くのエリアを 定義することはそのページが持つメッセージをぶらしてしまう危険性があることをまずは認識すべきです。 ユーザにとっても、情報が分散されて配置されることで視線の移動が多くなり、情報収集が煩雑になってしまいます。ユーザは同時に複数の情報を、集中して見ることはできないのです。

ユーザは基本的にメインカラムを見る

最近よく見られるカラムを3つに切ったレイアウトでは、エリアを以下のように使い分けていることが多いようです。
  1. メインの情報エリア
  2. ナビゲーションエリア(左/右ナビゲーションと呼ばれるエリア)
  3. 関連情報・広告エリア
Yahoo ! Japan トップのレイアウト例

ユーザも無意識のうちに、このような使い分けを認識しているように感じられます。

ユーザは基本的に、何らかの目的を持ってウェブページを訪問しており、必要な情報を探そうとしています。そして、必要な情報は(1)メインの情報エリアにあるはずだと考え、視線や意識はメインの情報エリアに集中するという現象が、弊社のユーザ行動観察調査で見られています。
そのため、

  • 確実に伝えたい情報はメインの情報エリアに配置すること
  • 各カラムの横幅比の調整などによって、メインの情報エリアがどこであるのかを明確にすること
が重要です。

ここでは上図のような3カラムレイアウトを例に説明しましたが、ページの目的と上記3種類のエリアの使い分けを意識することで、以下のようなレイアウトも検討可能です。

  • 本実践メモのように1カラムレイアウト(メインの情報エリアのみ)とし、読み物ページとして役割を特化
  • Yahoo! ニュースのようにメインの情報エリアを広く取り、右カラムに他のニュースへのリンク(ナビゲーション)や広告を配置

Yahoo ! ニュースのレイアウト例

ユーザのモードを考慮して、カラムの使用を検討しよう

上でも少し触れたように、ユーザが興味のある情報を探したり、選んだりするページ(例えば、Yahoo! Japan トップ)と、特定の情報を集中して見るページ(例えば、Yahoo! ニュースの個別記事)では、最適なページレイアウトは異なります。なぜなら、ページを見ているユーザのモード(ユーザがそのページに期待しているもの)が異なるからです。

前者では、そのページのメインの情報を伝えるエリアとは別に、関連情報や広告を掲載するエリアを設けておくと、ユーザが関連情報にも関心を持ってくれる可能性が高くなります。(Yahoo! Japan のトップページは、この効果をうまく利用して広告を訴求していると言えます)
一方、後者にあたるページでは下手にカラムを切らずに、メインの情報エリアを広く取り、広いスペースを活用した情報提供を行った方がよいでしょう。

ウェブページのレイアウト、情報の配置に悩んだ際に参考にしていただければ幸いです。

ソーシャルブックマーク  はてなブックマークに登録  この記事をクリップ!  Yahoo!ブックマークに登録  Google Bookmarks に追加  Buzzurlにブックマーク  del.icio.us に登録  | 

<< プルダウンメニューのページ遷移は自動?手動? | トップ | 診断ツールにおける選択肢の作り方 >>