スマホで見た時、その画像は何秒で伝わるか——視線誘導の基本

商品画像を作るとき、私たちはつい「情報をどれだけ詰め込むか」を考えてしまいます。しかし実際にユーザーがスマホの一覧画面でその画像を見ている時間は、体感でせいぜい一秒前後です。読まれるのではなく、見られる。その一瞬で「自分に関係があるか」を判断されている、というのが実情に近いと思います。

だからこそ、画像の中で視線がどう動くかを設計することは、装飾ではなく機能です。

視線には型がある

視線の動きにはある程度共通したパターンがあることが、これまで多くの現場や研究で報告されています。代表的なのが「Z型」と「F型」です。

Z型は、左上から右上へ、そこから斜めに左下へ、そして右下へと視線が流れるパターンです。写真やバナーのような、要素が少なく構成が明快なビジュアルで起きやすいとされています。F型は、左上を起点に横方向の走査を数回繰り返しながら下に降りていくパターンで、文字情報が多いページやテキスト主体のコンテンツで見られやすい動きです。

商品画像はどちらか一方に決め打ちする必要はありません。写真中心の構成ならZ型を意識し、訴求文言やスペックを載せるならF型的な視線の降り方を前提に情報を並べる。まず「この画像はどちらの動きになりそうか」を自分に問うところから始めます。

最初に見るべき場所を、こちらで決めておく

視線の起点は基本的に左上です。ここに何を置くかで、その後の視線の流れ全体が決まります。ここで曖昧な要素——ロゴだけ、装飾だけ——を置いてしまうと、視線は迷子になります。最初の一点で「これは何の商品か」「誰向けか」がわかるようにしておく。これが視線誘導の出発点です。

そして、視線は必ず「対比のある場所」に引き寄せられます。大きさの差、色の差、余白の差。すべてが同じ強さで主張していると、視線はどこにも留まらず素通りしてしまいます。伝えたいことが複数あっても、画像の中で一番先に見てほしいものは一つに絞る。これは私がカメラで被写体を選ぶときの考え方とも重なります。全部にピントを合わせようとすると、結局何も際立たなくなるのです。

優先順位は、情報の大きさで語る

言葉で優先順位を説明しても、一瞬しか見られない画像の中では伝わりません。優先順位は視覚の強弱、つまりサイズ・コントラスト・余白の使い方で語る必要があります。

一番伝えたい価値を大きく、次点の情報はひとまわり小さく、補足情報はさらに控えめに。この序列がはっきりしているほど、視線は迷わず流れます。逆に、すべての文字が似た大きさ・似た太さで並んでいる画像は、情報量が同じでも「何を見ればいいかわからない」画像になりがちです。

私が普段の制作で意識しているのは、まず情報を紙に書き出して優先順位をつけ、それから初めてレイアウトに落とし込むという順番です。デザインから先に考えると、どうしても見た目の整い方が優先されて、本来伝えるべき順番が崩れてしまいます。

一瞬で「腑に落ちる」かどうか

視線誘導は、テクニックである以前に「相手にどう見えているか」を想像する作業だと感じています。Z型・F型といった型を知っておくことは有効ですが、型に当てはめること自体が目的ではありません。その画像を初めて見る人が、一秒の中で迷わず情報にたどり着けるか。そこが腑に落ちて初めて、画像は仕事をしたと言えるのだと思います。