この記事ではF字型レイアウトの基本、利点、作成方法ついてわかりやすく説明します。
F字型レイアウトとその働きについて
「F字型レイアウト」はユーザーがサイトを見るときの一般的な視線の動きをあらわします。 FはFastのFでもあり、多くのユーザーはWebサイトを高速で読み流しているのです。
F字型パターンは、200人以上のユーザーが数千のWebサイトを閲覧した結果を記録したNNGroupのアイトラッキング調査によって普及されました。多様なサイトやタスクに関わらず、ユーザーの視線の動きはほぼ一定していることが調査によってわかりました。この一定な視線の動きこそがアルファベットのFの字型に類似していたのです。
F字型は以下の３つの要素によって構成されています。
- ユーザーの視線はまず、サイトのコンテンツの上領域を水平方向に動きます。これがFの上部の線にあたります。
- 次に、画面の左側を垂直に閲覧し、段落の最初の文章で興味のあるものを探します。ユーザーは興味のあるものを見つけると、水平な視線の動きで読み始めます。二度目の動きは一度目よりも短い領域にしか進みません。よって、これがFの下部の線にあたります。
- 最終的に、ユーザーはコンテンツの左側を垂直方向に閲覧します。
私たちの視線はコンテンツの左上端から開始して、水平に進み、次の行に飛ぶ、という一連の動きを興味のあるものが見つかるまで繰り返すよう訓練されています。
NNGroupはアイトラッキング調査により、左から右へ文章を読む文化では通常、文字FまたはEのような視線の動きでコンテンツを閲覧することが証明されました。赤色の領域ではユーザーの視線がもっとも集まり、黄色の領域ではそれよりも少なく、続いて青色の領域がもっとも少なくなっています。灰色の領域には固定した視線がまったく注がれませんでした。
もちろんユーザーの視線の動きは、毎回正確に３つの部分で構成されているわけではありません。ユーザーは興味のあるものが見つかれば、水平な視線の動きで通常の読書を開始します。
F字型レイアウトをなぜ利用するべきか
F字型レイアウトは優れた視覚的階層を持つため、分かりやすくコンテンツを閲覧することのできるデザインとなっています。 F字型レイアウトがほとんどの欧米系の読者にとって快適な理由は、彼らが書物を常に、上から下または左から右という一定の方向で読んできたからです。
F字型レイアウトをいつ使うか
F字型レイアウトは、ブログやニュースサイトのように、テキストの量が多いWebサイトにとても適したレイアウトです。コンテンツ（特にテキスト）が多い場合、F字型レイアウトを使うことで、ユーザーは自然な視線の動きでコンテンツなどをスムーズに読みすすめることができます。
CNNもF字型レイアウトを使用しています。
F字型レイアウトの使い方
F字型レイアウトによって、デザイナーはよりユーザーの視線をコントロールすることができます。
コンテンツの優先順位を付ける
ページに要素を配置する前に、要素の優先順位を付けます。ユーザーにもっとも見てほしいものがわかれば、F字型レイアウトの「ホットスポット」に配置すればよいだけなのです。
初期の期待値を設定する
最初の２つの段落はもっとも重要です。できるだけページの上部にもっとも重要なコンテンツを配置することでサイト（またはページ）の目的をすばやくユーザーに伝えることができます。ユーザーは通常ヘッダーに沿って横向きに読み進めるので、ヘッダーはナビゲーションバーを設置するのに非常に適しています。
このページのもっとも重要なコンテンツは数秒で見抜くことができます。イメージクレジット: tutsplus
熟読ではなく、斜め読みのためのデザイン
F字型レイアウトパターンを使用する際は、機械のスキャナーをイメージしましょう。そして、スキャナーのようにユーザーが斜め読みをした際に興味を引きそうなコンテンツをF字に沿って配置します：
- 新しい段落を魅力的なキーワードで始めましょう。
- 私たちはまず、ページ上でもっとも比重を占めている要素（視覚的にもっとも比重を占めている要素または領域）を見ます。なので、テキストの重要性を示すタイポグラフィ（例えば、テキスト内のキーワードのハイライト）や、色を使ってボタンを強調したりして、重要な情報には視覚的な比重を置くようにしましょう。
- １段落につき１つのアイデアのみをカバーし、可能な限り箇条書きを使用しましょう。
- もっとも重要なコンテンツ（CTAなど）は、ユーザーが斜め読みし始める左側か、斜め読みし終える右側に配置しましょう。こうすることによって、ユーザーが次の行に移ってしまう前に考慮する時間を与えることができます。
サイドバーを活用する
サイドバーはよりユーザーを深いレベルに引き寄せ、ユーザーのエンゲージメントを高めるために利用します。
- 主要なコンテンツには入れられないもので、それでもユーザーに見てほしいものがあれば、ここに入れましょう。広告や、「関連記事」のリスト、ソーシャルメディアのウィジェットなどがそれにあたります。
- ユーザーが特定のコンテンツを見つけるためのツールとして使用しましょう。カテゴリーリスト、タグクラウドや「人気の投稿」ウィジェットなどがあります。
サイドバーにサブナビゲーションを配置するMedium。
退屈なレイアウトを避ける
このF字型レイアウトの主な欠点は単調なことです。反復性の高い、似たような内容のコンテンツを並べることでユーザーを退屈にさせてしまいます。そのようなユーザーから得られるものはあまりありません。視線の先に何かひとつ「変わった」要素を追加してユーザーの関心を維持しましょう。
イメージクレジット：tutsplus
このレイアウトにおいて「予想を裏切る」というテクニックは、長文に退屈してしまったユーザーに対して有効です。
結論
人間の一般的な視線の動きに従ったF字型レイアウトによって、レイアウトの構造を最適化することができます。しかし厳密にこれに従う必要はありません。F字型レイアウトはテンプレートではなく、あくまでもガイドラインなのです。
