エンジニア向けの余白の基礎 / Spacing

Webサイト、アプリ、資料などの品質を上げたいと思っているかたに向けた、余白（スペーシング）の基礎についての資料です。

関連記事：8の倍数ルールでデザインする理由とメリット・デメリット
https://yuyakinoshita.com/blog/2019/02/10/design-by-multiple-of-8/

以下、2020年8月24日に追記しました。

この資料を見ていただいた方、コメントをくださった方、ありがとうございます。「目がチカチカする」、「なぜ正方形の余白だと整った印象になるのか？」などのアドバイスや質問をいただけました。いただいたアドバイスを元に以下の点をアップデートしました。

- 資料全体のコントラストを下げました。以前より目の負担が軽減されるように背景色を調整しました。

- 余白の大きさ指定に正方形を使う理由を追記しました。余白の大きさを指定する際に正方形の余白を使うことでタテとヨコの余白が統一されますが、そもそもなぜタテとヨコの余白を統一すると良いのかの深堀りはしていませんでした。今回いただいた質問を元に仮説を立てて、その内容を資料に追記しました。

あらためて気付きの機会をいただけたことに感謝しております。

Website: https://yuyakinoshita.com
Twitter: https://twitter.com/yuyaink

Transcript

2. 木下 裕哉 Yuya Kinoshita デザイナー フロントエンドエンジニア yuyakinoshita.com @yuyaink
3. はじめに
4. この資料のゴール 余白に少しでも興味をもってもらえること
5. さらなる狙い 余白の基礎について 3つのポイントを意識してもらえること
6. 主な対象者 Webサイト、アプリ、資料などの 品質を上げたいと思っている方 基礎の内容なので、対象者はエンジニアに限りません。
7. デザインに関すること いきなりですが
8. 欧文書体、イラスト、幾何学模様、コラ ジュ、写真、遠近 法、ピクトグラム、グリッドシステム、カラーモード、トーン &マナー、アイキャッチ、版面率、レイヤー、レイアウト、対 角線、視線、RGB、CMYK、HSB、陰影、余白、解像度、コ ントラスト、色相、明度、彩度、光沢感、アクセントカラー、 黄金比、白銀比、フィボナッチ数列、タイポグラフィ、ハーフ トーン、優先順位付け、シンメトリー、ラフ、プロトタイピン グ、パターン、ジャンプ率、整列、分布、カーニング、アニメ ーション、背景色、透明度、カラーシステム、セリフ、サンセ デザインに関連することはいろいろある
9. 余白 その中で余白に焦点を当てました。 欧文書体、イラスト、幾何学 模様、コラージュ、写真、遠 近法、ピクトグラム、グリッド システム、カラーモード、トー ン&マナー、アイキャッチ、版 面率、レイヤー、レイアウ ト、対角線、視線、RGB、 CMYK、HSB、陰影、解像 度、コントラスト、色相、明
10. それはなぜか？ WebサイトやアプリのUIデザインにおいても重要です。 デザインの品質を左右する 重要な要素だと考えるため
11. 例えば
12. 欧文書体、イラスト、幾何学模様、コラ ジュ、写真、遠近 法、ピクトグラム、グリッドシステム、カラーモード、トーン &マナー、アイキャッチ、版面率、レイヤー、レイアウト、対 角線、視線、RGB、CMYK、HSB、陰影、余白、解像度、コ ントラスト、色相、明度、彩度、光沢感、アクセントカラー、 黄金比、白銀比、フィボナッチ数列、タイポグラフィ、ハーフ トーン、優先順位付け、シンメトリー、ラフ、プロトタイピン グ、パターン、ジャンプ率、整列、分布、カーニング、アニメ ーション、背景色、透明度、カラーシステム、セリフ、サンセ 余白が無いと情報を探すのが大変…
13. 余白 欧文書体、イラスト、幾何学 模様、コラージュ、写真、遠 近法、ピクトグラム、グリッド システム、カラーモード、トー ン&マナー、アイキャッチ、版 面率、レイヤー、レイアウ ト、対角線、視線、RGB、 CMYK、HSB、陰影、解像 度、コントラスト、色相、明 余白があると必要な情報を見つけやすい！
14. それはなぜか？ 結果的にすっきりと整理された情報はわかりやすく、印象が良くなる。 人間の脳は複雑な情報より 単純化された情報を処理しやすいため
15. 余白とは何か？ そもそも
16. 辞書で調べました “文字・絵などをかいたり， 印刷した紙面で白くあいて残っている部分。 「―に書き込みをする」” 引用元：スーパー大辞林（辞書.app）
17. デザインにおける余白は、 自分は少し違う意味で捉えています
18. 余白をこう考えています 白くあいて残ってしまうものではなく、意図的につくるもの。 情報を整理するための空間
19. 余白の基礎を知るメリット
20. 余白の基礎を知るメリット ユーザーが情報を理解する労力を減らせる 1
21. 余白の基礎を知るメリット より洗練されたデザインになり、印象が良くなる 2
22. 余白の基礎を知るメリット 結果的にサービスやブランドの信頼性が高まる 3
23. おまけ デザインの品質を判断する1つの ものさし（基準）が持てる OMAKE
24. 3つのポイントで余白を考えてみます これからお伝えすること
25. 余白のつくりかた：その1
26. 余白のつくりかた：その1 余白は正方形で統一する
27. どういうこと？
28. 見出し見出し見出し見出 し見出し見出し 見出し見出し見出し見出 し見出し見出し 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本 まずはあまり良くない余白の例です。 わかりやすくするために、余白を黄色い四角で表示しています。 Not Good
29. なぜあまり良くないのか？ 四隅の余白がバラバラで、不安定な印象を受けるためです。 見出し見出し見出し見出 し見出し見出し 見出し見出し見出し見出 し見出し見出し 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本 Not Good
30. 正方形を使って余白をつくる どうしたらいいの？
31. 見出し見出し見出し見 出し見出し見出し 見出し見出し見出し見 出し見出し見出し 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文 Good 四隅の余白を正方形で統一しました。
32. 四隅の余白を統一することで整った印象になり、 情報のまとまりを認識しやすくなります。 見出し見出し見出し見 出し見出し見出し 見出し見出し見出し見 出し見出し見出し 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文 Good
33. あまり良くない例と見比べてみます。 見出し見出し見出し見出 し見出し見出し 見出し見出し見出し見出 し見出し見出し 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本 Not Good
34. 見出し見出し見出し見 出し見出し見出し 見出し見出し見出し見 出し見出し見出し 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文 Good コンテンツの内容は同じでも、 より良い印象に感じたのではないでしょうか。
35. 余白が大きい場合はどうでしょうか。 Good TRACK DOG Basic rules of white space AND
36. TRACK Good DOG Basic rules of white space AND 余白が大きくなっても、正方形で余白を決められます。 ※微妙にガイドから飛び出しているのは視覚調整のためです。
37. この場合はどうでしょうか。 Good DOG AND TRACK Basic rules of white space
38. 正方形の余白が四隅に確保できる場合は、 縦幅に余白が余っても窮屈感や違和感はやわらぎます。 DOG AND TRACK Basic rules of white space Good
39. 要素と要素の関係性 によって余白の広さを 整えています Webサイトの事例 yuyakinoshita.com
40. ちなみに 余白を決めるには、まずガイドラインを引くと進めやすいです。 実はこのページの余白も 正方形でつくっています
41. 注意点 正方形で余白を考えるのは基本 ただし、正方形で余白をつくれない場合や 正方形でつくらないほうが良い場合もある
42. ではどうすればいいの？ なので基本は正方形を意識したほうが良いです。 正方形より良い余白をつくれると判断した場合に 正方形から崩す（これは応用編）
43. 応用編についてのちょっと豆知識 崩しがあって心地良いと感じるデザインは、余白の使い方がうまい。 あえて崩してあるデザインと 崩れてしまっているデザインは印象が違う
44. おさらい 余白は正方形で統一する
45. 余白を正方形でつくる理由 補足と仮説
46. 余白を正方形でつくる理由 タテ（Y軸）とヨコ（X軸）の 余白の大きさを統一するため タテとヨコの余白を合わせることで、視覚的に安定した印象になります。
47. なぜ余白が統一されていると視覚的に安定するの？ 仮説：形状が統一された状態を 人間の脳が「安定している」と 解釈すると考えるため
48. 例えば、正円と楕円の比較 正円のほうが安定した状態に感じやすい
49. 仮説：正円が楕円よりも安定した印象を受ける理由 正円は半径が統一されている
50. 仮説：より統一されているほうが人間が安定感を感じやすいのでは？ 正方形は辺の長さが統一されている
51. 辺の長さが統一されているということは、タテとヨコの距離が同じ 結果的に人間の脳が安定感を感じやすいのでは？
52. 別の観点と仮説：引力と重力 物体の引力（重力）に沿った形状を 人間の脳が安定と解釈しているのかもしれない 自然界（地球上）では重力に沿った形状を、脳が安定と解釈するのでは？
53. 別の観点と仮説：重心 重心を認識しやすい形状のほうが 人間の認知負荷が少なく、 結果的に安定感を感じやすいのかもしれない 例えば正円や正方形は情報の少ない形状で、認知負荷が低いと考えます。
54. 余白のつくりかた：その2
55. 余白のつくりかた：その2 余白の大きさは要素の短辺以上を基本とする
56. 例えば
57. 文字の場合も四角と考えて、その短辺を最小の余白とします。 SPACING
58. Good SPACING 黄色のエリアを最小の余白として設けると、 窮屈な印象を避けやすくなります。
59. 写真のように短辺が長くて収まらない（余白が大きすぎる）場合もあります。
60. Good 短辺が長くて収まらない場合は、 短辺の50%や25%など、何らかの基準で統一すると良いです。
61. ボタンのUIをデザインするときの余白 UIデザイン向けの実践的な話
62. 窮屈な余白にならないための方法 余白は要素の高さ×1.25以上を基本とする
63. なぜ1.25倍なのか？ 自身の経験と感覚による理由 等倍の余白よりも心地良く感じる場合が多いため 数字的な理由 0.25=1/4であり、計算しやすいため
64. × 1.25 そこで余白係数という考えかたを提案します（独自の方法かもしれません） 基準とする余白係数を1.25と定める
65. 要素の高さ（文字サイズ）を0.5倍した余白をつくったボタンの例 窮屈な印象を受けやすい Not Good お問い合わせ
66. 要素の高さ（文字サイズ）を1.25倍した余白をつくったボタンの例 窮屈な印象は受けにくい お問い合わせ Good
67. 要素の高さ（文字） 上下の余白の大きさ 余白係数 6 4 × 1 .2 5 = 80 お問い合わせ 80px 80px 220px 220px 矢印アイコンのように何らかのアイコンがあるボタンの場合、 左右の余白は上下の余白の2～3倍くらいが丁度良いと思います。 Good
68. より良い余白がつくれるなら基準は無視しても良い 1.25倍は1つの基準に過ぎない 内容によって適した余白は変わるので、 状況に応じて使い分けられると良い
69. 応用編 https://yuyakinoshita.com/blog/2019/02/10/design‑by‑multiple‑of‑8/ Webサイトやアプリは 8の倍数で設計するとうまくいく 詳細はブログにまとめてあります
70. おさらい 余白の大きさは要素の短辺以上を基本とする
71. 余白のつくりかた：その3
72. 余白のつくりかた：その3 要素と要素の関係性の強さで決める
73. 要素の例としては いろいろあります。 •見出しや本文などの文字 •ボタンやアイコンなどのUI •写真やイラストなどの画像
74. 見出しや本文の場合
75. 見出しと本文の間は、行間よりも広い余白をつくると良いです。 Good Not Good 理論を用いることで 余白をより使いやすく 理論を用いることで 余白をより使いやすく もしかすると、デザイナーは感覚（Sense）でデザインしていると思われ ているかもしれません。人によって違うと思いますが、自分の場合は理由 9割、感覚1割くらいの割合でデザインすることが多いです。余白を活かす ためには感覚が必要な場面もありますが、理論を用いることでデザイナー ではなくても余白を活かす方法があるのではないかと思っています。 もしかすると、デザイナーは感覚（Sense）でデザインしていると思われ ているかもしれません。人によって違うと思いますが、自分の場合は理由 9割、感覚1割くらいの割合でデザインすることが多いです。余白を活かす ためには感覚が必要な場面もありますが、理論を用いることでデザイナー ではなくても余白を活かす方法があるのではないかと思っています。
76. ガイドを外してみます。 Good Not Good 理論を用いることで 余白をより使いやすく 理論を用いることで 余白をより使いやすく もしかすると、デザイナーは感覚（Sense）でデザインしていると思われ ているかもしれません。人によって違うと思いますが、自分の場合は理由 9割、感覚1割くらいの割合でデザインすることが多いです。余白を活かす ためには感覚が必要な場面もありますが、理論を用いることでデザイナー ではなくても余白を活かす方法があるのではないかと思っています。 もしかすると、デザイナーは感覚（Sense）でデザインしていると思われ ているかもしれません。人によって違うと思いますが、自分の場合は理由 9割、感覚1割くらいの割合でデザインすることが多いです。余白を活かす ためには感覚が必要な場面もありますが、理論を用いることでデザイナー ではなくても余白を活かす方法があるのではないかと思っています。
77. アイコンやボタンの場合
78. アイコンやボタンも関係性の強さでまとまりをつくると良いです。 Good Not Good Buy Contact Buy Contact
79. ガイドを外してみます。 Good Not Good Buy Contact Buy Contact
80. 画像と見出しと本文の場合
81. 写真と見出しと文章のセットが1つのまとまりに見えると良いです。 関係性が強いものほど近くに配置し、関係性が弱 いものは遠くに配置することで、情報を理解しや すくなります。 関係性が強いものほど近くに配置し、関係 性が弱いものは遠くに配置することで、情 報を理解しやすくなります。 Sky Sky 関係性が強いものほど近くに配置し、関係性が弱 いものは遠くに配置することで、情報を理解しや すくなります。 関係性が強いものほど近くに配置し、関係 性が弱いものは遠くに配置することで、情 報を理解しやすくなります。 Bird Bird Good Not Good
82. ガイドを外してみます。 関係性が強いものほど近くに配置し、関係性が弱 いものは遠くに配置することで、情報を理解しや すくなります。 関係性が強いものほど近くに配置し、関係 性が弱いものは遠くに配置することで、情 報を理解しやすくなります。 Sky Sky 関係性が強いものほど近くに配置し、関係性が弱 いものは遠くに配置することで、情報を理解しや すくなります。 関係性が強いものほど近くに配置し、関係 性が弱いものは遠くに配置することで、情 報を理解しやすくなります。 Bird Bird Good Not Good
83. アドバイス 余白だけでまとまりをつくれると、すっきりとした印象になります。 余白を使って関係性の強い要素を 1つのまとまりにする
84. おさらい 要素と要素の関係性の強さで決める
85. まとめ
86. 余白をつくるときには を意識すると、うまくいきやすいです。 •正方形で統一する •要素の短辺以上を基本とする •要素と要素の関係性の強さで決める
87. 最後に この資料をきっかけに少しでも 余白に興味をもっていただけたら嬉しいです
88. ありがとうございました