Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Fukazawa Kojiro

March 18, 2017
Tweet

More Decks by Fukazawa Kojiro

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. ཁٻΛͱʹ͔͘଎͘ΧλνʹͰ͖Δ
    [email protected]$$#:/$4"

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. 1IPUPDSFEJUHPMECFSHWJB7JTVBM)VOU$$#:4"
    ࣮૷ऀ͕ૣΊʹ҆৺ͯ͠ணखͰ͖Δ
    ࣮૷ऀ͕ൺֱత҆৺ͯ͠ணखͰ͖Δ
    ಈ͔ͤΔ͔ΒɺΈΜͳͰૣظʹ6*ͷΞϥ΍
    ໃ६Λ͋ͿΓग़͢͜ͱ͕Ͱ͖Δ
    ໃ६͕ͳ͍͜ͱΛ֬ೝͰ͖ͯͨΒɺ࢓༷ʹ
    ٙ೦Λ๊͔ͣʹػೳ࣮૷ʹूதͰ͖Δ
    1
    2

    View full-size slide

  28. ίϛϡχέʔγϣϯΛ׆ੑԽ͢Δ
    σβΠϯπʔϧΑΓ͵͖
    ΄͔ʹ΋ͨ͘͞Μ͋Γ·͚͢ΕͲ

    View full-size slide

  29. 1SPUU
    άϥϑΟΧϧͰඒ͍͠6*ɾը໘ભҠਤͷࣗಈॻ͖ग़͠΋

    View full-size slide

  30. 'JHNB
    ΦϯϥΠϯͷσβΠϯπʔϧɻෳ਺ਓʹΑΔσβΠϯσʔλͷಉ࣌ฤू

    View full-size slide

  31. 1SJODJQMF
    ࡉ͔͍ΞχϝʔγϣϯΛ੍࡞Ͱ͖ΔɻϞʔγϣϯσβΠϯͷϓϩτλΠϓʹ

    View full-size slide

  32. νʔϜͰڞ༗͢Δ
    ࢿݯͱͯ͠ͷσβΠϯ
    Design as a shared resource

    View full-size slide

  33. 4LFUDIʹΑΔ
    σβΠϯཁૉͷ࠶ར༻

    View full-size slide

  34. γϯϘϧ ϨΠϠʔελΠϧ ςΩετελΠϧ
    4LFUDIʹ͸͍͔ͭ͘ͷ
    σβΠϯͷ࠶ར༻๏͕͋Δ

    View full-size slide

  35. ৽ػೳ
    γϯϘϧͷωετͱΦʔόʔϥΠυ

    View full-size slide

  36. γϯϘϧͷதʹγϯϘϧΛೖΕΔ
    -BCFM
    -BCFM
    -BCFM
    8IFSFBSFZPV
    -BCFM
    -BCFM
    -BCFM
    CVUUPO
    CVUUPO
    CVUUPO
    CVUUPOT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. ཁૉΛσβΠϯσʔλ্Ͱଟ૚ʹ૊৫

    View full-size slide

  41. ༻ҙ͞Εͨύʔπͷ૊Έ߹ΘͤͰ
    ৽نϖʔδσβΠϯ͕Ͱ͖Δ
    )FBEJOH
    )FBEJOH
    )FBEJOH
    )FBEJOH
    )FBEJOH
    )FBEJOH
    -PSFNJQTVNEPMPSTJUBNFU
    DPOTFDUFUVSBEJQJTDJOHFMJU TFE
    EPFJVTNPEUFNQPSJODJEJEVOUVU
    MBCPSFFUEPMPSFNBHOBBMJRVB
    6UFOJNBENJOJNWFOJBN RVJT
    OPTUSVEFYFSDJUBUJPOVMMBNDP
    -BCFM -BCFM -BCFM
    -BCFM -BCFM -BCFM

    View full-size slide

  42. σβΠϯσʔλ͔ΒͷΨΠυੜ੒

    View full-size slide

  43. $44͔Β࡞ΔελΠϧΨΠυ͸͋͘·Ͱ
    ࣮૷ऀʹΑΔ࣮૷๏ͷڞ༗ͷͨΊͷࢿྉ
    σΟϨΫλʔɾσβΠφʔ͔Β࣮૷ऀʹ
    ελΠϧΨΠυΛࣔͤΔɾߋ৽Ͱ͖Δ
    1
    2

    View full-size slide

  44. $3"'5ͷϥΠϒϥϦ
    ελΠϧΨΠυʢTUZMFTʣϖʔ
    δΛࣗಈੜ੒
    4LFUDIσʔλʹؚ·ΕΔ৭ɾ
    ϑΥϯτɾςΩετελΠϧΛ
    ࣗಈͰݕग़ɾϦετΞοϓ
    ελΠϧΨΠυ͔ΒҰׅஔ׵
    *O7JTJPO্ʹڞ༗

    View full-size slide

  45. *O7JTJPO
    ΠϯεϖΫτϞʔυ
    $3"'5ͰΞοϓϩʔυͨ͠
    4LFUDIσʔλΛ*O7JTJPO্Ͱ
    ղੳ
    ֤ը໘Λϒϥ΢βͰදࣔͭ͠
    ͭɺίʔσΟϯάʹ໾ཱ͍ͭΖ
    ͍Ζͳ৘ใ͕ࢀরͰ͖Δ
    Ξηοτͷॻ͖ग़͠ʹ΋ରԠ

    View full-size slide

  46. σβΠϯΨΠυͰϥΫʹͳͬͨ͜ͱ
    ࣮૷ऀ΁ͷࢦ͕ࣔ໌շʹͳΔ
    4LFUDIΛ͍࣋ͬͯͳ͍࣮૷ऀʹ΋؆୯ʹ
    σʔλΛৄ͘͠ݟͯ΋Β͑Δ
    ڞ༗͕؆୯ɻ࠷৽ͷ৘ใ͕ϘλϯҰൃͰ
    1
    2
    3

    View full-size slide

  47. ࣮ࡍʹࢼͯ͠Έͯͷ՝୊
    Challenges for the future

    View full-size slide

  48. ϑϩʔͷ޲͖
    ɾෆ޲͖͸͋Δ

    View full-size slide

  49. ϑϩʔͷ޲͖ɾෆ޲͖͸͋Δ
    ੵۃతʹίϛϡχέʔγϣϯͰ͖Δ؀ڥ͕
    ඞਢɻఆྫϛʔςΟϯάͳͲੵۃతʹ
    ࿩͠߹͏ػձΛ
    ΢ΥʔλʔϑΥʔϧࣜͷϑϩʔΛ൱ఆ͢Δ
    ΋ͷͰ͸ͳ͍ɻݸਓతʹ͸ΞϓϦ։ൃʹ͸
    ޲͍͍ͯΔͱࢥ͏ɻ
    1
    2

    View full-size slide

  50. ԾઆݕূΛ͍ͭ·Ͱଓ͚Δ͔

    View full-size slide

  51. ԾઆݕূΛ͍ͭ·Ͱଓ͚Δ͔
    ཧ૝ܗΛ͍ͭ·Ͱ΋௥͍ٻΊ͍ͯͯ͸ऴΘ
    Βͳ͍
    ࡞͍ͬͯΔ΋ͷͷຊ࣭తͳՁ஋ΛݟͭΊ
    ΔɾίΞʹͳΔ΋ͷͱͦ͏Ͱͳ͍΋ͷΛબ
    ผͯ͠औࣺબ୒Λ͢Δඞཁ͕͋Δ
    1
    2

    View full-size slide

  52. Ͳ͏ݟੵΔͷ͔

    View full-size slide

  53. ։ൃظؒͱҰϲ݄ʢ͋Δ͍͸Ұिؒʣ͋ͨ
    ΓͷඞཁύϑΥʔϚϯε͔ΒݟੵֹΛࢉఆ
    ͢Δඞཁ͕͋Δ
    ։ൃظؒɾ༧ࢉ͕͔ͭΈʹ͘͘ͳΔ͓ͦΕ
    ΋͋Δ
    1
    2
    Ͳ͏ݟੵΔͷ͔

    View full-size slide

  54. ͍͞͝ʹ
    Afterword

    View full-size slide

  55. ·ͩ·ͩ͋Γ·͢
    ϓϩτλΠϐϯάπʔϧ

    View full-size slide

  56. ͜ͷεϥΠυ΋࣮͸4LFUDI੡Ͱͨ͠
    γϯϘϧͳͲ͞ΘΓʹ͖͍ͯͩ͘͞

    View full-size slide

  57. ͜ͷεϥΠυ΋4LFUDI੡Ͱͨ͠
    γϯϘϧͳͲ͞ΘΓʹ͖͍ͯͩ͘͞
    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ʂ
    !XJUDI@EPLUPS

    View full-size slide