なぜ必要なのか

必要な機能が全部あっても、最初に何をすべきか見つけにくい画面があります。狭い端末では横の領域が本文を圧迫し、操作の読む順序が乱れます。何列が美しいかより先に、利用者が終えたい作業に沿って情報を整理する必要があります。配置は装飾を埋める仕事ではなく、行動の順番を作る仕事です。

どう解決するのか

  1. カタログの二項目を探して比較するなど、一つの作業を選びます。最初に必要な情報、判断を支える情報、後でよい情報を分けます。案内、絞り込み、結果、補足へ違う役割を与えます。すべてを主役にすると、始める場所が分からなくなります。優先順位は実際の作業で決めます。
  2. 一列の読む順序を描きます。ページの正体と目的、操作、結果、補足の順を試します。本物の長い題名、翻訳したラベル、空の結果を使います。短い仮文だけでは空間の問題が隠れます。内容が増えたときに何が押され、何を見せ続けるかも確認します。
  3. 同時に見えることが助けになるときだけ列を増やします。広い画面では長い一覧の横にフィルターを置けます。狭くなったら窮屈になる前に意味のある順へ積みます。分岐点は内容に使える幅で決め、端末名だけに依存しません。見た目とキーボードの順番も合わせます。
  4. 比較する情報に表現を合わせます。反復する文字情報は行で、似た画像は整列したカードで比較できます。高さの違う画像には不均一な配置も使えますが、キーボード順序は理解できる必要があります。同じ内容で配置を比較し、装飾や情報量の違いに結論を決めさせません。
  5. 実際の状態を試します。読み込み中、結果なし、失敗、長文、説明を展開した状態を確認します。キーボードだけで操作から結果へ移動します。モーダルが必要なら名前、閉じ方、内部のフォーカス、終了後の戻り先を用意します。通常状態の画像一枚ではこの動作を証明できません。

狭い幅と広い幅、拡大表示、対応言語で作業全体をたどります。始める場所、次の結果、何も出ないときの回復方法が分かるでしょうか。その答えで配置を直します。画面内に収まることと、読んで操作できることは別です。空間不足では優先度の低い情報を再配置し、必要な機能を無説明で消しません。

ヘッダー● ● ●
本文次へ →

どんな考え方なのか

領域と繰り返す内容の位置・読む順序がレイアウトです。CSS Gridは実装道具であり計画そのものではありません。モーダルはWAIパターンを参照できます。列、一覧、グリッドは作業を助けるために選び、内容や画面サイズが変わったときも利点と制約を確かめます。