重要な情報はどこに置く?位置による優先順位とレイアウトの基本

位置による優先順位の基本

まずは、位置による優先順位とは何か、そしてなぜ置く場所によって情報の重要度が変わって見えるのかを押さえましょう。

位置による優先順位とは

位置による優先順位とは、要素を画面のどこに置くかによって、見る人がその情報をどれくらい重要だと受け取るかが変わる、という考え方のことです。

ここでいう「要素」とは、見出し・文章・写真・ボタンのように、画面に置く1つひとつの部品のことです。

たとえば同じ大きさ・同じ色の文字でも、ページの一番上にあれば「まず読むべき情報」に見え、ページの一番下にあれば「補足の情報」に見えます。

つまり、文字の大きさや色を変えなくても、置く場所だけで「これは大事」「これは後でいい」と伝えられるのです。

なぜ置く場所で重要度が伝わるのか

置く場所で重要度が伝わるのは、人が画面を見るときの視線の動きに、ある程度決まった傾向があるからです。

横書きの日本語や英語のWebページでは、多くの人が上から下へ、左から右へと読み進めます。

そのため、上や左のほうにあるものほど先に目に入り、下や右の隅にあるものほど後回しにされたり、見落とされたりしやすくなります。

Webサイトの使いやすさを研究しているNielsen Norman Groupの視線計測の調査でも、横書きのページでは視線が画面の左側に集まりやすいこと(Horizontal Attention Leans Left(英語))や、スクロールせずに見える範囲とページの上のほうに注目が集まりやすいこと(Scrolling and Attention(英語))が報告されています。

代表的なのが「Z型」と「F型」です。

Z型は、バナーのようにパッと見せるデザインで、視線が左上→右上→左下→右下とZの字を描くように動く流れです。

F型は、文章の多いページで、上のほうは横に長く読み、下に行くほど左端だけを拾い読みしてFの字のような形になる流れです。

それぞれの詳しい使い方は視線誘導とは?で解説しています。

優先順位が高く見えやすい4つの位置

横書きのWebページで、特に優先順位が高く見えやすい位置は次の4つです。

• 上
  ページは上から順に見られるため、上にあるものほど先に読まれます。
• 左上
  横書きでは視線のスタート地点になりやすく、多くのサイトがロゴやページのタイトルをここに置いています。
• 中央
  周りに何もない状態で画面の中央に置かれたものは、「特別なもの」として目に留まりやすくなります。
• ファーストビュー
  ファーストビューとは、ページを開いたときにスクロールせずに最初に見える範囲のことです。
  ここに入らない情報は、スクロールしてもらわないと見てもらえません。

同じ3つの情報を、置く順番だけ変えて比べてみましょう。

NGの見本とOKの見本は、文字の大きさも色もまったく同じで、違うのは並び順だけです。

それでもOKの見本では、「臨時休業のお知らせ」が真っ先に目に入り、お店に来ようとしている人に確実に伝わります。

これが、位置だけで優先順位を伝えるということです。

位置で優先順位をつける方法

ここからは、位置による優先順位を実際のレイアウトでどう使うかを見ていきます。

「重要な順に上から並べる」「左上と最初の画面を大事に使う」「位置だけに頼らない」の3つがポイントです。

重要な順に上から並べる

位置による優先順位を使う一番基本の方法は、情報を重要な順に上から並べることです。

ページは上から順に見られ、下に行くほど途中で読むのをやめる人が増えるためです。

次の手順で並び順を決めると、迷いにくくなります。

1. ページに載せたい情報をすべて書き出します。
2. 「見る人が一番知りたいこと」と「自分が一番伝えたいこと」を考え、両方に当てはまるものを最上位にします。
3. 残りの情報を重要な順に並べ、その順番のまま上から配置します。
4. 注意書きや関連リンクのように、必要な人だけが読めばよい情報は下のほうにまとめます。

ただし、「下に置く=読まれなくてよい」ではありません。

料金の条件や解約の方法のように、見る人が判断に必要とする情報は、下に置く場合でも見つけやすくしておきましょう。

左上には「何のページか」が分かるものを置く

横書きのページでは、左上に「ここは何のサイトか」「何のページか」が分かるものを置くのが基本です。

左上は視線のスタート地点になりやすく、見る人はまずそこで「自分が探していたページかどうか」を判断するためです。

多くのWebサイトが、左上にロゴを置いているのもそのためです。

ロゴがない個人のブログならサイト名や記事のタイトル、バナーやSNSの画像なら「〇〇特集」のようなテーマやキャッチコピーを左上に置くと、同じ役割を果たせます。

前に紹介したNielsen Norman Groupの調査でも、ロゴを左上に置いたほうが、右上に置いた場合よりもブランド名を覚えてもらいやすかったと報告されています(Logo Placement and Brand Recall(英語))。

カードのような小さなまとまりでも、考え方は同じです。

NGの見本では、カードの中で説明文が先に目に入り、お店の名前は右下に置いているため、読み終わるまで何のお店の紹介なのか分かりません。

OKの見本では、カードの左上に置いたお店の名前から読み始められるので、「どのお店の話か」を知ったうえで説明を読めます。

ファーストビューには一番伝えたいことを入れる

ファーストビュー(スクロールせずに最初に見える範囲)には、そのページで一番伝えたいことを入れましょう。

ページを開いた人は、ファーストビューを見て「読み進めるかどうか」を判断するため、ここで目的の情報が見えないと、スクロールせずに離れてしまうことがあるからです。

ただし、ファーストビューの広さは、パソコン・タブレット・スマートフォンなど見る画面の大きさによって変わります。

パソコンの大きな画面ではファーストビューに入っていた情報が、スマートフォンでは画面の外に出てしまうこともあるので、スマートフォンの画面でも確認しましょう。

スマートフォンのファーストビューは、ブラウザのアドレス欄などを除いた縦のひと画面分しかなく、思っているより狭いものです。

たとえば商品やサービスのページなら、「何のページか分かるキャッチコピー」「メインの写真」「申し込みなどのボタン」が、このひと画面の中に見えているかを確かめましょう。

中央は「1つだけ」を目立たせたいときに使う

画面の中央は、周りに何もない状態で1つだけを置いたときに、とても目立つ位置です。

大事な確認のメッセージや、ログイン画面の入力欄のように、「今はこれだけを見てほしい」という場面に向いています。

反対に、中央にいくつもの要素を並べると、どれも目立たなくなるので注意しましょう。

NGの見本は、ボタンがほぼ中央にあるものの、周りを同じような箱に囲まれているため、目立つ位置の効果が打ち消されています。

OKの見本は、短い説明とボタンだけを中央に置いて周りを空けたことで、見る人の目がまっすぐボタンに向かいます。

位置だけに頼らず、大きさ・色・余白と組み合わせる

位置による優先順位は強力ですが、位置だけで何でも解決しようとしないことも大切です。

たとえば一番上に置いても、文字が小さく周りと同じ色のままなら、ほかの要素に埋もれてしまうことがあります。

大事な情報ほど、目立つ位置に置いたうえで、大きさや色、周りの余白でも差をつけると確実に伝わります(主役と脇役の差のつけ方は主役と脇役とは?、大きさの差はジャンプ率で変わるメッセージの伝わり方、余白で目立たせる方法は要素を目立たせる余白とは?で解説しています)。

縦書きでは優先される位置が変わる

ここまでの話は、横書きのWebページを前提にしています。

縦書きの文章は右の行から左の行へ読み進めるので、新聞や雑誌のように縦書きが中心の紙面では、読み始めは右上になります。

前に紹介したNielsen Norman Groupの記事でも、アラビア語のように右から左へ書く言語のサイトでは、レイアウトが左右反転していることが多いと触れています。

「左上が一番」は決まりではなく、読む方向から生まれた傾向だと覚えておくと、縦書きのチラシなどを作るときにも応用できます。

実践のポイント

位置による優先順位で陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 作った順番や思いついた順番のまま、情報を上から並べてしまうことがあります。
  並べる前に、見る人にとって重要な順になっているかを見直しましょう。
• 一番伝えたいことを、ページの下のほうや画面の隅に置いてしまうことがあります。
  重要な情報ほど、上や左上、ファーストビューに入る位置に置きましょう。
• パソコンの画面だけで確認し、スマートフォンでファーストビューから外れていることに気づかないことがあります。
  スマートフォンでもページを開き、最初の画面に何が見えているかを確かめましょう。
  パソコンで左右に並べた情報は、スマートフォンでは縦1列になり、左にあったものが上、右にあったものが下に来ることが多くなります。
  スマートフォンでは「一番上にあるもの」が、パソコンの左上と同じ役割を持つと考えましょう。
• 位置を工夫しただけで安心し、大きさや色が周りと同じままになっていることがあります。
  大事な情報は、位置に加えて大きさ・色・余白でも差をつけましょう。

よくある質問

• Q. 重要な情報は、全部ファーストビューに入れたほうがいい?
  A. いいえ、全部を詰め込む必要はありません。
  ファーストビューに情報を詰め込みすぎると、かえって一番伝えたいことが埋もれてしまいます。
  ファーストビューには一番伝えたいことと、「続きを読みたい」と思わせる情報に絞り、残りはスクロールした先に置きましょう。
• Q. 右下に置いたものは、読まれないの?
  A. 読まれないわけではありません。
  ページを最後まで読んだ人が次の行動を探す場所として、ページの終わりにボタンを置くのはよくある配置です。
  ただ、最初に目に入りやすい位置ではないので、「最初に気づいてほしい情報」を置くのには向きません。
  なお、右下はZ型の視線の終点にあたるため、バナーでは申し込みなどのボタンを置く定番の位置です。
  右上は、検索・ログイン・問い合わせのように、必要な人が探しに来る機能を置くことが多い位置です。
• Q. 位置による優先順位と視線誘導は何が違う?
  A. 位置による優先順位は「どこに置くと重要に見えるか」、視線誘導は「見る人の目をどの順番で動かすか」に注目した考え方です。
  重なる部分が多く、組み合わせて使います(視線誘導は視線誘導とは?で解説しています)。

まとめ

位置による優先順位とは、要素を置く場所によって情報の重要度の伝わり方が変わるという考え方で、横書きのページでは上・左上・中央・ファーストビューが目に入りやすい位置です。

重要な情報ほど上に並べ、左上には「何のページか」が分かるものを置き、位置だけに頼らず大きさや色、余白とも組み合わせることがポイントです。

まずは自分のサイトをスマートフォンで開き、スクロールせずに見える範囲に、そのページで一番伝えたいことが入っているかを確かめてみてください。