エンジニアであるわたしがデザインを知り乗りこなすまで / a story of an engineer and design

DevLOVE「エンジニアがデザインに関われること」資料
https://devlove.doorkeeper.jp/events/69310

Transcript

1. ΤϯδχΞͰ͋ΔΘ͕ͨ͠
   σβΠϯΛ஌Γ
   ৐Γ͜ͳ͢·Ͱ
   
   ΤϯδχΞ͕σβΠϯʹؔΘΕΔ͜ͱ
   
2. )$%/FUೝఆ
   ਓؒத৺ઃܭઐ໳Ո
   ࠷ۙδόϯγΠͱϙʔΧʔʹ໨֮Ίͨ
   ώϩϛπ
   !IJSPNJUTVVVVV
   
3. 'SPOUFOE
   %FWFMPQNFOU
   6*
   %FTJHO
   )$% 69
   ͍·͜͜
   4*FSతͳ͓࢓ࣄ΍8FCडୗ΍ͬͯΔձࣾʹ͍·͢
   ࣗࣾडୗ
   ৽نࣄۀ
   Ϣʔβʔ
   ςετ
   3FBDU
   3FEVY
   6*ઃܭ
   
   
   
4. ࠓ೔͸ͳ͢͜ͱ
   •  σβΠϯΛ஌Δ·͑ͱ͋ͱͰมΘͬͨ͜ͱ
   •  มΘΔ͖͔͚ͬ
   •  େ੾ʹ͍ͯ͠Δ͜ͱ
   before after
5. 
   ͦΕ·ͰͷΘͨ͠
   
6. ͦͷ·͑ʹʜΤϯδχΞʹͳΔ͖͔͚ͬ
   ΠϯλʔωοπͰΘ͘Θ͘͢Δ΋ͷͭ͘ΔͶΜ
   引用元：h"ps://a"labo.com/blog/web/mixi_with_google_account/
7. ʰΤϯδχΞϦϯά஌Βͳ͍ͱ ֆʹ͔͍ͨṷ͡Όͳ͍ ʱ
   
   
   
   
   
   
   
8. ΤϯδχΞΩϟϦΞͷ͸͡·Γ
   6.-
   ୯ମςετ
   FUDʜ
   +BWBͰͷόοΫΤϯυͷڭҭΛܦͯϑϩϯτ΁
   
9. Θ͕ͨؔ͠Θ͍ͬͯͨͻͱͨͪ
   اը
   σβΠφʔ
   σΟϨΫλʔ
   ϑϩϯτΤϯυ
   ΤϯδχΞ
   Biz Design Dev ϚʔΫΞοϓ
   ΤϯδχΞ
   )5.-$44
   ϑϩϯτΤϯυ
   ΤϯδχΞ +4
   
10. ཁ݅ͷ੔ཧʙ࣮ݱੑΛߟྀͨ͠6*ઃܭ
    ։ൃ
    ϓϩδΣΫτ΁ͷؔΘΓํ
    γφϦΦ
    ࡞੒
    ϑϩϯτ
    ࣮૷
    ɾཁ݅ͷ੔ཧ
    ʢۀ຿ϑϩʔͳͲʣ
    ɾϑϩϯτٕज़ͷ3ˍ%
    ɾ)5.-$44+4࣮૷
    6*ઃܭ
    σβΠϯ
    ɾ৘ใઃܭ
    ɾޮ཰తͳ࣮૷Λ
    ɹߟྀͨ͠6*ઃܭ
    
    ։ൃݱ৔΁
    ड͚౉͠
    اը͔Βͷ
    ։ൃ૬ஊ
    
11. ͔Μ͕͍͑ͯͨ͜ͱ
    6*ઃܭ
    •  Ͳ͏͍͏ྲྀΕͰ࢖͏͔
    •  Ϣʔβʔͷ৘ใ֓೦
    ϑϩϯτ࣮૷
    •  ͍͔ʹ࣮૷͢Δ͔
    •  ͦͷٕज़͔ͩΒ࣮ͦ͜ݱͰ͖Δ͜ͱ͸ͳ͍͔
    •  ύϑΥʔϚϯεΛ͍͔ʹ্͛Δ͔
    •  ͍͔ʹ࢖͍΍͍͢ϥΠϒϥϦΛఏڙ͢Δ͔
    
12. ஫ྗ͍ͯͨ͜͠ͱ
      པ·Εͨཁ݅ͷൣғͰ࢖͍қ͍6*Λઃܭ͢Δ
      ػೳΛ͍͔ʹ࣮ݱ͢Δ͔
    
13. ͱ͋Δ$޲͚ͷ৽نαʔϏεͰʜ
    ཁ݅ʹԊͬͯઃܭͨ͠ʂ
    ظؒ΋༧ࢉ΋େ͖ͳϒϨͳ͠ʂ
    ։ൃϓϩδΣΫτ੒ޭʂ
    
14. ऩࢧ͕൐Θͣ
    ̍೥ͰαʔϏεΛ؃औΔ͜ͱʹʜ
    
    
    
15. πʔϧΛຒΊͯ΋શ વͬ͘͠Γ͜ͳ͍ʜ
    ڝ߹ʹࣅͨγφϦΦ ΍6*ʹͳΔʜ
    ԾઆΛग़͢ͷʹ࣌ؒ ͕͔͔Δʜ
    69ؔ࿈πʔϧ͸
    ࢖͍͚ͬͯͨΕͲʜ
    
16. πʔϧʹৼΓճ͞Ε͚ͯͨͩͩʜ
    
    ར༻͞Εͳͯ͘ڏ͍͠ʜ
    Ձ஋͋Δػೳ
    6*ʹۙͮ͘ʹ͸Ͳ͏͢Ε͹ʜ
    
17. ਓؒத৺σβΠϯͷ໳Λ͙͘Δ
    ਓؒத৺ઃܭͷܭը
    ར༻ঢ়گͷ೺Ѳͱ
    ໌ࣔ
    ϢʔβͷཁٻΛຬͨ ͢ղܾࡦͷ࡞੒
    Ϣʔβͷ
    ཁٻࣄ߲ͷ໌ࣔ
    ཁٻࣄ߲ʹର͢Δ
    ઃܭͷධՁ
    ղܾࡦ͕Ϣʔβʔͷ
    ཁٻࣄ߲Λຬͨ͢
    ௐ ࠪ
    ෼ ੳ
    ධ Ձ
    ࡞ ੒
    Ϣʔβʔ΍ ϢʔβΛͱ Γ·͘ঢ়گ ʹ͍ͭͯ஌ Δ
    σβΠϯ΍ ઃܭҊͷଥ ౰ੑΛධՁ ͢Δ
    Ϣʔβʔͷ χʔζ΍ຊ ࣭తͳཁٻ Λ஌Δ
    ΞΠσΞΛ ߟ͑ͯɺγ εςϜ΍Ϟ ϊʹ͢Δ
    Human  Centered  Design  (HCD)   ʮ*40
    ʯͰࠃࡍن֨Խ͞Ε͍ͯΔ
    ΠϯλϥΫςΟϒγεςϜͷਓؒத৺ઃܭʹؔ͢Δن֨
    
18. ߏ଄ԽγφϦΦ๏
    
19. Ϣʔβʔ
    ৘ใ
    Ϗδωε
    ৘ใ
    ϓϩδΣΫτͷ
    ໨ඪ
    Ϣʔβʔͷ
    ຊ࣭త
    ཁٻՁ஋
    Ϗδωεͷ
    ఏڙՁ஋
    όϦϡʔ
    γφϦΦ
    ΞΫςΟ ϏςΟ
    γφϦΦ
    69
    ϑϩʔ
    ΢ΥʔΫ εϧʔ
    ධՁ
    
    ΞΫςΟ ϯά
    Ξ΢τ
    )$%ͷαΠΫϧΛ
    Ұ௨Γճͯ͠Έͨ
    
20. શ෦ɺܨ͕ͬͯΔΜͩʂ
    Ͳ͏ͯ͠࡞͍ͬͯΔ͔
    ͕෼͔ͬͨʂ
    ϖϧιφ
    γφϦΦ
    ৘ใϚοϓ
    ࿦ཧϞσϧ
    6*ઃܭ
    Ϣʔβʔςετ
    
21. খ͘͞͸͡Ί࣮ͯ੷Λͭ͘Δ
    ࣗࣾࣄۀͰউखʹϢʔβʔώΞϦϯάͯ͠ɺ
    উखʹϢʔβϏϦςΟςετ͠͸͡Ίͨ
    
    
      ؆୯ͳϢʔβϏϦ ςΟςετͳΒ
    ͏ͪͰ΍Ε·͢Αʂ
    ฉ͖ࣖʜ
    Ҋ݅૬ஊதʜ
    
22. ͦͨ͠ΒҊ݅ʹ΋ݺ͹Ε࢝Ίͨ
    ৽نαʔϏεͷ
    ϢʔβϏϦςΟςετͱड༰ੑௐࠪ
      ࢖͍ʹ͍͘ʂ
    ࠓͷΞϓϦ͔Β
    ৐Γ׵͑͸͠ͳ͍Ͷ
    ͋ΘΘʜ
    
23. ͦͷػೳ͕ɺ
    ͳͥඞཁͱ͞ΕͯΔ͔
    ෼͔ͬͨʂʂ
    
    
    
    
    
24. ؔ܎ऀͷҙ͕ࣝมΘͬͨ
    •  ػೳΛ٧ΊࠐΈ͗ͯ͢Ձ஋͕఻ΘΒͳ͍ʜ
    •  ίΞʹয఺Λ౰ͯͨํ޲मਖ਼΁
    ؔ܎ऀΛר͖ࠐΊΔʂ
    ͜Εͩʂʂ
      ΑΓίΞʹػೳΛߜ Βͳ͖ΌͩΊͩ
      Θͨ͠΋
    ͦ͏͓΋͏ʂ
    
25. 
    σβΠϯͷޫ͕
    ݟ͑ͨ͋ͱͷΘͨ͠
    
26. ͍·ͷϓϩδΣΫτΛͱΓ·͘ਓͨͪ
    ࣄۀ੹೚ऀ
    ϓϩμΫτΦʔφʔ
    εΫϥϜϚελʔ
    σβΠφʔ
    ϑϩϯτΤϯυ
    ΤϯδχΞ +4
    όοΫΤϯυ
    ΤϯδχΞ
    ϚʔΫΞοϓ
    ΤϯδχΞ
    )5.-$44
    σΟϨΫλʔ
    Πϯϑϥ
    ΤϯδχΞ
    69%
    Biz Design Dev
27. ϓϩδΣΫτ΁ͷؔΘΓํ
    Ϣʔβʔ
    ௐࠪ
    γφϦΦ
    ࡞੒
    ϑϩϯτ
    ࣮૷
    New ɾαʔϏεͱͷग़ձ͍
    ɹ͔Β6*ར༻·Ͱ
    ɾ8FCҎ֎ͷ઀఺
    Ϣʔβʔ
    ݕূ
    New ɾϢʔβϏϦςΟ
    ɾड༰ੑ
    
    ϑϩϯταϙʔτ
    ɾελΠϧΨΠυ
    ɾ3FBDU3FEVY࣮૷
    ɾΞʔΩςΫνϟ੔උ
    6*ઃܭ
    σβΠϯ
    σβΠϯαϙʔτ
    ɾ৘ใઃܭ
    
28. ͳʹ͕มΘ͔ͬͨ
      ϢʔβʔΛத৺ʹ࿩Λ͢Δ
      ͙͢ʹ࣮૷ͤͣݕূΛڬΉ
      ػೳͷҙຯ
    ༏ઌ౓Λҙࣝ͢Δ
    
29. ϢʔβΛத৺ʹ࿩Λ͢Δ
    •  ओ؍ͰϖϧιφɾγφϦΦΛ࡞Βͳ͍
    •  ࣄۀଆͷ৘ใ '4݁ՌͳͲ Λ࢖ͬͯ࡞Δ
    •  ޻਺͕ͳ͍৔߹͸ࣾ಺ͰϦΫϧʔςΟϯά
    •  5XJUUFSͰͻͨ͢ΒωοτετʔΩϯάͱ͔
    •  ౎౓ϖϧιφͷ࿩Λ࣋ͪग़͢
    •  ࿩Λ͢Δͱ͖ʹৗʹ࣋ͪา͘
    •  ʮ͜ͷͻͱͩͬͨΒʙʯͰ࿩͢
    
30. ϖϧιφ͕ͻͱΓา͖͢ΔΑ͏ʹͳͬͨ
    ಉ͡΋ͷΛޠΕΔ༧ײʜʂ
    ࣄۀ੹೚ऀ
      ͋ɺͻΖΈͭʂ
    ͋ͷࢿྉɺ౴ਃࢿྉ ʹ΋࢖ͬͱ͍ͨʂ
      ͳΜͱʂ
    εΫϥϜϚελʔ
      ࠓͷ6*ɺ
    ͋ͷਓͨͪʹ͸
    ෳࡶ͗͢͡Όͳ͍ʁ
      ͔ͨ͠ʹʂ
    
31. ͙̎͢ʹ࣮૷ͤͣݕূΛڬΉ
    •  νϟϯε͕͋Ε͹ϢʔβϏϦςΟςετ
    •  ϦϦʔεޙͷখ͞ͳݕূ͔ΒऔΓೖΕΔ
    •  ؔ܎ऀΛר͖ࠐΉ
    •  ࣄۀଆɺ։ൃଆɺσβΠφʔͳͲ
    •  ۭؾײΛײͯ͡΋Β͏
    
32. ը໘ΠϝʔδϨϕϧ͔ΒͰ΋
    ݕূͰ͖ΔΑ͏ʹͳͬͨ
    ࣄۀ੹೚ऀ
      ΍ͬͺϢʔβʔʹ
    ग़ͯ͠Έͳ͍ͱμϝ ͩΘ
    εΫϥϜϚελʔ
      ͣͬͱ࡞ͬͯΔͱ
    ͳʹ͕͍͍͔Θ͔Μ ͳ͘ͳͬͪΌ͏Ͷ
      ͔࣍Βݕূ
    ΍Γ·͠ΐʂ
    ΋͸΍͜Ε·Ͱࢲ ͸Կނࢥ͍ࠐΈઃ ܭͰϦϦʔεͰ͖ ͨͷ͔ʜ
    
33. 
    ػೳͷҙຯɺ༏ઌ౓Λҙࣝ͢Δ
    •  ػೳͱγφϦΦʹҰ؏ੑ͕͋Δ͔
    •  ࢥ͍͖ͭػೳ΍੝Γ͗͢ʹͳ͍ͬͯͳ͍͔
    •  ϝΠϯγφϦΦΛ࠷খݶʹอͭ
    •  Ձ஋ΛఏڙͰ͖Δ࠷খݶͷػೳ͸Կ͔
    •  αϒػೳ͸͋ͱͷϑΣʔζʹ࣋ͪӽ͠
    •  αʔϏεͷࠜװͷ෦෼ʹྗΛ஫͙
    
34. ϢʔβʔʹՁ஋Λಧ͚ΔͨΊʹ
    ࠷খݶͷ։ൃ͔Β࢝ΊΔΑ͏ʹͳͬͨ
    ϓϩμΫτΦʔφʔ
      ͍͍͜ͱߟ͑ͨʂ
    ͜Ε΋͋ͬͨ΄͏ ͕ઈରศརʂ
    εΫϥϜϚελʔ
      ΋ͬͱγϯϓϧʹ
    ͍͍ͯ͠ͱ
    ࢥ͏Μ͚ͩͲͳʙ
      ϦϦʔεͯ͠
    ൓ԠΛݟͯʹ ͠·͠ΐ͏
    
35.       ߟ͑ΔΑ͏ʹͳͬͨ͜ͱ
    ΤϯδχΞ
    σβΠφʔͱ
    ࿩࣌͢ʹେ੾ʹ͍ͯ͠Δ͜ͱ
    ΤϯδχΞͱͯ͠ͷมԽ
    
36. ΤϯδχΞͱͯ͠
    ߟ͑ΔΑ͏ʹͳͬͨࣄ
    •  ͦͷػೳ
    6*͸ϢʔβʔʹϚον͍ͯ͠Δ͔
    •  ։ൃίετͱඞཁੑͷόϥϯε
    •  ॳظʹͦͷϦον͞͸༗༻ʁ࠷খݶͷ6*͸ʁ
    •  Ձ஋Λఏڙ͢ΔͨΊʹͳʹ͕Ͱ͖Δʁ
    •  6*తʹൈ͚͍ͯΔ෦෼͸ͳ͍͔ʁ
    •  &NQUZ
    ঢ়ଶҧ͍ʜ
    •  κʔχϯάͱίϯϙʔωϯτͷҰ؏ੑ
    •  κʔχϯά
    ʙ
    $44ઃܭ
    ʙ
    3FBDUίϯϙʔωϯτ
    
37. ΤϯδχΞ
    σβΠφʔͱ࿩͢ ͱ͖ʹେ੾ʹ͍ͯ͠Δ͜ͱ
    •  ͳͥͦͷػೳʹՁ஋͕͋Δ͔ɺ
    ɹϖϧιφɾγφϦΦΛϕʔεʹ఻͑Δ
    •  ͋͘·Ͱ΋ઐ໳ྖҬʹ͸౿Έࠐ·ͣɺ
    ɹϙΠϯτΛ఻͑Ұॹʹߟ͑Δ
         
38. ͱ͋ΔΤϯδχΞ͔Βͷ૬ஊ
    有効期限 カード番号 　 ϑϩϯτΤϯυ
    ΤϯδχΞ
      ༗ޮظݶͷʮ೥ʯ
    ʹܻೖΕͦ͏͔ͩ Β6*ม͍͑ͨ
    Ͳ͏͠Α͏ʁ
    
39. Θ͕ͨ͠఻͑ͨ͜ͱ
    •  ΫϨδοτΧʔυ൪߸Λೖྗ͢Δͱ͖ɺ
    ɹͲ͏͍͏ߦಈΛͱ͍ͬͯΔʁ
    •  ΫϨδοτΧʔυ൪߸ͬͯهԱ͍ͯ͠Δ΋ͷʁ
      ͲΜͳঢ়گͰ ࢖͏͔ߟ͑ͯ ΈΑ͏
    
40. γφϦΦʹԊͬͯ΍ͬͯΈΔ
    ʰ͋ͳͨ͸ࠓɺ8FCαΠτͰങ͍෺Λ͍ͯ͠·͢ɻ
    ࢧ෷͍ʹ͸ΫϨδοτΧʔυΛ࢖͏͜ͱʹ͠·ͨ͠ɻ ͍ͭ΋΍ΔΑ͏ʹ࣮ࡍʹ΍ͬͯΈ͍ͯͩ͘͞ʱ
    
    
    
    
    
    
41. ͦͷ6*Ͱ͋Δ΂͖ཧ༝Λߟ͑Δ
    •  Χʔυͷฒͼॱ௨ΓʹೖྗͰ͖Ε͹ೝ஌ෛՙ͸௿͍ʁ
    •  ܻʹ͢Δ͜ͱͰٯʹΘ͔Γʹͯ͘͘͠͠·͏͔΋
    •  ܻͷαΠζʹͯ͠จࣈҎ্ೖྗͰ͖ͳ͚Ε͹ؾ͚ͮ Δ͔΋͠Εͳ͍
    •  ܻܻͰͲͪΒ͕੢ྐྵ͔໎ͬͯ͠·͏͜ͱ͕໰୊
    •  ϑϩϯτΤϯυͷػೳ࣮૷Ͱ๷͛Δ͜ͱ͕͋Δ
      ࡒ෍͔Βग़͠ ͯݟͳ͕Βೖ ྗ͠·͢Ͷɻ
    
42. ར༻γʔϯΛݩʹಉ͡໨ઢͰ࿩͕Ͱ͖Δ
    ࢦఠͷཧෆਚ͕͞ݮΔ
    ΤϯδχΞ͔Β΋ػೳΛఏҊͰ͖Δ
    
43. ͖ΐ͏ͷ
    ·ͱΊ
    
44. after before ؔ܎ऀɿଟ
    
    ϢʔβʔΛத৺ʹ࿩Λ͢Δ
    
    ͙͢ʹ࣮૷ͤͣݕূΛڬΉ
    
    ػೳͷҙຯ
    ༏ઌ౓Λߟ͑Δ
    ؔ܎ऀɿগ
    
    པ·Εͨཁ݅ͷൣғͰ
    ɹ
    ΑΓΑ͍6*Λઃܭ͢Δ
    
    ػೳΛ͍͔ʹ࣮ݱ͢Δ͔
    
45. ؔ܎ऀͷଟ͍ϓϩδΣΫτ͔ͩΒͦ͜
    ކ෇͚໾ʹͳΔ
       
46. Θ͕ͨ͠ඃͬͯΔ๧ࢠ͸
    ΤϯδχΞͩͱࢥ͏͠ɺ
    )$%͸୭͕ؔΘͬͯ΋͍͍΋ͷͩͱࢥ͏
      ίʔυॻ͍ͯ ಈ͘ͷ
    ͨͷ͍͠ʂ
      lσβΠϯz
    ͬͯ୭ͷ΋ͷʁ
    
47. design と DESIGN ͦ͏͍͑͹ʜ
    
48. b`
    ӳޠͰݴ͏৔߹ͷখจ ࣈͷEFTJHO͸ද໘Λඒ͠ ͘͢Δࣄɺରͯ͠େจࣈ ͷ%&4*(/͸ɺੈͷதͷ ༷ʑͳࣄฑΛσβΠϯత ؍఺͔Βվળ͢ΔҝͷՁ ஋Λදݱ͍ͯ͠Δ``
    引用元：h"p://blog.btrax.com/jp/2016/01/02/design-­‐trends2016/
49. ֤ઐ໳ՈͷύϫʔΛ
    ಉ͡ํ޲ʹ޲͚ͯ͏·͘ग़ͤΔΑ͏ʹ
    EFTJHO
    ઐ໳ྖҬ͸ઐ໳Ոͷ΋ͷɺ৵ུͤͣิ͍͋͏
    
    %&4*(/
    ΈΜͳͷ΋ͷɺڞ༗͋͠͏
    
    
    
      Αʔ͠ɺ
    ͓͍͍͠΋Μ
    ͭͬͨ͘Δ͔Βͳʂ
    
50. ͦͨ͠Βɺ࡞ۀऀ͡Όͳͯ͘
    νʔϜʹͳΕΔ
    
51. Θͨ͠͸ɺΈΜͳͰ
    ͍͍΋ͷ͕ͭ͘Γ͍ͨ
    5IBOL
    ZPV
    
    ΤϯδχΞ͕σβΠϯʹؔΘΕΔ͜ͱ