脳は絵や文字の集まりの中に余白があると、まるでそこに境界線があるように判断します。

例えば「ABCDE」と言う文字列があります。
ここに「AB　CDE」のように、BとCの間にスペースを入れました。

前者では、A〜Eを1つの塊として、認識します。
後者では、ABとC〜Eの2つのグループとして、認識します。

では具体的にはどのように、スペースの位置や広さを決めたらよいでしょうか？

構造化

ポイントは、構造化です。
内容を階層で整理すると、スペースを入れる位置・広さが明確になります。

例えば料理の企画ページを作るとして。
以下のように、情報を整えました。

• 料理をしよう
  • 和食編
    • とんかつ
    • ちらし寿司
  • 洋食編
    • パスタ
    • グラタン
  • 中華編
    • チャーハン
    • シュウマイ

階層化によって、以下のような構造ができました。

• 大見出し ＝ 料理をしよう
• 中見出し ＝ 和食編
• 小見出し ＝ とんかつ

スペースの位置

構造化できたら。
スペースの位置はどうしたらよいでしょうか？

• 大見出しと、中見出しの間
• 中見出しと、小見出しの間

に、それぞれスペースを設けます。
すると、ひと目で把握しやすい設計になるでしょう。

スペースの広さ

次にスペースの広さについてです。

基本は

• 大見出しと、中見出しの間 ＝ 広く
• 中見出しと、小見出しの間 ＝ 狭く

としておけば、それぞれのグループを視認しやすくなるでしょう。

スペースの広さを逆にすると、分かりにくく、違和感のあるデザインとなります。