余白デザインとは何？

デジタルハリウッドの中間発表会での指摘点について。

余白に関するBlogを12記事読んでのまとめ。

２０記事読もうと思ったが、１０記事超えたあたりから

内容が同じくなってきたので、１２記事で終了。

＜自分メモ＞

余白というのものは
余白は業界用語でホワイトスペース
要素が何も入っていない空間で、かつ自然にできるものではなく意図的に作るという意識を持つ

余白を使うことで表せる表現は

１、要素の強調（情報の緩和）

２、情報のグルーピング（カテゴリーの区分け）

３、視線誘導

４、紙面の印象をつける

１について

タイトルなどを目立たせたいときには文字を大きくしたり装飾を加えるのではなく
文字のサイズはそのままで余白を多く取ると強調される
文字周りには特に余白が必要

２について

余白をデザインするときは紙面に対して優先順位をつけるそしてグループごとにまとめ余白間を
決める

３、
例として人間は上から下に物事を読むので上下のスペースは広く取り、左右は少なくすると
自然と左上から右下に読んでいくようになる。
ボタンなど押させたいところに関して余白を大きく取るなど

４、
余白によって印象が変わる、余白が狭いとぎっしり、賑やか、安さをイメージさせる
余白が大きいと高級、すっきり、余裕という印象を与える。
シンプルにしたいデザインの場合は思い切って余白をいっぱいとる

Blog3　Blog4　Blog5　Blog7 　Blog８　

余白は文字同士にも存在する、

Cssでいうletter-spaceや、line-hightも使う

優先度の低い要素を思っ期って削除することも大切

例

ブログの一覧表だった場合は本文はあまり読まないので、
更新日は基本新しいものが上に表示されるものなので、公開日を下に下げる

デザインを設計する際には必ず外側の余白を設定
外側の余白は上品で美しく、ゆったりとした表情を持たせる

ウェブデザイナーは足し算よりも引き算が重要

余白＝ホワイトスペース＝ネガティブスペース

余白デザインの歴史
１９２０年にドイツ人によって行われた「新タイポグラフィー運動」です
この運動で推進されたのが意図的に余白を活用するという考え、
この頃から余白を操作するということが使われ始めた。

余白の役割は

１、ウェブサイトを見た一瞬で必要なコンテンツの塊を見つけやすくする。
＊ユーザーは欲しい情報fだけに最短の時間で求めているので、ざっと全体に目を通して必要なコンテンツを探す
　余白によって必要なコンテンツの塊を見つけやすくなれば余白を十分に機能していると言える。

２、可読性が改善する（読みやすくなる）

３、全体がシンプルになる

余白の種類

マクロスペース
マイクロスペース
アクティブスペース
パッシブスペース

デザイン中に意識するのは優先度と重要度、またどのグループに所属してるのか？など相対的に確認

余白ポイント

行間＞文章の周りの余白にならないようにする、なので行間＜文章周りの余白になるようにする
ボリュームを意識する上部にボリュームがある場合は下に余白を追加して
均等ではないけど余白感を開けたりすることも大切
内側の余白は外側の余白より狭くする！
＊内側＝外側だと散らかったイメージになる。
Blog記事については余白の規則性をつくる

多ーーーーーーー情報量ーーーーーーーーーー少

ニュース　　　ブログ　　　　コーポレートサイト　　　　ブランディングサイト

少ーーーーーーーーー余白ーーーーーーーーー多

Blog9　Blog10 Blog11 Blog12

余白を使うことでの効果は訪問者の理解度が２０％上がった
人間の脳は単純化された情報を処理しやすいため余白は大切

今までの勘違いは＞すべての要素が一度に見えなくてもいい

キーワード
ミニマルデザイン余白は正方形で統一
＊四角の余白を統一することで整った印象になる

縦横の余白の大きさの統一合わせることで、視覚的に安定した印象に

余白テクニック

余白は正方形で統一

余白の大きさは短辺以上を基本とする
＊写真など短編が長い場合はその５０％、２５％など何らかの基準で統一するといい。

ボタンの余白について
余白は要素の高さ❎１.２５を基準にする
余白係数1.25
EX
余白の高さ
64❎1.25=80

上下の余白８０
左右の余白は上下の余白の２〜３倍くらいがちょうどいい

囲み枠のデザインの余白は使用している文字の１〜２文字程度を目安に余白を取ることをお勧めする！

＊いつの基準に過ぎないので注意
Line-heightの意図しない余白を消すことも重要

練習の仕方
目についたチラシ、パンフレッドの余白をはかる

そして
余白の目あすをはかる

余白思考！

文字が小さくて読みにくい→フォントを大きくするのはだめ！！
　　　　　　　　　　
　　　　　　　　　　　　→余白をいじってその文字を目立たせる！！

住宅街の一等地も余白、空間もあるので一等地として居心地がいい！

余白とは近接、整列、強弱、反復

自分メモ