検索画面レイアウトのウェブと紙

歴史の浅いウェブのデザインは、当初紙面のデザインのノウハウを模倣した。受け手は何れも人間なので基本はおよそ同じノウハウが通用するはずだ。

しかし、画面のレイアウトを考えていくうちに、やはり紙面とウェブとでは異なる点が出てくる。これらの違いは、素材の違いという、どうしても乗り越えられない制約からくるものが多いが、紙とウェブページとの使い方の違いに起因するところも大きい。

今回は、大量の情報から1つを探し出すインターフェイスを題材に、その違いの例をひとつ挙げてみたい。

「大量の情報から1つを探し出すインターフェイス」とは、例えばウェブでは検索結果画面、紙面では画面いっぱいにぎっしり詰まった求人情報誌の画面などを想像して頂ければよい。

紙面上のレイアウト

ウェブページにそのまま持ち込むと・・・？

これをそのままウェブページに移植するとどうなるだろう。

その前に、ウェブページと紙面との使い方や素材起因の制約の違いについて考えてみる。

ウェブページは、紙面と異なり、全ての情報が画面内に収まるとは限らない。多くの場合、横ははみ出すことはないが、縦サイズは無制限に長くなり得る。その結果、ユーザはマウスホイールをコロコロと回し、画面をスクロールさせて情報を探すといった使い方が一般的に定着している。

そこへ、紙面と同じレイアウトの検索結果画面を持ち込んで見よう。

画像処理がいい加減なのは見逃して欲しい。一見すると、特に違和感もなく、不都合もなく、別になんの問題もないように見えるかも知れない。しかし、このようなレイアウトのウェブページを実際に使ってみると、大変不都合があることに気がつく。どうしても目が疲れて肩がこってしまうのだ。

これは、使い方の違いからくる不都合である。

「見る側」と「見られる側」、同時には動かせない

この不都合とそのワケを考えてみる。原因は、先ほど説明した「使い方の違い」にある。画期的に違う点は、「どちらが動くのか」という点だ。

紙面の場合は、必ず1ページに固定量の情報が収まる。そして、紙面の大きさも決まっている。雑誌自体がA4サイズであれば、(時々は袋とじや折り込みもあったりはするが)全てのページがA4サイズになる。そのため、ユーザは視線の先の決まった位置に、常に画面全体を固定することができる。つまり、ユーザは一見しただけでページ内の全ての情報の概要を把握することができるということだ。

これに対してウェブページ。1ページの大きさは固定されず、含まれる情報量も固定されない。スクリーンの中でスクロールしなければ全体を見ることができない、という特性を持っている。

これは素材起因の制約であるが、このことがユーザの紙面とウェブページの使い方を隔てている。紙面では、目を動かして情報を探すのに対し、ウェブページでは、画面の方を動かすのである。

ところが、紙面からそのまま移植してきたレイアウトは、ユーザにその両方を求めている。この両方を動かすという操作は大変に難しい。画面がスクロールするスピードと、目が左右に往復するスピードが、歩調を合わせなければならないからだ。無論、これをしようとすれば、大変疲れる。マウスホイールの動作速度は、マウスそのものや、PCの設定、ブラウザの種類によって変わるし、たまたまPC上で他のプログラムが重たい処理を実行していたりすると、その影響でスクロールが遅れたりする。これでは歩調は合うわけがない。そしてもしも歩調が合わなかったなら、実は10行あった検索結果のうちの1行を読み飛ばしてしまうかも知れず、しかも読み飛ばしてしまったことにもなかなか気付くことはできないだろう。

スクロールに優しいレイアウト

では、ウェブページ上では、どのようなレイアウトだと探しやすくなるのだろうか。簡単だ。縦一列にお行儀よく整列させればよいのである。

実際、Yahoo!やGoogleなど、おなじみの検索エンジンサイトの結果表示ページは、ほとんどが縦一列のレイアウトになっている。

ユーザが情報を探す順番は紙面の場合と変わらず、頭数文字を読み込んで、自分の希望にマッチするかどうかを、まず判断している。ウェブページにおいては、例えばGoogleウェブ検索では、頭文字の位置は左から数ピクセルの位置に配置され、スクロールすれば、全件が同じ座標を通過する。ユーザは、この座標に視点をロックし、ウェブページをスクロールさせて、頭数文字を探す。そして、頭数文字を読み込んで、希望に沿った情報かも知れないと判断したら、マウスホイールを止めるのだ。

上手な例外

余分なスペースは「もったいない」？

ウェブページの縦一列整列のレイアウトは、全ての情報が画面左端へ集中し、右側が余白となることがある。これを冷静に眺めると「スペースがもったいない」とか「寂しい」と感じるかも知れないが、そんなことはない。必死で捜し物をしているときのユーザは、そんなところに目を配る余裕はないからだ。

望んだ検索結果が得られずにがっかりしているユーザに対して表示すべき情報があるならば、余白に置くのもよいだろう。しかし、「もったいない」や「寂しい」は、そのスペースを無理矢理に検索結果で埋めて、ユーザを疲れさせる理由にはなり得ない。

また、紙面の場合は異なる。空白にもコストがかかるであろうから、無駄なスペースは実際に「もったいない」かも知れない。情報量が多い紙面では、ぎっしり詰めた方が無駄がないし、情報量が多い印象も与えられる。

「応用」することが大事

このように、目的が同じくても、紙面とウェブページとでは提供すべきレイアウトは異なる。ここでは紙面とウェブページとを比較したが、おそらくそれ以外のデザイン(例えば、携帯電話のような小さな画面や、カーナビの画面など)でも、それ固有の特性に合わせた最適なレイアウトがあるだろう。

どれも基本は共有するだろうが、そのまま転用できるとは限らない、ということをしっかり意識して、ちゃんと「応用」することが大事なのだと思う。