F型パターンとの違いは？

F型は「テキスト量が多いページ（ブログやニュース）」で見られる読み方で、Z型は「画像や要素が中心のページ（LPやトップページ）」で見られる視線の動きです。コンテンツのタイプによって使い分けます。

なぜ「Z」なのですか？

欧米や日本などの「左横書き」文化圏では、視線は「左上から右へ、そして次の行の左へ」と動く習慣があるからです。この自然な重力に従うことで、抵抗なく情報を読ませることができます。

スマホでも有効ですか？

有効ですが、スマホは画面幅が狭いため、Zの横棒が短くなり、実質的には垂直方向（I型）に近い動きになります。それでも「左上（ロゴ）」「右上（メニュー）」という配置のメンタルモデルは共通しています。

終了点（Terminal Area）とは？

Zの書き終わりである「右下」のことです。視線が自然に止まる場所であるため、ここにプライマリーCTA（登録ボタンなど）を配置するのが定石とされています。

視線を逆走させることは可能？

難しいです。右下から左上に視線を戻すのは不自然な動きであり、よほど強力な視覚的アンカーがない限り、ユーザーは見落としてしまいます。川の流れに逆らうような設計は避けるべきです。

Z型パターン (Z-Shaped Pattern)

この記事の要点（UIXHERO視点） UIXHEROでは、Z型パターンを「視線の稲妻、スキャンの流儀」と捉える。本記事では、画像中心のページにおいて、左上から右下へと走る視線のエネルギーを利用し、抵抗なくスムーズにCTA（ゴール）へと誘導するレイアウトの黄金ルートを整理する。

Z型パターンとは？

コンテンツが「文章」ではなく「要素（画像やボタン）」で構成されている場合、ユーザーの視線はF型ではなくZ型に動きます。

左上：ロゴや出発点（Start）
右上：ナビゲーションやLogin（Primary Action）
斜め：ヒーローイメージを横断して全体像を把握
左下：補足情報や次のコンテンツへの入り口
右下：最終的なアクション（CTA: Call To Action）

この自然な視線の流れに沿って要素を配置することで、スムーズにコンバージョンへ誘導できます。

Z」の文字。

左上のロゴから始まり、右上のメニューへ。そこから対角線上に左下のキャッチコピーへ視線が滑り、最後に右下の「登録ボタン」で止まる。

UXデザインでの活用事例

1. ランディングページ (LP)

ファーストビューのデザインに最適です。左上にロゴ、右上に「お問い合わせ」、中央に魅力的な画像、左下にキャッチコピー、そして右下に最大の「申し込みボタン」を配置するのが王道のレイアウトです。

2. ジグザグレイアウト

スクロールしていくページでも、画像とテキストを交互に左右入れ替えて配置（ジグザグ）することで、視線をZ型に誘導し続け、単調さを防ぎます。

3. 終了点（Terminal Area）

Zの書き終わり（右下）は、視線が一時停止する場所です。ここに最も重要なアクション（「次へ」「購入する」）を置くことは、理にかなっています。

実装例: 視線の旅

Z型のレイアウトに沿って、視線誘導のアニメーションを表示するデモです。要素の配置場所が、いかに視線の流れと一致しているかを確認できます。

Interactive Example (Live)

const ZPatternDemo = () => {
  const [animate, setAnimate] = useState(false);

  useEffect(() => {
    if (animate) {
      const timer = setTimeout(() => setAnimate(false), 3000);
      return () => clearTimeout(timer);
    }
  }, [animate]);

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto relative overflow-hidden">
      <h3 className="text-center font-bold text-card-foreground mb-6">Z型レイアウトの実験</h3>

      <div className="relative border-2 border-border rounded-lg p-4 h-64 bg-muted/30">
        {/* The Z Layout Content */}
        
        {/* 1. Top Left (Logo) */}
        <div className="absolute top-4 left-4 font-black text-xl text-card-foreground">LOGO</div>

        {/* 2. Top Right (Nav) */}
        <div className="absolute top-4 right-4 flex gap-2">
           <div className="w-16 h-6 bg-muted rounded"></div>
           <div className="w-16 h-6 bg-primary/20 text-blue-800 text-xs font-bold flex items-center justify-center rounded border border-primary/30">
             Sign Up
           </div>
        </div>

        {/* 3. Center (Hero Image - Diagonal path crosses here) */}
        <div className="absolute inset-0 flex items-center justify-center pointer-events-none opacity-10">
           <div className="text-9xl">🏔️</div>
        </div>

        {/* 4. Bottom Left (Value Prop) */}
        <div className="absolute bottom-4 left-4 w-40">
           <div className="font-bold text-lg leading-tight mb-1">Catchy Copy</div>
           <div className="text-xs text-muted-foreground">Amazing service description goes here.</div>
        </div>

        {/* 5. Bottom Right (CTA) */}
        <div className="absolute bottom-4 right-4">
           <button className="bg-green-600 text-white font-bold py-2 px-6 rounded-full shadow-lg hover:scale-105 transition">
             Get Started
           </button>
        </div>

        {/* SVG Path for Z pattern animation */}
        {animate && (
          <svg className="absolute inset-0 w-full h-full pointer-events-none z-10">
            <path 
              d="M 40 30 L 360 30 L 40 230 L 360 230" 
              fill="none" 
              stroke="rgba(255, 0, 0, 0.5)" 
              strokeWidth="10" 
              strokeLinecap="round"
              className="animate-[dash_2s_ease-in-out_forwards]"
              style={{ strokeDasharray: 1000, strokeDashoffset: 1000 }}
            />
            
            {/* Moving Dot */}
            <circle r="8" fill="red" className="animate-[moveZ_2s_ease-in-out_forwards]">
            </circle>
          </svg>
        )}
        
        <style>{`
          @keyframes dash {
            to { stroke-dashoffset: 0; }
          }
          @keyframes moveZ {
            0% { cx: 40px; cy: 30px; }
            33% { cx: 360px; cy: 30px; }
            66% { cx: 40px; cy: 230px; }
            100% { cx: 360px; cy: 230px; }
          }
        `}</style>
      </div>

      <div className="mt-6 text-center">
        <button 
          onClick={() => setAnimate(true)}
          disabled={animate}
          className="bg-black text-white px-6 py-2 rounded font-bold disabled:opacity-50"
        >
          視線の動きを再生
        </button>
        <p className="mt-2 text-xs text-muted-foreground">
          視線は自然と四隅の重要ポイントを通過します。<br/>
          この流れに逆らわない配置が、最もストレスの少ないデザインです。
        </p>
      </div>
    </div>
  );
};

render(<ZPatternDemo />);

実践ガイドライン (Practical Guidelines)

実装チェックリスト

ページの左上にブランドロゴ（ホームへのリンク）があるか？

ページの右上に補助的なアクション（ログイン、検索）があるか？

ページの右下（視線の終点）に、最も重要なCTAボタンが配置されているか？

倫理的配慮 (Ethical Considerations)

流れの悪用 : Z型の視線経路上に、ユーザーが意図しない「有料オプション追加」のチェックボックスなどを配置し、流れ作業で誤ってクリックさせるような配置は避けるべきです。
過剰な誘導 : 視線誘導が強引すぎると（例えば派手な矢印を多用するなど）、ユーザーは「操作されている」と感じて不快感を抱きます。自然な流れを作ることが重要です。

参考文献

Bradley, S. (2011). "3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern." Vanseo Design. Vanseo Design
Instapage. "Z-Pattern Layout: Everything You Need to Know." Instapage Blog

ページを読み込み中...