構図のパターン
型は、内容に合うものを選んだときだけ効きます。中身が薄いものをカードにすると、器のほうが目立ちます。
図の中身を文字で読む
- 分割 カード ベントー メーソンリー 断ち落とし
- 写真と文字を両立 行長も自然に決まる 同種を比較させたい 情報が少ないならリスト 重要度に差がある 大きさに意味を持たせる 比率を切らずに並べる 読み順が縦になる点に注意 図版だけ版面を越える 文章は越えない
- どのパターンでも、モバイルでは縦積みに切り替える。375px で成立するかを最初に確認する。
- ヒーローの高さは 100vh ではなく 100dvh。モバイルでアドレスバーの表示状態により高さが跳ねるため。
- z-index はトークン化する。9999 を使い始めると、次の要素にはさらに大きな値が必要になる。
ひと目で#
- 分割レイアウト
- 左右に2分割。写真と文字を両立でき、行長も自然に決まる
- カードレイアウト
- 同じ大きさの矩形を格子に並べる。同種のものを比べさせる
- ベントーグリッド
- 大小の矩形を隙間なく敷き詰める。重要度に差があるとき
- メーソンリー
- 高さの違う要素を隙間なく積む。比率を切りたくない画像向け
- ヒーロー
- ページ上部の大きな領域
- 断ち落とし
- 版面を越えて画面の端まで広げる
使い分け#
| こういう内容 | 選ぶ型 |
|---|---|
| 写真と説明を対で見せたい | 分割レイアウト |
| 同種の項目を比べさせたい | カード。画像があり、情報量が多いとき |
| 項目が短く、ざっと走査させたい | リスト。カードより速く読める |
| 重要度に差のある一覧 | ベントーグリッド |
| 比率の違う画像を切らずに並べたい | メーソンリー |
| 読み物にリズムを作りたい | 図版だけ断ち落とし |
同じ項目でも、並べ方を変えると読者のすることが変わります。カードは選ばせ、リストは走査させ、表は比べさせます。
図の中身を文字で読む
- 同じ6項目を、3通りに並べる
- カード リスト 表
- 画像が主役。1画面に2〜3件 短い項目を上から下へ走査させる 値を桁で比べさせる
- 6件が1画面に収まる。 右端が揃うので、桁が縦に通る。
- 罫は横だけ。列は余白で分ける。
- 残り2件はスクロールの外。 左端が縦に揃うので、目が下へ落ちる。
- 写真で選ばせたいときだけ効く。 新着順・時系列が伝わるのはこの型。 合計だけ罫を変えて締める。
間違えやすいところ#
- メーソンリーを記事一覧に使う読む順が縦になり、新着順が伝わらない
- 情報量の少ない項目をカードにする器のほうが目立つ
- カード全体をリンクにしつつ、中にもリンクを置く入れ子のリンクは操作を誤らせる
- ベントーの区画の大きさに根拠がない大きさは重要度を示す。意味のない差はノイズになる
- ヒーローに
100vhを使うモバイルで跳ねる - ヒーロー画像を遅延読み込みにするLCP が悪くなる
z-index: 9999を使う次の要素にはもっと大きな値が要る。トークンにする- モバイルで格子を保つ縦積みに切り替える
実装#
このコードで動いている見本です
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
珈琲店の仕入台帳を、ページに載せます。摘要・数量・単価・金額の4列と、合計の行です。
この形はカードにもリストにもできません。桁を縦に通して比べさせるのが目的だからです。金額を1件ずつカードに入れた瞬間、117,440 という合計を目で確かめられなくなります。
型は内容から決まります。同じ6項目でも、写真で選ばせるならカード、上から順に走査させるならリスト、値を比べさせるなら表です。
台帳で効いているのは3つです。罫は横だけ（縦罫を引かず、列は余白で分ける）。数値は右揃えに tabular-nums（桁が縦に通り、目で足し算できる）。合計だけ罫を変える（二重罫で締める）。この3つは表の完成形 数値列の表 にそのまま入っています。
ほかの構図も、選んだらパターンから持ち帰ってください。写真とコピーを2列にするなら 左右分割ヒーロー、同種の項目を並べるなら 3列カードグリッド、画像と本文を交互に置くなら 画像と本文の左右交互、短い項目を上から走査させるなら 記事一覧（日付＋見出し） です。1ページ分を通しで組む手順は LPを組む にあります。
コピーする#
このコードで動いている見本です
このコードで動いている見本です
確認する#
- 金額の桁が縦に通っている（
tabular-numsが効き、右端が1本に揃う） - 縦罫がなく、合計行だけ罫の種類が変わっている
- 375px で表だけが横に送られ、ページ全体には横スクロールが出ない
使えるパターン#
このページで扱う語#
このページで扱う語を並べる本文では太字4 語
語の名前から引くなら用語索引へ。
- 非対称レイアウト
- 中心軸を持たず、要素の視覚的重量の釣り合いによって構成するレイアウト。
- ファーストビュー
- スクロールせずに見える初期表示領域。新聞を折りたたんだ上半分に由来する語。
- スティッキー
- 通常の位置にありながら、スクロールが一定量を超えると画面内の指定位置に貼り付く配置方法。
- 重ね順
- 要素の前後関係を決める値。大きいほど手前に表示される。
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
順序があるなら縦、比較させるなら横。読む向きと、比べる向きは違う。
このコードで動いている見本です
縦罫を消し、横罫だけにする。数値は右揃えにして等幅の数字を使う。
このコードで動いている見本です
画像が主役ならカード、比べさせるならリスト。カードは1画面に入る数が減る。
このコードで動いている見本です
この場面のほかの困り事と、そのまま貼れる部品は並べる・揃える、部品を選ぶにまとめてある。逆引きには全188件。
作業台で決める#
この値は作業台で決められます。和文の予約ページに載せて、幅と明暗を替えて確かめてから CSS を持ち帰る: グラデーションとスクリム、並べ方（Flexbox と Grid）