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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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％

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 余白の基本 コンテンツごとの適切な余白の量 情報量 余白量 多 多 少 少 情報系 読み物 チラシ パンフレッ ト

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サイトの場合の適切な余白 情報量 余白量 多 多 少 少 情報系 ・ ニュース ブログ コーポレー トサイ ト ブランデ ィ ン グサ イ ト

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

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

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

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

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

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

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

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

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

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

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

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