余白とグリッドは、デザインの骨格です。適切に余白とグリッドを設計すると、視線が自然に流れ、重要な情報が目立ちます。本記事では、余白の目安、代表的なグリッド、視線を邪魔しない余白の作り方、実践的なチェックリストを紹介します。
- 見出し周りの余白は本文の1.5〜3倍を目安に取る
- 本文の段落間は行間に合わせて1〜1.5倍のスペースを取る
- 近接の原則に基づき関連情報は近づける
グリッドの実践例
- 2カラム：画像＋テキストの一般的なレイアウト
- 3カラム：イベント告知や機能紹介に使いやすい
- モジュールグリッド：精度の高い配置をしたいときに採用
レイアウト再構成の手順
- グリッド線を引く（まずは3カラムを試す）
- 各要素をカラムに収める
- 見出し周りの余白を広めに調整し、本文は可読性重視で行長をコントロール
今日の課題（20分）
- 既存の告知を3カラムに当てはめ、見出しの余白を広めに取る
- 本文の行長を50〜75文字程度に収め、行間を調整する
- モバイル想定でカラムを1つに減らした場合の見え方も確認する
内部リンク：
64歳からデザインを学び始め、現在はWebと印刷物のデザインを制作しています。このシリーズでは、デザイン経験がない方にも分かる言葉で、デザインの基本と作り方をお伝えします。