デザインを共有するための言語化の取り組み

#html5j
#html5j_e

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

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

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

Transcript

1. )5.-$POGFSFODF
   ௕୩઒ګٱ
   ೥݄೔
   

   View Slide

2. ͳΜ͔
   σβΠϯͬͯ
   ॏཁͦ͏Ͱ͢Ͷ
   

   View Slide

3. View Slide

4. A 100-Year View of User Experience
   

   View Slide

5. The DMI Design Value Scorecard
   

   View Slide

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

   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. ύϑΥʔϚϯε
    
    ΞΫηγϏϦςΟ
    
    Φʔ
    ϓϯ Web ॏཁʂ
    ͱʹ͔͘
    
    ૣ͘Կ͔࡞ͬͯ
    Ͱɺ
    Ṷ͔Δͷʁ
    ΋ͬͱ
    
    େࣄͳ͜ͱ͋Δ
    

    View Slide

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

    View Slide

17. View Slide

18. Τίʔνϟϯόʔݱ৅ʹؾ෇͍͍ͯͳ͍
    ಉۀऀײ֮ͷίϛϡχέʔγϣϯ
    զʑͷਖ਼͍͠͸ʰ͋Δࢹ఺ʱʹա͗ͳ͍
    

    View Slide

19. զʑ͸ྑ͍ϞϊΛ࡞Γ͍ͨͱئ͏஥ؒͰ͋Δɻ
    ͔͠͠·ͩຒΊͳͯ͘͸͍͚ͳ͍ߔ͕͋Δ
    ҟۀछͷํͱର࿩͢ΔͨΊͷΞϓϩʔν͕ෆ଍͍ͯ͠Δ
    

    View Slide

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

    View Slide

21. View Slide

22. CANCEL
    

    View Slide

23. Bootstrap Foundation
    

    View Slide

24. Bootstrap Foundation
    Panel Callout
    Carousel Orbit
    Navbar Top Bar
    Popover Tooltip
    

    View Slide

25. /BWCBSͲ͏͠Α͏Ͷ͐
    #PPTUSBQ೿
    ʜͲ͜ʁ
    'PVOEBUJPO೿
    

    View Slide

26. MBCFMͲ͏͠Α͏Ͷ͐
    'PVOEBUJPO೿
    )5.-ͷ͜ͱ͔ͳʁ
    ϑϩϯτΤϯυ
    ˞#PPUTUSBQͰʮ#BEHFʯʹͳΓ·ͨ͠
    

    View Slide

27. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

39. View Slide

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

    View Slide

41. #F9D5D5
    3JWFSTJEF 3JZBEI
    1.4:1 15.5:1
    #F08600
    4BO"OUPOJP 4FBUUMF
    2.6:1 8.1:1
    5BJQFJ
    3.4:1
    5SPOEIFJN
    8.3:1
    #E02F2F
    8BSTBX ;BSBHP[B
    4.6:1 4.6:1
    #F5F5F5
    -BT7FHBT -F²O
    1.1:1 19.3:1
    #DDDDDD
    -ZPO .JMBO
    1.4:1 15.5:1
    #B6B6B6
    /BUBM /PSXJDI
    2:1 10.4:1
    #737373
    0TBLB 0TMP
    4.7:1 4.4:1
    #2D2D2D
    1BSJT 1PSUMBOE
    13.8:1 1.5:1
    #E7E7E7
    1SBHVF 1SFUPSJB
    1.2:1 17:1
    "NTUFSEBN "VDLMBOE
    10.9:1 1.9:1
    #CCE4F7
    #JMCBP #SJTCBOF
    1.3:1 16:1
    #0077D9 #0069BF #005BA6 #003866 #002A4D #001C33
    #VEBQFTU $PQFOIBHFO %FOWFS %VCMJO &EJOCVSHI 'SBOLGVSU )BOH[IPV )ZEFSBCBE *OEJBOBQPMJT +BDLTPO ,SBL²X -BIPSF
    4.5:1 5.8:1 3.8:1 6.9:1 3:1 12:1 1.8:1 14.6:1 1.4:1 17.3:1 1.2:1
    4.6:1
    

    View Slide

42. ໌Δ͍৭ʹόϥπΩ͕͋Δ ໌Δ͍৭ͷ࠼౓͕௿Ί ҉͍৭΋ؚΊͯൺֱతόϥϯε͕ྑ͍
    

    View Slide

43. View Slide

44. View Slide

45. View Slide

46. ෳ਺ਓ͕σβΠϯΛ৮ΕΔ࢓૊Έ࡞Γ
    ෦඼͚ͩͰͳ͘ߟ͑ํ΋
    ·ͣ͸৭͔ΒγεςϜԽ
    

    View Slide

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

    View Slide

48. ௕୩઒ګٱ
    @yhassy
    mail@yasuhisa.com
    *
    

    View Slide