👁️ STEP 29: Z型レイアウトとF型レイアウト
人間の視線の動きを考慮した、効果的なレイアウト設計をマスターしよう!
📋 このステップで学ぶこと
- 視線の動きとアイトラッキング研究の基礎
- Z型レイアウト（欧米式）の特徴と使い方
- F型レイアウト（Web式）の特徴と使い方
- 文化による視線の違い
- レイアウトの使い分け基準
- 実務での活用例
👁️ 1. 視線の動きとアイトラッキング
なぜ視線の動きを理解することが重要なのか
ダッシュボードやレポートを作成するとき、「どこに何を配置するか」は非常に重要です。なぜなら、人間の目は情報を探すとき一定のパターンで動くからです。
このパターンを理解し、それに沿って情報を配置すれば、ユーザーは自然に重要な情報を見つけられるようになります。逆に、パターンに反した配置をすると、重要な情報が見落とされてしまいます。
アイトラッキング研究とは
アイトラッキングとは、特殊なカメラを使って人間の視線の動きを追跡する研究手法です。この研究により、人がウェブページやダッシュボードをどのように見るかが科学的に明らかになりました。
📊 代表的なアイトラッキング研究
| 研究機関 | 発見内容 | ビジネスへの示唆 |
|---|---|---|
| Nielsen Norman Group（2006年） | 233人のユーザーの視線を追跡し、ウェブページを見るとき「F型」に視線が動くことを発見 | 重要な情報は左上と左側に配置すべき |
| MIT Media Lab | ダッシュボードの視線パターンを分析し、視線は「Z型」または「F型」に動くことを確認 | レイアウトによってユーザーの理解度が変わる |
| Google UX研究 | ユーザーはページを開いて2〜3秒で「見る価値があるか」を判断する | 最重要情報は最初に目に入る場所に配置 |
視線の基本原則
アイトラッキング研究から、人間の視線に関するいくつかの基本原則が明らかになっています。これを知っておくと、効果的なレイアウトが設計できます。
👁️ 視線の5つの基本原則
| 原則 | 説明 | レイアウトへの応用 |
|---|---|---|
| 1. 開始点は左上 | 左書き文化では、視線は左上からスタートする | ロゴ、タイトル、最重要KPIを左上に配置 |
| 2. 視線は下に向かう | 重力のように、視線は自然に下方向へ流れる | 重要度順に上から下へ配置 |
| 3. 左側に時間を費やす | 右側より左側を長く見る傾向がある | 重要な情報やナビゲーションは左側に |
| 4. 対角線上に注目 | 左上から右下への対角線上は注目されやすい | CTAボタンを対角線上に配置 |
| 5. 中央は意外と見られない | ページの中央部分は視線が素通りしやすい | 中央には補足情報を配置 |
💡 文化による違い
視線の動きは文化（読み書きの方向）によって異なります。
- 左書き文化（英語、日本語の横書き）：左→右に視線が動く
- 右書き文化（アラビア語、ヘブライ語）：右→左に視線が動く
- 縦書き文化（日本語の縦書き）：右上→左下に視線が動く
本ステップでは、左書き文化（日本語横書き・英語）を前提に説明します。
🔲 2. Z型レイアウト
Z型レイアウトとは何か
Z型レイアウトは、視線がアルファベットの「Z」の形に動くパターンです。シンプルなページや、1つのアクションに集中させたいランディングページに最適です。
ユーザーの視線は、左上→右上→左下→右下の順に移動します。この動きを理解して情報を配置すれば、ユーザーを自然に目標のアクション（ボタンクリックなど）へ導けます。
【Z型の視線の動き】
視線は「Z」の形に移動する:
① → → → → → → ②
左上（スタート） 右上
↘
↘
↘
③ → → → → → → ④
左下 右下（ゴール）
【図解】
┌─────────────────────────────────┐
│ ①左上 ②右上 │
│ ロゴ・タイトル メニュー │
│ │
│ ↘ │
│ ↘ │
│ ↘ │
│ ↘ │
│ │
│ ③左下 ④右下 │
│ CTA（行動喚起） 補足情報 │
└─────────────────────────────────┘
Z型レイアウトの4つのエリア
Z型レイアウトでは、画面を4つのエリアに分けて考えます。各エリアには、その場所に適した情報を配置します。
📍 Z型レイアウトの配置ルール
| エリア | 視線の順序 | 配置すべき情報 | 具体例 |
|---|---|---|---|
| ①左上 | 最初に見る（最重要） | ブランディング、タイトル | ロゴ、ダッシュボード名、会社名 |
| ②右上 | 2番目に見る（重要） | ナビゲーション、補助情報 | メニュー、日付、ユーザー名、ログアウト |
| ③左下 | 3番目に見る（行動喚起） | CTA（Call To Action） | 「詳細を見る」ボタン、「申し込む」ボタン |
| ④右下 | 最後に見る（補足） | 補足情報、あまり重要でない情報 | 注釈、更新時刻、免責事項 |
Z型レイアウトの実例：営業ダッシュボード
実際にZ型レイアウトを使った営業ダッシュボードの例を見てみましょう。KPIが1つだけのシンプルなダッシュボードです。
【営業ダッシュボード（Z型レイアウト）】
┌────────────────────────────────────────┐
│ ①売上ダッシュボード ②2024年12月15日 │
│ 🏢 ABC商事 👤 山田太郎 │
├────────────────────────────────────────┤
│ │
│ ┌────────────────────┐ │
│ │ 月間売上目標達成率 │ │
│ │ │ │
│ │ 112% ✓ │ │
│ │ ━━━━━━━━━━━━━━ │ │
│ │ 目標: 1億円 │ │
│ │ 実績: 1.12億円 │ │
│ └────────────────────┘ │
│ ↘ │
│ ↘ │
│ ↘ │
│ │
│ ③[詳細レポート作成] ④データ更新: │
│ [戦略会議資料] 10:30 AM │
└────────────────────────────────────────┘
【配置のポイント】
✓ ①左上: ダッシュボード名（最初に何のページかわかる）
✓ ②右上: 日付・ユーザー名（確認用の補助情報）
✓ 中央 : メインKPI（一番伝えたい情報）
✓ ③左下: アクションボタン（次に何をすべきか明示）
✓ ④右下: 補足情報（更新時刻）
【このダッシュボードの特徴】
・5秒で理解できるシンプルさ
・KPIは1つに絞る（達成率のみ）
・アクションボタンで次の行動を促す
💡 Z型レイアウトが適している場面
| 場面 | 理由 | 具体例 |
|---|---|---|
| ランディングページ | シンプルな構成で1つのアクションに集中 | 製品紹介ページ、キャンペーンページ |
| サマリーダッシュボード | KPIが1〜3個と少ない | 経営層向けエグゼクティブダッシュボード |
| プレゼン資料 | 1スライド1メッセージで伝える | PowerPointの各スライド |
| 広告・バナー | 視線を誘導してクリックさせたい | Web広告、メールマガジン |
📄 3. F型レイアウト
F型レイアウトとは何か
F型レイアウトは、視線がアルファベットの「F」の形に動くパターンです。テキストや情報が多いページに最適です。
ユーザーは最初に上部を横に読み、次に少し下がってまた横に読み、その後は左側を縦にスキャンします。ニュースサイトやブログ、詳細レポートでよく見られるパターンです。
【F型の視線の動き】
視線は「F」の形に移動する:
① → → → → → → → → → （1本目の横線：長い）
↓
② → → → → → （2本目の横線：短い）
↓
③ （縦線：左側をスキャン）
↓
↓
↓
↓
【図解】
┌─────────────────────────────────┐
│ ①━━━━━━━━━━━━━━━→ │
│ │
│ ②━━━━━━━→ │
│ │
│ ③ │
│ ↓ │
│ ↓ │
│ ↓ │
│ ↓ │
└─────────────────────────────────┘
【特徴】
・最上部を最も長く横に読む
・中間部はやや短く横に読む
・下に行くほど左側だけを縦にスキャン
・右下はほとんど見られない
F型レイアウトの3つのエリア
F型レイアウトでは、画面を3つの「横線」と「縦線」で考えます。それぞれに適した情報を配置します。
📍 F型レイアウトの配置ルール
| エリア | 視線の特徴 | 配置すべき情報 | 具体例 |
|---|---|---|---|
| ①最上部の横線 | 最も長く見る（最重要） | タイトル、最重要KPI | レポート名、主要な見出し |
| ②2番目の横線 | やや短く見る（重要） | 小見出し、2番目に重要な情報 | セクション名、サマリーKPI |
| ③左側の縦線 | 縦にスキャン（継続的注目） | 箇条書き、リスト、ナビゲーション | 項目名、カテゴリ、目次 |
| ④右側・下部 | あまり見られない（低注目） | 詳細情報、補足データ | 数値の詳細、注釈 |
F型レイアウトの実例：詳細レポート
実際にF型レイアウトを使った営業担当者向け詳細レポートの例を見てみましょう。情報量が多く、スクロールが必要なレポートです。
【営業活動レポート（F型レイアウト）】
┌────────────────────────────────────────┐
│ ①営業活動レポート – 2024年12月 ━━━━→ │ ← 1本目の横線（最重要）
│ 担当者: 山田太郎 │
├────────────────────────────────────────┤
│ ②今月の実績 ━━━━→ │ ← 2本目の横線（重要）
│ • 売上: 450万円（目標比112%）✓ │
│ • 新規顧客: 8社（目標比160%）✓ │
│ • 商談数: 25件（目標比104%）✓ │
├────────────────────────────────────────┤
│ ③商品別売上 │ ← 左側の縦線（スキャン）
│ • 商品A: 150万円 │
│ • 商品B: 120万円 │
│ • 商品C: 100万円 │
│ • 商品D: 80万円 │
├────────────────────────────────────────┤
│ ④地域別分析 │
│ • 東京: 200万円 │
│ • 大阪: 150万円 │
│ • 名古屋: 100万円 │
├────────────────────────────────────────┤
│ ⑤今週のタスク │
│ □ A社 最終決裁会議（12/16） │
│ □ B社 見積もり提出（12/17） │
│ □ F社 新規訪問（12/18） │
└────────────────────────────────────────┘
【配置のポイント】
✓ ①最上部: レポート名（全幅で目立たせる）
✓ ②1本目の横線: 主要KPI（最重要情報）
✓ ③④⑤左側: セクションタイトル（視線が通る）
✓ 右側: 詳細データ（流し読み用）
【このレポートの特徴】
・情報を縦に整理
・左側にセクション名を配置
・スクロールしながら読む想定
💡 F型レイアウトが適している場面
| 場面 | 理由 | 具体例 |
|---|---|---|
| 詳細レポート | 情報量が多く、スクロールが必要 | 週次レポート、月次レポート |
| リスト形式 | 複数項目を縦に並べて比較 | 商品一覧、顧客リスト |
| ブログ・記事 | テキスト中心で縦に読む | ニュース記事、ブログ投稿 |
| 検索結果 | 縦に並ぶ結果をスキャン | Google検索結果、ECサイトの商品一覧 |
🔄 4. Z型とF型の使い分け
使い分けの判断基準
Z型とF型、どちらを使うべきかは「情報量」と「目的」で判断します。シンプルに考えると、情報が少なければZ型、多ければF型です。
📊 Z型 vs F型の比較
| 項目 | Z型レイアウト | F型レイアウト |
|---|---|---|
| 情報量 | 少ない（KPI 1〜3個） | 多い（KPI 5個以上） |
| 構成 | シンプル | 複雑 |
| 目的 | 1つの行動に誘導 | 情報を詳しく提供 |
| 滞在時間 | 短い（数秒〜1分） | 長い（数分以上） |
| スクロール | なし / 最小限 | あり |
| 対象者 | 経営層、意思決定者 | 現場担当者、分析者 |
| 代表例 | LP、広告、サマリー | レポート、記事、検索結果 |
レイアウト選択のフローチャート
迷ったときは、以下のフローチャートに従って選択しましょう。
【レイアウト選択フローチャート】
ダッシュボードを作成する
↓
情報量は？
↓
┌─────┴─────┐
↓ ↓
少ない 多い
（KPI 3個以下） （KPI 5個以上）
↓ ↓
Z型を使う F型を使う
↓ ↓
│ │
▼ ▼
┌─────────┐ ┌─────────┐
│ 適用例 │ │ 適用例 │
├─────────┤ ├─────────┤
│• 1画面完結│ │• スクロール│
│• サマリー │ │• 詳細レポート│
│• 経営向け │ │• 現場向け │
│• 行動誘導 │ │• 分析用 │
└─────────┘ └─────────┘
【判断に迷ったら】
→ まずZ型から始める
→ 情報が増えたらF型に移行
→ 両方を組み合わせる（ハイブリッド）
ハイブリッドレイアウト
実務では、Z型とF型を組み合わせたハイブリッドレイアウトがよく使われます。上部はZ型でKPIを目立たせ、下部はF型で詳細情報を提供する、という構成です。
【ハイブリッドレイアウト（Z型 + F型）】
┌────────────────────────────────────────┐
│ ①ダッシュボード名 ②メニュー │ ← Z型エリア
├────────────────────────────────────────┤
│ │
│ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ KPI1 │ │ KPI2 │ │ KPI3 │ │ ← Z型（重要KPI）
│ │ 売上 │ │ 訪問者 │ │ CVR │ │
│ │ 450万円│ │ 15,000 │ │ 2.9% │ │
│ └────────┘ └────────┘ └────────┘ │
├────────────────────────────────────────┤
│ ③詳細レポート │ ← F型エリア
│ • チャネル別訪問者 │
│ – Google: 7,500人（50%） │
│ – SNS: 4,500人（30%） │
│ – Direct: 3,000人（20%） │
│ │
│ • 商品別売上 │
│ – 商品A: 150万円 │
│ – 商品B: 120万円 │
│ │
│ [訪問者推移グラフ] │
│ [コンバージョンファネル] │
└────────────────────────────────────────┘
【ハイブリッドのメリット】
✓ 上部: Z型で重要KPIを一目で把握
✓ 下部: F型で詳細情報をじっくり確認
✓ 経営層は上部だけ見てOK
✓ 現場担当者は下部まで見て分析
💡 ハイブリッドレイアウトのポイント
- 上部（Z型）：3つ以内のKPIを横に並べる
- 下部（F型）：詳細情報を縦に配置
- 区切り線：上部と下部を視覚的に分ける
- 対象者：経営層は上部、現場は全体を見る
🌏 5. 文化による視線の違い
読み方向と視線パターン
視線の動きは、その人が普段使っている言語の読み方向に大きく影響されます。グローバル展開する際は、この点を考慮する必要があります。
🌐 世界の読み方向とレイアウト
| 読み方向 | 対象言語 | 視線の開始点 | 適切なレイアウト |
|---|---|---|---|
| 左→右（LTR） | 英語、日本語（横書き）、中国語（簡体字）、韓国語 | 左上 | Z型 / F型 |
| 右→左（RTL） | アラビア語、ヘブライ語、ペルシャ語、ウルドゥー語 | 右上 | 逆Z型 / 逆F型 |
| 上→下、右→左 | 日本語（縦書き）、中国語（繁体字・縦書き） | 右上 | 独自パターン |
【RTL（右から左）言語でのレイアウト】
通常のZ型（LTR）: 逆Z型（RTL）:
① → → → ② ② ← ← ← ①
↘ ↙
↘ ↙
③ → → → ④ ④ ← ← ← ③
【ポイント】
・レイアウトを左右反転させる
・ロゴは右上に配置
・CTAボタンは左下に配置
・CSSの direction: rtl; で自動反転可能
⚠️ グローバル展開の注意点
多言語対応のダッシュボードを作る場合、以下の点に注意しましょう。
- ミラーリング対応：RTL言語用にレイアウトを左右反転できるようにする
- フレキシブルデザイン：固定配置を避け、相対位置で指定する
- テスト：各言語でのユーザビリティテストを実施する
- アイコン：矢印など方向を示すアイコンも反転が必要
💼 6. 実務での活用例
例1: エグゼクティブダッシュボード（Z型）
経営層向けのダッシュボードは、シンプルで一目で理解できることが最重要です。Z型レイアウトで、KPIを1つに絞ります。
【経営層向けエグゼクティブダッシュボード（Z型）】
┌────────────────────────────────────────┐
│ ①経営ダッシュボード ②2024年12月 │
│ ABC株式会社 🔄 更新: 10:00 │
├────────────────────────────────────────┤
│ │
│ ┌─────────────────────┐ │
│ │ 月間売上目標達成率 │ │
│ │ │ │
│ │ 112% ✓ │ │
│ │ ━━━━━━━━━━━━━━ │ │
│ │ 目標: 1億円 │ │
│ │ 実績: 1.12億円 │ │
│ └─────────────────────┘ │
│ ↘ │
│ ↘ │
│ ↘ │
│ │
│ ③[詳細レポートを見る] ④前月比: │
│ [戦略会議資料作成] +12.3% │
└────────────────────────────────────────┘
【このダッシュボードの特徴】
✓ KPIは1つだけ（達成率）
✓ 5秒で理解できるシンプルさ
✓ アクションボタンで次の行動を明示
✓ 経営層が必要な情報だけを表示
例2: 営業担当者向けダッシュボード（F型）
現場担当者向けのダッシュボードは、詳細な情報を提供する必要があります。F型レイアウトで、複数のセクションを縦に配置します。
【現場担当者向け詳細ダッシュボード（F型）】
┌────────────────────────────────────────┐
│ ①営業活動レポート – 山田太郎 ━━━━→ │ ← 1本目の横線
├────────────────────────────────────────┤
│ ②今月の実績 ━━━→ │ ← 2本目の横線
│ • 売上: 450万円（目標比112%）✓ │
│ • 新規顧客: 8社（目標比160%）✓ │
│ • 商談数: 25件（目標比104%）✓ │
├────────────────────────────────────────┤
│ ③進行中の案件（5件） │ ← 左側の縦線
│ • A社（500万円）- 最終提案済み ⭐ │
│ • B社（300万円）- 見積もり中 │
│ • C社（200万円）- ヒアリング中 │
│ • D社（150万円）- 初回訪問済み │
│ • E社（100万円）- アポ取得 │
├────────────────────────────────────────┤
│ ④今週のタスク │
│ □ A社 最終決裁会議（12/16 月）⚠️ │
│ □ B社 見積もり提出（12/17 火） │
│ □ F社 新規訪問（12/18 水） │
│ ☑ C社 ヒアリング完了（12/15 日） │
└────────────────────────────────────────┘
【このダッシュボードの特徴】
✓ 複数のKPIを縦に整理
✓ 左側にセクション名（視線が通る）
✓ アクションアイテムが明確
✓ 優先度の高い項目にマーク（⭐、⚠️）
例3: マーケティングダッシュボード（ハイブリッド型）
マーケティングダッシュボードは、サマリーと詳細の両方が必要です。上部にZ型、下部にF型を配置したハイブリッドレイアウトが最適です。
【マーケティングダッシュボード（ハイブリッド）】
┌────────────────────────────────────────┐
│ ①マーケティング ②フィルター: │ ← Z型エリア
│ ダッシュボード 12月 │
├────────────────────────────────────────┤
│ ③KPI（Z型配置） │
│ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ 訪問者 │ │ CVR │ │ 売上 │ │
│ │ 15,000 │ │ 2.9% │ │ 450万円│ │
│ │ ↓5% │ │ ↑0.2pt│ │ ↑12% │ │
│ └────────┘ └────────┘ └────────┘ │
├────────────────────────────────────────┤
│ ④詳細分析（F型配置） │ ← F型エリア
│ │
│ チャネル別訪問者: │
│ • Google: 7,500人（50%）━━━━━━━━ │
│ • SNS: 4,500人（30%）━━━━━━ │
│ • Direct: 3,000人（20%）━━━━ │
│ │
│ ┌──────────────────────────────┐ │
│ │ [訪問者推移グラフ] │ │
│ │ 📈 │ │
│ └──────────────────────────────┘ │
│ │
│ ┌──────────────────────────────┐ │
│ │ [コンバージョンファネル] │ │
│ │ 🔽 │ │
│ └──────────────────────────────┘ │
└────────────────────────────────────────┘
【このダッシュボードの特徴】
✓ 上部（Z型）: 3つのKPIを横に配置
✓ 下部（F型）: 詳細データを縦に配置
✓ 経営層は上部だけで状況把握
✓ マーケターは下部で詳細分析
📝 STEP 29 のまとめ
✅ このステップで学んだこと
| トピック | 重要ポイント |
|---|---|
| 視線の動き | 人間の目はZ型またはF型のパターンで動く |
| Z型レイアウト | シンプルな構成、1つの行動に誘導したい場合に最適 |
| F型レイアウト | 情報量が多い場合、詳細レポートに最適 |
| 使い分け | 情報量と目的で選択（少ない→Z型、多い→F型） |
| ハイブリッド | 上部Z型＋下部F型で両方のメリットを活用 |
| 文化的違い | RTL言語ではレイアウトを左右反転 |
💡 最重要ポイント
視線の動きを理解することで、ユーザーが自然に情報を理解できるダッシュボードを設計できます。
- Z型はシンプルで行動喚起に優れている
- F型は詳細情報の提供に優れている
- 情報量と目的に応じて適切なレイアウトを選ぶ
次のステップでは、情報階層の詳細設計を学びます！
📝 実践演習
演習 1
基礎
よく使うウェブサイト（Amazon、YouTube、Googleなど）を観察し、Z型かF型かを判断してください。
【観察例】
【Amazon トップページ】
→ F型レイアウト
・左側: カテゴリメニュー（視線が縦に通る）
・上部: 検索バー
・商品が縦にリスト表示
・情報量が多く、スクロールが必要
【YouTube】
→ F型レイアウト
・左側: サイドバー（視線が通る）
・動画が縦にリスト表示
・情報量が多い
【Google検索トップ】
→ Z型レイアウト
・シンプルな構成
・検索ボックスが中央
・1つの行動（検索）に集中
・スクロール不要
ポイント：情報量が多いサイト（EC、動画）はF型、シンプルなサイト（検索エンジン、LP）はZ型になっていることが多いです。
演習 2
応用
売上ダッシュボードをZ型レイアウトで設計してください。4つのエリア（左上、右上、左下、右下）に何を配置するか決めてください。
【解答例】
【Z型ダッシュボード設計】
┌────────────────────────────────────┐
│ ①左上: ダッシュボード名 │
│ 「売上サマリー」 │
│ 会社ロゴ │
│ ②右上: │
│ 日付・時刻 │
│ ユーザー名 │
│ ↘ │
│ ↘ │
│ ↘ │
│ │
│ ③左下: アクション ④右下: │
│ [詳細レポート] 前月比 │
│ [CSV出力] +12.5% │
└────────────────────────────────────┘
中央: 月間売上KPI（大きく表示）
450万円（目標比112%）
【配置理由】
✓ ①左上: 最初に見る場所 → 何のページかわかる
✓ ②右上: 補助情報 → 確認用
✓ ③左下: CTA → 次に何をすべきか
✓ ④右下: 補足 → あまり重要でない情報
演習 3
発展
F型レイアウトで営業レポートを設計してください。セクション構成（①〜⑤）を考えてください。
【解答例】
【F型営業レポート設計】
┌────────────────────────────────────┐
│ ①営業活動レポート – 2024年12月 │ ← 最上部（最重要）
│ 担当者: 山田太郎 ━━━━━→ │
├────────────────────────────────────┤
│ ②今月の実績 ━━━→ │ ← 2本目の横線
│ • 売上: 450万円 │
│ • 新規顧客: 8社 │
│ • 商談数: 25件 │
├────────────────────────────────────┤
│ ③案件状況 │ ← 左側の縦線
│ • 受注確定: 5件（計500万円） │
│ • 提案中: 3件（計300万円） │
│ • 見積中: 7件（計700万円） │
├────────────────────────────────────┤
│ ④顧客別売上ランキング │
│ 1. A社: 150万円 │
│ 2. B社: 120万円 │
│ 3. C社: 80万円 │
├────────────────────────────────────┤
│ ⑤来週のアクション │
│ □ A社 最終提案（12/16） │
│ □ B社 見積提出（12/17） │
└────────────────────────────────────┘
【ポイント】
✓ 左側にセクション名（視線が通る）
✓ 情報を縦に配置
✓ 重要度順に上から配置
✓ アクションアイテムは最後に
❓ よくある質問
Q1: Z型とF型、どちらを使えばいいか迷います。
情報量で判断しましょう。シンプルに考えると、KPIが3個以下ならZ型、5個以上ならF型です。スクロールが不要なら Z型、必要ならF型という基準も使えます。迷ったら、まずZ型から始めて、情報が増えたらF型に移行するのがおすすめです。
Q2: モバイル画面でもZ型・F型は有効ですか？
モバイルではF型が基本です。スマートフォンは縦長の画面なので、自然とF型（縦スクロール）になります。Z型の横移動は画面が狭すぎて難しいため、重要情報は上部に大きく配置し、その下に詳細情報を縦に並べるF型レイアウトが適しています。
Q3: 右書き言語（アラビア語など）ではどうすればいいですか？
レイアウトを左右反転します。Z型なら逆Z型（右上→左上→右下→左下）、F型なら逆F型（右側を縦に下がる）になります。CSSの
direction: rtl;を使うと自動的に反転できます。グローバル展開する場合は、この対応が必須です。
Q4: Z型とF型を組み合わせてもいいですか？
はい、ハイブリッドレイアウトは非常に有効です。上部にZ型で重要KPIを配置し、下部にF型で詳細情報を配置する方法が一般的です。経営層は上部だけ見てサマリーを把握し、現場担当者は下部まで見て詳細を確認できます。
Q5: アイトラッキングのテストは自分でもできますか？
簡易的なテストは可能です。同僚や友人にダッシュボードを見せて、「最初にどこを見たか」「次にどこを見たか」を口頭で確認するだけでも参考になります。また、Hotjarなどのヒートマップツールを使えば、実際のユーザーのクリック位置やスクロール深度を分析できます。
学習メモ
データ可視化マスター - Step 29
📋 過去のメモ一覧
▼