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

by Yuya Kinoshita

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

はじめに

Slide 4

Slide 4 text

この資料のゴール余白に少しでも興味をもってもらえること

Slide 5

Slide 5 text

さらなる狙い余白の基礎について 3つのポイントを意識してもらえること

Slide 6

Slide 6 text

主な対象者 Webサイト、アプリ、資料などの品質を上げたいと思っている方基礎の内容なので、対象者はエンジニアに限りません。

Slide 7

Slide 7 text

デザインに関することいきなりですが

Slide 8

Slide 8 text

欧文書体、イラスト、幾何学模様、コラジュ、写真、遠近法、ピクトグラム、グリッドシステム、カラーモード、トーン &マナー、アイキャッチ、版面率、レイヤー、レイアウト、対角線、視線、RGB、CMYK、HSB、陰影、余白、解像度、コントラスト、色相、明度、彩度、光沢感、アクセントカラー、黄金比、白銀比、フィボナッチ数列、タイポグラフィ、ハーフトーン、優先順位付け、シンメトリー、ラフ、プロトタイピング、パターン、ジャンプ率、整列、分布、カーニング、アニメーション、背景色、透明度、カラーシステム、セリフ、サンセデザインに関連することはいろいろある

Slide 9

Slide 9 text

余白その中で余白に焦点を当てました。欧文書体、イラスト、幾何学模様、コラージュ、写真、遠近法、ピクトグラム、グリッドシステム、カラーモード、トーン&マナー、アイキャッチ、版面率、レイヤー、レイアウト、対角線、視線、RGB、 CMYK、HSB、陰影、解像度、コントラスト、色相、明

Slide 10

Slide 10 text

それはなぜか？ WebサイトやアプリのUIデザインにおいても重要です。デザインの品質を左右する重要な要素だと考えるため

Slide 11

Slide 11 text

例えば

Slide 12

Slide 12 text

Slide 13

Slide 13 text

余白欧文書体、イラスト、幾何学模様、コラージュ、写真、遠近法、ピクトグラム、グリッドシステム、カラーモード、トーン&マナー、アイキャッチ、版面率、レイヤー、レイアウト、対角線、視線、RGB、 CMYK、HSB、陰影、解像度、コントラスト、色相、明余白があると必要な情報を見つけやすい！

Slide 14

Slide 14 text

それはなぜか？結果的にすっきりと整理された情報はわかりやすく、印象が良くなる。人間の脳は複雑な情報より単純化された情報を処理しやすいため

Slide 15

Slide 15 text

余白とは何か？そもそも

Slide 16

Slide 16 text

辞書で調べました “文字・絵などをかいたり，印刷した紙面で白くあいて残っている部分。「―に書き込みをする」” 引用元：スーパー大辞林（辞書.app）

Slide 17

Slide 17 text

デザインにおける余白は、自分は少し違う意味で捉えています

Slide 18

Slide 18 text

余白をこう考えています白くあいて残ってしまうものではなく、意図的につくるもの。情報を整理するための空間

Slide 19

Slide 19 text

余白の基礎を知るメリット

Slide 20

Slide 20 text

余白の基礎を知るメリットユーザーが情報を理解する労力を減らせる 1

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

おまけデザインの品質を判断する1つのものさし（基準）が持てる OMAKE

Slide 24

Slide 24 text

3つのポイントで余白を考えてみますこれからお伝えすること

Slide 25

Slide 25 text

余白のつくりかた：その1

Slide 26

Slide 26 text

余白のつくりかた：その1 余白は正方形で統一する

Slide 27

Slide 27 text

どういうこと？

Slide 28

Slide 28 text

見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本まずはあまり良くない余白の例です。わかりやすくするために、余白を黄色い四角で表示しています。 Not Good

Slide 29

Slide 29 text

なぜあまり良くないのか？四隅の余白がバラバラで、不安定な印象を受けるためです。見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 Not Good

Slide 30

Slide 30 text

正方形を使って余白をつくるどうしたらいいの？

Slide 31

Slide 31 text

見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 Good 四隅の余白を正方形で統一しました。

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し見出し本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 Good コンテンツの内容は同じでも、より良い印象に感じたのではないでしょうか。

Slide 35

Slide 35 text

余白が大きい場合はどうでしょうか。 Good TRACK DOG Basic rules of white space AND

Slide 36

Slide 36 text

TRACK Good DOG Basic rules of white space AND 余白が大きくなっても、正方形で余白を決められます。 ※微妙にガイドから飛び出しているのは視覚調整のためです。

Slide 37

Slide 37 text

この場合はどうでしょうか。 Good DOG AND TRACK Basic rules of white space

Slide 38

Slide 38 text

正方形の余白が四隅に確保できる場合は、縦幅に余白が余っても窮屈感や違和感はやわらぎます。 DOG AND TRACK Basic rules of white space Good

Slide 39

Slide 39 text

要素と要素の関係性によって余白の広さを整えています Webサイトの事例 yuyakinoshita.com

Slide 40

Slide 40 text

ちなみに余白を決めるには、まずガイドラインを引くと進めやすいです。実はこのページの余白も正方形でつくっています

Slide 41

Slide 41 text

注意点正方形で余白を考えるのは基本ただし、正方形で余白をつくれない場合や正方形でつくらないほうが良い場合もある

Slide 42

Slide 42 text

ではどうすればいいの？なので基本は正方形を意識したほうが良いです。正方形より良い余白をつくれると判断した場合に正方形から崩す（これは応用編）

Slide 43

Slide 43 text

応用編についてのちょっと豆知識崩しがあって心地良いと感じるデザインは、余白の使い方がうまい。あえて崩してあるデザインと崩れてしまっているデザインは印象が違う

Slide 44

Slide 44 text

おさらい余白は正方形で統一する

Slide 45

Slide 45 text

余白を正方形でつくる理由補足と仮説

Slide 46

Slide 46 text

余白を正方形でつくる理由タテ（Y軸）とヨコ（X軸）の余白の大きさを統一するためタテとヨコの余白を合わせることで、視覚的に安定した印象になります。

Slide 47

Slide 47 text

なぜ余白が統一されていると視覚的に安定するの？仮説：形状が統一された状態を人間の脳が「安定している」と解釈すると考えるため

Slide 48

Slide 48 text

例えば、正円と楕円の比較正円のほうが安定した状態に感じやすい

Slide 49

Slide 49 text

仮説：正円が楕円よりも安定した印象を受ける理由正円は半径が統一されている

Slide 50

Slide 50 text

仮説：より統一されているほうが人間が安定感を感じやすいのでは？正方形は辺の長さが統一されている

Slide 51

Slide 51 text

辺の長さが統一されているということは、タテとヨコの距離が同じ結果的に人間の脳が安定感を感じやすいのでは？

Slide 52

Slide 52 text

別の観点と仮説：引力と重力物体の引力（重力）に沿った形状を人間の脳が安定と解釈しているのかもしれない自然界（地球上）では重力に沿った形状を、脳が安定と解釈するのでは？

Slide 53

Slide 53 text

別の観点と仮説：重心重心を認識しやすい形状のほうが人間の認知負荷が少なく、結果的に安定感を感じやすいのかもしれない例えば正円や正方形は情報の少ない形状で、認知負荷が低いと考えます。

Slide 54

Slide 54 text

余白のつくりかた：その2

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

例えば

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

要素の高さ（文字）上下の余白の大きさ余白係数 6 4 × 1 .2 5 = 80 お問い合わせ 80px 80px 220px 220px 矢印アイコンのように何らかのアイコンがあるボタンの場合、左右の余白は上下の余白の2～3倍くらいが丁度良いと思います。 Good

Slide 68

Slide 68 text

より良い余白がつくれるなら基準は無視しても良い 1.25倍は1つの基準に過ぎない内容によって適した余白は変わるので、状況に応じて使い分けられると良い

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

余白のつくりかた：その3

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

見出しや本文の場合

Slide 75

Slide 75 text

見出しと本文の間は、行間よりも広い余白をつくると良いです。 Good Not Good 理論を用いることで余白をより使いやすく理論を用いることで余白をより使いやすくもしかすると、デザイナーは感覚（Sense）でデザインしていると思われているかもしれません。人によって違うと思いますが、自分の場合は理由 9割、感覚1割くらいの割合でデザインすることが多いです。余白を活かすためには感覚が必要な場面もありますが、理論を用いることでデザイナーではなくても余白を活かす方法があるのではないかと思っています。もしかすると、デザイナーは感覚（Sense）でデザインしていると思われているかもしれません。人によって違うと思いますが、自分の場合は理由 9割、感覚1割くらいの割合でデザインすることが多いです。余白を活かすためには感覚が必要な場面もありますが、理論を用いることでデザイナーではなくても余白を活かす方法があるのではないかと思っています。

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

アイコンやボタンの場合

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

アドバイス余白だけでまとまりをつくれると、すっきりとした印象になります。余白を使って関係性の強い要素を 1つのまとまりにする

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

まとめ

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

ありがとうございました