フォーカルポイント

定義

フォーカルポイントとは、画面のなかで視線を真っ先に引きつける中心的なひとつの要素です。サイズ、色、コントラスト、余白といった視覚的な力をひとつの場所に集めて周囲より際立たせると、そこが「まずここを見てください」とユーザーにそっと伝える出発点になります。ランディングページの大きな見出しや、ダッシュボードでひときわ大きく強調された主要な数値が、フォーカルポイントの役割を果たします。ここで大切なのは、フォーカルポイントはあくまで相対的だということです。何かひとつを目立たせるには、そのぶん周囲が控えめに引いている必要があります。つまりフォーカルポイントをつくる作業は、残りの要素を落ち着かせて整える作業でもあるのです。最終的な目的は、視線が自然に最初にとどまる場所を、意図して設計することにあります。

なぜ重要か

人は画面を見るとき、無意識にどこから見ればいいのかを探しています。フォーカルポイントがはっきりしていれば、その探索はすぐに終わり、ユーザーはもっとも重要な情報や行動へまっすぐ導かれます。逆にフォーカルポイントがないと、視線は行き場を失って画面のうえをさまよってしまいます。かといって強調する要素が多すぎると、互いに力を打ち消し合い、結局は何も強調されていない状態になります。強調は希少であってこそ力を持つもので、何かひとつを際立たせるには、残りを進んで後ろに引かせる節度が欠かせません。うまく設計されたフォーカルポイントは、ユーザーがひと目で何をすべきかを理解できるようにします。これはコンバージョンを狙う画面でも、情報を伝える画面でも、ユーザーの次の行動と成果に直接影響を与えます。

よくある間違い

• 画面のあちこちを、すべて大きく濃く強調してしまうケースです。すべてが叫べば何も聞こえなくなるのと同じで、強調があふれると階層がまるごと消えてしまい、ユーザーはむしろどこから見ればいいのか判断できなくなります。
• 本当に重要な要素ではなく、装飾的な画像や背景にもっとも強いコントラストを与えてしまうケースです。すると視線は、押してほしい肝心の行動を通り過ぎて別の場所に先にとどまってしまい、画面の目的がぼやけてしまいます。
• 強調を色ひとつだけに頼ってしまうケースです。色だけで目立たせると、色の見え方が異なるユーザーには強調が伝わりません。サイズや位置、余白といった手がかりも一緒に使い、強調を何重にも重ねておく必要があります。

実務のヒント

• ひとつの画面では、主要なアクションボタンや核となる数値、そのどれかひとつだけに強調を集中させましょう。強調する対象を意図して絞ると、その要素がずっとくっきり際立ち、ユーザーが次にすることを迷わなくなります。
• 要素をやみくもに大きくするよりも、周囲を落ち着かせて下げる方法もあわせて考えてみてください。コントラストは相対的なので、背景や周囲が静かになるほど、同じ要素でも手を加えずにより強く際立って見えます。
• フォーカルポイントが複数必要なときは、優先順位をつけて力の強さに差をつけましょう。もっとも重要なひとつを最上位に置き、残りを一段ずつ下げていくと、強調どうしがぶつからず順番に読まれていきます。視線がもっとも重要なものから、より重要度の低いものへと自然に流れ落ち、画面が複雑でも何から見ればいいかの案内が最後まではっきり保たれます。

関連概念