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

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

keita
January 27, 2024

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

keita

January 27, 2024
Tweet

More Decks by keita

Other Decks in Design

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)
    「余白を恐れないデザイン術」

    View full-size slide

  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
    余白を恐れて
    いませんか?

    View full-size slide

  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
    余白がないデザインは
    素人っぽい

    View full-size slide

  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
    余白を使えてこそ
    プロのデザイナー

    View full-size slide

  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

    View full-size slide

  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 余白の役割
    余白を使って強調する
    ここに注目

    View full-size slide

  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 余白の役割
    文章を読みやすくする
    私も将来すこぶるその意味者という事のため
    になっなた。単に事実を安心院もただいまそ
    んな講義なないなどに出るておきべきをは料
    簡歩くましたけれども、こうには見るたでな
    いで。香のしです事はおっつけ毎日でよくじ
    ますな。
    ょろひょろネルソンさんが関係私立実際関係
    がしない主意その主義私か増減がに従ってご
    意見ますまいなたから、こうした当時もあな
    たかテン道具に始まっや、大森さんの事に画
    のおれにましてご盲従となって何大牢がご希
    望に勤まりように無論お構成にありしたて、
    とこう今に関係を知れないが来ないのがさま
    私も将来すこぶるその意味者という事の
    ためになっなた。単に事実を安心院もた
    だいまそんな講義なないなどに出るてお
    きべきをは料簡歩くましたけれども、こ
    うには見るたでないで。香のしです事は
    おっつけ毎日でよくじますな。
    ょろひょろネルソンさんが関係私立実際
    関係がしない主意その主義私か増減がに

    View full-size slide

  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 余白の役割
    情報を整理し見やすくする

    View full-size slide

  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 余白の役割
    視線の誘導し理解を助ける
    ここに注目 ˔˔˔˔˔˔˔
    ここに注目
    ˔˔˔˔˔˔˔

    View full-size slide

  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 余白の役割
    与える印象を変える
    高級感 エレガント スマート
    カッコいい 清潔感

    View full-size slide

  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

    View full-size slide

  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 余白の基本
    余白は引き算のデザイン
    ここに注目 ˔˔˔˔˔˔˔

    View full-size slide

  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
    ׬ᘳ͕͞ୡ੒͞ΕΔͷ͸ɺ
    ΋͏෇͚Ճ͑Δ΂͖΋ͷ͸Կ΋ͳ͍ͱ͍͏৔߹Ͱ͸ͳ͘
    ΋͏औΓڈΔ΂͖΋ͷ͕Կ΋ͳ͍ͱ͍͏৔߹Ͱ͋Δ
    ΞϯτϫʔψɾυɾαϯʹςάδϡϖϦ
    1FSGFDUJPOJTBDIJFWFE OPUXIFOUIFSFJTOPUIJOHNPSFUPBEE
    CVUXIFOUIFSFJTOPUIJOHMFGUUPUBLFBXBZ
    "OUPJOFEF4BJOU&YVQÉSZ
    CAPTER 02 余白の基本
    余白は引き算のデザイン

    View full-size slide

  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 余白の基本
    余白は集めて、
    大きな余白に

    View full-size slide

  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 余白の基本
    情報量の濃淡つける

    View full-size slide

  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 余白の基本

    View full-size slide

  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%

    View full-size slide

  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 余白の基本

    View full-size slide

  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 余白の基本

    View full-size slide

  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 余白の基本

    View full-size slide

  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

    View full-size slide

  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 写真を余白にする
    写真も余白として使える

    View full-size slide

  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 余白の基本

    View full-size slide

  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 余白の基本

    View full-size slide

  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 余白の基本

    View full-size slide

  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 余白の基本
    ˔˔˔˔˔˔˔
    ここに注目

    View full-size slide

  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 余白の基本

    View full-size slide

  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

    View full-size slide

  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サイトは余白を多くできる

    View full-size slide

  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サイトの余白

    View full-size slide

  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
    詳しく見る

    View full-size slide

  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

    View full-size slide

  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 余白の基本
    コンテンツごとの適切な余白の量
    情報量
    余白量




    情報系 読み物 チラシ パンフレッ

    View full-size slide

  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サイトの場合の適切な余白
    情報量
    余白量




    情報系

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


    グサ


    View full-size slide

  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 余白の実践
    先に余白を量を決めてしまう

    View full-size slide

  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 余白の実践
    余白をの位置を決めてしまう

    View full-size slide

  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 余白の実践
    強調するものを決めて配置する
    ここに注目

    View full-size slide

  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 余白の実践
    残りの部分に情報の整理して入れる
    ここに注目

    View full-size slide

  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

    View full-size slide

  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 と言えば検
    索というイメージをブ
    ランディングした。

    View full-size slide

  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の商品と余白の持つイ
    メージ(高級感・高潔)がマッ
    チしています。

    View full-size slide

  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 余白の実例
    「めでたし、
    めでたし?」
    大きな紙面の真ん中に、
    キャッチ
    コピーとイラストだけがレイア
    ウトされている。
    余白がうまく
    デザインの中に生かされてい
    ます。
    新聞広告クリエーテ

    ブコンテスト

    View full-size slide

  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 余白の実例
    けっきょく、
    よはく。
    シンプルなデザインで、
    端的に
    まとめられている。
    余白という本のテーマをよく
    表しています。

    View full-size slide

  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サイトで
    も自由なレイアウトがで
    きるようになりました。
    (ブロークングリッドレイアウト)

    View full-size slide

  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
    まとめ

    View full-size slide

  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
    ● 余白を意図的に作るようにしよう
    ● 余白は最初に決めておこう
    ● 余白の量は、
    内容によって変える
    ● 余白によってデザインのイメージが変わる
    まとめ

    View full-size slide