Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Tutorial

Design Tutorial

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

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

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

Hayato Okuma

May 26, 2019
Tweet

More Decks by Hayato Okuma

Other Decks in Design

Transcript

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

    自分の名刺を デザインする •デザインとは •基本の4原則 •色 •フォント
  2. stairs 2019 レポート •与えられた環境 ‣ サイズ, ページ数, 提出期限 •達成すべき目標 ‣

    実験の結果を正しく報告する •外観 ‣ 簡潔な表現, 図表の挿入 31
  3. stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast

    39 関連する項目をまとめて グループ化すること
  4. stairs 2019 40 計算機ネットワーク 実験演習 学生番号: 18231203 氏名: 大隈 隼

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

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

    提出日: 2019 / 04 / 20 実施日: 2019 / 04 / 8, 9, 10 実験の情報 提出者の情報 レポートの情報
  7. stairs 2019 47 1. 何の実験なのか 2. 誰のレポートなのか 3. いつ提出したのか 計算機ネットワーク

    実験演習 学生番号: 18231203 氏名: 大隈 隼 提出日: 2019. 4 / 20 実施日: 2019. 4 / 8, 9, 10
  8. stairs 2019 49 GreenYellow Chartreuse LawnGreen Lime LimeGreen PaleGreen LightGreen

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

    MediumSpringGreen SpringGreen MediumSeaGreen SeaGreen ForestGreen
  10. stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast

    69 デザイン上の特徴を 繰り返して使う
  11. 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
  12. 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
  13. stairs 2019 近接 Proximity 整列 Alignment 反復 Repetition 対比 Contrast

    89 正確に同じでなければ、 ハッキリ差を付ける
  14. stairs 2019 数学テストスケジュール •小テスト(1) 4/16 (火) •小テスト(2) 4/23 (火) •中間テスト

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

    5/14 (火) •小テスト(3) 5/23 (木) •期末テスト 5/28 (火) •小テスト(4) 5/30 (木) 95
  16. stairs 2019 97 өըʰ໊୳ఁϐΧνϡ΢ʱө૾ྲྀग़͔ ೔ຊͰ͸೥݄೔ΑΓ্ө͞Ε͍ͯΔөըʰ໊୳ఁϐΧνϡ΢ʱɻ๺ถ Ͱͷެ։༧ఆ೔͸݄೔ͱͳ͓ͬͯΓɺւͷ޲͜͏ͷϙέϞϯϑΝϯͨͪ΋ ظ଴ʹڳΛ๲Β·͍ͤͯΔɻ͔ͦ͠͠Μͳ࠷தɺʮ໊୳ఁϐΧνϡ΢ɿຊฤө ૾ʯͱ୊͞Εͨө૾͕:PV5VCFͰެ։͞Εͯ͠·ͬͨɻ ܶ৔Ͱ౪ࡱ͞Εͨͷ͔ʜ ࣮͸͜ͷө૾ɺ࠷ॳͷ෼͋ͨΓ͸ຊฤͷө૾͕ྲྀΕΔ΋ͷɺͦͷޙͷ࣌ؒ

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

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

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

    Χνϡ΢͕ѪΒ͘͠μϯεΛ͢Δ͚ͩͷ΋ͷͩͬͨɻͲ͏΍Βөըʰ໊୳ఁϐΧνϡ΢ʱͷϓ ϩϞʔγϣϯͷҰ؀ͷΑ͏ͳͷͩɻμϯεө૾͸ϧʔϓͱ͸͍͖͑ͪΜͱ࡞ΒΕ͓ͯΓɺϐΧ νϡ΢ͷ੠Λ୲౰ͨ͠ϥΠΞϯɾϨΠϊϧζࢯ΋5XJUUFS্ͰΘ͟ͱΒ͘͠൓ԠΛݟ͍ͤͯ Δɻ ϑΝϯͷ൓Ԡ͸ ·͔͞ͷެࣜ௼Γಈըͱ͍͏Θ͚͕ͩɺͦΕͰ΋ϑΝϯͷ൓Ԡ͸্ʑɻʮ໊୳ఁϐΧνϡ΢͸ ϚʔέςΟϯάςΫχοΫΛ࢖ͬͨʂɹ͜͏͔͸͹͙ͭΜͩʂʯͱݪ࡞෩ʹίϝϯτΛدͤΔ ਓɺʮΉ͠Ζܶ৔ʹߦͬͯ͜Εͱҧ͏ө૾͕ྲྀΕͨΒɺڏِͷ޿ࠂͱͯ͠ૌ͑Δʯͱݴ͏΄Ͳ ໊୳ఁϐΧνϡ΢ͷμϯεΛؾʹೖͬͨਓ΋͍Δঢ়ଶͩɻ 見出し vs 小見出し (色, フォント, サイズ)
  20. stairs 2019 近接 : 関連する要素をまとめる 整列 : 要素どうしに結びつきを与える 反復 :

    特徴を繰り返して使う 対比 : 異なる特徴は大胆に使う 105
  21. stairs 2019 色を決める順番 1. メイン 1色 2. コントラスト 1 or

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

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

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

    or 2色 3. 文字色 2色(白っぽい色, 黒っぽい色) デザインするコンテンツに応じて使う組を選ぶ
  25. stairs 2019 文字色と背景色のコントラスト •Ratio — コントラスト比(1 ~ 21)として値が出る •WCAG(Web Content

    Accessibility Guidelines)によって 定めらたRatioを達成するのが望ましい ‣ フォントサイズなどで必要なRatioが異なる 151 Ratio: 4.15 Ratio: 9.58
  26. stairs 2019 WCAGに基づく色の改善手順 1. WebAIM Color Contrast Checker でRatioを確認 •WCAG達成のレベルはAAとする

    •フォントサイズが16 pt より上 -> 3以上でok •フォントサイズが16 pt 未満 -> 4.5以上でok 2. okでなければ再度色を調整 152
  27. stairs 2019 154 stairs monthly meeting 5/21Tue. 18:30 ~ 19:30

    フォントサイズ: 40pt フォントサイズ: 24pt 必要なRatio: 両方とも3以上
  28. 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
  29. 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フォント!! •+色, 太さなどで表現の差を付ける
  30. stairs 2019 194 ൧௩ଠ࿠ ૉख҆ਢେֶ ޻ֶ෦ະདྷ૑଄ֶՊ ॴଐΧʔυήʔϜ෦ ΧόσΟ αʔΫϧ झຯυϥΠϒ

    ΧϥΦέ Ϟοτʔ͸ Ͱ͖Δ͜ͱ͔Βɺͭͭ͜͜ͱɻ ϝʔϧUBSPNBOKJ!TBNQMFKQ ൧௩ଠ࿠ ૉख҆ਢେֶ ޻ֶ෦ ະདྷ૑଄ֶՊ ॴଐΧʔυήʔϜ෦ ΧόσΟαʔΫϧ झຯυϥΠϒ ΧϥΦέ Ϟοτʔ͸ Ͱ͖Δ͜ͱ͔Βɺͭͭ͜͜ͱɻ ϝʔϧUBSPNBOKJ!TBNQMFKQ
  31. stairs 2019 名刺 •与えられた環境 ‣ サイズ : 55*91 mm ‣

    ウラとオモテがある •達成すべき目標 ‣ 自分のことを簡単に知ってもらう 195 Hayato Okuma Hayato Okuma ͳΜͱ͔͔Μͱ͔ɹ オモテ (渡す時に見せる方) ウラ
  32. stairs 2019 すること •meishi_dasa01/02を自分なりに改善する ‣ 01が縦型, 02が横型 好きな方を改善 ‣ 今回はオモテのみ

    •基本的にどんな編集でもok •パワポやKeynoteの操作に関してはGoogleさんに 196
  33. stairs 2019 M-1グランプリ •縦 or 横向きの自分用名刺を作ろう! ‣ meishi_tate/yoko のどちらか ‣

    今回はウラ・オモテ両面デザイン •作ったあとは皆に自分の名刺をプレゼン! ‣ 名刺のこだわりポイントを1~3つ説明しよう 202
  34. stairs 2019 230 1 2 3 デザインの 基礎を学ぶ ダサい名刺を カッコよくする

    自分の名刺を デザインする Finished! Finished! Finished!