デザイナーとうまく協働する方法

#builderscon
https://yasuhisa.com/could/article/howto-work-with-designers/

Webやアプリを世に出すにはエンジニアの力が欠かせませんが、競争が激しくユーザーの要望も高まっている現在、デザインは大きな差別化に繋がります。

同じモノ作りをする職業ですが、課題解決の取り組み方から評価の仕方まで違いがあります。その違いが誤解に繋がることもあれば、「よく分からない」と遠ざけてしまうことになります。お互いの力を合わせることでより良いプロダクトが生まれるはずですが、機会を失うことになります。趣向・感覚が違うという単純な話で片付けることはできません。

本セッションでは、エンジニアとデザイナーが協働していくためのアプローチと「相手に何かを伝える」というコミュニケーションの仕方を紹介します。

Transcript

1. CVJMEFSTDPOUPLZP
   ௕୩઒ګٱ
   ೥݄೔
   

   View Slide

2. ϑϦʔϥϯεσβΠφʔ
   اըɾ੍࡞ɾίϯαϧςΟϯά
   ϥΠλʔɾεϐʔΧʔ
   ௕୩઒ګٱ
   ϋ η Ψ ϫ Ϡ ε ώ α
   @yhassy
   

   View Slide

3. σβΠφʔ
   ࿩ͯ͠·͢ʁ
   ͱ
   

   View Slide

4. View Slide

5. A 100-Year View of User Experience
   

   View Slide

6. The DMI Design Value Scorecard
   

   View Slide

7. ʮσβΠϯܦӦ ʯએݴ
   

   View Slide

8. ʜͦΕͱ΋εςΟ
   οΩʔϊʔτ͕ม͍͑ͯΔʁ
   

   View Slide

9. σβΠϯ
   Ͱ͢ɻ
   ॏཁ
   

   View Slide

10. σβΠϯ ॏཁ
    ͲΕ͘Β͍ͷൣғΛࢦ͢ͷ͔ ୭ʹͱͬͯԿ͕ॏཁͳͷ͔
    

    View Slide

11. ྑ͍ײ͡Ͱ
    
    αοͱ࡞ͬͯɻ
    ͦ͏͡Όͳ͍ͷ!
    

    View Slide

12. σβΠϯͷղऍͷ
    ҧ͍͕ੜΉڑ཭ײ
    σβΠϯ෼͔͍ͬͯͳ͍"
    

    View Slide

13. σΟςʔϧΛ
    ࡞ΓࠐΉ
    ૣ͘࡞ͬͯ
    ໛ࡧ͢Δ
    ௐࠪʹج͍ͮͯ
    ઃܭ͢Δ
    σβΠϯ
    

    View Slide

14. ͳΔ΄Ͳ UX
    
    ϏδωεߩݙͩΑͶ
    ͦΕΑΓ
    
    ૣ͘Կ͔࡞ͬͯ
    ๻ͨͪ΋
    
    ߩݙ͍ͯ͠ΔΑ
    ͭ·Γ˓˓Ͷ
    

    View Slide

15. શମݟͯ΄͍͠ ྑ͍ٕज़Ͱ
    
    ྑ͍Ϟϊ࡞Γ͍ͨ
    Կ΍͍ͬͯΔ͔
    
    ෼͔Βͳ͍
    

    View Slide

16. View Slide

17. Τίʔνϟϯόʔݱ৅ʹؾ෇͍͍ͯͳ͍
    ౰ͨΓલͱ͍͏ઌೖ؍
    ࡯ͯ͠΄͍͠ͱ͍͏ड͚਎ͷଶ౓
    

    View Slide

18. ಉۀऀʹ఻͑Δͷ͸؆୯
    ҟۀछʹରͯ͠͸ಉ͡Α͏ʹ͸͍͔ͳ͍
    

    View Slide

19. View Slide

20. զʑ͸ྑ͍ϞϊΛ࡞Γ͍ͨͱئ͏஥ؒͰ͋Δɻ
    ͔͠͠·ͩຒΊͳͯ͘͸͍͚ͳ͍ߔ͕͋Δ
    ઃܭɾ։ൃʹܞΘΔਓҎ֎΁ͷΞϓϩʔν͕ෆ଍͍ͯ͠Δ
    

    View Slide

21. ڠಇͷͨΊʹ
    Ͱ͖Δ͜ͱ
    ݴޠԽ ໌จԽ
    

    View Slide

22. View Slide

23. Ϩγϐ
    ࡐྉ ྉཧਓ
    ྉཧ ৯ࣄ੍ݶ
    ௐཧํ๏
    

    View Slide

24. Ϩγϐ
    ࡐྉ
    ྉཧ ৯ࣄ੍ݶ
    ௐཧํ๏
    ϓϩμΫτʹ߹͏දه͔ʁ
    ӳޠ໊ΛͲ͏͢Δʁ
    Cook ?
    
    Chef ?
    
    ChefName ?
    

    View Slide

25. Ϩγϐ
    λΠτϧ
    λάϥΠϯ
    ਓ਺
    ௐཧ࣌ؒ
    ֓ཁ
    ը૾
    ४උɾػࡐ
    ࡐྉ
    खॱ
    ӫཆ৘ใ
    

    View Slide

26. Ϩγϐ
    ࡐྉ ྉཧਓ
    ϑΥϩʔ
    ࡞੒
    ௥Ճ
    ͓ؾʹೖΓ
    ఏҊ
    

    View Slide

27. ίϯςϯπϞσϧ
    υϝΠϯۦಈઃܭʹࣅ͍ͯΔ
    

    View Slide

28. ίϯςϯπϞσϧ
    ίϯςϯπͷཁૉͱؔ܎ੑΛఆٛ
    σβΠϯ
    

    View Slide

29. ίϯςϯπϞσϧ
    Ϣʔβʔߦಈ
    ʢ$5"ʣͷ೺Ѳ
    ίϯςϯπϞσϧ σβΠϯ
    

    View Slide

30. ίϯςϯπϞσϧ
    ϞσϧͱϢʔβʔΛߟྀ
    σβΠϯ
    

    View Slide

31. ݴ༿߹ΘͤͷͨΊͷϞσϦϯά
    ৘ใߏ଄ͷཧղͱڞ༗
    ιʔείʔυ͔Βݴ༿Λ߹Θ͍ͤͯ͘
    

    View Slide

32. View Slide

33. $BSE@SFDJQF
    3FDJQF1IPUP
    JDPO@QMBZ
    3FDJQF5JUMF
    JDPO@MJLF
    3FDJQF-JLF
    

    View Slide

34. CANCEL
    

    View Slide

35. Bootstrap Foundation
    Callout
    Panel
    Carousel Orbit
    Label (primary, secondary)
    Label (no primary
    

    View Slide

36. View Slide

37. ΨΠυϥΠϯʹͳ͍ݴ༿͕ߦ͖ަ͏
    ։ൃɾσβΠϯҎ֎ͷࢹ఺΋ߟྀ
    6*΍ػೳͷଊ͑ํΛڞ༗ɾֶश
    

    View Slide

38. χϡΞϯεͷ
    ڞ༗
    ྑ͍ͬͯԿʁ
    Կ͕େࣄͳͷʁ
    

    View Slide

39. ࣗݾ࣮ݱ
    ଚॏ
    ࣾձ
    ҆શ
    ਎ମతɾ৺ཧత
    

    View Slide

40. ࣗݾͷ੒௕ʹܨ͕ΔՁ஋
    ࣗ෼ͷࢥ͍௨ΓʹͰ͖͍ͯΔঢ়ଶ
    पΓ͔Βྑ͍ͱࢥΘΕΔՁ஋
    ࢖͍ଓ͚ΔՁ஋ɾҙຯ
    ͔ܽͤͳ͍Ձ஋؍
    

    View Slide

41. ۀछΛ௒͑ͨݴ༿ͷڞ༗
    ݴ༿ͷχϡΞϯεΛཧղ͢Δ৔
    νʔϜʹ͓͚Δ
    ʮྑ͍ʯ
    ͱ͸
    

    View Slide

42. ݴ༿ ݪଇ
    χϡΞϯεͷཧղ νʔϜͷڞ௨ݴޠ Ձ஋ʹج͍ͮͨධՁ
    

    View Slide

43. Ձ஋ʹج͍ͮͨධՁ
    ՝୊Λղܾ͍ͯ͠Δ͔Ͳ͏͔
    Ϣʔβʔ΁ఏڙ͢ΔՁ஋͸Կ͔
    ϓϩδΣΫτϝϯόʔ͕ೲಘͰ͖Δࢪࡦ
    

    View Slide

44. ɾɾɾɾ
    ͜ΕͲ͏Ͱ͔͢ʁ
    

    View Slide

45. ʮ͜Ε͸Ͳ͏Ͱ͔͢ʯ
    ͸ةݥ৴߸
    ηϯεɾ޷ΈɾҒ͍ਓ͕ܾΊΔ
    ޙ໭Γɺ
    ໎૸ͷݪҼʹͳΔ͜ͱ΋
    

    View Slide

46. ͖ͪΜͱ
    ໌จԽ
    σβΠφʔʹ΋
    
    ಇ͖͔͚ͯ
    

    View Slide

47. #ௐࠪͰಘͨχʔζ
    $ͦͷଞ՝୊
    %Ծઆ
    ⚖ࢦඪ
    'σβΠϯҊ
    (मਖ਼߲໨
    ▶࣍ͷΞΫγϣϯ
    ఆੑɾఆྔௐࠪͷ֓ཁ
    Ϗδωεɺ։ൃ͔Βग़ͨ՝୊
    σβΠϯ͕ղܾ͢΂͖՝୊͸Կ͔
    ,1* 69ࢦඪ
    ϝϦοτɺσϝϦοτɺϦεΫ
    ϑΟʔυόοοΫ
    ࣍ʹ΍Δ͜ͱ
    

    View Slide

48. **TTVF΁ͷϦϯΫ
    +ը໘
    ,ϢʔβʔίϯςΩετ
    -มߋͷ໨త
    ✏มߋҊ
    ϓϩδΣΫτ؅ཧͱ৘ใ࿈ܞ
    ݱঢ়ͷ೺Ѳ
    ը໘දࣔ·Ͱͷഎܠ
    σβΠϯݪଇ΍ϢʔβϏϦςΟ
    Ͳ͜Λม͑ɺͳͥม͑Δ͔
    

    View Slide

49. ՝୊ղܾ΁ٞ࿦Λγϑτͤ͞Δ
    σβΠϯͷܦҢΛه࿥͢Δ
    จॻͷఆܕԽΛ৺͕͚Δ
    

    View Slide

50. ଐਓੑΛݮΒͨ͠σβΠϯӡ༻
    σβΠϯγεςϜͷୈҰา
    ·ͣ͸৭͔Β
    

    View Slide

51. ϫʔΫϑϩʔ
    ࠓޙͷ՝୊
    

    View Slide

52. ίϯηϓτ
    ཁ݅ఆٛ
    εέον
    ϓϩτλΠϓ ςετ ϨϏϡʔ
    ϏδϡΞϧ
    σβΠϯ
    ΠϯλϥΫγϣϯ
    σβΠϯ
    Ϣʔβʔ૾ɾ՝୊ɾϓϩμΫτՁ஋ͷڞ༗Ͱ͖͍ͯΔ͔
    

    View Slide

53. ίϯηϓτ
    ཁ݅ఆٛ
    εέον
    ϓϩτλΠϓ ςετ ϨϏϡʔ
    ϏδϡΞϧ
    σβΠϯ
    ΠϯλϥΫγϣϯ
    σβΠϯ
    ϢʔεέʔεΛۀछΛ௒͑ͯڞ༗͞Ε͍ͯΔ͔
    

    View Slide

54. ίϯηϓτ
    ཁ݅ఆٛ
    εέον
    ϓϩτλΠϓ ςετ ϨϏϡʔ
    ϏδϡΞϧ
    σβΠϯ
    ΠϯλϥΫγϣϯ
    σβΠϯ
    ޿͘ΞΠσΞΛूΊΔ৔͸༻ҙ͞Ε͍ͯΔ͔ʁ
    

    View Slide

55. ίϯηϓτ
    ཁ݅ఆٛ
    εέον
    ϓϩτλΠϓ ςετ ϨϏϡʔ
    ϏδϡΞϧ
    σβΠϯ
    ΠϯλϥΫγϣϯ
    σβΠϯ
    ݕূͰ͖Δπʔϧ΍νϟωϧ͕༻ҙ͞Ε͍ͯΔ͔
    

    View Slide

56. ίϯηϓτ
    ཁ݅ఆٛ
    εέον
    ϓϩτλΠϓ ςετ ϨϏϡʔ
    ϏδϡΞϧ
    σβΠϯ
    ΠϯλϥΫγϣϯ
    σβΠϯ
    લఏʹج͍ͮͯϑΝγϦςʔγϣϯͰ͖͍ͯΔ͔
    

    View Slide

57. ίϯηϓτ
    ཁ݅ఆٛ
    εέον
    ϓϩτλΠϓ ςετ ϨϏϡʔ
    ϏδϡΞϧ
    σβΠϯ
    ΠϯλϥΫγϣϯ
    σβΠϯ
    Ͳ͏࿈ܞΛͱ͍͔ͬͯ͘
    

    View Slide

58. ͓ޓ͍͕ೖΓࠐΊΔܺؒ࡞Γ
    ஝ੵͨ͠৘ใͷ੔ཧ
    ࣗಈԽ͢ΔͨΊͷπʔϧ։ൃ
    

    View Slide

59. ݴޠԽ
    ໌จԽ
    ݴ༿ɾ΍Γํ͕গ͠
    
    ҧ͏͚ͩͰ
    
    ΍͍ͬͯΔ͜ͱ͕ಉ͜͡ͱ΋
    ݴޠڞ༗ͷͨΊʹ
    
    σβΠϯ΋
    
    υΩϡϝϯτΛపఈ
    

    View Slide

60. ௕୩઒ګٱ
    @yhassy
    mail@yasuhisa.com
    /
    

    View Slide