このページの中身

視覚階層（読む順序を作る）

どこから読むかは、読者が決めるのではなく、作り手が決めておくものです。

視覚階層のない画面と、3段の強弱をつけた画面の比較図
図を大きく見る
図の中身を文字で読む
  • ✕ 全部おなじ強さ
  • どこから読むかを読者が決めることになる
  • 階層を作る作業の半分は、「何を強くするか」ではなく
  • 「何を弱くするか」を決めること。
  • ○ 3段の強弱
  • 目が強いほうから拾いはじめる
  • 主要な操作
  • 補助情報

ひと目で#

視覚階層
読む順序が、見た目についている状態
主従
画面の主役を1つに決めること
焦点
開いた瞬間に視線が落ちる、最初の1点
視覚的重量
目立ちやすさ。大きさ、色、濃さ、複雑さ、孤立の度合いの合計
対比
階層を作る手段。差をつける操作そのもの

強弱の段は 3段から4段が上限です。5段を超えると、隣り合う段の差が読み取れなくなります。

使い分け#

こう感じたら手を入れる場所
どこを見ればいいのか分からない焦点がない。強い要素を1つに絞る
強い要素が複数あって迷う主従がない。1つを残して弱める
見出しが本文に埋もれる対比が足りない。級数を2.5倍以上へ
1つの要素だけ異様に目立つ重さが過剰。彩度か動きを疑う
見た目は整っているのに、読み上げで構造が伝わらない見出しの要素が正しくない
主役が2つあって視線が割れる画面と、主役を1つに絞って読む順序が付いた画面の比較図
図を大きく見る
図の中身を文字で読む
  • ✕ 主役が2つ　○ 主役は1つ
  • 強い要素どうしが視線を取り合う　読む順序が見た目に付く
  • 1
  • 2
  • 3
  • どちらから読むかが決まらない　見出し、本文、ボタンの3段。2番目からは一段ずつ弱く
  • 全部を強めると差が消える。2つ目の主役は、1つ目を消す。

重さに効く要因#

要因重くなる方向
動き動いているものに勝るものはない。静止したどの要素より重い
彩度高いほど重い
明度差背景との差が大きいほど重い
大きさ大きいほど重い
孤立度周りが空いているほど重い
複雑さ情報量が多いほど重い

間違えやすいところ#

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

リラクゼーションサロンのトップに置く「はじめての方へ」の案内カードです。直す前は、見出しも本文もボタンの文字も同じ 16px の同じ黒。3つの要素は読めるのに、どこから読むかが付いていません。

段は3つで足ります。見出しを --text-xl・700 でいちばん強く。本文は大きさを変えず、色を --color-text-muted に落として一段弱く。ボタンは濃い面の primary を1つだけ置きます。仕上がりがこれです。

3段の強弱を付けた案内カードの見本。見出しがいちばん強く、本文は一段弱く、primaryボタンは1つ
図を大きく見る

強い要素は増やしません。ボタンを2つ並べたくなったら、片方を下線だけのリンクに落とします。カードのほかに LP の見出し回りと料金表で同じ3段を作る手順は、強弱の実例集に before/after の完成コードで置いてあります。

確認する#

使えるパターン#

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

見出しと本文の差がつかない

大きさだけで差をつけようとしている。太さと余白を併せて動かすと、大きさは控えめで足りる。

このコードで動いている見本です

どこから読めばいいか分からない

大きさ・太さ・色・位置・余白のうち、2つだけで差をつける。全部を変えると差が消える。

このコードで動いている見本です

要素をいくつ並べるか迷う

同じ重さのものを4つ以上並べると、どれも見られなくなる。優先順位を付けて差をつける。

主役1 + 副2まで。4つ以上は優先順位で差をつける

何のページか分からないと言われる

h1で名乗る。ページを開いて最初に読む1行が、そのページの答えになっているか確かめる。

このコードで動いている見本です

この場面のほかの困り事と、そのまま貼れる部品は文字を読ませる、並べる・揃える、迷わせないにまとめてある。逆引きには全188件。

強弱を試す#

この値は作業台で決められます。和文の予約ページに載せて、幅と明暗を替えて確かめてから CSS を持ち帰る: 影

実物のカードで試します。見出しの段とウェイト、本文を muted にするかの3つを動かすと、見出し→ボタン→本文という読む順序が付いたり消えたりします。

月額プランの変更

現在のプランは今月末まで有効です。変更した内容は、次回の請求から反映されます。

.card h2 {
  font-size: var(--text-xl); /* 24px */
  font-weight: 700;
  line-height: var(--leading-heading);
  margin-block: 0 var(--space-2);
}

.card p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-block: 0 var(--space-4);
}

.card .button {
  min-block-size: 2.75rem;
  padding: var(--space-2) var(--space-5);
  font: inherit;
  font-weight: 700;
}

この道具は JavaScript で動きます。無効の場合は、見出し --text-xl・700、本文 --text-base・muted の組み合わせを出発点にしてください。

出典#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。