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

今日のテーマは「F型・Z型で考えるWebデザインの視線誘導」です。ユーザーの視線は左上から右下へ動く。Google検索結果のようなF型、インスタグラム9マスのようなZ型─⁐2つの基本パターンを知るだけで、Webサイトやランディングページのどこに何を置くべきかが見えてきます。B2B企業のトップページに最適な配置戦略から、顔写真の視線誘導、文字のジャンプ率、アニメーションの使い方まで、読まれるデザインの設計基本を硯里さんが解説します。▼番組への感想、MCへのメッセージは以下までお寄せください。[email protected]では「#webマーケティング特捜部」としてポストしてください。▼このエピソードで話していること・前回の「写真が大事」という話からの続きで、今回は視線誘導の基本を解説・F型：Google検索結果のように左上から下へ、1行ずつ左→右に視線が動くパターン・Z型：インスタグラムの9マスのように左上から右下へジグザグに視線を走らせるパターン・情報量が多く読み込むものはF型、感覚で楽しむものはZ型が向く・Windowsエクスプローラーの詳細一覧はF型、ギャラリービューはZ型の思想・B2BのWebサイトは「左上にCTAを置く」のが基本戦略・訴求が右上・中央・右下と序列なく配置されていると読まれずに離脱される・漫画の吹き出しのように読む順番が分からないレイアウトは失敗パターン・特徴のない文章は刺さらない──「夢を叶えます」より「カフェ風の家を作ります」・顔写真の視線の先に伝えたい情報を置くと目が動く・読ませたい文字は大きく、ジャンプ率でメリハリをつける・カラーリングは赤を一点だけ使うなど強調のメリハリが重要・アニメーションの切り替えは早すぎると読まれない、5～6枚を超えると覚えられない・スライドなど動くものが多いと視線が奪われ、世界観と滞在率はトレードオフになる▼こんな方におすすめ・ホームページのどこに何を置くべきか迷っている方・CTAボタンを配置しても問い合わせが増えない方・トップページの訴求が伝わっていないと感じている方・Instagram・YouTubeなど自社メディアの見せ方を考えたい方・読まれるWebデザインの基本を知りたい方▼MC硯里宏幸（株式会社アスターリンク 代表）https://www.aster-link.co.jp/⁠名古屋工業大学大学院 情報工学専攻 修了。新卒で富士通（現・富士通株式会社）に入社し、SEとして堅実なシステム開発・プロジェクトマネジメントに従事。その後、メガベンチャーのエイチームへ転職。Webエンジニアとして「ナビクル」等のバックエンド刷新を担当する傍ら、SEOの才能が開花。激戦ジャンルで検索1位を獲得し、コンテンツマーケティング部を統括する。2019年に独立。「Webは作品ではなく資産」をモットーに、エンジニアリングとマーケティングを掛け合わせた実践的なWeb集客コンサルティングを行う。▼サブMC纐纈智英（アストライド-Astride- 代表）https://www.ast-ride.com「左脳と右脳のハイブリッド」を武器に、人の心の深層に迫るインタビュアー。行政職員として12年間、予算編成や徴収業務に従事した論理性と、音楽コンテストでグランプリを受賞した芸術的感性を併せ持つ。Adobeコミュニティエキスパートとして活動。これまでに200社以上の経営者インタビューを重ね、本人すら気づいていない「言葉にならない想い」を引き出し、ひとつの物語として残してきた。株式会社アスターリンク公式サイトhttps://www.aster-link.co.jp/▼番組概要大手SIerからメガベンチャーまで、システム開発とマーケティングの両面で実績を積んできた株式会社アスターリンク代表の硯里宏幸氏が、多くの経営者が陥る「Web集客の悩み」を論理的に分解し、コストをかけるだけのWebサイトを「稼ぐ営業マン」に変えるための勝ちパターンを紹介していくビジネス番組です。毎週木曜日更新。▼制作：アストライド-Astride-▼カバーデザイン：的場仁利（Mat N.Studio）