新ツールやサービスから考える、明日からのデザインフロー

Sketch・InVisionをはじめとする新しいツールが生み出すデザインの流れについて、「プロトタイピング」「チームで共有する資源としてのデザイン」というふたつの視点からお話します。FRONTEND CONFERENCE 2017でのセッションです。

Transcript

1. ৽πʔϧ΍αʔϏε͔Βߟ͑Δɺ ໌೔͔ΒͷσβΠϯϑϩʔ FRONTEND CONFERENCE 2017 2017.3.18 ਂ୔
   ޾࣏࿠
2. ͜Μʹͪ͸ɺ ਂ୔޾࣏࿠Ͱ͢ ΢ΣϒαΠτɾΞϓϦ ίϫʔΩϯάεϖʔε ϑϦʔϥϯε
3. ࠓ೔͓͸ͳ͢͠Δ͜ͱ ϓϩτλΠϐϯάΛ͸͡ΊΑ͏ νʔϜͰڞ༗͢Δࢿݯͱͯ͠ͷσβΠϯ 1 2
4. ϓϩτλΠϐϯάΛ͸͡ΊΑ͏ Let’s start prototyping!
5. ϓϩτλΠϐϯάɺ ΍ͬͯ·͔͢ ʁ
6. άϥϑΟ οΫπʔϧͰͷ ϓϩτλΠϐϯά؀ڥ͕੔͖ͬͯͨ ͭ͘Δखؒ͸ ʮϫΠϠʔϑϨʔϜ Ћʯ
7. ͸͡Ίͯͷํʹ͸"EPCF
   9% खܰʹϓϩτλΠϐϯάΛମݧͰ͖Δ
8. ͸͡Ίͯͷํʹ͸"EPCF
   9% खܰʹϓϩτλΠϐϯάΛମݧͰ͖Δ ͬ͞ͱϫΠϠʔϑϨʔϛϯά
9. ͸͡Ίͯͷํʹ͸"EPCF
   9% खܰʹϓϩτλΠϐϯάΛମݧͰ͖Δ ϦϯΫཁૉͱը໘Λͭͳ͛Δ
10. ͙͢ʹϖʔδભҠ͕ ࢼͤΔ
11. ڞ༗ϘλϯͰϓϩτλΠϓΛ ଈެ։ɾڞ༗
12. σβΠϯσʔλΛϓϩτλΠϓԽ 4LFUDI
    
    *O7JTJPO
13. *O7JTJPOʜϓϩτλΠϓ࡞੒πʔϧ
14. *O7JTJPOʜϓϩτλΠϓ࡞੒πʔϧ ϓϩδΣΫτͳΒແྉ
15. *O7JTJPOʜϓϩτλΠϓ࡞੒πʔϧ ը૾Λಡ·ͤͯϖʔδ࡞੒ 5IF
    4BNQMF
    JNBHF
    JT
    EFTJHOFE
    CZ
    .BIJTB
    %ZBO
    %JQUZB
16. *O7JTJPOʜϓϩτλΠϓ࡞੒πʔϧ ๛෋ͳը໘ભҠΤϑΣΫτ 5IF
    4BNQMF
    JNBHF
    JT
    EFTJHOFE
    CZ
    .BIJTB
    %ZBO
    %JQUZB
17. *O7JTJPOʜϓϩτλΠϓ࡞੒πʔϧ ϥΠϒڞ༗Ͱखॻ͖ϝϞ·Ͱ 5IF
    4BNQMF
    JNBHF
    JT
    EFTJHOFE
    CZ
    .BIJTB
    %ZBO
    %JQUZB
18. *O7JTJPOʜϓϩτλΠϓ࡞੒πʔϧ 4LFUDIͱ࿈ܞ͢Δͱߋʹศར 5IF
    4BNQMF
    JNBHF
    JT
    EFTJHOFE
    CZ
    .BIJTB
    %ZBO
    %JQUZB
19. $3"'5ʜ*O7JTJPO੡4LFUDIϓϥάΠϯ
20. $3"'5ʜ*O7JTJPO੡4LFUDIϓϥάΠϯ ϘλϯҰൃͰσβΠϯσʔλΛ*O7JTJPO΁ Ξοϓϩʔυɾಉظ αϯϓϧίϯςϯπͷૠೖ खॻ͖ίϝϯτ ཁૉͷϦϐʔτ σβΠϯΨΠυͷࣗಈੜ੒ʢޙड़͠·͢ʣ 1 2 3 4 5
21. ϥΫʹͳͬͨϙΠϯτ
22. ཁٻΛͱʹ͔͘଎͘ΧλνʹͰ͖Δ 1IPUP
    DSFEJU
    $IBJSNBO@.FPX
    WJB
    7JTVBM
    IVOU
    
    
    $$
    #:/$4"
23. ཁٻΛͱʹ͔͘଎͘ΧλνʹͰ͖Δ ཁٻΛͱʹ͔͘଎͘ΧλνʹͰ͖Δ Ұ൪େมͳͱ͜Ζ͸ཁ๬͔ΒجຊઃܭΛ ͱΓ͋͑ͣܗʹ͢Δͱ͜ ׂ͘Β͍ͷ׬੒౓ͰݟͤΔ ͸͖ͬΓ͠ͳ͍࢓༷΋ద౰ʹԾઆཱͯͯ ͭͬͪ͘Ό͏ 1 2 3
24. 1IPUP
    DSFEJU
    HPMECFSH
    WJB
    7JTVBM)VOU
    
    
    $$
    #:4" ϛʔςΟϯάͷՁ஋͕ഒ૿
25. 1IPUP
    DSFEJU
    HPMECFSH
    WJB
    7JTVBM)VOU
    
    
    $$
    #:4" ϛʔςΟϯάͷՁ஋͕ഒ૿ ϛʔςΟϯάͷՁ஋͕ഒ૿ σβΠϯσʔλͷڞ༗͕ͱͯ΋؆୯ मਖ਼ɾࢥ͍͖ͭ΋͙͢ʹ൓ө ϛʔςΟϯάͷؒʹ͋Β͔ͨऴΘΔ ϑΟʔυόοΫରԠ σβΠϯͷաఔ͕ڞ༗͞Ε͍ͯΔͷͰ εςʔΫϗϧμʔͷೲಘײ͕ߴ͍ 1 2 3 4
26. 1IPUP
    DSFEJU
    HPMECFSH
    WJB
    7JTVBM)VOU
    
    
    $$
    #:4" ࣮૷ऀ͕ൺֱత҆৺ͯ͠ணखͰ͖Δ
27. 1IPUP
    DSFEJU
    HPMECFSH
    WJB
    7JTVBM)VOU
    
    
    $$
    #:4" ࣮૷ऀ͕ૣΊʹ҆৺ͯ͠ணखͰ͖Δ ࣮૷ऀ͕ൺֱత҆৺ͯ͠ணखͰ͖Δ ಈ͔ͤΔ͔ΒɺΈΜͳͰૣظʹ6*ͷΞϥ΍ ໃ६Λ͋ͿΓग़͢͜ͱ͕Ͱ͖Δ ໃ६͕ͳ͍͜ͱΛ֬ೝͰ͖ͯͨΒɺ࢓༷ʹ ٙ೦Λ๊͔ͣʹػೳ࣮૷ʹूதͰ͖Δ 1 2
28. ίϛϡχέʔγϣϯΛ׆ੑԽ͢Δ σβΠϯπʔϧΑΓ͵͖ ΄͔ʹ΋ͨ͘͞Μ͋Γ·͚͢ΕͲ
29. 1SPUU άϥϑΟΧϧͰඒ͍͠6*ɾը໘ભҠਤͷࣗಈॻ͖ग़͠΋
30. 'JHNB ΦϯϥΠϯͷσβΠϯπʔϧɻෳ਺ਓʹΑΔσβΠϯσʔλͷಉ࣌ฤू
31. 1SJODJQMF ࡉ͔͍ΞχϝʔγϣϯΛ੍࡞Ͱ͖ΔɻϞʔγϣϯσβΠϯͷϓϩτλΠϓʹ
32. νʔϜͰڞ༗͢Δ ࢿݯͱͯ͠ͷσβΠϯ Design as a shared resource
33. 4LFUDIʹΑΔ σβΠϯཁૉͷ࠶ར༻
34. γϯϘϧ ϨΠϠʔελΠϧ ςΩετελΠϧ 4LFUDIʹ͸͍͔ͭ͘ͷ σβΠϯͷ࠶ར༻๏͕͋Δ
35. ৽ػೳ γϯϘϧͷωετͱΦʔόʔϥΠυ
36. γϯϘϧͷதʹγϯϘϧΛೖΕΔ -BCFM -BCFM -BCFM 8IFSF
    BSF
    ZPV -BCFM -BCFM -BCFM CVUUPO CVUUPO CVUUPO CVUUPOT
37. γϯϘϧʹؚ·ΕΔςΩετΛ্ॻ͖ &WFSZXIFSF 5IFSF )FSF 8IFSF
    BSF
    ZPV CVUUPOT
38. ωετ͞ΕͨγϯϘϧͷࠩ͠ସ͑ ɾ࡟আ 5IFSF )FSF 8IFSF
    BSF
    ZPV CVUUPOT
39. "UPNJD
    %FTJHO ෼ׂෆՄೳͳࡉ͔͍ίϯϙʔωϯτʢݪࢠʣ͔Β σβΠϯ͠ɺ͜ΕΒΛ૊Έ߹Θ͍ͤͯ͘͜ͱͰϖʔδ σβΠϯΛ૊৫͍ͯ͘͠σβΠϯͷߟ͑ํ ݪࢠ "UPNT ෼ࢠ .PMFDVMFT ༗ػମ 0SHBOJTN ςϯϓϨʔτ 5FNQMBUF ϖʔδ 1BHF
40. ཁૉΛσβΠϯσʔλ্Ͱଟ૚ʹ૊৫
41. ༻ҙ͞Εͨύʔπͷ૊Έ߹ΘͤͰ ৽نϖʔδσβΠϯ͕Ͱ͖Δ )FBEJOH )FBEJOH )FBEJOH )FBEJOH )FBEJOH )FBEJOH -PSFN
    JQTVN
    EPMPS
    TJU
    BNFU
    DPOTFDUFUVS
    BEJQJTDJOH
    FMJU
    TFE
    EP
    FJVTNPE
    UFNQPS
    JODJEJEVOU
    VU
    MBCPSF
    FU
    EPMPSF
    NBHOB
    BMJRVB
    6U
    FOJN
    BE
    NJOJN
    WFOJBN
    RVJT
    OPTUSVE
    FYFSDJUBUJPO
    VMMBNDP -BCFM -BCFM -BCFM -BCFM -BCFM -BCFM
42. σβΠϯσʔλ͔ΒͷΨΠυੜ੒
43. $44͔Β࡞ΔελΠϧΨΠυ͸͋͘·Ͱ ࣮૷ऀʹΑΔ࣮૷๏ͷڞ༗ͷͨΊͷࢿྉ σΟϨΫλʔɾσβΠφʔ͔Β࣮૷ऀʹ ελΠϧΨΠυΛࣔͤΔɾߋ৽Ͱ͖Δ 1 2
44. $3"'5ͷϥΠϒϥϦ ελΠϧΨΠυʢTUZMFTʣϖʔ δΛࣗಈੜ੒ 4LFUDIσʔλʹؚ·ΕΔ৭ɾ ϑΥϯτɾςΩετελΠϧΛ ࣗಈͰݕग़ɾϦετΞοϓ ελΠϧΨΠυ͔ΒҰׅஔ׵ *O7JTJPO্ʹڞ༗
45. *O7JTJPO ΠϯεϖΫτϞʔυ $3"'5ͰΞοϓϩʔυͨ͠ 4LFUDIσʔλΛ*O7JTJPO্Ͱ ղੳ ֤ը໘Λϒϥ΢βͰදࣔͭ͠ ͭɺίʔσΟϯάʹ໾ཱ͍ͭΖ ͍Ζͳ৘ใ͕ࢀরͰ͖Δ Ξηοτͷॻ͖ग़͠ʹ΋ରԠ
46. σβΠϯΨΠυͰϥΫʹͳͬͨ͜ͱ ࣮૷ऀ΁ͷࢦ͕ࣔ໌շʹͳΔ 4LFUDIΛ͍࣋ͬͯͳ͍࣮૷ऀʹ΋؆୯ʹ σʔλΛৄ͘͠ݟͯ΋Β͑Δ ڞ༗͕؆୯ɻ࠷৽ͷ৘ใ͕ϘλϯҰൃͰ 1 2 3
47. ࣮ࡍʹࢼͯ͠Έͯͷ՝୊ Challenges for the future
48. ϑϩʔͷ޲͖ ɾෆ޲͖͸͋Δ
49. ϑϩʔͷ޲͖ɾෆ޲͖͸͋Δ ੵۃతʹίϛϡχέʔγϣϯͰ͖Δ؀ڥ͕ ඞਢɻఆྫϛʔςΟϯάͳͲੵۃతʹ ࿩͠߹͏ػձΛ ΢ΥʔλʔϑΥʔϧࣜͷϑϩʔΛ൱ఆ͢Δ ΋ͷͰ͸ͳ͍ɻݸਓతʹ͸ΞϓϦ։ൃʹ͸ ޲͍͍ͯΔͱࢥ͏ɻ 1 2
50. ԾઆݕূΛ͍ͭ·Ͱଓ͚Δ͔
51. ԾઆݕূΛ͍ͭ·Ͱଓ͚Δ͔ ཧ૝ܗΛ͍ͭ·Ͱ΋௥͍ٻΊ͍ͯͯ͸ऴΘ Βͳ͍ ࡞͍ͬͯΔ΋ͷͷຊ࣭తͳՁ஋ΛݟͭΊ ΔɾίΞʹͳΔ΋ͷͱͦ͏Ͱͳ͍΋ͷΛબ ผͯ͠औࣺબ୒Λ͢Δඞཁ͕͋Δ 1 2
52. Ͳ͏ݟੵΔͷ͔
53. ։ൃظؒͱҰϲ݄ʢ͋Δ͍͸Ұिؒʣ͋ͨ ΓͷඞཁύϑΥʔϚϯε͔ΒݟੵֹΛࢉఆ ͢Δඞཁ͕͋Δ ։ൃظؒɾ༧ࢉ͕͔ͭΈʹ͘͘ͳΔ͓ͦΕ ΋͋Δ 1 2 Ͳ͏ݟੵΔͷ͔
54. ͍͞͝ʹ Afterword
55. ·ͩ·ͩ͋Γ·͢ ϓϩτλΠϐϯάπʔϧ
56. ͜ͷεϥΠυ΋࣮͸4LFUDI੡Ͱͨ͠ γϯϘϧͳͲ͞ΘΓʹ͖͍ͯͩ͘͞
57. ͜ͷεϥΠυ΋4LFUDI੡Ͱͨ͠ γϯϘϧͳͲ͞ΘΓʹ͖͍ͯͩ͘͞ ͋Γ͕ͱ͏͍͟͝·ͨ͠ ʂ !XJUDI@EPLUPS