シングルカラムから始める情報設計

横並びは複雑化の第一歩

Webサイトの設計をする際、必ずといっていいほど縦にコンテンツを並べて構成を考えるようにしています。どのような人が、何を求めて Web サイトに訪れているのかというシナリオを基に構成を考えていくわけです。詳細なレイアウトを考えるのではなく、情報の流れが適切であるかどうかを判断するための工程にしています。

パソコン向けの Web サイトデザインの悪い癖のひとつに、「同じくらい重要だったら、横に並べる」というのがあります。広いスペースがあったパソコンが主流の時代ならではのアプローチですが、今は状況が大きく異なります。配信者側にとっての『重要』を出すことは間違っていません。しかし、あれこれ重要だからという理由で隣り合わせにしてしまうと、様々なデメリットが生まれます。

訪問者に迷いが生じる

直接関係のないコンテンツが横に並ぶことで視点の動きが多くなる可能性があります。また、一度に与えられる選択肢が多いと、結果的に何も選ばないという結果に陥ることがあります（参考文献）。物理的な近さは関連性を示すことがあるので、関係のないものが横に並ぶことで、訪問者の頭のなかでうまく消化できないこともあります。

レスポンシブ対応が難しくなる

実装のテクニックだけではレスポンシブWebサイトの対応は難しいです。実装が難しくなる要因のひとつに、パソコン向けのサイトによくある「画面を良い感じに埋めましょう」という考えが残っているところ。関係のないコンテンツが横に配置されていると、小さな画面で見たときに意味が通じない順序でコンテンツが表示されることがあります。もちろん、JavaScript やサーバーサイドで対応するテクニックはありますが、複雑なレイアウトを複雑な手法で上乗せするという非効率なことになります。

「とりあえず」が増える

訪問者だけでなく、コンテンツ配信者側にとってもデメリットです。大きな画面のときだと、とりあえず掲載するという余裕がありました。関係のないコンテンツを横並びにできたわけですが、この『余裕』がサイトを複雑化させたり、厳密な情報のプライオリティ付けを難しくしていました。

コンテンツフローを考える

最近は 1 カラムでレイアウトを組むサイトが増えてきているので、既に実践されている方もいると思います。しかし、ただ縦に並べれば良いというわけでもなく、以下のことに注意して構成を考えるようにしています。

訪問者にとって意味のある順序か

配信者側がアピールしたいことが優先になりがちなことがあります。また、単に重要と思われるものを上から順に並べれば良いものでもありません。訪問者はまず何を必要としているのでしょうか。そして、その次に続くコンテンツは最初に目にしたコンテンツに続くものでしょうか。ひとつのストーリーをつくるように順序を考えていきます。

コアコンテンツを明確にする

たくさんの情報が掲載されていると、何が重要なのかの把握が難しくなります。訪問者はなぜアクセスしたのでしょうか。何が必要なのでしょうか。それが明確でないまま縦に並べても、かえって分かり難い画面設計になることがあります。コアコンテンツのプライオリティを高くし、補助するために必要最低限の情報は何かを検討します。

重複したコンテンツはないか

同じ画面の構成を考えているわけですから、重複はありえないと考えるかもしれません。配信者側が「念を押して伝えたい」「ちょっと切り口が違うから」という理由で似たようなコンテンツが掲載されていることがあります。ゴールに繋がる導線であれば繰り返すことがありますが、コンテンツは重複がないように整理します。

新規案件やランディングページであれば実現が難しくない 1 カラムレイアウトですが、そうでない場合もあります。利用者のことを考えてサイトを構築しているにも関わらず、情報構造やナビゲーションは社内政治が反映されていることがあります。こうしたことにならないように利用者のストーリーを共有することも大事ですが、今の消費者の心理やニーズ、Webトレンドや社会情勢も踏まえることで、理解が深まることがあります。話し合いや情報共有が不可欠ですし、場合によっては長期戦になりますが、作り方を変えるには避けることができない工程でしょう。

シングルカラムは「とりあえず」を許さないので、厳格な情報設計が余儀なくされます。従来の作り方をしていると難しそうですが、本来の IA の力が発揮できる場がまたひとつ増えたのではないでしょうか。