富山デザイン勉強会_余白を恐れないデザイン術.pdf

Transcript

1. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p ϯ σ β Π ษ ڧ ձ ෋ ͱ ࢁ ΍ · Ҋ ਤ EFTJHO スピーカーɿ吉川圭太 （DERA-DESIGN） 「余白を恐れないデザイン術」
2. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p 余白を恐れて いませんか？
3. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p 余白がないデザインは 素人っぽい
4. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p 余白を使えてこそ プロのデザイナー
5. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p 余白の役割 CAPTER 01
6. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p CAPTER 01 余白の役割 余白を使って強調する ここに注目
7. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p NG OK CAPTER 01 余白の役割 文章を読みやすくする 私も将来すこぶるその意味者という事のため になっなた。単に事実を安心院もただいまそ んな講義なないなどに出るておきべきをは料 簡歩くましたけれども、こうには見るたでな いで。香のしです事はおっつけ毎日でよくじ ますな。 ょろひょろネルソンさんが関係私立実際関係 がしない主意その主義私か増減がに従ってご 意見ますまいなたから、こうした当時もあな たかテン道具に始まっや、大森さんの事に画 のおれにましてご盲従となって何大牢がご希 望に勤まりように無論お構成にありしたて、 とこう今に関係を知れないが来ないのがさま 私も将来すこぶるその意味者という事の ためになっなた。単に事実を安心院もた だいまそんな講義なないなどに出るてお きべきをは料簡歩くましたけれども、こ うには見るたでないで。香のしです事は おっつけ毎日でよくじますな。 ょろひょろネルソンさんが関係私立実際 関係がしない主意その主義私か増減がに
8. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p NG OK CAPTER 01 余白の役割 情報を整理し見やすくする
9. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p NG OK CAPTER 01 余白の役割 視線の誘導し理解を助ける ここに注目 ˔˔˔˔˔˔˔ ここに注目 ˔˔˔˔˔˔˔
10. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p CAPTER 01 余白の役割 与える印象を変える 高級感　エレガント　スマート カッコいい　清潔感
11. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p 余白の基本ルール CAPTER 02
12. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p CAPTER 02 余白の基本 余白は引き算のデザイン ここに注目 ˔˔˔˔˔˔˔
13. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p ׬ᘳ͕͞ୡ੒͞ΕΔͷ͸ɺ ΋͏෇͚Ճ͑Δ΂͖΋ͷ͸Կ΋ͳ͍ͱ͍͏৔߹Ͱ͸ͳ͘ ΋͏औΓڈΔ΂͖΋ͷ͕Կ΋ͳ͍ͱ͍͏৔߹Ͱ͋Δ ΞϯτϫʔψɾυɾαϯʹςάδϡϖϦ 1FSGFDUJPO
    JT
    BDIJFWFE
    OPU
    XIFO
    UIFSF
    JT
    OPUIJOH
    NPSF
    UP
    BEE CVU
    XIFO
    UIFSF
    JT
    OPUIJOH
    MFGU
    UP
    UBLF
    BXBZ "OUPJOF
    EF
    4BJOU&YVQÉSZ CAPTER 02 余白の基本 余白は引き算のデザイン
14. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p CAPTER 02 余白の基本 余白は集めて、 大きな余白に
15. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p ここに注目 ˔˔˔˔˔˔˔ 薄い 濃い CAPTER 02 余白の基本 情報量の濃淡つける
16. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p ポジティ ブスペースとネガテ ィ ブスペース Positive Space (Active Whitespace) Negative Space (Passive Whitespace) ここに注目 ˔˔˔˔˔˔˔ CAPTER 02 余白の基本
17. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p CAPTER 02 余白の基本 テキスト量の調節 100％ 50％
18. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p 余白で重心を調節する 高い 低い CAPTER 02 余白の基本
19. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p 基本は白、 または単色 White 1Color CAPTER 02 余白の基本
20. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p 見開き単位で考える CAPTER 02 余白の基本
21. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p 写真を余白にする CAPTER 03
22. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p ˔˔˔˔˔˔˔ ここに注目 CAPTER 03 写真を余白にする 写真も余白として使える
23. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p 明るくする / 薄くする ˔˔˔˔˔˔˔ ここに注目 ˔˔˔˔˔˔˔ ここに注目 CAPTER 02 余白の基本
24. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p ぼかし / ブラー ˔˔˔˔˔˔˔ ここに注目 ˔˔˔˔˔˔˔ ここに注目 CAPTER 02 余白の基本
25. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p ˔˔˔˔˔˔˔ ここに注目 被写界深度の浅い写真 CAPTER 02 余白の基本
26. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p 被写体をよせて余白をまとめる CAPTER 02 余白の基本 ˔˔˔˔˔˔˔ ここに注目
27. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p ˔˔˔˔˔˔˔ ここに注目 余白の位置でイメージが変わる ˔˔˔˔˔˔˔ ここに注目 CAPTER 02 余白の基本
28. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p Webサイトの余白 CAPTER 04
29. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p CAPTER 04 Webサイトの余白 Webサイトは余白を多くできる
30. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p デザインが自由になると余白が重要になる CAPTER 04 Webサイトの余白
31. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p CAPTER 04 余白の実践 ボタン周りの余白は大きめに section section 詳しく見る section section 詳しく見る
32. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p 余白の実践 CAPTER 04
33. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p CAPTER 02 余白の基本 コンテンツごとの適切な余白の量 情報量 余白量 多 多 少 少 情報系 読み物 チラシ パンフレッ ト
34. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p CAPTER 05 WEBの余白 Webサイトの場合の適切な余白 情報量 余白量 多 多 少 少 情報系 ・ ニュース ブログ コーポレー トサイ ト ブランデ ィ ン グサ イ ト
35. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p CAPTER 04 余白の実践 先に余白を量を決めてしまう
36. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p CAPTER 04 余白の実践 余白をの位置を決めてしまう
37. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p CAPTER 04 余白の実践 強調するものを決めて配置する ここに注目
38. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p CAPTER 04 余白の実践 残りの部分に情報の整理して入れる ここに注目
39. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p 余白の実例 CAPTER 05
40. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p CAPTER 06 余白の実例 Google １ つの機能だけが、 余白の 真ん中に配置されてい る。Google と言えば検 索というイメージをブ ランディングした。
41. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p CAPTER 06 余白の実例 Apple 余白を大きくとったデザイン は、 商品をより魅力的にします。 Appleの商品と余白の持つイ メージ（高級感・高潔）がマッ チしています。
42. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p CAPTER 06 余白の実例 「めでたし、 めでたし？」 大きな紙面の真ん中に、 キャッチ コピーとイラストだけがレイア ウトされている。 余白がうまく デザインの中に生かされてい ます。 新聞広告クリエーテ ィ ブコンテスト
43. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p CAPTER 06 余白の実例 けっきょく、 よはく。 シンプルなデザインで、 端的に まとめられている。 余白という本のテーマをよく 表しています。
44. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p CAPTER 06 余白の実例 ノングリッドデザイン Webサイトの技術が進歩し てきたため、 Webサイトで も自由なレイアウトがで きるようになりました。 （ブロークングリッドレイアウト）
45. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p まとめ
46. D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p • 余白を意図的に作るようにしよう • 余白は最初に決めておこう • 余白の量は、 内容によって変える • 余白によってデザインのイメージが変わる まとめ