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

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

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

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

Ce0738710cd314bc10008753044fc739?s=128

Yuya Kinoshita

June 28, 2019
Tweet

Transcript

  1. None
  2. 木下 裕哉 Yuya Kinoshita デザイナー フロントエンドエンジニア yuyakinoshita.com

  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. 余白の基礎を知るメリット ユーザーが情報を理解する労力を減らせる 01

  21. 余白の基礎を知るメリット より洗練されたデザインになり、印象が良くなる 02

  22. 余白の基礎を知るメリット 結果的にサービスやブランドの信頼性が高まる 03

  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. 余白のつくりかた:その2

  46. 余白のつくりかた:その2 余白の大きさは要素の短辺以上を基本とする

  47. たとえば

  48. 文字の場合も四角と考えて、その短辺を最小の余白とします。 SPACING

  49. Good SPACING 黄色のエリアを最小の余白として設けると、 窮屈な印象を避けやすくなります。

  50. 写真のように短辺が長くて収まらない(余白が大きすぎる)場合もあります。

  51. Good 短辺が長くて収まらない場合は、 短辺の50%や25%など、何らかの基準で統一すると良いです。

  52. ボタンのUIをデザインする時の余白 UIデザイン向けの実践的な話

  53. 窮屈な余白にならないための方法 余白は要素の高さ×1.25以上を基本とする

  54. なぜ1.25倍なのか? 自身の経験と感覚による理由 等倍の余白よりも心地良く感じる場合が多いため 数字的な理由 0.25=1/4であり、計算しやすいため

  55. × 1.25 そこで余白係数という考えかたを提案します(独自の方法かもしれません) 基準とする余白係数を1.25と定める

  56. 要素の高さ(文字サイズ)を0.5倍した余白をつくったボタンの例 窮屈な印象を受けやすい Not Good お問い合わせ

  57. 要素の高さ(文字サイズ)を1.25倍した余白をつくったボタンの例 窮屈な印象は受けにくい お問い合わせ Good

  58. 要素の高さ(文字) 上下の余白の大きさ 余白係数 6 4 × 1 .2 5 =

    80 お問い合わせ 80px 80px 220px 220px 矢印アイコンのように何らかのアイコンがあるボタンの場合、 左右の余白は上下の余白の2~3倍くらいが丁度良いと思います。 Good
  59. より良い余白がつくれるなら基準は無視しても良い 1.25倍は1つの基準に過ぎない 内容によって適した余白は変わるので、 状況に応じて使い分けられると良い

  60. 応用編 https://yuyakinoshita.com/blog/2019/02/10/design‑by‑multiple‑of‑8/ Webサイトやアプリは 8の倍数で設計するとうまくいく 詳細はブログにまとめてあります

  61. おさらい 余白の大きさは要素の短辺以上を基本とする

  62. 余白のつくりかた:その3

  63. 余白のつくりかた:その3 要素と要素の関係性の強さで決める

  64. 要素の例としては いろいろあります。 •見出しや本文などの文字 •ボタンやアイコンなどのUI •写真やイラストなどの画像

  65. 見出しや本文の場合

  66. 見出しと本文の間は、行間よりも広い余白をつくると良いです。 Good Not Good 理論を用いることで 余白をより使いやすく 理論を用いることで 余白をより使いやすく もしかすると、デザイナーは感覚(Sense)でデザインしていると思われ ているかもしれません。人によって違うと思いますが、自分の場合は理由

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

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

  69. アイコンやボタンも関係性の強さでまとまりをつくると良いです。 Good Not Good Buy Contact Buy Contact

  70. ガイドを外してみます。 Good Not Good Buy Contact Buy Contact

  71. 画像と見出しと本文の場合

  72. 写真と見出しと文章のセットが1つのまとまりに見えると良いです。 関係性が強いものほど近くに配置し、関係性が弱 いものは遠くに配置することで、情報を理解しや すくなります。 関係性が強いものほど近くに配置し、関係 性が弱いものは遠くに配置することで、情 報を理解しやすくなります。 Sky Sky 関係性が強いものほど近くに配置し、関係性が弱

    いものは遠くに配置することで、情報を理解しや すくなります。 関係性が強いものほど近くに配置し、関係 性が弱いものは遠くに配置することで、情 報を理解しやすくなります。 Bird Bird Good Not Good
  73. ガイドを外してみます。 関係性が強いものほど近くに配置し、関係性が弱 いものは遠くに配置することで、情報を理解しや すくなります。 関係性が強いものほど近くに配置し、関係 性が弱いものは遠くに配置することで、情 報を理解しやすくなります。 Sky Sky 関係性が強いものほど近くに配置し、関係性が弱

    いものは遠くに配置することで、情報を理解しや すくなります。 関係性が強いものほど近くに配置し、関係 性が弱いものは遠くに配置することで、情 報を理解しやすくなります。 Bird Bird Good Not Good
  74. アドバイス 余白だけでまとまりをつくれると、すっきりとした印象になります。 余白を使って関係性の強い要素を ひとつのまとまりにする

  75. おさらい 要素と要素の関係性の強さで決める

  76. まとめ

  77. 余白をつくるときには を意識すると、うまくいきやすいです。 •正方形で統一する •要素の短辺以上を基本とする •要素と要素の関係性の強さで決める

  78. 最後に この資料をきっかけに少しでも 余白に興味をもっていただけたら嬉しいです

  79. ありがとうございました