余白とグリッドで伝わるレイアウトを作る

余白とグリッドは、デザインの「見た目」より先に、情報を伝えるための土台です。本稿では、余白の意味、よく使うグリッド、視線を邪魔しない余白の作り方、そして実践課題を分かりやすく解説します。

余白の役割

・視線の休息：重要な要素の前後に余白を置くと注目度が高まる

・情報のグループ化：関連する要素は近く、不要なものは離す

・読みやすさの確保：本文の行長と行間を適切にする

よく使うグリッド

・2カラム：画像とテキストの組み合わせに便利

・3カラム：複数の情報を整然と並べるときに有効

・モジュールグリッド：詳細な整列に向く

実践ルール（チェックリスト）

・見出し周りは本文の1.5〜3倍の余白を取る

・要素の揃えはグリッド基準で行う

・スマホではカラムを減らし、縦方向に再配置する

今日の課題（20分）

1. 告知を3カラムに当てはめ、見出しの余白を広めに取る

2. 本文の行長と行間を整え、読みやすさを確認する

3. モバイルでの表示も想定して縦並びに直したときの見え方を確認する