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

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

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

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

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

最近よく見られるカラムを3つに切ったレイアウトでは、エリアを以下のように使い分けていることが多いようです。

1. メインの情報エリア
2. ナビゲーションエリア（左/右ナビゲーションと呼ばれるエリア）
3. 関連情報・広告エリア

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

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

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

が重要です。

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

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

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

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

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

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