UIXHERO

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

Web上のテキストコンテンツを見る際、ユーザーの視線はアルファベットの「F」の字を描くように動く傾向がある。

2026年1月23日
更新: 2026年8月27日
7
by Dengen Yosho(DGYS)
F型パターン (F-Shaped Pattern)

この記事の要点(UIXHERO視点) XHEROでは、F型パターンを「エネルギー消費を最小化したい脳の防衛本能」と捉える。 本記事では、ユーザーに「読ませる」努力を放棄し、視線の通る左上(Fのパス)に結論を置く「スキャン前提」のレイアウトを整理する。

F型パターンとは?

ユーザーはWebページを「読みません」。彼らは「(スキャン)」します。 視線追跡(アイトラッキング)の研究によると、ユーザーの視線はまず上部を水平に読み、少し下がってまた短く水平に読み、最後は左端を垂直に下へと流れていきます。 この軌跡が「F」の字に似ていることから名付けられました。 特に、見出しやテキスト主体のページで顕著に見られます。

UXデザインでの活用事例

1. 重要な情報は左上に

一番最初の1〜2段落(リード文)に、結論や最も重要なキーワードを配置します。「起承転結」ではなく「(逆ピラミッド型)」で書くのがWebライティングの鉄則です。

2. 見出し(H2, H3)の活用

ユーザーは左端を縦にスキャンしながら、興味のあるキーワード(フック)を探します。 見出しの先頭に重要なキーワード(情報を含む単語)を置くことで、スキャン中の視線を止めさせることができます。

3. F型を崩す

は「つまらないレイアウト」に対するユーザーの防御反応(省エネ読み)でもあります。 途中に画像、箇条書き、引用ボックスなどを挟み込むことで、視線のリズムを変え、下部まで飽きさせずに読ませる工夫が必要です。

実装例: 視線の動き

テキストの塊がある時、どこが読まれ、どこが読み飛ばされるか。 簡易的なヒートマップシミュレーションで可視化するです。

倫理的配慮 (Ethical Considerations)

  • 広告の偽装: F型パターンの視線経路上(記事の途中など)に、コンテンツに偽装した広告(ネイティブアド)を配置し、誤クリックを誘発する手法は、ユーザーの信頼を損ないます。

実装チェックリスト

関連するUI原則

更新のお知らせ

サイトに載せていない実例や、新しい記事のお知らせはこちらで出しています。

読んだ内容を、自分の画面に当てるとき

UIXHEROは、記事を書くほかに、画面の検品・判定、デザインシステムの構築、実装と改善の伴走を受けています。何を頼めばいいか決まっていない段階の相談も、同じ窓口で受けます。

UIXHEROに頼めることを見る

※ 記事の内容についての質問や、書いてほしいテーマの要望も同じ窓口で受けています

関連する用語 (Glossary)

参考文献

  • Nielsen, J. (2006). "F-Shaped Pattern For Reading Web Content." NNGroup Article

記事をシェア

メールでお知らせを受け取る

最終更新: 2026年8月27日

この記事を書いた人

Dengen Yosho(DGYS)

Dengen Yosho(DGYS)

UI/UXデザイナー兼デザインエンジニア デザイン歴25年以上 情報設計〜UIデザイン〜React/TypeScriptによる実装までを一気通貫で担当 大手企業のDXプロジェクトや決済アプリ領域で、デザインリードとして改善と構築を経験 現在はフリーランスとして、プロダクトのUI/UX改善とデザインシステム構築を支援 長年の実務の中で感じてきたのは、 「良いUI」はセンスではなく、再現可能な判断の積み重ねであるということ UIXHEROは、 心理学や行動科学の知見を、現場で使える設計言語に翻訳するための場所 関心領域は「ユーザーの行動が変わるUI」 人の認知・注意・意思決定の構造を理解し、 “なぜそのUIが機能するのか”を言語化することを目指している

あわせて読みたい

この記事に関連する記事をご紹介します

視覚的階層 (Visual Hierarchy)

情報の重要度に応じて、大きさ・色・配置に強弱をつけることで、ユーザーの視線を「見るべき順序」通りに誘導するデザイン原則。

2026年1月23日
5

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

テキストが少なく、画像やCTAが中心のページ(LPなど)において、ユーザーの視線は左上→右上→左下→右下と「Z」の字を描くように動く。

2026年1月23日
5

視覚的アンカー (Visual Anchor)

スキャン(流し読み)しているユーザーの視線を繋ぎ止め、次の情報を読むための足がかりとなる目立つ要素。

2026年1月23日
5

もっと深く知りたいですか?

ここに掲載されていないトピックについても、リクエストがあれば解説記事を追加します。 わかりにくい点や、具体的な事例について知りたいことがあれば教えてください。

リクエストを送る