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

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

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

21a5bc627ca0f66c8e3bccbd18aefc44?s=128

Fukazawa Kojiro

March 18, 2017
Tweet

Transcript

  1. ৽πʔϧ΍αʔϏε͔Βߟ͑Δɺ ໌೔͔ΒͷσβΠϯϑϩʔ FRONTEND CONFERENCE 2017 2017.3.18 ਂ୔޾࣏࿠

  2. ͜Μʹͪ͸ɺ ਂ୔޾࣏࿠Ͱ͢ ΢ΣϒαΠτɾΞϓϦ ίϫʔΩϯάεϖʔε ϑϦʔϥϯε

  3. ࠓ೔͓͸ͳ͢͠Δ͜ͱ ϓϩτλΠϐϯάΛ͸͡ΊΑ͏ νʔϜͰڞ༗͢Δࢿݯͱͯ͠ͷσβΠϯ 1 2

  4. ϓϩτλΠϐϯάΛ͸͡ΊΑ͏ Let’s start prototyping!

  5. ϓϩτλΠϐϯάɺ ΍ͬͯ·͔͢ ʁ

  6. άϥϑΟ οΫπʔϧͰͷ ϓϩτλΠϐϯά؀ڥ͕੔͖ͬͯͨ ͭ͘Δखؒ͸ ʮϫΠϠʔϑϨʔϜ Ћʯ

  7. ͸͡Ίͯͷํʹ͸"EPCF9% खܰʹϓϩτλΠϐϯάΛମݧͰ͖Δ

  8. ͸͡Ίͯͷํʹ͸"EPCF9% खܰʹϓϩτλΠϐϯάΛମݧͰ͖Δ ͬ͞ͱϫΠϠʔϑϨʔϛϯά

  9. ͸͡Ίͯͷํʹ͸"EPCF9% खܰʹϓϩτλΠϐϯάΛମݧͰ͖Δ ϦϯΫཁૉͱը໘Λͭͳ͛Δ

  10. ͙͢ʹϖʔδભҠ͕ ࢼͤΔ

  11. ڞ༗ϘλϯͰϓϩτλΠϓΛ ଈެ։ɾڞ༗

  12. σβΠϯσʔλΛϓϩτλΠϓԽ 4LFUDI *O7JTJPO

  13. *O7JTJPOʜϓϩτλΠϓ࡞੒πʔϧ

  14. *O7JTJPOʜϓϩτλΠϓ࡞੒πʔϧ ϓϩδΣΫτͳΒແྉ

  15. *O7JTJPOʜϓϩτλΠϓ࡞੒πʔϧ ը૾Λಡ·ͤͯϖʔδ࡞੒ 5IF4BNQMFJNBHFJTEFTJHOFECZ.BIJTB%ZBO%JQUZB

  16. *O7JTJPOʜϓϩτλΠϓ࡞੒πʔϧ ๛෋ͳը໘ભҠΤϑΣΫτ 5IF4BNQMFJNBHFJTEFTJHOFECZ.BIJTB%ZBO%JQUZB

  17. *O7JTJPOʜϓϩτλΠϓ࡞੒πʔϧ ϥΠϒڞ༗Ͱखॻ͖ϝϞ·Ͱ 5IF4BNQMFJNBHFJTEFTJHOFECZ.BIJTB%ZBO%JQUZB

  18. *O7JTJPOʜϓϩτλΠϓ࡞੒πʔϧ 4LFUDIͱ࿈ܞ͢Δͱߋʹศར 5IF4BNQMFJNBHFJTEFTJHOFECZ.BIJTB%ZBO%JQUZB

  19. $3"'5ʜ*O7JTJPO੡4LFUDIϓϥάΠϯ

  20. $3"'5ʜ*O7JTJPO੡4LFUDIϓϥάΠϯ ϘλϯҰൃͰσβΠϯσʔλΛ*O7JTJPO΁ Ξοϓϩʔυɾಉظ αϯϓϧίϯςϯπͷૠೖ खॻ͖ίϝϯτ ཁૉͷϦϐʔτ σβΠϯΨΠυͷࣗಈੜ੒ʢޙड़͠·͢ʣ 1 2 3

    4 5
  21. ϥΫʹͳͬͨϙΠϯτ

  22. ཁٻΛͱʹ͔͘଎͘ΧλνʹͰ͖Δ 1IPUPDSFEJU$IBJSNBO@.FPXWJB7JTVBMIVOU$$#:/$4"

  23. ཁٻΛͱʹ͔͘଎͘ΧλνʹͰ͖Δ ཁٻΛͱʹ͔͘଎͘ΧλνʹͰ͖Δ Ұ൪େมͳͱ͜Ζ͸ཁ๬͔ΒجຊઃܭΛ ͱΓ͋͑ͣܗʹ͢Δͱ͜ ׂ͘Β͍ͷ׬੒౓ͰݟͤΔ ͸͖ͬΓ͠ͳ͍࢓༷΋ద౰ʹԾઆཱͯͯ ͭͬͪ͘Ό͏ 1 2 3

  24. 1IPUPDSFEJUHPMECFSHWJB7JTVBM)VOU$$#:4" ϛʔςΟϯάͷՁ஋͕ഒ૿

  25. 1IPUPDSFEJUHPMECFSHWJB7JTVBM)VOU$$#:4" ϛʔςΟϯάͷՁ஋͕ഒ૿ ϛʔςΟϯάͷՁ஋͕ഒ૿ σβΠϯσʔλͷڞ༗͕ͱͯ΋؆୯ मਖ਼ɾࢥ͍͖ͭ΋͙͢ʹ൓ө ϛʔςΟϯάͷؒʹ͋Β͔ͨऴΘΔ ϑΟʔυόοΫରԠ σβΠϯͷաఔ͕ڞ༗͞Ε͍ͯΔͷͰ εςʔΫϗϧμʔͷೲಘײ͕ߴ͍ 1

    2 3 4
  26. 1IPUPDSFEJUHPMECFSHWJB7JTVBM)VOU$$#:4" ࣮૷ऀ͕ൺֱత҆৺ͯ͠ணखͰ͖Δ

  27. 1IPUPDSFEJUHPMECFSHWJB7JTVBM)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 8IFSFBSFZPV -BCFM -BCFM -BCFM CVUUPO CVUUPO

    CVUUPO CVUUPOT
  37. γϯϘϧʹؚ·ΕΔςΩετΛ্ॻ͖ &WFSZXIFSF 5IFSF )FSF 8IFSFBSFZPV CVUUPOT

  38. ωετ͞ΕͨγϯϘϧͷࠩ͠ସ͑ ɾ࡟আ 5IFSF )FSF 8IFSFBSFZPV CVUUPOT

  39. "UPNJD%FTJHO ෼ׂෆՄೳͳࡉ͔͍ίϯϙʔωϯτʢݪࢠʣ͔Β σβΠϯ͠ɺ͜ΕΒΛ૊Έ߹Θ͍ͤͯ͘͜ͱͰϖʔδ σβΠϯΛ૊৫͍ͯ͘͠σβΠϯͷߟ͑ํ ݪࢠ "UPNT ෼ࢠ .PMFDVMFT ༗ػମ 0SHBOJTN

    ςϯϓϨʔτ 5FNQMBUF ϖʔδ 1BHF
  40. ཁૉΛσβΠϯσʔλ্Ͱଟ૚ʹ૊৫

  41. ༻ҙ͞Εͨύʔπͷ૊Έ߹ΘͤͰ ৽نϖʔδσβΠϯ͕Ͱ͖Δ )FBEJOH )FBEJOH )FBEJOH )FBEJOH )FBEJOH )FBEJOH -PSFNJQTVNEPMPSTJUBNFU 

    DPOTFDUFUVSBEJQJTDJOHFMJU TFE EPFJVTNPEUFNQPSJODJEJEVOUVU MBCPSFFUEPMPSFNBHOBBMJRVB 6UFOJNBENJOJNWFOJBN RVJT OPTUSVEFYFSDJUBUJPOVMMBNDP -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