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

このエピソードで話していること

• 前回の「写真が大事」という話からの続きで、今回は視線誘導の基本を解説
• F型：Google検索結果のように左上から下へ、1行ずつ左→右に視線が動くパターン
• Z型：インスタグラムの9マスのように左上から右下へジグザグに視線を走らせるパターン
• 情報量が多く読み込むものはF型、感覚で楽しむものはZ型が向く
• Windowsエクスプローラーの詳細一覧はF型、ギャラリービューはZ型の思想
• B2BのWebサイトは「左上にCTAを置く」のが基本戦略
• 訴求が右上・中央・右下と序列なく配置されていると読まれずに離脱される
• 漫画の吹き出しのように読む順番が分からないレイアウトは失敗パターン
• 特徴のない文章は刺さらない──「夢を叶えます」より「カフェ風の家を作ります」
• 顔写真の視線の先に伝えたい情報を置くと目が動く
• 読ませたい文字は大きく、ジャンプ率でメリハリをつける
• カラーリングは赤を一点だけ使うなど強調のメリハリが重要
• アニメーションの切り替えは早すぎると読まれない、5〜6枚を超えると覚えられない
• スライドなど動くものが多いと視線が奪われ、世界観と滞在率はトレードオフになる

こんな方におすすめ

• ホームページのどこに何を置くべきか迷っている方
• CTAボタンを配置しても問い合わせが増えない方
• トップページの訴求が伝わっていないと感じている方
• Instagram・YouTubeなど自社メディアの見せ方を考えたい方
• 読まれる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枚を超えるスライドはユーザーが覚えられません。また、スライドやアニメーションなど動くものが多いほど視線が奪われ、本来読ませたい要素への集中が削がれます。世界観の演出と滞在率・離脱率はトレードオフだと理解して設計することが大切です。

---

Podcastアプリで聴く

通勤中や作業中に聴くなら、お好みのアプリでフォローしていただくと便利です。
※ フォローすると、新しいエピソードが自動で届きます

番組情報

Webマーケティング特捜部〜企業HPを稼ぐ営業マンに変える〜

大手SIerからメガベンチャーまで、システム開発とマーケティングの両面で実績を積んできた株式会社アスターリンク代表の硯里宏幸氏が、多くの経営者が陥る「Web集客の悩み」を論理的に分解し、コストをかけるだけのWebサイトを「稼ぐ営業マン」に変えるための勝ちパターンを紹介していくビジネス番組です。毎週木曜日更新。

メインMC

⁠硯里宏幸
株式会社アスターリンク 代表
https://www.aster-link.co.jp/⁠

名古屋工業大学大学院 情報工学専攻 修了。新卒で富士通（現・富士通株式会社）に入社し、SEとして堅実なシステム開発・プロジェクトマネジメントに従事。その後、メガベンチャーのエイチームへ転職。Webエンジニアとして「ナビクル」等のバックエンド刷新を担当する傍ら、SEOの才能が開花。激戦ジャンルで検索1位を獲得し、コンテンツマーケティング部を統括する。2019年に独立。「Webは作品ではなく資産」をモットーに、エンジニアリングとマーケティングを掛け合わせた実践的なWeb集客コンサルティングを行う。

サブMC

纐纈智英
アストライド-Astride- 代表⁠
https://www.ast-ride.com⁠

「左脳と右脳のハイブリッド」を武器に、人の心の深層に迫るインタビュアー。行政職員として12年間、予算編成や徴収業務に従事した「論理的思考（左脳）」と、音楽コンテストでグランプリを受賞するなど「芸術的感性（右脳）」を併せ持つ、異色のバックグラウンド。これまでに200社以上の経営者インタビューを行った経験を活かし、経営者すら気づいていない「言葉にならない想い」を引き出して映像化する。

番組への感想、MCへのメッセージは以下までお寄せください。

⁠suzuri@aster-link.co.jp⁠

制作

アストライド-Astride-（⁠https://www.ast-ride.com⁠）

サウンドロゴ（クレジットコール）：松島史奈

カバーデザイン

的場仁利（Mat N.Studio）

※ この番組は「THE VIOCE PLATFORM」から配信されています。企業の番組参加については こちら