#17 左上に置くだけで成果が変わる ── F型・Z型で考えるWebデザインの視線誘導

このエピソードからわかるQ&A

F型とZ型の視線誘導はどう違うのですか？

F型はGoogle検索結果を読むときの動きで、左上から下へ降りながら、1行ずつ左から右に視線が動くパターンです。Z型はインスタグラムの9マスのように、左上から右に進み、斜め下の左へ飛び、また右へ動くパターン。硯里さんは「情報量が多く1行ずつ読むものはF型、感覚的に画像で情報を取るものはZ型が向く」と解説しています。WindowsエクスプローラーがF型的なUI、ギャラリービューがZ型的なUIのたとえで語られています。

B2B企業のWebサイトでは、どちらのパターンを採用すべきですか？

どちらか一方に限定する必要はありませんが、「最初の目線が左上に来る」という人間の習慣を踏まえ、重要な訴求やCTAは左上に置くのが有利だと硯里さんは語っています。右下に訴求を置く設計も不可能ではないものの「難易度が高く失敗する確率も高い」ため、安直には左上に置く方が成功法になりやすいとのこと。制作会社がアドバイスに入る場面も、まずはこの基本原則から設計がスタートします。

訴求が伝わらないWebデザインの失敗例にはどんなものがありますか？

典型的な失敗は「訴求が右上・中央・右下に散らばっていて、どこから読めばいいか分からない」レイアウトです。硯里さんは「漫画の吹き出しのように、どこから読むべきか迷わせるデザインは読みづらい」と指摘。また、「弊社は社会に貢献し人材を育てます」のような特徴のない文章はユーザーの記憶に残りません。逆に「一番幸せに過ごせる会社を築きます」のような具体性のある表現の方が刺さると語られています。

文字の大きさや色で注目を集めるコツはありますか？

読ませたい要素は通常のテキストより明らかに大きい「ジャンプ率」を意識した文字サイズで配置するのが有効だと硯里さんは語っています。SEOの観点でも、Googleは大きな文字をタイトルにふさわしい要素として評価するアルゴリズムを公表しています。カラーは赤などの目立つ色を一点だけで使い、全体を赤にしないこと。近似色での乱用（近々）を避けてメリハリをつけることが、ユーザーの視線を正しく誘導するコツです。

アニメーションやスライドは多用した方がいいのでしょうか？

硯里さんは「クライアントは動きがあると喜ぶが、早すぎる切り替えや枚数の多いスライドはユーザーに読まれない」と警告しています。切り替え速度は文字量や難易度に応じて調整が必要で、5〜6枚を超えるスライドはユーザーが覚えられません。また、スライドやアニメーションなど動くものが多いほど視線が奪われ、本来読ませたい要素への集中が削がれます。世界観の演出と滞在率・離脱率はトレードオフだと理解して設計することが大切です。