how_to_design_share

デザイン入門編： ４つの基本原則を知る 株式会社サイバーエージェント リサーチサイエンティスト 原口 大地

本研修の目的 ● 論文の図、プレゼンスライド、などなどあらゆる資料作成における（グラフィッ ク）デザインの基礎を学ぶ ● 特に，デザインの基本原則 「近接」「整列」「反復」「コントラスト」を学ぶ 2

そもそも「デザイン」とは？ ● 目的設定・計画策定・仕様表現からなる一連のプロセスである。すなわち人・ユ ーザー・社会にとって価値ある目的を見出し、それを達成できるモノゴトを計画 し、他者が理解できる仕様として表現する、この一連の行為をデザインという。 (wikipediaより) ● 「常にヒトを中心に考え、目的を見出し、その目的を達成する計画を行い実現化 する。」この一連のプロセス （日本デザイン振興会より） 3

そもそも「デザイン」とは？ ● 目的設定・計画策定・仕様表現からなる一連のプロセスである。すなわち人・ユ ーザー・社会にとって価値ある目的を見出し、それを達成できるモノゴトを計画 し、他者が理解できる仕様として表現する、この一連の行為をデザインという。 (wikipediaより) ● 「常にヒトを中心に考え、目的を見出し、その目的を達成する計画を行い実現化 する。」この一連のプロセス （日本デザイン振興会より） デザイン ＝ 「目的達成のために何かすること」 4

では「良いデザイン」とは？ ● 目的設定・計画策定・仕様表現からなる一連のプロセスである。すなわち人・ユ ーザー・社会にとって価値ある目的を見出し、それを達成できるモノゴトを計画 し、他者が理解できる仕様として表現する、この一連の行為をデザインという。 (wikipediaより) ● 「常にヒトを中心に考え、目的を見出し、その目的を達成する計画を行い実現化 する。」この一連のプロセス （日本デザイン振興会より） 良いデザイン ＝ 受け手のことを考えたデザイン （聴衆・読者にとってわかりやすい） 5

[補足] デザインとアートは違う？ ● 明確な境界線を引くのは難しいが、一般的に以下のように言われることが多い ● デザイン：目的にあったものを、対象者に伝わるように表現 ● アート：自己の思ったものを思ったまま表現。一部の人に共感されれば良い。 6

本研修の超重要参考文献 www.amazon.co.jp/dp/4839955557 7

• http://www.amazon.co.jp/dp/4839955557

（グラフィック）デザインの4つの基本原則 ● 近接 (Proximity)：関連する項目をグループ化する ● 整列 (Alignment)：全てのものを意識的に配置する ● 反復 (Repetition)：デザイン上の何かの特徴を全体を通して繰り返す（一貫性） ● コントラスト(Contrast)：様々な要素にコントラストをつける 覚え方 CRAP (Contrast, Repetition, Alignment, Proximity) 【注意】ただし、下品な言葉なので注意 8

近接 関連する項目をグループ化する 9

近接の目的 ● 情報の組織化（グループ化） ● 組織化により構造と内容の視覚的な手がかりを読者に瞬時に伝える 10

近接の悪い例 11

近接の悪い例 ① 12

近接の悪い例 要素が散らばっていてどこから目を通せば良いのかわからない ? ? ? ? ① 13

近接の良い例 14

近接の良い例 15

近接の良い例 視覚的要素の数が瞬時にわかる 16

近接の良い例 目を通す順番が明らか ① 17

近接の悪い例 その２ CV分野で出てくる モデル図と思って ください Fig.1. Model 1 Fig.2. Model 2 18

近接の悪い例 その２ キャプションが2つの図と近接しており，どちらのものか曖昧 どっちの キャプション？ Fig.1. Model 1 Fig.2. Model 2 19

近接の良い例 その２ 関連するものは近づけて，関連しないものは遠ざける Fig.1. Model 1 Fig.2. Model 2 20

近接のまとめ ● 近接の目的は、 「組織化により構造と内容の視覚的な手がかりを読者に瞬時に伝えること」 ● 近接 = 関連する項目をグループ化すること ● 視線が止まった回数で視覚的要素の数がわかる 21

整列 全てのものを意識的に配置する 22

整列の目的 ● ページの一体化と組織化 ● それにより整った（綺麗な）表現をすることができる 23

整列の悪い例 要素がテキトーに配置されている 24

整列の良い例（緩やかな整列） 中央揃え 25

整列の良い例（緩やかな整列） 26

整列の良い例（強い整列） 右揃え 27

整列の良い例（強い整列） 28

整列の良い例（強い整列） 強い整列が洗練された表現やフォーマルな表現になることもある 29

整列の悪い例 その２ 30

整列の悪い例 その２ 図中の要素が整列しておらずガタガタ 31

整列の良い例 その２ 正確に位置を揃える 32

整列の良い例 その２ 正確に位置を揃える 資料作成ツールの整列機能を使いましょう 33

整列のまとめ ● 整列の目的は、 「ページの一体化と組織化により整った（綺麗な）表現にすること」 ● 整列 = 全てのものを意識的に配置すること ● 強い整列が洗練された表現やフォーマルな表現になることもある 34

反復 デザイン上の何かの特徴を全体を通して繰り返す 35

反復の目的 ● 規則を作り出し、目に見えてわかりやすい表現をすること ● わかりやすければ、読んでもらえる可能性が高くなる 36

反復の悪い例 要素に統一感がない 37

反復の良い例 同じフォントで統一されている 38

反復の良い例 要素をしつこく・うるさく反復させないように注意 39

反復の悪い例 その２ 40

反復の悪い例 その２ 同じようなものが同じような色で表現されている 違うもの？ 41

反復の良い例 その２ 同じものは統一させる（また，異なるものは異らせる．次の原則「コントラスト」を参照） 42

反復の良い例 その２ 同じものは統一させる（また，異なるものは異らせる．次の原則「コントラスト」を参照） 同じものは同じ色を使う 43

反復の良い例 その２ 同じものは統一させる（また，異なるものは異らせる．次の原則「コントラスト」を参照） フォント/フォントサイズの統一 44

反復のまとめ ● 反復の目的は、 「規則を作り出し、目に見えてわかりやすい表現をすること」 ● 反復 = デザイン上の何かの特徴を全体を通して繰り返すこと ● 要素をうるさく脅迫的に反復させないように注意 （次に説明するコントラストも意識する） 45

コントラスト 様々な要素にコントラストをつける 46

コントラストの目的 ● 情報の組み立てが読者に一瞬で伝わるように情報の構造化を支援すること 47

コントラストの悪い例 48

コントラストの悪い例 同じフォント＆サイズ →反復はGood! 重要度がわかりにくい → コントラストを活用 49

コントラストの良い例 区別させたいときは，はっきり異ならせる 50

コントラストの悪い例 その２ 51

コントラストの悪い例 その２ 似たようなものが同じ色＆異なるサイズで表現されている ＝ 同じものか違うものか曖昧 同じ？ 同じ？ 52

コントラストの良い例 その２ 異なるものははっきりと異らせる 53

コントラストのまとめ ● コントラストの目的は， 「情報の組み立てが読者に一瞬で伝わるように情報の構造化を支援すること」 ● コントラスト = 様々な要素にコントラストをつける ● 正確に同じでないものは，はっきり異ならせる 54

4つの原則のまとめ 55

（グラフィック）デザインの4つの基本原則のまとめ ● 近接：関連する項目をグループ化する ● 整列：全てのものを意識的に配置する ● 反復：デザイン上の何かの特徴を全体を通して繰り返す（一貫性） ● コントラスト：様々な要素にコントラストをつける 56

（グラフィック）デザインの4つの基本原則のまとめ ● 近接：関連する項目をグループ化する ● 整列：全てのものを意識的に配置する ● 反復：デザイン上の何かの特徴を全体を通して繰り返す（一貫性） ● コントラスト：様々な要素にコントラストをつける 聴衆・読者を第一に考えると自然とできる 57

+α より良いデザインのために ※参考程度にしてください 58

意味のあるデザインのみを施す（余分なものは削ぎ落とす） 余分な要素のあるスライドテンプレート 59

意味のあるデザインのみを施す（余分なものは削ぎ落とす） 余分な要素のあるスライドテンプレート 60

意味のあるデザインのみを施す（余分なものは削ぎ落とす） 栞かな？ 余分な要素のあるスライドテンプレート 61

良い例 余分なものを削ぎ落とす 意味のあるデザインのみを施す 聴衆/読者に余計な負担をかけないため 62

フォントはどう選べば良いのか？ サンセリフ体 / ゴシック体 セリフ体（ローマン体）/ 明朝体 How to choose a font How to choose a font フォントの選び方 フォントの選び方 可視性に優れている。 可読性に優れている。 見出しなどに使われることが多い。 長文の文章で使われることが多い。 63

フォントはどう選べば良いのか？ サンセリフ体 / ゴシック体 セリフ体（ローマン体）/ 明朝体 セリフと呼ばれるパーツ How to choose a font How to choose a font フォントの選び方 フォントの選び方 可視性に優れている。 可読性に優れている。 見出しなどに使われることが多い。 長文の文章で使われることが多い。 64

フォント選びの共通ルール ● デザインの原則をもとに考える ○ ○ ● 「コントラストのために、タイトル部分は太いストロークのフォントを選ぼう」 「反復を考慮して、一貫してサンセリフ体のフォントを使おう」 和文には和文フォントを英語には欧文フォントを使う ○ ○ 和文フォントに含まれるアルファベットは洗練されていないことがあり、可読性に問題 があることも 実はパワポなどはそういう設定ができる（いわゆる「合成フォント」） 欧文フォント 和文フォント 65

研修のまとめ ● デザインの基本原則を４つ紹介しました ○ ○ ○ ○ ● 近接：関連する項目をグループ化する 整列：全てのものを意識的に配置する 反復：デザイン上の何かの特徴を全体を通して繰り返す（一貫性） コントラスト：様々な要素にコントラストをつける 良いデザインにするための+αを紹介しました ○ ○ 意味のないデザインはしない フォントの選び方 Take-home message: 受け手のことを考えて資料作成しましょう 66

参考文献一覧 ● Non-Research Tips for Information Science Researchers ● 伝わるデザイン 研究発表のユニバーサルデザイン ● ノンデザイナーズデザインブック（マイナビ出版） ● タイポグラフィの基本ルール（SBクリエイティブ） ● デザインの教室（エムディエヌコーポレーション） 67

• https://non-research-tips.github.io/2024
• https://tsutawarudesign.com/tsutaeru.html
• https://www.amazon.co.jp/dp/4839955557
• https://www.amazon.co.jp/タイポグラフィの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック-デザインラボ-大崎-善治/dp/4797359226
• https://www.amazon.co.jp/デザインの教室-手を動かして学ぶデザイントレーニング-佐藤-好彦-ebook/dp/B01BBBZJIY/ref=sr_1_1?adgrpid=126374526667&dib=eyJ2IjoiMSJ9.HOYb8kyN3cJLfb0AtCZNW263ryBfjBY1zXIBiqhIeQ0DIcyrozH5vA0zyXCEQ07OYkkUYh2B802_Bs890gvI53SGXwBAR1Lzt1ET2nCpVE5QgTLcrvbJonQ9iO7p032wUEL4JrDI3ag2FTYgM0e1WsXYviouXFMHu9z39BACG76uFvKXNXiLH7zfQrMDtKRzS7BKyQMsqilN7I59L3xgjXJN5e_D-pSV7r351842P2Cv4xkqzcvdrwY2vOhnxpifYpLX79zTV3dvpwiYXfcM9fIVACPWSlGSspiGz0zbx5c.6f6FKrbP3JWJZLemPb5Opd5ly9D8tHsBLMrBSc45PoM&dib_tag=se&hvadid=651369925895&hvdev=c&hvlocphy=1009307&hvnetw=g&hvqmt=e&hvrand=18070747519442808171&hvtargid=kwd-506673955859&hydadcr=11011_13607519&jp-ad-ap=0&keywords=デザインの教室&qid=1729880679&sr=8-1