デジタルデザインの基本 — レイアウト・余白・視線誘導

教材アプリのレッスン一覧画面を1枚だけ整える、という作業を例に、レイアウトの基本を確認していきます。要素を「なんとなく中央寄せ」で並べた画面と、グリッドと余白のルールを決めてから並べた画面では、情報の伝わり方がまったく違います。デザインツールの機能を覚える前に、まずこの土台を持っておくと、後の配色やUI設計の判断も速くなります。

グリッドは「揃える基準」を先に決める作業

レイアウトが崩れて見える画面の多くは、余白の数値がバラバラで、要素の左端も右端も揃っていません。最初にやるべきは装飾ではなく、8pxや4pxを基準にしたスペーシングスケール（8・16・24・32…）とカラムグリッドを決めることです。Material Designのレイアウト指針でも、余白とカラムをあらかじめ規定してから要素を配置する考え方が示されています※1。

カラム数と余白の決め方

スマホ想定なら4カラム、デスクトップなら12カラム程度が扱いやすい基準です。カラム数そのものより大事なのは、一度決めた余白の値を画面全体で使い回すことです。見出し下の余白だけ24px、他は20pxのように微妙にずれていると、見た人は理由の分からない違和感を覚えます。

余白は装飾ではなく情報の境界線

要素同士の距離が近ければ「関係が深い」、遠ければ「別のグループ」だと人は無意識に判断します。これはゲイシュタルトの近接の法則として知られており、レッスンカードでもタイトルとサブ情報の間を詰め、カード同士の間を広く取るだけで、情報のまとまりが一目で分かるようになります※2。余白を削って要素を詰め込むと、短期的には情報量が増えたように見えますが、実際には読み手の負担が増えるだけです。

視線誘導 — Zパターンと強弱のコントラスト

視線誘導は「どこを一番最初に見せたいか」を、大きさ・太さ・位置の差で作る作業です。色の変化だけで強弱をつけようとすると、配色を変えるたびに階層が崩れてしまいます。まず白黒のワイヤーフレーム段階でサイズと太さのコントラストを確定し、色は後から重ねる順番にすると、視線誘導の設計と配色の実践（配色とタイポグラフィの実践）を切り離して検証できます。視線の動きに関する基本的な考え方は、視覚的階層を扱ったUXの解説記事でも整理されています※3。

Before/After — レッスンカードの整理

整理前のカードは、サムネイル・タイトル・所要時間・レベル表示がすべて同じ大きさの文字で並び、優先順位が読み取れませんでした。整理後は、タイトルを最大サイズかつ太字にし、所要時間とレベルは小さく淡色にして脇に寄せ、カード内の余白を16px単位に統一しています。変更点は文字サイズと余白の数値だけですが、視線が「タイトル→サムネイル→詳細」の順に自然に流れるようになりました。こうした構造ができてから初めて、コンポーネントの状態設計に進む価値があります（UIデザイン入門）。

レイアウトが崩れる場面 — テンプレート化の限界

ただし、グリッドと余白のルールをどんな画面にも一律に当てはめればよいわけではありません。日本語は文字の長さが英語と違う伸び縮み方をするため、英語圏のテンプレートをそのまま持ち込むと行間や折り返しが破綻することがあります。もっとも、ランディングページのヒーローセクションのように「あえて崩す」ことで印象を作る場面もあり、そこでは規則性より意図が優先されます。AI生成のモックマップやレイアウト案をたたき台にする場合も、最終的に揃える・崩すの判断を下すのは作り手自身です。

基本のレイアウト感覚を型にしたい場合は、有料の「クリエイティブAI基礎講座」で実践課題として扱っています。詳しくは講座ページをご覧ください。

参考文献

1. Material Design. "Understanding layout." m3.material.io, https://m3.material.io/foundations/layout/understanding-layout/overview
2. Nielsen Norman Group. "Gestalt Principles of Proximity in UX." nngroup.com, https://www.nngroup.com/articles/gestalt-proximity/
3. Nielsen Norman Group. "Visual Hierarchy in UX: Definition." nngroup.com, https://www.nngroup.com/articles/visual-hierarchy-ux-definition/