Design Tutorial

所属する学生団体で行ったデザイン勉強会の資料です。
流れは以下の通りです。

1. 4つの基本原則・色選び・フォントの簡単な説明
2. 得た知識を活かして名刺デザインの実践

デザインを専攻しているわけではなく、あくまでエンジニアとして最低限の知識を共有できればと思い作成した資料です🙇‍♂️

Transcript

1. stairs 2019 Design Tutorial 1 PowerPoint / Keynoteでカッコいい名刺デザイン
2. stairs 2019 はじめに 2 Otsukare Summer
3. stairs 2019 Web・iOS勉強会 お疲れさまでした 3
4. stairs 2019 4 楽しかった? or つまんなかった?
5. stairs 2019 5 楽しかった!! or つまんなかった?
6. stairs 2019 6 今後の活動にも参加してくれると 嬉しいです
7. stairs 2019 7 ところで
8. stairs 2019 8 作ったWebサイトとかアプリの見た目 もっとカッコよくしたかった…
9. stairs 2019 9 って思った人"
10. stairs 2019 10 今回はそんな人へ向けて デザインの基本の話をしていきます
11. stairs 2019 11 芸術的センス いりません
12. stairs 2019 12 ちょい長めの話を聞く力 だけ必要です
13. stairs 2019 13 持ってますよね…
14. stairs 2019 14 それでは始めます
15. stairs 2019 自己紹介 15 Yoroshiku Desu
16. stairs 2019 大隈 隼 (おおくま はやと) •知能B4 坂本研究室 •北九州高専出身 •安くてかわいい古着が好き •GWにマーベル映画(20本)をイッキ見 16
17. stairs 2019 今回の流れ 17 Schedule
18. stairs 2019 18 1 2 3 デザインの 基礎を学ぶ ダサい名刺を カッコよくする 自分の名刺を デザインする
19. stairs 2019 19 1 2 3 デザインの 基礎を学ぶ ダサい名刺を カッコよくする 自分の名刺を デザインする •デザインとは •基本の4原則 •色 •フォント
20. stairs 2019 デザインとは 20 Watashi Nari no Kangae
21. stairs 2019 そもそも、 デザインって何のこと? 21
22. stairs 2019 デザインとは (明鏡国語辞典) 1. 服飾・建築・工業製品・商業美術などの分野で、機能や美 的効果を考慮して作品・製品などを立案すること。意匠。 2. 図案・模様などを考案すること。また、そのこと。 22
23. stairs 2019 と言われてもピンとこないので 23
24. Clothes
25. Building
26. Appliance
27. Commercial art
28. stairs 2019 いろんな分野の「デザイン」がある 28
29. stairs 2019 今回学ぶ「デザイン」の定義 •与えられた環境の中で、目的を達成する外観を設計すること 29
30. stairs 2019 皆さんは既にデザインの経験がある 30
31. stairs 2019 レポート •与えられた環境 ‣ サイズ, ページ数, 提出期限 •達成すべき目標 ‣ 実験の結果を正しく報告する •外観 ‣ 簡潔な表現, 図表の挿入 31
32. stairs 2019 なんとなくやってきた気がする 32
33. stairs 2019 なんとなく中央揃え 33
34. stairs 2019 なんとなくアンダーライン引いてみる 34
35. stairs 2019 なんとなくフォントサイズ変える 35
36. stairs 2019 なんとなくやってきたデザインを 意識的に行えるようになろう! 36
37. stairs 2019 4つの基本原則 37 Muzukashiku Naiyo
38. stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast 38
39. stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast 39 関連する項目をまとめて グループ化すること
40. stairs 2019 40 計算機ネットワーク 実験演習 学生番号: 18231203 氏名: 大隈 隼 提出日: 2019 / 04 / 20 実施日: 2019 / 04 / 8, 9, 10 レポートの表紙
41. stairs 2019 41 計算機ネットワーク 実験演習 学生番号: 18231203 氏名: 大隈 隼 提出日: 2019 / 04 / 20 実施日: 2019 / 04 / 8, 9, 10 タイトル その他の情報
42. stairs 2019 なんとなく分けて書いている 42
43. stairs 2019 近接を意識して 関連する項目をまとめよう! 43
44. stairs 2019 44 計算機ネットワーク 実験演習 学生番号: 18231203 氏名: 大隈 隼 提出日: 2019 / 04 / 20 実施日: 2019 / 04 / 8, 9, 10 実験の情報 提出者の情報 レポートの情報
45. stairs 2019 45 計算機ネットワーク 実験演習 学生番号: 18231203 氏名: 大隈 隼 提出日: 2019. 4 / 20 実施日: 2019. 4 / 8, 9, 10
46. stairs 2019 46 計算機ネットワーク 実験演習 実験の情報 提出者の情報 レポートの情報 学生番号: 18231203 氏名: 大隈 隼 提出日: 2019. 4 / 20 実施日: 2019. 4 / 8, 9, 10
47. stairs 2019 47 1. 何の実験なのか 2. 誰のレポートなのか 3. いつ提出したのか 計算機ネットワーク 実験演習 学生番号: 18231203 氏名: 大隈 隼 提出日: 2019. 4 / 20 実施日: 2019. 4 / 8, 9, 10
48. stairs 2019 近接を意識することで、 全体の流れが目で追いやすくなる! 48
49. stairs 2019 49 GreenYellow Chartreuse LawnGreen Lime LimeGreen PaleGreen LightGreen MediumSpringGreen SpringGreen MediumSeaGreen SeaGreen ForestGreen
50. stairs 2019 50 GreenYellow Chartreuse LawnGreen Lime LimeGreen PaleGreen LightGreen MediumSpringGreen SpringGreen MediumSeaGreen SeaGreen ForestGreen
51. stairs 2019 名前の位置があいまいで どの色がどの名前か判別できない 51
52. stairs 2019 52 GreenYellow Chartreuse LawnGreen Lime LimeGreen PaleGreen LightGreen MediumSpringGreen
53. stairs 2019 近接によって 情報の関連性を 距離感で表現することが大切 53
54. stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast 54 ͢΂ͯͷ΋ͷΛ
    ҙࣝతʹ഑ஔ͢Δ
55. stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast 55 すべてのものを 意識的に配置する
56. stairs 2019 56 要は揃え方の話
57. stairs 2019 57 中央揃えの文章 右揃えの文章 左揃えの文章
58. stairs 2019 58 中央揃えの文章 右揃えの文章 左揃えの文章
59. stairs 2019 59 HTML&CSS Swift Webサイトの見た目をつくる言語です。勉強会で は基本事項の解説を行い、自分の自己紹介サイト を作ることができます。 iOSアプリを開発するための言語です。勉強会で はGithubを使って、ToDoアプリの開発を実際に やってみることができます。
60. stairs 2019 60 HTML&CSS Swift Webサイトの見た目をつくる言語です。勉強会で は基本事項の解説を行い、自分の自己紹介サイト を作ることができます。 iOSアプリを開発するための言語です。勉強会で はGithubを使って、ToDoアプリの開発を実際に やってみることができます。
61. stairs 2019 61 HTML&CSS Swift Webサイトの見た目をつくる言語です。勉強会で は基本事項の解説を行い、自分の自己紹介サイト を作ることができます。 iOSアプリを開発するための言語です。勉強会で はGithubを使って、ToDoアプリの開発を実際に やってみることができます。
62. stairs 2019 62 直線で要素を結びつけるイメージ
63. stairs 2019 63 アベンジャーズ 「地球最強のヒーロー達」の異名をとる、アメコミを代表するヒーローチーム。 「そ れぞれ違う能力を持ったヒーローたちが協力して戦う」というコンセプトのもと、す でに個別で（独立して）活躍していたヒーローたちによって結成。以来、マーベル・ ユニバース最大のヒーローチームとして人気を博し、現在に至る。 初期メンバー • アイアンマン • キャプテン・アメリカ • ハルク • ソー • ブラック・ウィドウ • ホークアイ 『アベンジャーズ』公開時の現在を意味する。 ˞
64. stairs 2019 全ての要素の配置を見直すと 64
65. stairs 2019 65 アベンジャーズ 「地球最強のヒーロー達」の異名をとる、アメコミを代表するヒーロー チーム。 「それぞれ違う能力を持ったヒーローたちが協力して戦う」と いうコンセプトのもと、すでに個別で（独立して）活躍していたヒーロー たちによって結成。以来、マーベル・ユニバース最大のヒーローチームと して人気を博し、現在に至る。
    
    • アイアンマン • キャプテン・アメリカ • マイティ・ソー • ハルク • ブラック・ウィドウ • ホークアイ ॳظメンバー 『アベンジャーズ』公開時の現在を意味する。 ˞
66. stairs 2019 66 アベンジャーズ 「地球最強のヒーロー達」の異名をとる、アメコミを代表するヒーロー チーム。 「それぞれ違う能力を持ったヒーローたちが協力して戦う」と いうコンセプトのもと、すでに個別で（独立して）活躍していたヒーロー たちによって結成。以来、マーベル・ユニバース最大のヒーローチームと して人気を博し、現在に至る。
    
    • アイアンマン • キャプテン・アメリカ • マイティ・ソー • ハルク • ブラック・ウィドウ • ホークアイ ॳظメンバー 『アベンジャーズ』公開時の現在を意味する。 ˞
67. stairs 2019 要素の結びつきが強いと スッキリ整理された印象を与える! 67
68. stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast 68 σβΠϯ্ͷಛ௃Λ
    ܁Γฦͯ͠࢖͏
69. stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast 69 デザイン上の特徴を 繰り返して使う
70. stairs 2019 アイアンマン •最新鋭のパワードスーツで戦うセレブヒーロー 70 キャプテン・アメリカ •長い眠りから覚めた正義に生きる伝説のソルジャー マイティ・ソー •雷を操る破天荒な神様
71. stairs 2019 相手に伝えたい 3つの重要度が同じなら 71
72. stairs 2019 アイアンマン •最新鋭のパワードスーツで戦うセレブヒーロー 72 キャプテン・アメリカ •長い眠りから覚めた正義に生きる伝説のソルジャー マイティ・ソー •雷を操る破天荒な神様
73. stairs 2019 同じ特徴を持たせること(反復)で 要素感に一貫性が生まれる 73
74. stairs 2019 アイアンマン •最新鋭のパワードスーツで戦うセレブヒーロー 74 キャプテン・アメリカ •長い眠りから覚めた正義に生きる伝説のソルジャー マイティ・ソー •雷を操る破天荒な神様
75. stairs 2019 反復させる特徴を増やしてみよう! 75
76. stairs 2019 アイアンマン •最新鋭のパワードスーツで戦うセレブヒーロー 76 キャプテン・アメリカ •長い眠りから覚めた正義に生きる伝説のソルジャー マイティ・ソー •雷を操る破天荒な神様
77. stairs 2019 アイアンマン •最新鋭のパワードスーツで戦うセレブヒーロー 77 キャプテン・アメリカ •長い眠りから覚めた正義に生きる伝説のソルジャー マイティ・ソー •雷を操る破天荒な神様 反復 •フォント •文字の太さ •画像の形 •要素の枠
78. stairs 2019 一貫性のある特徴は 増えても悪目立ちしない! 78
79. 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
80. stairs 2019 1つの情報を伝える複数のデザイン (それぞれ独立した広告) 80
81. 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
82. stairs 2019 共通した特徴を付加することで 同じ情報という認識が強まる! 82
83. stairs 2019 83 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30
84. stairs 2019 84 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30
85. stairs 2019 85 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30
86. stairs 2019 86 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30
87. stairs 2019 認識できる特徴が多いほうが 印象的かつ面白い見た目になる!! 87
88. stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast 88 ਖ਼֬ʹಉ͡Ͱͳ͚Ε͹ɺ
    ͸͖ͬΓͱҟͳΒͤΔ
89. stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast 89 正確に同じでなければ、 ハッキリ差を付ける
90. stairs 2019 90 歩行者レーン 自転車レーン
91. stairs 2019 似たような色で区別されていて 違いを認識しにくい 91
92. stairs 2019 92 歩行者レーン 自転車レーン
93. stairs 2019 数学テストスケジュール •小テスト(1) 4/16 (火) •小テスト(2) 4/23 (火) •中間テスト 5/14 (火) •小テスト(3) 5/23 (木) •期末テスト 5/28 (火) •小テスト(4) 5/30 (木) 93
94. stairs 2019 全てのテストの重要度は同じ…? 94
95. stairs 2019 数学テストスケジュール •小テスト(1) 4/16 (火) •小テスト(2) 4/23 (火) •中間テスト 5/14 (火) •小テスト(3) 5/23 (木) •期末テスト 5/28 (火) •小テスト(4) 5/30 (木) 95
96. stairs 2019 異なる性質・重要度を持つモノは 見た目をハッキリ異ならせる! 96
97. stairs 2019 97 өըʰ໊୳ఁϐΧνϡ΢ʱө૾ྲྀग़͔ ೔ຊͰ͸೥݄೔ΑΓ্ө͞Ε͍ͯΔөըʰ໊୳ఁϐΧνϡ΢ʱɻ๺ถ Ͱͷެ։༧ఆ೔͸݄೔ͱͳ͓ͬͯΓɺւͷ޲͜͏ͷϙέϞϯϑΝϯͨͪ΋ ظ଴ʹڳΛ๲Β·͍ͤͯΔɻ͔ͦ͠͠Μͳ࠷தɺʮ໊୳ఁϐΧνϡ΢ɿຊฤө ૾ʯͱ୊͞Εͨө૾͕:PV5VCFͰެ։͞Εͯ͠·ͬͨɻ ܶ৔Ͱ౪ࡱ͞Εͨͷ͔ʜ ࣮͸͜ͷө૾ɺ࠷ॳͷ෼͋ͨΓ͸ຊฤͷө૾͕ྲྀΕΔ΋ͷɺͦͷޙͷ࣌ؒ ෼΋໊୳ఁϐΧνϡ΢͕ѪΒ͘͠μϯεΛ͢Δ͚ͩͷ΋ͷͩͬͨɻͲ͏΍ Βөըʰ໊୳ఁϐΧνϡ΢ʱͷϓϩϞʔγϣϯͷҰ؀ͷΑ͏ͳͷͩɻμϯεө ૾͸ϧʔϓͱ͸͍͖͑ͪΜͱ࡞ΒΕ͓ͯΓɺϐΧνϡ΢ͷ੠Λ୲౰ͨ͠ϥΠΞ ϯɾϨΠϊϧζࢯ΋5XJUUFS্ͰΘ͟ͱΒ͘͠൓ԠΛݟ͍ͤͯΔɻ ϑΝϯͷ൓Ԡ͸ ·͔͞ͷެࣜ௼Γಈըͱ͍͏Θ͚͕ͩɺͦΕͰ΋ϑΝϯͷ൓Ԡ͸্ʑɻʮ໊୳ ఁϐΧνϡ΢͸ϚʔέςΟϯάςΫχοΫΛ࢖ͬͨʂɹ͜͏͔͸͹͙ͭΜ ͩʂʯͱݪ࡞෩ʹίϝϯτΛدͤΔਓɺʮΉ͠Ζܶ৔ʹߦͬͯ͜Εͱҧ͏ө૾ ͕ྲྀΕͨΒɺڏِͷ޿ࠂͱͯ͠ૌ͑Δʯͱݴ͏΄Ͳ໊୳ఁϐΧνϡ΢ͷμϯε Λؾʹೖͬͨਓ΋͍Δঢ়ଶͩɻ
98. stairs 2019 見出しと本文の違いが分かりづらい 98
99. stairs 2019 表現の差をハッキリつけよう! 99
100. stairs 2019 100 ʰ໊୳ఁϐΧνϡ΢ʱө૾ྲྀग़͔ ೔ຊͰ͸೥݄೔ΑΓ্ө͞Ε͍ͯΔөըʰ໊୳ఁϐΧνϡ΢ʱɻ๺ถͰͷެ։༧ఆ೔ ͸݄೔ͱͳ͓ͬͯΓɺւͷ޲͜͏ͷϙέϞϯϑΝϯͨͪ΋ظ଴ʹڳΛ๲Β·͍ͤͯΔɻ͠ ͔ͦ͠Μͳ࠷தɺʮ໊୳ఁϐΧνϡ΢ɿຊฤө૾ʯͱ୊͞Εͨө૾͕:PV5VCFͰެ։͞Εͯ ͠·ͬͨɻ ܶ৔Ͱ౪ࡱ͞Εͨͷ͔ʜ ࣮͸͜ͷө૾ɺ࠷ॳͷ෼͋ͨΓ͸ຊฤͷө૾͕ྲྀΕΔ΋ͷɺͦͷޙͷ࣌ؒ෼΋໊୳ఁϐ Χνϡ΢͕ѪΒ͘͠μϯεΛ͢Δ͚ͩͷ΋ͷͩͬͨɻͲ͏΍Βөըʰ໊୳ఁϐΧνϡ΢ʱͷϓ ϩϞʔγϣϯͷҰ؀ͷΑ͏ͳͷͩɻμϯεө૾͸ϧʔϓͱ͸͍͖͑ͪΜͱ࡞ΒΕ͓ͯΓɺϐΧ νϡ΢ͷ੠Λ୲౰ͨ͠ϥΠΞϯɾϨΠϊϧζࢯ΋5XJUUFS্ͰΘ͟ͱΒ͘͠൓ԠΛݟ͍ͤͯ Δɻ ϑΝϯͷ൓Ԡ͸ ·͔͞ͷެࣜ௼Γಈըͱ͍͏Θ͚͕ͩɺͦΕͰ΋ϑΝϯͷ൓Ԡ͸্ʑɻʮ໊୳ఁϐΧνϡ΢͸ ϚʔέςΟϯάςΫχοΫΛ࢖ͬͨʂɹ͜͏͔͸͹͙ͭΜͩʂʯͱݪ࡞෩ʹίϝϯτΛدͤΔ ਓɺʮΉ͠Ζܶ৔ʹߦͬͯ͜Εͱҧ͏ө૾͕ྲྀΕͨΒɺڏِͷ޿ࠂͱͯ͠ૌ͑Δʯͱݴ͏΄Ͳ ໊୳ఁϐΧνϡ΢ͷμϯεΛؾʹೖͬͨਓ΋͍Δঢ়ଶͩɻ
101. stairs 2019 101 ʰ໊୳ఁϐΧνϡ΢ʱө૾ྲྀग़͔ ೔ຊͰ͸೥݄೔ΑΓ্ө͞Ε͍ͯΔөըʰ໊୳ఁϐΧνϡ΢ʱɻ๺ถͰͷެ։༧ఆ೔ ͸݄೔ͱͳ͓ͬͯΓɺւͷ޲͜͏ͷϙέϞϯϑΝϯͨͪ΋ظ଴ʹڳΛ๲Β·͍ͤͯΔɻ͠ ͔ͦ͠Μͳ࠷தɺʮ໊୳ఁϐΧνϡ΢ɿຊฤө૾ʯͱ୊͞Εͨө૾͕:PV5VCFͰެ։͞Εͯ ͠·ͬͨɻ ܶ৔Ͱ౪ࡱ͞Εͨͷ͔ʜ ࣮͸͜ͷө૾ɺ࠷ॳͷ෼͋ͨΓ͸ຊฤͷө૾͕ྲྀΕΔ΋ͷɺͦͷޙͷ࣌ؒ෼΋໊୳ఁϐ Χνϡ΢͕ѪΒ͘͠μϯεΛ͢Δ͚ͩͷ΋ͷͩͬͨɻͲ͏΍Βөըʰ໊୳ఁϐΧνϡ΢ʱͷϓ ϩϞʔγϣϯͷҰ؀ͷΑ͏ͳͷͩɻμϯεө૾͸ϧʔϓͱ͸͍͖͑ͪΜͱ࡞ΒΕ͓ͯΓɺϐΧ νϡ΢ͷ੠Λ୲౰ͨ͠ϥΠΞϯɾϨΠϊϧζࢯ΋5XJUUFS্ͰΘ͟ͱΒ͘͠൓ԠΛݟ͍ͤͯ Δɻ ϑΝϯͷ൓Ԡ͸ ·͔͞ͷެࣜ௼Γಈըͱ͍͏Θ͚͕ͩɺͦΕͰ΋ϑΝϯͷ൓Ԡ͸্ʑɻʮ໊୳ఁϐΧνϡ΢͸ ϚʔέςΟϯάςΫχοΫΛ࢖ͬͨʂɹ͜͏͔͸͹͙ͭΜͩʂʯͱݪ࡞෩ʹίϝϯτΛدͤΔ ਓɺʮΉ͠Ζܶ৔ʹߦͬͯ͜Εͱҧ͏ө૾͕ྲྀΕͨΒɺڏِͷ޿ࠂͱͯ͠ૌ͑Δʯͱݴ͏΄Ͳ ໊୳ఁϐΧνϡ΢ͷμϯεΛؾʹೖͬͨਓ΋͍Δঢ়ଶͩɻ 見出し vs 本文 (フォント, サイズ, 太さ)
102. stairs 2019 102 ʰ໊୳ఁϐΧνϡ΢ʱө૾ྲྀग़͔ ೔ຊͰ͸೥݄೔ΑΓ্ө͞Ε͍ͯΔөըʰ໊୳ఁϐΧνϡ΢ʱɻ๺ถͰͷެ։༧ఆ೔ ͸݄೔ͱͳ͓ͬͯΓɺւͷ޲͜͏ͷϙέϞϯϑΝϯͨͪ΋ظ଴ʹڳΛ๲Β·͍ͤͯΔɻ͠ ͔ͦ͠Μͳ࠷தɺʮ໊୳ఁϐΧνϡ΢ɿຊฤө૾ʯͱ୊͞Εͨө૾͕:PV5VCFͰެ։͞Εͯ ͠·ͬͨɻ ܶ৔Ͱ౪ࡱ͞Εͨͷ͔ʜ ࣮͸͜ͷө૾ɺ࠷ॳͷ෼͋ͨΓ͸ຊฤͷө૾͕ྲྀΕΔ΋ͷɺͦͷޙͷ࣌ؒ෼΋໊୳ఁϐ Χνϡ΢͕ѪΒ͘͠μϯεΛ͢Δ͚ͩͷ΋ͷͩͬͨɻͲ͏΍Βөըʰ໊୳ఁϐΧνϡ΢ʱͷϓ ϩϞʔγϣϯͷҰ؀ͷΑ͏ͳͷͩɻμϯεө૾͸ϧʔϓͱ͸͍͖͑ͪΜͱ࡞ΒΕ͓ͯΓɺϐΧ νϡ΢ͷ੠Λ୲౰ͨ͠ϥΠΞϯɾϨΠϊϧζࢯ΋5XJUUFS্ͰΘ͟ͱΒ͘͠൓ԠΛݟ͍ͤͯ Δɻ ϑΝϯͷ൓Ԡ͸ ·͔͞ͷެࣜ௼Γಈըͱ͍͏Θ͚͕ͩɺͦΕͰ΋ϑΝϯͷ൓Ԡ͸্ʑɻʮ໊୳ఁϐΧνϡ΢͸ ϚʔέςΟϯάςΫχοΫΛ࢖ͬͨʂɹ͜͏͔͸͹͙ͭΜͩʂʯͱݪ࡞෩ʹίϝϯτΛدͤΔ ਓɺʮΉ͠Ζܶ৔ʹߦͬͯ͜Εͱҧ͏ө૾͕ྲྀΕͨΒɺڏِͷ޿ࠂͱͯ͠ૌ͑Δʯͱݴ͏΄Ͳ ໊୳ఁϐΧνϡ΢ͷμϯεΛؾʹೖͬͨਓ΋͍Δঢ়ଶͩɻ 見出し vs 小見出し (色, フォント, サイズ)
103. stairs 2019 対比を意識することで 読み手を 迷わせない情報の組み立てができる! 103
104. stairs 2019 4原則まとめ 104
105. stairs 2019 近接 : 関連する要素をまとめる
     整列 : 要素どうしに結びつきを与える 反復 : 特徴を繰り返して使う 対比 : 異なる特徴は大胆に使う 105
106. stairs 2019 4原則が実際どう使われているか 確認してみよう! 106
107. stairs 2019 107
108. stairs 2019 108 近接
109. stairs 2019 109 近接
110. stairs 2019 110 整列
111. stairs 2019 111 反復 ジャケット画像 タイトル 説明文 フォロワー数 アイコン メニュー名
112. stairs 2019 112 対比 分類名 vs コンテンツ名 タイトル vs 説明文 説明文 vs フォロワー数
113. stairs 2019 113 対比 分類名 vs コンテンツ名 タイトル vs 説明文 説明文 vs フォロワー数
114. stairs 2019 よく見るとちゃんと使われている! 114
115. stairs 2019 Webサイトやアプリから探してみよう! ~ 18:30(仮) 115
116. stairs 2019 色の選び方 116 Iro Tori Dori
117. stairs 2019 色相環(色の違いを円上に配置したもの) をもとに説明 117
118. stairs 2019 原色 118
119. stairs 2019 +2次色 119
120. stairs 2019 +3次色 (カラー・ホイール) 120
121. stairs 2019 色と色の関係 •補色 •トライアド •類似色 121
122. stairs 2019 122 補色 •向かい合った色同士 ‣ 一方をメイン ‣ 片方をアクセント
123. stairs 2019 123 ポイントが 最大3倍 になります!!
124. stairs 2019 124 トライアド •等しい距離にある3色
125. stairs 2019 125 サルでも分かる ビジネス英会話 2019. 5/16 18:00 ~
126. stairs 2019 126 類似色 •隣り合う色同士 •調和のとれた組み合わせ
127. stairs 2019 127 1 2 3 アプリを起動 メニューを選択 確定ボタンをタップ
128. stairs 2019 12色だけじゃ少ないので 128
129. stairs 2019 129 シェード(黒を足した色)・チント(白を足した色)
130. stairs 2019 ヒュー(純色)を使うのは避けて 極力シェードやチントを使おう!! 130
131. stairs 2019 目がチカチカするよね 131
132. stairs 2019 132 サルでも分かる ビジネス英会話 2019. 5/16 18:00 ~
133. stairs 2019 133 サルでも分かる ビジネス英会話 2019. 5/16 18:00 ~
134. stairs 2019 色を決める順番 1. メイン 1色 2. コントラスト 1 or 2色 3. 文字色 2色(白っぽい色, 黒っぽい色) 134
135. stairs 2019 135 色を決める順番 1. メイン 1色 2. コントラスト 1 or 2色 3. 文字色 2色(白っぽい色, 黒っぽい色)
136. stairs 2019 136 色を決める順番 1. メイン 1色 2. コントラスト 1 or 2色 3. 文字色 2色(白っぽい色, 黒っぽい色) は使わないのがベター White #FFFFFF Black #000000
137. stairs 2019 137 色を決める順番 1. メイン 1色 2. コントラスト 1 or 2色 3. 文字色 2色(白っぽい色, 黒っぽい色) デザインするコンテンツに応じて使う組を選ぶ
138. stairs 2019 スライド 138 名刺 Webサイト
139. stairs 2019 スライド 139 名刺 Webサイト 反復を意識して 名刺や自分の制作物で 色を統一すると
140. stairs 2019 自分で色選ぶの大変… 140
141. stairs 2019 Abobe Color 141 https://color.adobe.com/
142. stairs 2019 Adobe Colorの機能 •カラーホイール ‣ 色の関係を指定して、色を選ぶ •画像から抽出 ‣ 好きな画像から色を選んでくれる 142
143. stairs 2019 143 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30
144. stairs 2019 カラーホイールを使う 144
145. stairs 2019 145 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30
146. stairs 2019 146 カラーホイールを使って色を塗ろう
147. stairs 2019 画像から抽出する 147
148. stairs 2019 画像から抽出する 148
149. stairs 2019 149 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30
150. stairs 2019 色選びで大事なポイントが1つある! 150
151. stairs 2019 文字色と背景色のコントラスト •Ratio — コントラスト比(1 ~ 21)として値が出る •WCAG(Web Content Accessibility Guidelines)によって 定めらたRatioを達成するのが望ましい ‣ フォントサイズなどで必要なRatioが異なる 151 Ratio: 4.15 Ratio: 9.58
152. stairs 2019 WCAGに基づく色の改善手順 1. WebAIM Color Contrast Checker でRatioを確認 •WCAG達成のレベルはAAとする •フォントサイズが16 pt より上 -> 3以上でok •フォントサイズが16 pt 未満 -> 4.5以上でok 2. okでなければ再度色を調整 152
153. stairs 2019 WebAIM Color Contrast Checker 153 https://webaim.org/resources/contrastchecker/
154. stairs 2019 154 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30 フォントサイズ: 40pt フォントサイズ: 24pt 必要なRatio: 両方とも3以上
155. stairs 2019 155 +
156. stairs 2019 156 ,
157. stairs 2019 157 +
158. stairs 2019 158 ,
159. stairs 2019 159 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30
160. stairs 2019 160 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30
161. stairs 2019 便利なツールを活かして ベストな色選びを心がけよう 161
162. stairs 2019 フォント 162 Minna Tigatte Minna Yoi
163. stairs 2019 フォントの種類 •Serif •Sans Serif •Display •Handwriting •Monospace 163
164. stairs 2019 Serif •セリフ(ひげ)の着いた書体 •日本語の明朝体のような感じ •かしこまった、フォーマルな印象 •例) Times New Roman ‣I am Groot. 164 I
165. stairs 2019 165
166. stairs 2019 166 Sans Serif •セリフ(ひげ)のない書体 •日本語のゴシック体のような感じ •落ち着いた、モダンな印象 •例) Futura ‣I am Groot.
167. stairs 2019 167
168. stairs 2019 168 Display •華やかな装飾のある書体 •目立ち度バツグン •タイトルや見出しによく使う •例) Krungthep ‣I am Groot.
169. stairs 2019 169
170. stairs 2019 170 Handwriting •手書き文字のような書体 •オサレ。 •オサレ過ぎるので上級者向け •例) HanziPen SC ‣I am Groot.
171. stairs 2019 171
172. stairs 2019 172 Monospace •全ての文字の幅が同じ書体 •コード書くときはだいたいコレ •例) Monaco ‣I am Groot.
173. stairs 2019 元からあるフォント以外も使いたい 173
174. stairs 2019 フリーフォントをダウンロードしよう! 174
175. stairs 2019 Google Fonts 175 https://fonts.google.com/
176. stairs 2019 Google Fonts •完全無料かつ登録不要でWebフォントをダウンロード可能 •Webサイトなどで用いることができる •PCにダウンロードして使うことも可能! 176
177. stairs 2019 Google Fonts経由でのフォント追加 1. フォントを検索 2. 欲しいフォントを指定 3. ダウンロード後, zipファイルを解凍 4. ttfファイルをインストール 177
178. stairs 2019 1. フォント検索 178
179. stairs 2019 好きなテキストでプレビューできる 179
180. stairs 2019 2. フォントを選択 180
181. stairs 2019 2. フォントを選択 181
182. stairs 2019 3. ttfファイルをダウンロード 182
183. stairs 2019 4. ttfファイルをインストール (Win) 183
184. stairs 2019 4. ttfファイルをインストール (Mac) 184
185. 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
186. 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フォント!! •+色, 太さなどで表現の差を付ける
187. stairs 2019 お気に入りのフォントを見つけて デザインに活かそう! 187
188. stairs 2019 Goolge Fonts以外もok 使用条件は要確認 188
189. stairs 2019 デザインの基本は以上!! 189
190. stairs 2019 190 1 2 3 デザインの 基礎を学ぶ ダサい名刺を カッコよくする 自分の名刺を デザインする Finished!
191. stairs 2019 ダサい名刺をカッコよく 191 Nantoiu Koto Deshou
192. stairs 2019 ここからは 配布したファイルを編集してきます! 192
193. stairs 2019 193 study_design fix meishi_dasa01 meishi_dasa02
194. stairs 2019 194 ൧௩
     ଠ࿠ ૉख҆ਢେֶ
     
     ޻ֶ෦
     ະདྷ૑଄ֶՊ ॴଐ
     ΧʔυήʔϜ෦
     ΧόσΟ αʔΫϧ झຯ
     υϥΠϒ
     ΧϥΦέ Ϟοτʔ͸
     Ͱ͖Δ͜ͱ͔Βɺͭͭ͜͜ͱɻ ϝʔϧ
     UBSPNBOKJ!TBNQMFKQ ൧௩
     ଠ࿠ ૉख҆ਢେֶ
     
     ޻ֶ෦
     ະདྷ૑଄ֶՊ ॴଐ
     ΧʔυήʔϜ෦
     ΧόσΟαʔΫϧ झຯ
     υϥΠϒ
     ΧϥΦέ Ϟοτʔ͸
     Ͱ͖Δ͜ͱ͔Βɺͭͭ͜͜ͱɻ ϝʔϧ
     UBSPNBOKJ!TBNQMFKQ
195. stairs 2019 名刺 •与えられた環境 ‣ サイズ : 55*91 mm ‣ ウラとオモテがある •達成すべき目標 ‣ 自分のことを簡単に知ってもらう 195 Hayato Okuma Hayato Okuma ͳΜͱ͔͔Μͱ͔ɹ オモテ (渡す時に見せる方) ウラ
196. stairs 2019 すること •meishi_dasa01/02を自分なりに改善する ‣ 01が縦型, 02が横型 好きな方を改善 ‣ 今回はオモテのみ •基本的にどんな編集でもok •パワポやKeynoteの操作に関してはGoogleさんに 196
197. stairs 2019 やってみよう! ~19:20(仮) 197
198. stairs 2019 198 ൧௩
     ଠ࿠ ૉख҆ਢେֶ
     
     ޻ֶ෦
     ະདྷ૑଄ֶՊ υϥΠϒ
     ΧϥΦέ
     5$(
     ΧόσΟ ͍͍͔ͮ
     ͨΖ͏ UBSPNBOKJ!TBNQMFKQ Š
     Ͱ͖Δ͜ͱ͔Βɺͭͭ͜͜ͱɻ
199. stairs 2019 199 1 2 3 デザインの 基礎を学ぶ ダサい名刺を カッコよくする 自分の名刺を デザインする Finished! Finished!
200. stairs 2019 M-1グランプリ 200 Yusho Shohin Aruyo 名刺
201. stairs 2019 201 study_design mymeishi meishi_tate meishi_yoko
202. stairs 2019 M-1グランプリ •縦 or 横向きの自分用名刺を作ろう! ‣ meishi_tate/yoko のどちらか ‣ 今回はウラ・オモテ両面デザイン •作ったあとは皆に自分の名刺をプレゼン! ‣ 名刺のこだわりポイントを1~3つ説明しよう 202
203. stairs 2019 発表する内容 •氏名 •出身学校 •所属学科 •名刺のポイント1~3つ ‣ サッカー好きをアピールするために、自分がプレーしている写真を載せた。 ‣ 緑系統の服をよく着るので、名刺でも統一して緑を使った。 203
204. stairs 2019 204 SNSのロゴマーク使いたい!
205. stairs 2019 Icon-rainbow 205 IUUQTJDPOSBJOCPXDPN T4/4
206. stairs 2019 Icon-rainbow •商用利用可能なアイコン素材をダウンロード できるサイト •詳細カテゴリー -> sns, ソーシャル •色を指定してダウンロード可能 206
207. stairs 2019 別のサイトから取る場合は 使用条件を要確認 207
208. stairs 2019 画像を載せる場合 •自分で撮った写真や制作したイラストのみ! •ネットからダウンロードしたものはフリーでもダメ 208
209. stairs 2019 せっかく作ったのに 発表して終わりかよ 209
210. stairs 2019 て、思うやん?? 210
211. stairs 2019 優勝賞品 211
212. stairs 2019 優勝賞品 Amazon ギフトカード 2000円 212
213. stairs 2019 優勝賞品 Amazon ギフトカード 2000円 213
214. stairs 2019 優勝賞品 Amazon ギフトカード 3000円 214
215. stairs 2019 And 215
216. stairs 2019 おおくま賞と代表賞もあるよ 216
217. stairs 2019 217
218. stairs 2019 作業時間 ~ 18:30 218
219. stairs 2019 優勝者の決め方 •全員発表後、Googleフォームから投票 •必ず3人選んで投票 •自分に投票してもok •得票数が一番多い人が優勝 219
220. stairs 2019 完成した名刺の提出先 •slackにリンクを貼るGoogleドライブのフォルダ •pdf形式に書き出したもの •ファイル名は「自分の発表順の番号_名字ローマ字」 220
221. stairs 2019 発表タイム 221 Kinnchou Suru Yone
222. stairs 2019 発表する内容 •氏名 •出身学校 •所属学科 •名刺のポイント1~3つ ‣ サッカー好きをアピールするために、自分がプレーしている写真を載せた。 ‣ 緑系統の服をよく着るので、名刺でも統一して緑を使った。 222
223. stairs 2019 優勝者の決め方 •全員発表後、Googleフォームから投票 •必ず3人選んで投票 •自分に投票してもok •得票数が一番多い人が優勝 223
224. stairs 2019 結果発表 224 Pachi *4
225. stairs 2019 2位 得票数 6 有木さん・米城くん 225
226. stairs 2019 1位 得票数 8 はまだ くん 226
227. stairs 2019 おおくま賞 竹本くん 227
228. stairs 2019 代表賞 中村くん 228
229. stairs 2019 おめでとうございます 229
230. stairs 2019 230 1 2 3 デザインの 基礎を学ぶ ダサい名刺を カッコよくする 自分の名刺を デザインする Finished! Finished! Finished!
231. stairs 2019 まとめ 231 Shime No Hanashi
232. stairs 2019 デザインの基本の話をしました 232
233. stairs 2019 ダサい名刺をカッコよくしました 233
234. stairs 2019 自分の名刺をデザインしました 234
235. stairs 2019 デザインでいちばん大事なのは 相手の目線になって考えること 235
236. stairs 2019 名刺にこのフォント使ったら 相手におしゃれと思われるかも 236
237. stairs 2019 237 この色のコントラストだったら 相手が見やすいスライドになるはず
238. stairs 2019 ユーザーファースト(相手目線)な デザインを心がけよう!! 238
239. stairs 2019 おまけ 239 Hatten Saseru Yo
240. stairs 2019 名刺の何かランク上 240
241. stairs 2019 Webサービスやアプリを 作るとき 241
242. stairs 2019 242 このボタンの配置だと ユーザが押しやすくなるはず
243. stairs 2019 243 このボタンの色は 「送信ボタン」と認識されにくいかも
244. stairs 2019 みたいなことを考えて作る 244
245. stairs 2019 アプリやサービスにおいて ユーザの目に触れる部分 245
246. stairs 2019 アプリやサービスにおいて ユーザの目に触れる部分 246 UI (User Interface)
247. stairs 2019 アプリやサービスを通じて ユーザが得られる体験 247 欲しい画像がすぐに見つかった! 他の画像も探してみよう めっちゃ狭い道案内された… もう使いたくない この文字の大きさだと ワシには見づらいのう3
248. stairs 2019 アプリやサービスを通じて ユーザが得られる体験 248 欲しい画像がすぐに見つかった! 他の画像も探してみよう めっちゃ狭い道案内された… もう使いたくない この文字の大きさだと ワシには見づらいのう3 UX (User Experience)
249. stairs 2019 アプリ開発におけるデザイン •ターゲットとなるユーザに対して 以下を考えること ‣ 受け入れやすくなるUIであるか ‣ UXの質を高めるための機能・UIであるか 249
250. stairs 2019 気になる人は 「UI UX」で検索 250
251. stairs 2019 お疲れさまでした!! 251