良いデザインのためのマインドセットの作り方

Ff18a27b908029695ca70b144d42e3ba?s=47 待島 亘
June 28, 2019

 良いデザインのためのマインドセットの作り方

CSS Nite in Sapporo, vol.22
「デザインを語る夕べ」
2019年6月28日(金)
https://cssnite.jp/sapporo/vol22/

Ff18a27b908029695ca70b144d42e3ba?s=128

待島 亘

June 28, 2019
Tweet

Transcript

  1. ྑ͍σβΠϯͷͨΊͷ ϚΠϯυηοτͷ࡞Γํ CSS Nite in Sapporo, vol.22 ʮσβΠϯΛޠΔ༦΂ʯ 2 0

    1 9 . 0 6 . 2 8 @ T e n t o T e n S A P P O R O S T A T I O N Wataru Machishima
  2. ΍Γ࢝ΊΔͱ΍Δؾ͕ग़Δ
 ͬͯຊ౰Ͱ͠ΐ͏͔ʁ 2 Q.

  3. ຊ౰Ͱ͢ɻ 3 A.

  4. ਓ͕ؒମΛಈ͔͢ͱɺ
 ೴͕࡞ۀʹ߹Θͤͨ׆ੑԽϞʔυʹೖΔɻ ͜ΕΛʮ࡞ۀڵฃʯͱ͍͏ɻ 4

  5. ਓؒͷ೴ͷੑ࣭Λ࢖͍͜ͳ͢ 5

  6. 6 ଴ౡ ࿱ɹ·ͪ͠· ΘͨΔ גࣜձࣾGear8 ΢ΣϒσΟϨΫλʔ
 ΢ΣϒαΠτͷλʔήοτ΍໨తɺ఻͑Δ΂͖ίϯςϯπͳͲɺ
 ϫʔΫγϣοϓΛ௨ͯ͠ΫϥΠΞϯτͱҰॹʹߦ͏اըઃܭ͕ಘҙɻ ը໘ઃܭ͸XDɻλεΫ؅ཧ͸ToistͱBacklog͕޷͖ɻ ࢀՃͨ͠ΠϕϯτͷάϥϨί͕झຯɻ


    هࣄΛॻ͘ͷ͸͕͔͔࣌ؒΔํɻ ࣗݾ঺հ
  7. 7 GRAPHIC RECORDING EVENT & SEMINAR https://note.mu/wattlaa

  8. 8 1.ྑ͍σβΠϯΛ࡞Δͷʹඞཁͳ΋ͷ 2.΍ΔؾεΠονΛΦϯʹ͢Δ 3.ΞΠσΞΛੜΉɺΠϯϓοτɾΞ΢τϓοτ 4.എதΛԡ͢ɺ͠ͳ΍͔ϚΠϯυηοτ 5.·ͱΊ ໨࣍ INDEX

  9. 9 ྑ͍σβΠϯΛ ࡞Δͷʹඞཁͳ΋ͷ SECTION 01

  10. 10 “ ΛσβΠϯ͢Δ ”

  11. 11 “ ΛσβΠϯ͢Δ ” https://www.vivivit.com/entries/keiei-design-sheet

  12. 12 “ ΛσβΠϯ͢Δ ” https://www.vivivit.com/entries/keiei-design-sheet

  13. ྑ͍σβΠϯʹ
 ඞཁͳ΋ͷͬͯʁ 13

  14. اը ΞΠσΟΞ ίϛϡχέʔγϣϯ εϐʔυ Ծઆͱݕূ ੎͍ ΦϦδφϦςΟ ໨త ඒ͠͞ Θ͔Γ΍͢͞

    ࡉ෦΁ͷͩ͜ΘΓ ϑϨʔϜϫʔΫ Ϟνϕʔγϣϯ ؀ڥ ೤ྔ
  15. اը ΞΠσΟΞ Ϟνϕʔγϣϯ εϐʔυ Ծઆͱݕূ ੎͍ ೤ྔ ΦϦδφϦςΟ ໨త ඒ͠͞

    Θ͔Γ΍͢͞ ࡉ෦΁ͷͩ͜ΘΓ ؀ڥ ϑϨʔϜϫʔΫ ίϛϡχέʔγϣϯ ࠓ೔͸͜ͷลΓͷ͓࿩
  16. 16 ΍ΔؾεΠονΛ Φϯʹ͢Δ SECTION 02

  17. ਓ͕ؒମΛಈ͔͢ͱɺ
 ೴͕࡞ۀʹ߹Θͤͨ׆ੑԽϞʔυʹೖΔɻ ͜ΕΛʮ࡞ۀڵฃʯͱ͍͏ɻ 17

  18. Ұ౓ݟͨ΋ͷΛʮ౰ͨΓલʯͱͯ͠
 ॲཧ͢Δ೴ͷ൓ԠΛೃԽʢ͡ΎΜ͔ʣͱݴ͏ɻ
 ଏʹݴ͏ϚϯωϦԽɻ 18

  19. ʮΊΜͲ͍͘͞ʯΛϚϯωϦԽͤ͞Δͱɺ ͦΕ͕श׳ʹͳΔɻ 19 伴ʹͳΔͷ͕
 ୶૵ٿ

  20. ୶૵ٿʢͨΜͦ͏͖Ύ͏ʣͱ͸ ΍Δؾ͕ग़Δͱ͖ʹ׆ੑԽ͢Δ೴ͷ෦Ґɻ
 ҙࣝతʹ͸ಈ͔͢͜ͱ͕Ͱ͖ͳ͍͕ɺ
 ೴ͷผͷ෦ҐΛಈ͔͢͜ͱͰ׆ੑԽͰ͖Δɻ 20

  21. ୶૵ٿΛಈ͔͢ 4ͭͷ೴ͷεΠον 21

  22. 22 B I E R BODY IDEOMOTOR EXPERIENCE REWARD Body

    ମΛಈ͔͢ͱೖΔεΠονɻ ʮӡಈ໺ʯʹ͋Δɻ Reward ͝๙ඒ΍շײʹΑΓೖΔεΠονɻ ʮςάϝϯλʯʹ͋Δɻ Experience ͍ͭ΋ͱҧ͏͜ͱΛ͢ΔͱೖΔ εΠονɻʮւഅʯʹ͋Δɻ Ideomotor ͳΓ͖Δ͜ͱʹΑͬͯೖΔɹɹ εΠονɻʮલ಄༿ʯʹ͋Δɻ
  23. BODYεΠον • ຾ͯ͘Կ΋ͨ͘͠ͳ͍࣌ɺ্ཱ͕ͪͬ ͯΈΔɻ • ݩؾ͕ͳ͍࣌ɺ࡞Γস͍Λͯ͠ΈΔɻ • σβΠϯ͕༕ᓔͰख͕෇͔ͳ͍࣌ɺ
 ΠϥϨΛ্ཱͪ͛ͯΈΔɻ 23

    ମΛಈ͔͢ͱೖΔεΠονɻʮӡಈ໺ʯʹ͋Δɻ
  24. EXPERIENCEεΠον μΠΤοτͷͨΊͷϥϯχϯάΛ • ԻָΛௌ͖ͳ͕Β΍Δ • ΤϨϕʔλʔʹ৐Βͣʹ֊ஈΛ࢖͏ • ҰӺา͍ͯؼΔ 24 ͍ͭ΋ͱҧ͏͜ͱΛ͢ΔͱೖΔɻʮւഅʯʹ͋Δɻ

  25. EXPERIENCEεΠον μΠΤοτͷͨΊͷϥϯχϯάΛ • ԻָΛௌ͖ͳ͕Β΍Δ • ΤϨϕʔλʔʹ৐Βͣʹ֊ஈΛ࢖͏ • ҰӺา͍ͯؼΔ 25 ͍ͭ΋ͱҧ͏͜ͱΛ͢ΔͱೖΔεΠονɻ

    ϚϯωϦԽʹؾ͍ͮͨΒ ͪΐͬͱͨ͠ҧ͍Λҙࣝ͢Δ ͚ͩͰ΍Δؾ͕໭ͬͯ͘Δ
  26. REWARDεΠον • ೲ඼ޙͷϏʔϧɺϘʔφεͰ ཱྀߦ • ޷͖ͳԻָΛௌ͘ • ๙ΊΒΕΔɺୡ੒͢ΔͳͲͷ ܗͷͳ͍͝๙ඒ΋OK 26

    ͝๙ඒ΍շײʹΑͬͯೖΔɻʮςάϝϯλʯʹ͋Δɻ
  27. IDEOMOTORεΠον • ಌΕͷਓʹͳΓ͖Δ • ͳΓ͍ͨࣗ෼ʹͳͬͨ࢟Λ
 Πϝʔδ͢Δ 27 ͳΓ͖Δ͜ͱʹΑͬͯೖΔɻʮલ಄༿ʯʹ͋Δɻ

  28. ୶૵ٿ ʹ ΍ΔؾεΠον 28

  29. 29 ΞΠσΞΛੜΉɺ ΠϯϓοτɾΞ΢τϓοτ SECTION 03

  30. ຊΛಡΉ͜ͱ तۀΛड͚Δ͜ͱ ԻָΛௌ͘͜ͱ 30 INPUT

  31. υϦϧΛղ͘͜ͱ ϊʔτʹ·ͱΊΔ͜ͱ ༑ୡʹγΣΞ͢Δ͜ͱ 31 OUTPUT

  32. 32 INPUT OUTPUT 20% 80% Πϯϓοτ2ׂɺΞ΢τϓοτ8ׂΛҙࣝ͢Δ

  33. ޮ཰తͳΞ΢τϓοτ 33

  34. ৽ͨʹ஌ͬͨ͜ͱΛɺ 2िؒͰ3ճҎ্Ξ΢τϓοτΛ͢Δͱɺ ೴ʹهԱͱͯ͠ఆண͠΍͘͢ͳΔɻ 34

  35. ৽ͨʹ஌ͬͨ͜ͱΛɺ 2िؒͰ3ճҎ্Ξ΢τϓοτΛ͢Δͱɺ ೴ʹهԱͱͯ͠ఆண͠΍͘͢ͳΔɻ 35 ظؒ ճ਺

  36. ࣖʹͯ͠ʮ͍͍ͳʯͱࢥͬͨ৘ใ͸ɺ ୹͍ظؒͷؒʹ ͳΜΒ͔ͷߦಈΛى͜͢͜ͱͰ਎ʹͳΔɻ 36

  37. TWITTER͸௒ޮ཰త 37

  38. ࣗ෼͕޷͖ͳਓɺଚܟ͢ΔਓΛϑΥϩʔ͢Δ ࣗ෼͕޷͖ͳਓɺଚܟ͢Δਓ͕ ϑΥϩʔ͍ͯ͠ΔਓΛɺϑΥϩʔ͢Δ 38 INPUT

  39. ৮Εͨ৘ใʹؔ͢Δ ࣗ෼ͷߟ͑ΛπΠʔτ͢Δ ߟ͑Λϒϩά΍noteͳͲʹ·ͱΊͯ ͦΕΛπΠʔτ͢Δ 39 OUTPUT

  40. 40 എதΛԡ͢ɺ
 ͠ͳ΍͔ϚΠϯυηοτ SECTION 04

  41. 41 ߗ ௚ Ϛ Π ϯ υ η ο τ

    ͠ ͳ ΍ ͔ Ϛ Π ϯ υ η ο τ
  42. ߗ௚ ϚΠϯυηοτ ਓͷՁ஋͸ܾ·Γ͖ͬͨ΋ͷ ਓੜ͸ݡ͞ͷূ໌ͷ࿈ଓ ೳྗ͸ม͑Α͏͕ͳ͍ࢿ࣭ 42 ͠ͳ΍͔ ϚΠϯυηοτ ਓ͸੒௕͢Δ΋ͷ ਓੜ͸৽ֶ͍͠ͼͷ࿈ଓ

    ೳྗ͸ࣗ෼ͰҭͯΒΕΔ΋ͷ
  43. ͠ͳ΍͔ϚΠϯυηοτΛ࡞Δ 1ճͰ100఺ͷ΋ͷΛੜΈग़͞ͳͯ͘OK ϑΟʔυόοΫΛड͚ͯਫ਼౓ΛߴΊ͍ͯ͘ ଞऀ͔ΒͷࢦఠΛͻͱͭͰྑ͍ͷͰड͚ೖΕΔ 43

  44. 44 ·ͱΊ SECTION 05

  45. ྑ͍σβΠϯΛੜΈग़͢ʹ͸ɺ ৺ཧత؀ڥΛ੔͑Δ͜ͱ͕ॏཁɻ ྑ͍؀ڥΛ࡞Γग़͢ʹ͸ɺ ਓؒͷ೴ͷ࢓૊Έ΍ηΦϦʔΛ ར༻͢Δͷ͕ޮ཰తɻ 45

  46. Ϟνϕʔγϣϯ͕Լ͕ͬͨ࣌ʹͦ͜ɺ ೴ͷੑ࣭Λར༻͢Δ͜ͱͰ ࣗ෼ΛίϯτϩʔϧͰ͖Δɻ 46

  47. ೔ʑͷੜ׆ʹऔΓೖΕͯɺ ϕετͳ͋ͳͨΛσβΠϯ͠Α͏ɻ 47

  48. ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ Wataru Machishima HTTPS://WWW.FACEBOOK.COM/MACHISHIMA @WATTLAA HTTPS://NOTE.MU/WATTLAA FOLLOW ME, PLEASE!