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) 「余白を恐れないデザイン術」
  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 ׬ᘳ͕͞ୡ੒͞ΕΔͷ͸ɺ ΋͏෇͚Ճ͑Δ΂͖΋ͷ͸Կ΋ͳ͍ͱ͍͏৔߹Ͱ͸ͳ͘ ΋͏औΓڈΔ΂͖΋ͷ͕Կ΋ͳ͍ͱ͍͏৔߹Ͱ͋Δ ΞϯτϫʔψɾυɾαϯʹςάδϡϖϦ 1FSGFDUJPOJTBDIJFWFE OPUXIFOUIFSFJTOPUIJOHNPSFUPBEE CVUXIFOUIFSFJTOPUIJOHMFGUUPUBLFBXBZ "OUPJOFEF4BJOU&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 1 つの機能だけが、 余白の 真ん中に配置されてい る。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 • 余白を意図的に作るようにしよう • 余白は最初に決めておこう • 余白の量は、 内容によって変える • 余白によってデザインのイメージが変わる まとめ