ジグザグ型レイアウトの落とし穴

2020.12.17　Posted by sato.y

Webデザイン

失敗しない色の伝え方横並びの画像と説明文のセットが段落ごと、互い違いに配置されているのが「ジグザグ型レイアウト」です。雑誌等における自然な視線の流れとして有名なZパターンレイアウトの仲間にあげられることもあります。普段Webサイトを閲覧していて見た覚えがある、という方も多いでしょう。

しかしジグザグレイアウトは意外にも「Webページの流し読み」の観点において注意が必要なレイアウトです。
（基本的なサイトの流し読みパターンについてはこちらの記事をご参照ください。「流し読みパターン一覧！ユーザーはWebサイトをどう見る？」）

1 ジグザグ型レイアウトとは？
2 大切なのは「画像の価値」
3 価値がないと判断された画像は、流し読みの障害物になる
4 まとめ

ジグザグ型レイアウトとは？

横並びになっている画像と説明文のセットを、ブロックごとに画像と説明文を左右入れ替え、互い違いに配置していくレイアウトを言います。

ジグザグ型レイアウト

行ったり来たりを繰り返して刈り込んでいく芝刈り機の動きに似ていることから、「芝刈り型」と呼ぶこともあります。
このようなジグザグ型のレイアウトは、サービスの説明や製品情報の紹介など、ストーリー性を持たせた内容のコンテンツを紹介するときによく見られます。上から順にたどっていけば、その企業の成り立ちやサービスの利用方法、商品の変遷や機能がわかりやすくなる、というロジックです。
また見た目が単調になってしまうのを防ぎ、閲覧時にほどよいリズム感が生まれることからWebサイトではよく利用されています。

画像と説明文のセットをそのまま追加していくだけの伝統的なレイアウト（ここでは「整列型レイアウト」と呼ぶ）に比べると増加傾向にあります。

整列型レイアウト

ジグザグ型レイアウトは特にパソコン版のサイトで多く見られるパターンですが、その理由は左右に幅に余裕があるために画像と説明文を横並びにしやすいから、というもの。逆に言えばスマホサイトでは少し採用しづらいレイアウトといえます。

以下、ジグザグ型と整列型を比較しながら、流し読みのしやすさに着目し、ジグザグ型レイアウトを採用する際の注意点を説明していきます。

大切なのは「画像の価値」

画像に十分な「価値」がある場合、どのレイアウトを採用したとしても流し読みを阻害することはないとされています。
理由は、テキストや画像の整列方法よりも表示されている情報の価値の方が重要であるためです。当然のことですね。情報価値のある画像は、ジグザグ型・整列型に関わらずユーザーによく見られています。

Webサイトの閲覧時、ユーザーは「写真→文章」の順に視線を移すという基本的な特性があることをご存知でしょうか。
まず画像を見て直感的に情報を得て、さらに説明文を読んでより詳しい情報を得るといった具合に、それぞれを交互に見ながら読み進めていきます。自然とこのような形をユーザーが取れれば、レイアウトに関わらずスムーズに情報を得ていくことができるというわけです。

よってポイントとなるのは、「ユーザーは一番最初の画像で価値があるかを判断する」という点です。
ここでいう価値がある画像とは、単なる装飾以上の役割を果たす画像のことです。例えば製品のディテールがよくわかる精密な写真や、サービスに同梱されているものが一覧できる写真、などを指します。

このような画像が最初のブロックに使用されていれば、ユーザーは以降も価値ある画像と判断し、説明文と同様に画像をよく見てくれるというわけです。
これはどちらのレイアウトであっても押さえておくべきポイントであるといえるでしょう。

価値がないと判断された画像は、流し読みの障害物になる

一方で最初の画像に価値がないと判断された場合、ジグザグ型のレイアウトでは画像が流し読みの障害物になってしまうとされています。
画像にたいした情報価値がないと判断したユーザーは、画像が目線に入るたびにそれをスキップして説明文に集中しようとします。しかしジグザグ型のレイアウトでは、画像に邪魔されて流し読みがうまくできなくなってしまうのです。
障害物になる画像をうまく避けていくことができない理由は、以下の2つです。

■理由1：整列型に比べてコンテンツの場所を予測しづらい
整列型のレイアウトであれば、画像を無視して説明文のみを上から下に追っていくだけでよいため特別問題はありませんが、ジグザグ型のレイアウトはそれほど単純ではないため一瞬説明文を探して視線が迷います。その際、画像を無視したくても「写真→文章」の順に視線を移すという特性によってまず画像を見てしまいます。

■理由2：視線の残留が発生する
最初の説明文を読んだユーザーはスクロールをして次のブロックを表示させます。このとき視線を動かさずにページを移動させると、まず目に入ってくるのは次のブロックの画像となるためです。
つまり見なくていいと判断したはずの画像が、どうしても先に目に入ります。

結果、一度画像に視線が向き、改めて説明文に視線を合わせ直すという流れになってしまいます。これではユーザーに不快感を与えてしまうでしょう。装飾画像メインのWebページでは、ジグザグ型では流し読みがしやすいとはいえないため、整列型を含め別のレイアウトを検討すべきです。