授業プリントを書くときに私の頭の片隅にあること。 pic.twitter.com/zVhmF1rS5E
— たろす ℝ (@TaRoS_physics) January 8, 2022
( ,,`・ω・´)ンンン? pic.twitter.com/vK9g7Ekdyh
— たろす ℝ (@TaRoS_physics) April 19, 2025
視線誘導とは?
視線誘導とは、ユーザーの視線がどの順番で動くかを意図的に設計し、特定の情報に優先的に注目してもらうためのデザイン手法です。ユーザーが迷うことなく情報を理解できるよう、重要な要素を強調したり、視線の流れをスムーズに導いたりする際に活用されます。
視線誘導の基本パターンには、主に次の3つがあります。
1. Z型パターン
Z型パターンは、アルファベットの「Z」の形に沿って視線が移動するタイプです。具体的には「左上 → 右上 → 左下 → 右下」の順で視線が動きます。
このパターンは、初見のユーザーがページ全体をざっと見渡すときの自然な視線の流れとされています。情報の優先度が均等な横書きレイアウトでよく用いられ、店頭の陳列やシンプルなランディングページに適しています。
2. F型パターン
F型パターンは、アルファベットの「F」の形に沿って視線が動くパターンです。「左上 → 右上 → 左下 → 右下 → 左下…」と、縦方向にスクロールしながら情報を確認する流れになります。
主に、テキスト中心のWebサイト(ニュース記事やコラムなど)でユーザーが情報を読み取ったり、必要な内容を探したりする際に現れる視線パターンです。重要な情報を上部や左寄せで配置するのが効果的とされています。
3. N型パターン
N型パターンは、「右上 → 右下 → 左上 → 左下」の順に視線が動きます。これは、日本語の縦書き文章を読むときに多く見られる視線の流れです。
書籍や縦書きの読み物をデザインする際など、縦方向に情報を配置する場面で意識される視線誘導です。
「そして、今君がこれを読んでいるということは、私はもうこの世にいないのでしょう…」
— 海 (@nttcocomo) April 20, 2025
まずい…
— たろす ℝ (@TaRoS_physics) April 20, 2025
既視感
— たいちゃん (@TaichanStudy) April 19, 2025
それぬぁ
— たろす ℝ (@TaRoS_physics) April 19, 2025
なーんか見覚えあるなぁ…
— バスタオル (@bathtowel0913) April 19, 2025
んね
— たろす ℝ (@TaRoS_physics) April 19, 2025
将来情報デザインの授業をやることになった際に参考にさせていただきます
— セキネン (@Road_to_26M) April 19, 2025
えぇぇ…
— たろす ℝ (@TaRoS_physics) April 19, 2025
悪徳駐車場でよくある。
— ぽんた (@twponta) April 20, 2025
(上限有りはNo.1のみ)とか小さく
すごく見覚えが…
— たろす ℝ (@TaRoS_physics) April 20, 2025
パクツイの最終形態
— 物理猫 (@physics_cats) April 19, 2025
これは引用元かいてあるから良い例ですね(๑・᷄ὢ・᷅๑)
— たろす ℝ (@TaRoS_physics) April 19, 2025
全部読み終えてふふってなって、あっ右上になんかまだある…と思って見たらまた思い通りになってた
— てまかろ (@temakaro) April 20, 2025
色がなくてもこの順に読むのか気になる
— RRX (@lRRXl) April 20, 2025
そしておそらくガチ草
— 【CRWS】レンニュウ (@igxPF3j0oULtrc1) April 20, 2025
ちゃんとツイートのURL載ってて草
— さきがけ(勉強垢) (@gakestudy) April 19, 2025