はじめての方へ
初回は、からだの声を聞くことから
今日の状態を確かめてから、進め方を決めます。
強弱の実例集
同じ3段の作り方を、カード・LPの見出し回り・料金表という3つの現場に当てはめて、before/after の完成コードで見せます。
作り方は毎回同じです。主役を1つ決めていちばん強くし、支える文字は色を落とし、行動は primary 1つに絞る。値はすべて出発点のCSSのトークンで、考え方は視覚階層にあります。
カード#
実表示 見出し、本文、行動の3段
「はじめての方へ」の案内カードです。直す前は、見出し・本文・ボタンの文字が同じ 16px の同じ黒で並んでいます。
- 見出しと本文が同じ大きさ・同じ色で、どちらが要点か読めない
- ボタンが下線だけのリンクで、本文の続きに見える
- 3つの要素の間隔が均一で、読む順序の手がかりがない
見出しを --text-xl・700 に上げ、本文を muted に落とし、ボタンを primary の面にします。
このコードで動いている見本です
このコードで動いている見本です
カードが小さいときは、見出しを --text-lg まで下げてかまいません。700 の太さが残っていれば段は保てます。大きさと太さの両方を落とすと、本文との差が消えます。
LPの見出し回り#
実表示 主役をh1ひとつへ絞った見出し
常盤野のパン工房 つきひ
石窯の火は、朝三時から。
焼きたてを、いちばん近くで。予約なしで立ち寄れます。
ヒーローの直す前は、肩書きの1行・h1・リード文が全部 24px 前後に育ち、ボタンが2つとも primary です。強い要素が4つあり、焦点が決まりません。
- h1 とリード文の級数差が半端で、どちらが主張か迷う
- 肩書きの1行が h1 と同じ色・同じ太さで場所を取り合う
- primary が2つ並び、どちらを押すべきか読者に委ねている
h1 だけを --text-2xl に残し、前後を一段ずつ弱めます。
このコードで動いている見本です
このコードで動いている見本です
行動を2つ残したいときの答えがこの形です。primary の面は1つに絞り、もう1つは下線のリンクへ落とします。押せるものは2つのまま、強弱だけが付きます。
料金表#
実表示 金額を右端へ揃えた料金表
| メニュー | 時間 | 料金 |
|---|---|---|
| 部分ほぐし | 30分 | 3,300円 |
| 全身ほぐし | 60分 | 6,600円 |
| 全身と足裏 | 90分 | 9,900円 |
料金表の主役は数字です。直す前は、メニュー名も時間も料金も同じ大きさの中央揃えで、桁の位置が行ごとにずれています。
- 全セルが中央揃えで、金額の桁が縦に揃わない
- 料金が本文と同じ級数に沈み、いちばん知りたい情報が探す対象になっている
- 列見出しと中身が同じ強さで、表の構造が読み取れない
金額の列だけを強くし、残りを支えに回します。
このコードで動いている見本です
このコードで動いている見本です
強くしたのは金額の1列だけです。罫は横だけに減らし、列見出しは小さく薄く。読者は左のメニュー名で行を探し、右端で金額を縦に比べられます。
確認する#
- 3つの現場のどれでも、いちばん強い要素が1つに決まっている
- 金額や日付の数字が等幅で、桁が縦に揃っている
- primary の面が1画面に1つで、2つ目の行動は下線リンクになっている