画面レイアウト標準｜グリッド・余白・情報密度の決め方

画面設計で最初に決めるべきは、色でもアイコンでもなく 「どこに何を置くか」の枠組み です。枠組みが揃っていれば、細部が多少ぶれても利用者は迷いません。逆に枠組みがぶれていると、細部をどれだけ整えても「使いにくい」と言われます。

画面を4つの領域に分ける

業務システムの画面は、次の4領域に整理すると全画面で一貫させやすくなります。

標準の領域分割

POINT

最も効果が大きいのはアクション領域の位置を固定することです。「登録ボタンは常にフォーム右下」「一覧の一括操作は常に一覧の左上」と決めるだけで、画面間の迷いが消えます。

余白・高さ・間隔をすべて 8の倍数（細かい調整は4px）で決めます。理由は美的なものではなく、判断を減らすためです。

「16pxか18pxか」で悩む時間がなくなるのが最大の効果です。迷ったら16px、狭くしたいなら8px、広げたいなら24pxと、選択肢を3つに絞ります。

よくあるミス

グリッドを決めたのに、実装側で margin-top: 13px のような値が混ざるケース。トークン（--space-2: 8px など）としてCSS変数を用意し、生の数値を書けない状態にするのが確実です。

業務システムの体感速度を左右するのは、一覧の1行の高さです。

✕ ゆったりしすぎ（56〜64px）

1画面に8〜10件。40件の確認にスクロールが4回必要。比較作業が成立しない。

◯ 業務向け（36〜44px）

1画面に18〜22件。スクロールなしで大半を比較できる。行の識別も十分。

さらに、密度は業務の性質で切り替えられるようにしておくと親切です。

業務端末の主流は 1366×768 と 1920×1080 です。1280px幅で破綻せず、1920px幅で間延びしないことを条件にします。

入力フォームは可読性のため最大 960〜1080px で中央寄せ、一覧画面は列が多いため画面幅いっぱいに広げる、という使い分けが現実的です。全画面一律で最大幅を絞ると、列の多い一覧が窮屈になります。

1366×768 の端末では、ブラウザのUIを差し引くと表示領域の高さは約 600px です。検索条件＋一覧の1行目までが600px以内に収まるかを必ず確認してください。

折りたたみ状態はユーザーごとに記憶してください。毎回展開し直す手間は、地味ですが日次で効いてきます。

スクロールしても常に見えているべき要素は限られます。

やりすぎ注意

ヘッダー・パンくず・検索条件・操作バーをすべて固定すると、実際にスクロールできる領域が画面の4割程度になります。固定してよいのは合計で画面高さの25%までを目安にしてください。