Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

エンジニア向けの余白の基礎 / 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

Yuya Kinoshita

June 28, 2019
Tweet

More Decks by Yuya Kinoshita

Other Decks in Design

Transcript

  1. 見出し見出し見出し見出 し見出し見出し 見出し見出し見出し見出 し見出し見出し 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文

    本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本 まずはあまり良くない余白の例です。 わかりやすくするために、余白を黄色い四角で表示しています。 Not Good
  2. なぜあまり良くないのか? 四隅の余白がバラバラで、不安定な印象を受けるためです。 見出し見出し見出し見出 し見出し見出し 見出し見出し見出し見出 し見出し見出し 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本

    本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本 Not Good
  3. 見出し見出し見出し見 出し見出し見出し 見出し見出し見出し見 出し見出し見出し 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

    本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文 Good 四隅の余白を正方形で統一しました。
  4. 四隅の余白を統一することで整った印象になり、 情報のまとまりを認識しやすくなります。 見出し見出し見出し見 出し見出し見出し 見出し見出し見出し見 出し見出し見出し 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本

    本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文 Good
  5. あまり良くない例と見比べてみます。 見出し見出し見出し見出 し見出し見出し 見出し見出し見出し見出 し見出し見出し 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

    文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本 Not Good
  6. 見出し見出し見出し見 出し見出し見出し 見出し見出し見出し見 出し見出し見出し 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

    本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文 Good コンテンツの内容は同じでも、 より良い印象に感じたのではないでしょうか。
  7. TRACK Good DOG Basic rules of white space AND 余白が大きくなっても、正方形で余白を決められます。

    ※微妙にガイドから飛び出しているのは視覚調整のためです。
  8. 要素の高さ(文字) 上下の余白の大きさ 余白係数 6 4 × 1 .2 5 =

    80 お問い合わせ 80px 80px 220px 220px 矢印アイコンのように何らかのアイコンがあるボタンの場合、 左右の余白は上下の余白の2~3倍くらいが丁度良いと思います。 Good
  9. 見出しと本文の間は、行間よりも広い余白をつくると良いです。 Good Not Good 理論を用いることで 余白をより使いやすく 理論を用いることで 余白をより使いやすく もしかすると、デザイナーは感覚(Sense)でデザインしていると思われ ているかもしれません。人によって違うと思いますが、自分の場合は理由

    9割、感覚1割くらいの割合でデザインすることが多いです。余白を活かす ためには感覚が必要な場面もありますが、理論を用いることでデザイナー ではなくても余白を活かす方法があるのではないかと思っています。 もしかすると、デザイナーは感覚(Sense)でデザインしていると思われ ているかもしれません。人によって違うと思いますが、自分の場合は理由 9割、感覚1割くらいの割合でデザインすることが多いです。余白を活かす ためには感覚が必要な場面もありますが、理論を用いることでデザイナー ではなくても余白を活かす方法があるのではないかと思っています。
  10. ガイドを外してみます。 Good Not Good 理論を用いることで 余白をより使いやすく 理論を用いることで 余白をより使いやすく もしかすると、デザイナーは感覚(Sense)でデザインしていると思われ ているかもしれません。人によって違うと思いますが、自分の場合は理由

    9割、感覚1割くらいの割合でデザインすることが多いです。余白を活かす ためには感覚が必要な場面もありますが、理論を用いることでデザイナー ではなくても余白を活かす方法があるのではないかと思っています。 もしかすると、デザイナーは感覚(Sense)でデザインしていると思われ ているかもしれません。人によって違うと思いますが、自分の場合は理由 9割、感覚1割くらいの割合でデザインすることが多いです。余白を活かす ためには感覚が必要な場面もありますが、理論を用いることでデザイナー ではなくても余白を活かす方法があるのではないかと思っています。