Design Tutorial - Speaker Deck

Slide 1

Slide 1 text

stairs 2019 Design Tutorial 1 PowerPoint / Keynoteでカッコいい名刺デザイン

Slide 2

Slide 2 text

stairs 2019 はじめに 2 Otsukare Summer

Slide 3

Slide 3 text

stairs 2019 Web・iOS勉強会お疲れさまでした 3

Slide 4

Slide 4 text

stairs 2019 4 楽しかった? or つまんなかった?

Slide 5

Slide 5 text

stairs 2019 5 楽しかった!! or つまんなかった?

Slide 6

Slide 6 text

stairs 2019 6 今後の活動にも参加してくれると嬉しいです

Slide 7

Slide 7 text

stairs 2019 7 ところで

Slide 8

Slide 8 text

stairs 2019 8 作ったWebサイトとかアプリの見た目もっとカッコよくしたかった…

Slide 9

Slide 9 text

stairs 2019 9 って思った人"

Slide 10

Slide 10 text

stairs 2019 10 今回はそんな人へ向けてデザインの基本の話をしていきます

Slide 11

Slide 11 text

stairs 2019 11 芸術的センスいりません

Slide 12

Slide 12 text

stairs 2019 12 ちょい長めの話を聞く力だけ必要です

Slide 13

Slide 13 text

stairs 2019 13 持ってますよね…

Slide 14

Slide 14 text

stairs 2019 14 それでは始めます

Slide 15

Slide 15 text

stairs 2019 自己紹介 15 Yoroshiku Desu

Slide 16

Slide 16 text

stairs 2019 大隈隼 (おおくまはやと) •知能B4 坂本研究室 •北九州高専出身 •安くてかわいい古着が好き •GWにマーベル映画(20本)をイッキ見 16

Slide 17

Slide 17 text

stairs 2019 今回の流れ 17 Schedule

Slide 18

Slide 18 text

stairs 2019 18 1 2 3 デザインの基礎を学ぶダサい名刺をカッコよくする自分の名刺をデザインする

Slide 19

Slide 19 text

stairs 2019 19 1 2 3 デザインの基礎を学ぶダサい名刺をカッコよくする自分の名刺をデザインする •デザインとは •基本の4原則 •色 •フォント

Slide 20

Slide 20 text

stairs 2019 デザインとは 20 Watashi Nari no Kangae

Slide 21

Slide 21 text

stairs 2019 そもそも、デザインって何のこと? 21

Slide 22

Slide 22 text

stairs 2019 デザインとは (明鏡国語辞典) 1. 服飾・建築・工業製品・商業美術などの分野で、機能や美的効果を考慮して作品・製品などを立案すること。意匠。 2. 図案・模様などを考案すること。また、そのこと。 22

Slide 23

Slide 23 text

stairs 2019 と言われてもピンとこないので 23

Slide 24

Slide 24 text

Clothes

Slide 25

Slide 25 text

Building

Slide 26

Slide 26 text

Appliance

Slide 27

Slide 27 text

Commercial art

Slide 28

Slide 28 text

stairs 2019 いろんな分野の「デザイン」がある 28

Slide 29

Slide 29 text

stairs 2019 今回学ぶ「デザイン」の定義 •与えられた環境の中で、目的を達成する外観を設計すること 29

Slide 30

Slide 30 text

stairs 2019 皆さんは既にデザインの経験がある 30

Slide 31

Slide 31 text

stairs 2019 レポート •与えられた環境 ‣ サイズ, ページ数, 提出期限 •達成すべき目標 ‣ 実験の結果を正しく報告する •外観 ‣ 簡潔な表現, 図表の挿入 31

Slide 32

Slide 32 text

stairs 2019 なんとなくやってきた気がする 32

Slide 33

Slide 33 text

stairs 2019 なんとなく中央揃え 33

Slide 34

Slide 34 text

stairs 2019 なんとなくアンダーライン引いてみる 34

Slide 35

Slide 35 text

stairs 2019 なんとなくフォントサイズ変える 35

Slide 36

Slide 36 text

stairs 2019 なんとなくやってきたデザインを意識的に行えるようになろう! 36

Slide 37

Slide 37 text

stairs 2019 4つの基本原則 37 Muzukashiku Naiyo

Slide 38

Slide 38 text

stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast 38

Slide 39

Slide 39 text

stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast 39 関連する項目をまとめてグループ化すること

Slide 40

Slide 40 text

stairs 2019 40 計算機ネットワーク実験演習学生番号: 18231203 氏名: 大隈隼提出日: 2019 / 04 / 20 実施日: 2019 / 04 / 8, 9, 10 レポートの表紙

Slide 41

Slide 41 text

stairs 2019 41 計算機ネットワーク実験演習学生番号: 18231203 氏名: 大隈隼提出日: 2019 / 04 / 20 実施日: 2019 / 04 / 8, 9, 10 タイトルその他の情報

Slide 42

Slide 42 text

stairs 2019 なんとなく分けて書いている 42

Slide 43

Slide 43 text

stairs 2019 近接を意識して関連する項目をまとめよう! 43

Slide 44

Slide 44 text

stairs 2019 44 計算機ネットワーク実験演習学生番号: 18231203 氏名: 大隈隼提出日: 2019 / 04 / 20 実施日: 2019 / 04 / 8, 9, 10 実験の情報提出者の情報レポートの情報

Slide 45

Slide 45 text

stairs 2019 45 計算機ネットワーク実験演習学生番号: 18231203 氏名: 大隈隼提出日: 2019. 4 / 20 実施日: 2019. 4 / 8, 9, 10

Slide 46

Slide 46 text

stairs 2019 46 計算機ネットワーク実験演習実験の情報提出者の情報レポートの情報学生番号: 18231203 氏名: 大隈隼提出日: 2019. 4 / 20 実施日: 2019. 4 / 8, 9, 10

Slide 47

Slide 47 text

stairs 2019 47 1. 何の実験なのか 2. 誰のレポートなのか 3. いつ提出したのか計算機ネットワーク実験演習学生番号: 18231203 氏名: 大隈隼提出日: 2019. 4 / 20 実施日: 2019. 4 / 8, 9, 10

Slide 48

Slide 48 text

stairs 2019 近接を意識することで、全体の流れが目で追いやすくなる! 48

Slide 49

Slide 49 text

stairs 2019 49 GreenYellow Chartreuse LawnGreen Lime LimeGreen PaleGreen LightGreen MediumSpringGreen SpringGreen MediumSeaGreen SeaGreen ForestGreen

Slide 50

Slide 50 text

stairs 2019 50 GreenYellow Chartreuse LawnGreen Lime LimeGreen PaleGreen LightGreen MediumSpringGreen SpringGreen MediumSeaGreen SeaGreen ForestGreen

Slide 51

Slide 51 text

stairs 2019 名前の位置があいまいでどの色がどの名前か判別できない 51

Slide 52

Slide 52 text

stairs 2019 52 GreenYellow Chartreuse LawnGreen Lime LimeGreen PaleGreen LightGreen MediumSpringGreen

Slide 53

Slide 53 text

stairs 2019 近接によって情報の関連性を距離感で表現することが大切 53

Slide 54

Slide 54 text

stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast 54 ͢΂ͯͷ΋ͷΛ ҙࣝతʹ഑ஔ͢Δ

Slide 55

Slide 55 text

stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast 55 すべてのものを意識的に配置する

Slide 56

Slide 56 text

stairs 2019 56 要は揃え方の話

Slide 57

Slide 57 text

stairs 2019 57 中央揃えの文章右揃えの文章左揃えの文章

Slide 58

Slide 58 text

stairs 2019 58 中央揃えの文章右揃えの文章左揃えの文章

Slide 59

Slide 59 text

stairs 2019 59 HTML&CSS Swift Webサイトの見た目をつくる言語です。勉強会では基本事項の解説を行い、自分の自己紹介サイトを作ることができます。 iOSアプリを開発するための言語です。勉強会ではGithubを使って、ToDoアプリの開発を実際にやってみることができます。

Slide 60

Slide 60 text

stairs 2019 60 HTML&CSS Swift Webサイトの見た目をつくる言語です。勉強会では基本事項の解説を行い、自分の自己紹介サイトを作ることができます。 iOSアプリを開発するための言語です。勉強会ではGithubを使って、ToDoアプリの開発を実際にやってみることができます。

Slide 61

Slide 61 text

stairs 2019 61 HTML&CSS Swift Webサイトの見た目をつくる言語です。勉強会では基本事項の解説を行い、自分の自己紹介サイトを作ることができます。 iOSアプリを開発するための言語です。勉強会ではGithubを使って、ToDoアプリの開発を実際にやってみることができます。

Slide 62

Slide 62 text

stairs 2019 62 直線で要素を結びつけるイメージ

Slide 63

Slide 63 text

stairs 2019 63 アベンジャーズ「地球最強のヒーロー達」の異名をとる、アメコミを代表するヒーローチーム。「それぞれ違う能力を持ったヒーローたちが協力して戦う」というコンセプトのもと、すでに個別で（独立して）活躍していたヒーローたちによって結成。以来、マーベル・ユニバース最大のヒーローチームとして人気を博し、現在に至る。初期メンバー • アイアンマン • キャプテン・アメリカ • ハルク • ソー • ブラック・ウィドウ • ホークアイ『アベンジャーズ』公開時の現在を意味する。 ˞

Slide 64

Slide 64 text

stairs 2019 全ての要素の配置を見直すと 64

Slide 65

Slide 65 text

stairs 2019 65 アベンジャーズ「地球最強のヒーロー達」の異名をとる、アメコミを代表するヒーローチーム。「それぞれ違う能力を持ったヒーローたちが協力して戦う」というコンセプトのもと、すでに個別で（独立して）活躍していたヒーローたちによって結成。以来、マーベル・ユニバース最大のヒーローチームとして人気を博し、現在に至る。 • アイアンマン • キャプテン・アメリカ • マイティ・ソー • ハルク • ブラック・ウィドウ • ホークアイ ॳظメンバー『アベンジャーズ』公開時の現在を意味する。 ˞

Slide 66

Slide 66 text

stairs 2019 66 アベンジャーズ「地球最強のヒーロー達」の異名をとる、アメコミを代表するヒーローチーム。「それぞれ違う能力を持ったヒーローたちが協力して戦う」というコンセプトのもと、すでに個別で（独立して）活躍していたヒーローたちによって結成。以来、マーベル・ユニバース最大のヒーローチームとして人気を博し、現在に至る。 • アイアンマン • キャプテン・アメリカ • マイティ・ソー • ハルク • ブラック・ウィドウ • ホークアイ ॳظメンバー『アベンジャーズ』公開時の現在を意味する。 ˞

Slide 67

Slide 67 text

stairs 2019 要素の結びつきが強いとスッキリ整理された印象を与える! 67

Slide 68

Slide 68 text

stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast 68 σβΠϯ্ͷಛ௃Λ ܁Γฦͯ͠࢖͏

Slide 69

Slide 69 text

stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast 69 デザイン上の特徴を繰り返して使う

Slide 70

Slide 70 text

stairs 2019 アイアンマン •最新鋭のパワードスーツで戦うセレブヒーロー 70 キャプテン・アメリカ •長い眠りから覚めた正義に生きる伝説のソルジャーマイティ・ソー •雷を操る破天荒な神様

Slide 71

Slide 71 text

stairs 2019 相手に伝えたい 3つの重要度が同じなら 71

Slide 72

Slide 72 text

stairs 2019 アイアンマン •最新鋭のパワードスーツで戦うセレブヒーロー 72 キャプテン・アメリカ •長い眠りから覚めた正義に生きる伝説のソルジャーマイティ・ソー •雷を操る破天荒な神様

Slide 73

Slide 73 text

stairs 2019 同じ特徴を持たせること(反復)で要素感に一貫性が生まれる 73

Slide 74

Slide 74 text

stairs 2019 アイアンマン •最新鋭のパワードスーツで戦うセレブヒーロー 74 キャプテン・アメリカ •長い眠りから覚めた正義に生きる伝説のソルジャーマイティ・ソー •雷を操る破天荒な神様

Slide 75

Slide 75 text

stairs 2019 反復させる特徴を増やしてみよう! 75

Slide 76

Slide 76 text

stairs 2019 アイアンマン •最新鋭のパワードスーツで戦うセレブヒーロー 76 キャプテン・アメリカ •長い眠りから覚めた正義に生きる伝説のソルジャーマイティ・ソー •雷を操る破天荒な神様

Slide 77

Slide 77 text

stairs 2019 アイアンマン •最新鋭のパワードスーツで戦うセレブヒーロー 77 キャプテン・アメリカ •長い眠りから覚めた正義に生きる伝説のソルジャーマイティ・ソー •雷を操る破天荒な神様反復 •フォント •文字の太さ •画像の形 •要素の枠

Slide 78

Slide 78 text

stairs 2019 一貫性のある特徴は増えても悪目立ちしない! 78

Slide 79

Slide 79 text

stairs 2019 79 stairs monthly meeting stairs monthly meeting 5/21Tue. 18:30 ~ 19:30 5/21Tue. 18:30 ~ 19:30 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30

Slide 80

Slide 80 text

stairs 2019 1つの情報を伝える複数のデザイン (それぞれ独立した広告) 80

Slide 81

Slide 81 text

stairs 2019 81 stairs monthly meeting stairs monthly meeting 5/21Tue. 18:30 ~ 19:30 5/21Tue. 18:30 ~ 19:30 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30

Slide 82

Slide 82 text

stairs 2019 共通した特徴を付加することで同じ情報という認識が強まる! 82

Slide 83

Slide 83 text

stairs 2019 83 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30

Slide 84

Slide 84 text

stairs 2019 84 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30

Slide 85

Slide 85 text

stairs 2019 85 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30

Slide 86

Slide 86 text

stairs 2019 86 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30

Slide 87

Slide 87 text

stairs 2019 認識できる特徴が多いほうが印象的かつ面白い見た目になる!! 87

Slide 88

Slide 88 text

stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast 88 ਖ਼֬ʹಉ͡Ͱͳ͚Ε͹ɺ ͸͖ͬΓͱҟͳΒͤΔ

Slide 89

Slide 89 text

stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast 89 正確に同じでなければ、ハッキリ差を付ける

Slide 90

Slide 90 text

stairs 2019 90 歩行者レーン自転車レーン

Slide 91

Slide 91 text

stairs 2019 似たような色で区別されていて違いを認識しにくい 91

Slide 92

Slide 92 text

stairs 2019 92 歩行者レーン自転車レーン

Slide 93

Slide 93 text

stairs 2019 数学テストスケジュール •小テスト(1) 4/16 (火) •小テスト(2) 4/23 (火) •中間テスト 5/14 (火) •小テスト(3) 5/23 (木) •期末テスト 5/28 (火) •小テスト(4) 5/30 (木) 93

Slide 94

Slide 94 text

stairs 2019 全てのテストの重要度は同じ…? 94

Slide 95

Slide 95 text

stairs 2019 数学テストスケジュール •小テスト(1) 4/16 (火) •小テスト(2) 4/23 (火) •中間テスト 5/14 (火) •小テスト(3) 5/23 (木) •期末テスト 5/28 (火) •小テスト(4) 5/30 (木) 95

Slide 96

Slide 96 text

stairs 2019 異なる性質・重要度を持つモノは見た目をハッキリ異ならせる! 96

Slide 97

Slide 97 text

stairs 2019 97 өըʰ໊୳ఁϐΧνϡ΢ʱө૾ྲྀग़͔ ೔ຊͰ͸೥݄೔ΑΓ্ө͞Ε͍ͯΔөըʰ໊୳ఁϐΧνϡ΢ʱɻ๺ถ Ͱͷެ։༧ఆ೔͸݄೔ͱͳ͓ͬͯΓɺւͷ޲͜͏ͷϙέϞϯϑΝϯͨͪ΋ ظ଴ʹڳΛ๲Β·͍ͤͯΔɻ͔ͦ͠͠Μͳ࠷தɺʮ໊୳ఁϐΧνϡ΢ɿຊฤө ૾ʯͱ୊͞Εͨө૾͕:PV5VCFͰެ։͞Εͯ͠·ͬͨɻ ܶ৔Ͱ౪ࡱ͞Εͨͷ͔ʜ ࣮͸͜ͷө૾ɺ࠷ॳͷ෼͋ͨΓ͸ຊฤͷө૾͕ྲྀΕΔ΋ͷɺͦͷޙͷ࣌ؒ ෼΋໊୳ఁϐΧνϡ΢͕ѪΒ͘͠μϯεΛ͢Δ͚ͩͷ΋ͷͩͬͨɻͲ͏΍ Βөըʰ໊୳ఁϐΧνϡ΢ʱͷϓϩϞʔγϣϯͷҰ؀ͷΑ͏ͳͷͩɻμϯεө ૾͸ϧʔϓͱ͸͍͖͑ͪΜͱ࡞ΒΕ͓ͯΓɺϐΧνϡ΢ͷ੠Λ୲౰ͨ͠ϥΠΞ ϯɾϨΠϊϧζࢯ΋5XJUUFS্ͰΘ͟ͱΒ͘͠൓ԠΛݟ͍ͤͯΔɻ ϑΝϯͷ൓Ԡ͸ ·͔͞ͷެࣜ௼Γಈըͱ͍͏Θ͚͕ͩɺͦΕͰ΋ϑΝϯͷ൓Ԡ͸্ʑɻʮ໊୳ ఁϐΧνϡ΢͸ϚʔέςΟϯάςΫχοΫΛ࢖ͬͨʂɹ͜͏͔͸͹͙ͭΜ ͩʂʯͱݪ࡞෩ʹίϝϯτΛدͤΔਓɺʮΉ͠Ζܶ৔ʹߦͬͯ͜Εͱҧ͏ө૾ ͕ྲྀΕͨΒɺڏِͷ޿ࠂͱͯ͠ૌ͑Δʯͱݴ͏΄Ͳ໊୳ఁϐΧνϡ΢ͷμϯε Λؾʹೖͬͨਓ΋͍Δঢ়ଶͩɻ

Slide 98

Slide 98 text

stairs 2019 見出しと本文の違いが分かりづらい 98

Slide 99

Slide 99 text

stairs 2019 表現の差をハッキリつけよう! 99

Slide 100

Slide 100 text

stairs 2019 100 ʰ໊୳ఁϐΧνϡ΢ʱө૾ྲྀग़͔ ೔ຊͰ͸೥݄೔ΑΓ্ө͞Ε͍ͯΔөըʰ໊୳ఁϐΧνϡ΢ʱɻ๺ถͰͷެ։༧ఆ೔ ͸݄೔ͱͳ͓ͬͯΓɺւͷ޲͜͏ͷϙέϞϯϑΝϯͨͪ΋ظ଴ʹڳΛ๲Β·͍ͤͯΔɻ͠ ͔ͦ͠Μͳ࠷தɺʮ໊୳ఁϐΧνϡ΢ɿຊฤө૾ʯͱ୊͞Εͨө૾͕:PV5VCFͰެ։͞Εͯ ͠·ͬͨɻ ܶ৔Ͱ౪ࡱ͞Εͨͷ͔ʜ ࣮͸͜ͷө૾ɺ࠷ॳͷ෼͋ͨΓ͸ຊฤͷө૾͕ྲྀΕΔ΋ͷɺͦͷޙͷ࣌ؒ෼΋໊୳ఁϐ Χνϡ΢͕ѪΒ͘͠μϯεΛ͢Δ͚ͩͷ΋ͷͩͬͨɻͲ͏΍Βөըʰ໊୳ఁϐΧνϡ΢ʱͷϓ ϩϞʔγϣϯͷҰ؀ͷΑ͏ͳͷͩɻμϯεө૾͸ϧʔϓͱ͸͍͖͑ͪΜͱ࡞ΒΕ͓ͯΓɺϐΧ νϡ΢ͷ੠Λ୲౰ͨ͠ϥΠΞϯɾϨΠϊϧζࢯ΋5XJUUFS্ͰΘ͟ͱΒ͘͠൓ԠΛݟ͍ͤͯ Δɻ ϑΝϯͷ൓Ԡ͸ ·͔͞ͷެࣜ௼Γಈըͱ͍͏Θ͚͕ͩɺͦΕͰ΋ϑΝϯͷ൓Ԡ͸্ʑɻʮ໊୳ఁϐΧνϡ΢͸ ϚʔέςΟϯάςΫχοΫΛ࢖ͬͨʂɹ͜͏͔͸͹͙ͭΜͩʂʯͱݪ࡞෩ʹίϝϯτΛدͤΔ ਓɺʮΉ͠Ζܶ৔ʹߦͬͯ͜Εͱҧ͏ө૾͕ྲྀΕͨΒɺڏِͷ޿ࠂͱͯ͠ૌ͑Δʯͱݴ͏΄Ͳ ໊୳ఁϐΧνϡ΢ͷμϯεΛؾʹೖͬͨਓ΋͍Δঢ়ଶͩɻ

Slide 101

Slide 101 text

stairs 2019 101 ʰ໊୳ఁϐΧνϡ΢ʱө૾ྲྀग़͔ ೔ຊͰ͸೥݄೔ΑΓ্ө͞Ε͍ͯΔөըʰ໊୳ఁϐΧνϡ΢ʱɻ๺ถͰͷެ։༧ఆ೔ ͸݄೔ͱͳ͓ͬͯΓɺւͷ޲͜͏ͷϙέϞϯϑΝϯͨͪ΋ظ଴ʹڳΛ๲Β·͍ͤͯΔɻ͠ ͔ͦ͠Μͳ࠷தɺʮ໊୳ఁϐΧνϡ΢ɿຊฤө૾ʯͱ୊͞Εͨө૾͕:PV5VCFͰެ։͞Εͯ ͠·ͬͨɻ ܶ৔Ͱ౪ࡱ͞Εͨͷ͔ʜ ࣮͸͜ͷө૾ɺ࠷ॳͷ෼͋ͨΓ͸ຊฤͷө૾͕ྲྀΕΔ΋ͷɺͦͷޙͷ࣌ؒ෼΋໊୳ఁϐ Χνϡ΢͕ѪΒ͘͠μϯεΛ͢Δ͚ͩͷ΋ͷͩͬͨɻͲ͏΍Βөըʰ໊୳ఁϐΧνϡ΢ʱͷϓ ϩϞʔγϣϯͷҰ؀ͷΑ͏ͳͷͩɻμϯεө૾͸ϧʔϓͱ͸͍͖͑ͪΜͱ࡞ΒΕ͓ͯΓɺϐΧ νϡ΢ͷ੠Λ୲౰ͨ͠ϥΠΞϯɾϨΠϊϧζࢯ΋5XJUUFS্ͰΘ͟ͱΒ͘͠൓ԠΛݟ͍ͤͯ Δɻ ϑΝϯͷ൓Ԡ͸ ·͔͞ͷެࣜ௼Γಈըͱ͍͏Θ͚͕ͩɺͦΕͰ΋ϑΝϯͷ൓Ԡ͸্ʑɻʮ໊୳ఁϐΧνϡ΢͸ ϚʔέςΟϯάςΫχοΫΛ࢖ͬͨʂɹ͜͏͔͸͹͙ͭΜͩʂʯͱݪ࡞෩ʹίϝϯτΛدͤΔ ਓɺʮΉ͠Ζܶ৔ʹߦͬͯ͜Εͱҧ͏ө૾͕ྲྀΕͨΒɺڏِͷ޿ࠂͱͯ͠ૌ͑Δʯͱݴ͏΄Ͳ ໊୳ఁϐΧνϡ΢ͷμϯεΛؾʹೖͬͨਓ΋͍Δঢ়ଶͩɻ 見出し vs 本文 (フォント, サイズ, 太さ)

Slide 102

Slide 102 text

stairs 2019 102 ʰ໊୳ఁϐΧνϡ΢ʱө૾ྲྀग़͔ ೔ຊͰ͸೥݄೔ΑΓ্ө͞Ε͍ͯΔөըʰ໊୳ఁϐΧνϡ΢ʱɻ๺ถͰͷެ։༧ఆ೔ ͸݄೔ͱͳ͓ͬͯΓɺւͷ޲͜͏ͷϙέϞϯϑΝϯͨͪ΋ظ଴ʹڳΛ๲Β·͍ͤͯΔɻ͠ ͔ͦ͠Μͳ࠷தɺʮ໊୳ఁϐΧνϡ΢ɿຊฤө૾ʯͱ୊͞Εͨө૾͕:PV5VCFͰެ։͞Εͯ ͠·ͬͨɻ ܶ৔Ͱ౪ࡱ͞Εͨͷ͔ʜ ࣮͸͜ͷө૾ɺ࠷ॳͷ෼͋ͨΓ͸ຊฤͷө૾͕ྲྀΕΔ΋ͷɺͦͷޙͷ࣌ؒ෼΋໊୳ఁϐ Χνϡ΢͕ѪΒ͘͠μϯεΛ͢Δ͚ͩͷ΋ͷͩͬͨɻͲ͏΍Βөըʰ໊୳ఁϐΧνϡ΢ʱͷϓ ϩϞʔγϣϯͷҰ؀ͷΑ͏ͳͷͩɻμϯεө૾͸ϧʔϓͱ͸͍͖͑ͪΜͱ࡞ΒΕ͓ͯΓɺϐΧ νϡ΢ͷ੠Λ୲౰ͨ͠ϥΠΞϯɾϨΠϊϧζࢯ΋5XJUUFS্ͰΘ͟ͱΒ͘͠൓ԠΛݟ͍ͤͯ Δɻ ϑΝϯͷ൓Ԡ͸ ·͔͞ͷެࣜ௼Γಈըͱ͍͏Θ͚͕ͩɺͦΕͰ΋ϑΝϯͷ൓Ԡ͸্ʑɻʮ໊୳ఁϐΧνϡ΢͸ ϚʔέςΟϯάςΫχοΫΛ࢖ͬͨʂɹ͜͏͔͸͹͙ͭΜͩʂʯͱݪ࡞෩ʹίϝϯτΛدͤΔ ਓɺʮΉ͠Ζܶ৔ʹߦͬͯ͜Εͱҧ͏ө૾͕ྲྀΕͨΒɺڏِͷ޿ࠂͱͯ͠ૌ͑Δʯͱݴ͏΄Ͳ ໊୳ఁϐΧνϡ΢ͷμϯεΛؾʹೖͬͨਓ΋͍Δঢ়ଶͩɻ 見出し vs 小見出し (色, フォント, サイズ)

Slide 103

Slide 103 text

stairs 2019 対比を意識することで読み手を迷わせない情報の組み立てができる! 103

Slide 104

Slide 104 text

stairs 2019 4原則まとめ 104

Slide 105

Slide 105 text

stairs 2019 近接 : 関連する要素をまとめる整列 : 要素どうしに結びつきを与える反復 : 特徴を繰り返して使う対比 : 異なる特徴は大胆に使う 105

Slide 106

Slide 106 text

stairs 2019 4原則が実際どう使われているか確認してみよう! 106

Slide 107

Slide 107 text

stairs 2019 107

Slide 108

Slide 108 text

stairs 2019 108 近接

Slide 109

Slide 109 text

stairs 2019 109 近接

Slide 110

Slide 110 text

stairs 2019 110 整列

Slide 111

Slide 111 text

stairs 2019 111 反復ジャケット画像タイトル説明文フォロワー数アイコンメニュー名

Slide 112

Slide 112 text

stairs 2019 112 対比分類名 vs コンテンツ名タイトル vs 説明文説明文 vs フォロワー数

Slide 113

Slide 113 text

stairs 2019 113 対比分類名 vs コンテンツ名タイトル vs 説明文説明文 vs フォロワー数

Slide 114

Slide 114 text

stairs 2019 よく見るとちゃんと使われている! 114

Slide 115

Slide 115 text

stairs 2019 Webサイトやアプリから探してみよう! ~ 18:30(仮) 115

Slide 116

Slide 116 text

stairs 2019 色の選び方 116 Iro Tori Dori

Slide 117

Slide 117 text

stairs 2019 色相環(色の違いを円上に配置したもの) をもとに説明 117

Slide 118

Slide 118 text

stairs 2019 原色 118

Slide 119

Slide 119 text

stairs 2019 +2次色 119

Slide 120

Slide 120 text

stairs 2019 +3次色 (カラー・ホイール) 120

Slide 121

Slide 121 text

stairs 2019 色と色の関係 •補色 •トライアド •類似色 121

Slide 122

Slide 122 text

stairs 2019 122 補色 •向かい合った色同士 ‣ 一方をメイン ‣ 片方をアクセント

Slide 123

Slide 123 text

stairs 2019 123 ポイントが最大3倍になります!!

Slide 124

Slide 124 text

stairs 2019 124 トライアド •等しい距離にある3色

Slide 125

Slide 125 text

stairs 2019 125 サルでも分かるビジネス英会話 2019. 5/16 18:00 ~

Slide 126

Slide 126 text

stairs 2019 126 類似色 •隣り合う色同士 •調和のとれた組み合わせ

Slide 127

Slide 127 text

stairs 2019 127 1 2 3 アプリを起動メニューを選択確定ボタンをタップ

Slide 128

Slide 128 text

stairs 2019 12色だけじゃ少ないので 128

Slide 129

Slide 129 text

stairs 2019 129 シェード(黒を足した色)・チント(白を足した色)

Slide 130

Slide 130 text

stairs 2019 ヒュー(純色)を使うのは避けて極力シェードやチントを使おう!! 130

Slide 131

Slide 131 text

stairs 2019 目がチカチカするよね 131

Slide 132

Slide 132 text

stairs 2019 132 サルでも分かるビジネス英会話 2019. 5/16 18:00 ~

Slide 133

Slide 133 text

stairs 2019 133 サルでも分かるビジネス英会話 2019. 5/16 18:00 ~

Slide 134

Slide 134 text

stairs 2019 色を決める順番 1. メイン 1色 2. コントラスト 1 or 2色 3. 文字色 2色(白っぽい色, 黒っぽい色) 134

Slide 135

Slide 135 text

stairs 2019 135 色を決める順番 1. メイン 1色 2. コントラスト 1 or 2色 3. 文字色 2色(白っぽい色, 黒っぽい色)

Slide 136

Slide 136 text

stairs 2019 136 色を決める順番 1. メイン 1色 2. コントラスト 1 or 2色 3. 文字色 2色(白っぽい色, 黒っぽい色) は使わないのがベター White #FFFFFF Black #000000

Slide 137

Slide 137 text

stairs 2019 137 色を決める順番 1. メイン 1色 2. コントラスト 1 or 2色 3. 文字色 2色(白っぽい色, 黒っぽい色) デザインするコンテンツに応じて使う組を選ぶ

Slide 138

Slide 138 text

stairs 2019 スライド 138 名刺 Webサイト

Slide 139

Slide 139 text

stairs 2019 スライド 139 名刺 Webサイト反復を意識して名刺や自分の制作物で色を統一すると

Slide 140

Slide 140 text

stairs 2019 自分で色選ぶの大変… 140

Slide 141

Slide 141 text

stairs 2019 Abobe Color 141 https://color.adobe.com/

Slide 142

Slide 142 text

stairs 2019 Adobe Colorの機能 •カラーホイール ‣ 色の関係を指定して、色を選ぶ •画像から抽出 ‣ 好きな画像から色を選んでくれる 142

Slide 143

Slide 143 text

stairs 2019 143 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30

Slide 144

Slide 144 text

stairs 2019 カラーホイールを使う 144

Slide 145

Slide 145 text

stairs 2019 145 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30

Slide 146

Slide 146 text

stairs 2019 146 カラーホイールを使って色を塗ろう

Slide 147

Slide 147 text

stairs 2019 画像から抽出する 147

Slide 148

Slide 148 text

stairs 2019 画像から抽出する 148

Slide 149

Slide 149 text

stairs 2019 149 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30

Slide 150

Slide 150 text

stairs 2019 色選びで大事なポイントが1つある! 150

Slide 151

Slide 151 text

stairs 2019 文字色と背景色のコントラスト •Ratio — コントラスト比(1 ~ 21)として値が出る •WCAG(Web Content Accessibility Guidelines)によって定めらたRatioを達成するのが望ましい ‣ フォントサイズなどで必要なRatioが異なる 151 Ratio: 4.15 Ratio: 9.58

Slide 152

Slide 152 text

stairs 2019 WCAGに基づく色の改善手順 1. WebAIM Color Contrast Checker でRatioを確認 •WCAG達成のレベルはAAとする •フォントサイズが16 pt より上 -> 3以上でok •フォントサイズが16 pt 未満 -> 4.5以上でok 2. okでなければ再度色を調整 152

Slide 153

Slide 153 text

stairs 2019 WebAIM Color Contrast Checker 153 https://webaim.org/resources/contrastchecker/

Slide 154

Slide 154 text

stairs 2019 154 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30 フォントサイズ: 40pt フォントサイズ: 24pt 必要なRatio: 両方とも3以上

Slide 155

Slide 155 text

stairs 2019 155 +

Slide 156

Slide 156 text

stairs 2019 156 ,

Slide 157

Slide 157 text

stairs 2019 157 +

Slide 158

Slide 158 text

stairs 2019 158 ,

Slide 159

Slide 159 text

stairs 2019 159 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30

Slide 160

Slide 160 text

stairs 2019 160 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30

Slide 161

Slide 161 text

stairs 2019 便利なツールを活かしてベストな色選びを心がけよう 161

Slide 162

Slide 162 text

stairs 2019 フォント 162 Minna Tigatte Minna Yoi

Slide 163

Slide 163 text

stairs 2019 フォントの種類 •Serif •Sans Serif •Display •Handwriting •Monospace 163

Slide 164

Slide 164 text

stairs 2019 Serif •セリフ(ひげ)の着いた書体 •日本語の明朝体のような感じ •かしこまった、フォーマルな印象 •例) Times New Roman ‣I am Groot. 164 I

Slide 165

Slide 165 text

stairs 2019 165

Slide 166

Slide 166 text

stairs 2019 166 Sans Serif •セリフ(ひげ)のない書体 •日本語のゴシック体のような感じ •落ち着いた、モダンな印象 •例) Futura ‣I am Groot.

Slide 167

Slide 167 text

stairs 2019 167

Slide 168

Slide 168 text

stairs 2019 168 Display •華やかな装飾のある書体 •目立ち度バツグン •タイトルや見出しによく使う •例) Krungthep ‣I am Groot.

Slide 169

Slide 169 text

stairs 2019 169

Slide 170

Slide 170 text

stairs 2019 170 Handwriting •手書き文字のような書体 •オサレ。 •オサレ過ぎるので上級者向け •例) HanziPen SC ‣I am Groot.

Slide 171

Slide 171 text

stairs 2019 171

Slide 172

Slide 172 text

stairs 2019 172 Monospace •全ての文字の幅が同じ書体 •コード書くときはだいたいコレ •例) Monaco ‣I am Groot.

Slide 173

Slide 173 text

stairs 2019 元からあるフォント以外も使いたい 173

Slide 174

Slide 174 text

stairs 2019 フリーフォントをダウンロードしよう! 174

Slide 175

Slide 175 text

stairs 2019 Google Fonts 175 https://fonts.google.com/

Slide 176

Slide 176 text

stairs 2019 Google Fonts •完全無料かつ登録不要でWebフォントをダウンロード可能 •Webサイトなどで用いることができる •PCにダウンロードして使うことも可能! 176

Slide 177

Slide 177 text

stairs 2019 Google Fonts経由でのフォント追加 1. フォントを検索 2. 欲しいフォントを指定 3. ダウンロード後, zipファイルを解凍 4. ttfファイルをインストール 177

Slide 178

Slide 178 text

stairs 2019 1. フォント検索 178

Slide 179

Slide 179 text

stairs 2019 好きなテキストでプレビューできる 179

Slide 180

Slide 180 text

stairs 2019 2. フォントを選択 180

Slide 181

Slide 181 text

stairs 2019 2. フォントを選択 181

Slide 182

Slide 182 text

stairs 2019 3. ttfファイルをダウンロード 182

Slide 183

Slide 183 text

stairs 2019 4. ttfファイルをインストール (Win) 183

Slide 184

Slide 184 text

stairs 2019 4. ttfファイルをインストール (Mac) 184

Slide 185

Slide 185 text

stairs 2019 Hello, Design!! My name is Hayato Okuma. I’m a member of stairs, the IT development organization.Today, We study about design. It’s important for engineers to understand about it. So, let’s enjoy design! 185 使ってみよう Hayato Okuma

Slide 186

Slide 186 text

stairs 2019 Hello, Design!! My name is Hayato Okuma. I’m a member of stairs, the IT development organization. Today, We study about design. It’s important for engineers to understand about it. So, let’s enjoy design! 186 1コンテンツに最大2フォント!! •+色, 太さなどで表現の差を付ける

Slide 187

Slide 187 text

stairs 2019 お気に入りのフォントを見つけてデザインに活かそう! 187

Slide 188

Slide 188 text

stairs 2019 Goolge Fonts以外もok 使用条件は要確認 188

Slide 189

Slide 189 text

stairs 2019 デザインの基本は以上!! 189

Slide 190

Slide 190 text

stairs 2019 190 1 2 3 デザインの基礎を学ぶダサい名刺をカッコよくする自分の名刺をデザインする Finished!

Slide 191

Slide 191 text

stairs 2019 ダサい名刺をカッコよく 191 Nantoiu Koto Deshou

Slide 192

Slide 192 text

stairs 2019 ここからは配布したファイルを編集してきます! 192

Slide 193

Slide 193 text

stairs 2019 193 study_design ﬁx meishi_dasa01 meishi_dasa02

Slide 194

Slide 194 text

stairs 2019 194 ൧௩ଠ࿠ ૉख҆ਢେֶ ޻ֶ෦ະདྷ૑଄ֶՊ ॴଐΧʔυήʔϜ෦ ΧόσΟ αʔΫϧ झຯυϥΠϒ ΧϥΦέ Ϟοτʔ͸ Ͱ͖Δ͜ͱ͔Βɺͭͭ͜͜ͱɻ ϝʔϧUBSPNBOKJ!TBNQMFKQ ൧௩ଠ࿠ ૉख҆ਢେֶ ޻ֶ෦ ະདྷ૑଄ֶՊ ॴଐΧʔυήʔϜ෦ ΧόσΟαʔΫϧ झຯυϥΠϒ ΧϥΦέ Ϟοτʔ͸ Ͱ͖Δ͜ͱ͔Βɺͭͭ͜͜ͱɻ ϝʔϧUBSPNBOKJ!TBNQMFKQ

Slide 195

Slide 195 text

stairs 2019 名刺 •与えられた環境 ‣ サイズ : 55*91 mm ‣ ウラとオモテがある •達成すべき目標 ‣ 自分のことを簡単に知ってもらう 195 Hayato Okuma Hayato Okuma ͳΜͱ͔͔Μͱ͔ɹ オモテ (渡す時に見せる方) ウラ

Slide 196

Slide 196 text

stairs 2019 すること •meishi_dasa01/02を自分なりに改善する ‣ 01が縦型, 02が横型好きな方を改善 ‣ 今回はオモテのみ •基本的にどんな編集でもok •パワポやKeynoteの操作に関してはGoogleさんに 196

Slide 197

Slide 197 text

stairs 2019 やってみよう! ~19:20(仮) 197

Slide 198

Slide 198 text

stairs 2019 198 ൧௩ଠ࿠ ૉख҆ਢେֶ ޻ֶ෦ະདྷ૑଄ֶՊ υϥΠϒΧϥΦέ5$(ΧόσΟ ͍͍͔ͮͨΖ͏ UBSPNBOKJ!TBNQMFKQ Ͱ͖Δ͜ͱ͔Βɺͭͭ͜͜ͱɻ

Slide 199

Slide 199 text

stairs 2019 199 1 2 3 デザインの基礎を学ぶダサい名刺をカッコよくする自分の名刺をデザインする Finished! Finished!

Slide 200

Slide 200 text

stairs 2019 M-1グランプリ 200 Yusho Shohin Aruyo 名刺

Slide 201

Slide 201 text

stairs 2019 201 study_design mymeishi meishi_tate meishi_yoko

Slide 202

Slide 202 text

stairs 2019 M-1グランプリ •縦 or 横向きの自分用名刺を作ろう! ‣ meishi_tate/yoko のどちらか ‣ 今回はウラ・オモテ両面デザイン •作ったあとは皆に自分の名刺をプレゼン! ‣ 名刺のこだわりポイントを1~3つ説明しよう 202

Slide 203

Slide 203 text

stairs 2019 発表する内容 •氏名 •出身学校 •所属学科 •名刺のポイント1~3つ ‣ サッカー好きをアピールするために、自分がプレーしている写真を載せた。 ‣ 緑系統の服をよく着るので、名刺でも統一して緑を使った。 203

Slide 204

Slide 204 text

stairs 2019 204 SNSのロゴマーク使いたい!

Slide 205

Slide 205 text

stairs 2019 Icon-rainbow 205 IUUQTJDPOSBJOCPXDPN T4/4

Slide 206

Slide 206 text

stairs 2019 Icon-rainbow •商用利用可能なアイコン素材をダウンロードできるサイト •詳細カテゴリー -> sns, ソーシャル •色を指定してダウンロード可能 206

Slide 207

Slide 207 text

stairs 2019 別のサイトから取る場合は使用条件を要確認 207

Slide 208

Slide 208 text

stairs 2019 画像を載せる場合 •自分で撮った写真や制作したイラストのみ! •ネットからダウンロードしたものはフリーでもダメ 208

Slide 209

Slide 209 text

stairs 2019 せっかく作ったのに発表して終わりかよ 209

Slide 210

Slide 210 text

stairs 2019 て、思うやん?? 210

Slide 211

Slide 211 text

stairs 2019 優勝賞品 211

Slide 212

Slide 212 text

stairs 2019 優勝賞品 Amazon ギフトカード 2000円 212

Slide 213

Slide 213 text

stairs 2019 優勝賞品 Amazon ギフトカード 2000円 213

Slide 214

Slide 214 text

stairs 2019 優勝賞品 Amazon ギフトカード 3000円 214

Slide 215

Slide 215 text

stairs 2019 And 215

Slide 216

Slide 216 text

stairs 2019 おおくま賞と代表賞もあるよ 216

Slide 217

Slide 217 text

stairs 2019 217

Slide 218

Slide 218 text

stairs 2019 作業時間 ~ 18:30 218

Slide 219

Slide 219 text

stairs 2019 優勝者の決め方 •全員発表後、Googleフォームから投票 •必ず3人選んで投票 •自分に投票してもok •得票数が一番多い人が優勝 219

Slide 220

Slide 220 text

stairs 2019 完成した名刺の提出先 •slackにリンクを貼るGoogleドライブのフォルダ •pdf形式に書き出したもの •ファイル名は「自分の発表順の番号_名字ローマ字」 220

Slide 221

Slide 221 text

stairs 2019 発表タイム 221 Kinnchou Suru Yone

Slide 222

Slide 222 text

stairs 2019 発表する内容 •氏名 •出身学校 •所属学科 •名刺のポイント1~3つ ‣ サッカー好きをアピールするために、自分がプレーしている写真を載せた。 ‣ 緑系統の服をよく着るので、名刺でも統一して緑を使った。 222

Slide 223

Slide 223 text

stairs 2019 優勝者の決め方 •全員発表後、Googleフォームから投票 •必ず3人選んで投票 •自分に投票してもok •得票数が一番多い人が優勝 223

Slide 224

Slide 224 text

stairs 2019 結果発表 224 Pachi *4

Slide 225

Slide 225 text

stairs 2019 2位得票数 6 有木さん・米城くん 225

Slide 226

Slide 226 text

stairs 2019 1位得票数 8 はまだくん 226

Slide 227

Slide 227 text

stairs 2019 おおくま賞竹本くん 227

Slide 228

Slide 228 text

stairs 2019 代表賞中村くん 228

Slide 229

Slide 229 text

stairs 2019 おめでとうございます 229

Slide 230

Slide 230 text

stairs 2019 230 1 2 3 デザインの基礎を学ぶダサい名刺をカッコよくする自分の名刺をデザインする Finished! Finished! Finished!

Slide 231

Slide 231 text

stairs 2019 まとめ 231 Shime No Hanashi

Slide 232

Slide 232 text

stairs 2019 デザインの基本の話をしました 232

Slide 233

Slide 233 text

stairs 2019 ダサい名刺をカッコよくしました 233

Slide 234

Slide 234 text

stairs 2019 自分の名刺をデザインしました 234

Slide 235

Slide 235 text

stairs 2019 デザインでいちばん大事なのは相手の目線になって考えること 235

Slide 236

Slide 236 text

stairs 2019 名刺にこのフォント使ったら相手におしゃれと思われるかも 236

Slide 237

Slide 237 text

stairs 2019 237 この色のコントラストだったら相手が見やすいスライドになるはず

Slide 238

Slide 238 text

stairs 2019 ユーザーファースト(相手目線)なデザインを心がけよう!! 238

Slide 239

Slide 239 text

stairs 2019 おまけ 239 Hatten Saseru Yo

Slide 240

Slide 240 text

stairs 2019 名刺の何かランク上 240

Slide 241

Slide 241 text

stairs 2019 Webサービスやアプリを作るとき 241

Slide 242

Slide 242 text

stairs 2019 242 このボタンの配置だとユーザが押しやすくなるはず

Slide 243

Slide 243 text

stairs 2019 243 このボタンの色は「送信ボタン」と認識されにくいかも

Slide 244

Slide 244 text

stairs 2019 みたいなことを考えて作る 244

Slide 245

Slide 245 text

stairs 2019 アプリやサービスにおいてユーザの目に触れる部分 245

Slide 246

Slide 246 text

stairs 2019 アプリやサービスにおいてユーザの目に触れる部分 246 UI (User Interface)

Slide 247

Slide 247 text

stairs 2019 アプリやサービスを通じてユーザが得られる体験 247 欲しい画像がすぐに見つかった! 他の画像も探してみようめっちゃ狭い道案内された… もう使いたくないこの文字の大きさだとワシには見づらいのう3

Slide 248

Slide 248 text

stairs 2019 アプリやサービスを通じてユーザが得られる体験 248 欲しい画像がすぐに見つかった! 他の画像も探してみようめっちゃ狭い道案内された… もう使いたくないこの文字の大きさだとワシには見づらいのう3 UX (User Experience)

Slide 249

Slide 249 text

stairs 2019 アプリ開発におけるデザイン •ターゲットとなるユーザに対して以下を考えること ‣ 受け入れやすくなるUIであるか ‣ UXの質を高めるための機能・UIであるか 249