三木 順哉
本実践メモでも以前に取り上げたように、ここ数年、横幅900px以上を採用するサイトが増えてきています。
画面横幅を900px以上にするメリットとデメリット。右端が欠けることに注意
横幅の拡大によって、情報を掲載できるスペースは拡大し、実現できる表現の幅も広がります。
もちろんそれらは喜ばしいことですが、自由度が増すからこそ、効果的なスペースの使い方をきちんと考えることがますます重要になります。今回はカラムを複数に切ったレイアウトについて、スペースをどのように活かすべきかを考えてみたいと思います。
複数カラムの使用は、メッセージを分散させる
カラムを複数に切って情報を提供することは、1つのページに複数の役割を与えることを意味します。 もちろん、ナビゲーションなどページにとって必要な機能もありますが、より多くのエリアを 定義することはそのページが持つメッセージをぶらしてしまう危険性があることをまずは認識すべきです。 ユーザにとっても、情報が分散されて配置されることで視線の移動が多くなり、情報収集が煩雑になってしまいます。ユーザは同時に複数の情報を、集中して見ることはできないのです。ユーザは基本的にメインカラムを見る
最近よく見られるカラムを3つに切ったレイアウトでは、エリアを以下のように使い分けていることが多いようです。- メインの情報エリア
- ナビゲーションエリア(左/右ナビゲーションと呼ばれるエリア)
- 関連情報・広告エリア
ユーザも無意識のうちに、このような使い分けを認識しているように感じられます。
ユーザは基本的に、何らかの目的を持ってウェブページを訪問しており、必要な情報を探そうとしています。そして、必要な情報は(1)メインの情報エリアにあるはずだと考え、視線や意識はメインの情報エリアに集中するという現象が、弊社のユーザ行動観察調査で見られています。
そのため、
- 確実に伝えたい情報はメインの情報エリアに配置すること
- 各カラムの横幅比の調整などによって、メインの情報エリアがどこであるのかを明確にすること
ここでは上図のような3カラムレイアウトを例に説明しましたが、ページの目的と上記3種類のエリアの使い分けを意識することで、以下のようなレイアウトも検討可能です。
- 本実践メモのように1カラムレイアウト(メインの情報エリアのみ)とし、読み物ページとして役割を特化
- Yahoo! ニュースのようにメインの情報エリアを広く取り、右カラムに他のニュースへのリンク(ナビゲーション)や広告を配置
ユーザのモードを考慮して、カラムの使用を検討しよう
上でも少し触れたように、ユーザが興味のある情報を探したり、選んだりするページ(例えば、Yahoo! Japan トップ)と、特定の情報を集中して見るページ(例えば、Yahoo! ニュースの個別記事)では、最適なページレイアウトは異なります。なぜなら、ページを見ているユーザのモード(ユーザがそのページに期待しているもの)が異なるからです。前者では、そのページのメインの情報を伝えるエリアとは別に、関連情報や広告を掲載するエリアを設けておくと、ユーザが関連情報にも関心を持ってくれる可能性が高くなります。(Yahoo! Japan のトップページは、この効果をうまく利用して広告を訴求していると言えます)
一方、後者にあたるページでは下手にカラムを切らずに、メインの情報エリアを広く取り、広いスペースを活用した情報提供を行った方がよいでしょう。
ウェブページのレイアウト、情報の配置に悩んだ際に参考にしていただければ幸いです。