新しいデザインツールから学ぶ今後のデザイナーの働き方

Sketch, Adobe XD, Figma, Framer … 次々と新しいデザインツールが出てきている現在。2018 年に入ってからもその勢いは止まることがありません。なぜ今新しいデザインツールが必要なのでしょう。アプリや web のデザインプロセスにおける課題からデザインツールが何を解決しようしているのか見えてきます。

新しいデザインツールの『強み』を見ながら、今後のデザイナーに必要なスキルセットの紹介。最近、現場でも模索しているワークフローやデザインの共有方法のデモを行います。

Transcript

1. Yasuhisa Hasegawa WDF Vol.29 March 10, 2018
2. 2010೥ 9݄ Sketch 2011೥ 12݄ UXPin 2011೥ 7݄ inVision 2011೥ 7݄ Proto.io 2013೥ 5 Framer 2013೥ 4 Flinto
3. 2013೥ 5݄ Framer 2013೥ 4݄ Flinto 2013೥ 12݄ Origami 2014೥ 4݄ Marvel 2014೥ 10݄ Prott 2014೥ 10݄ Affinity Designer 2014೥ 11݄ Atomic.io 20 Pr
4. ݄ 2014೥ 4݄ Marvel 2014೥ 10݄ Prott 2014೥ 10݄ Affinity Designer 2015೥ 12݄ Figma 2014೥ 11݄ Atomic.io 2015೥ 8݄ Principle 2016೥ 3݄ Adobe Xd 2017೥ 3݄ evrybo 2017೥ Studio
7. σβΠφʔ ΤϯδχΞ σΟϨΫλʔ
8. σβΠφʔ ΤϯδχΞ 0,
   
9. σβΠφʔ ΤϯδχΞ ൈ͚͕ଟͯ͘෼͔Βͳ͍
10. σβΠφʔ ΤϯδχΞ ͜Μͳ࢓༷Ͱ͸࡞Εͳ͍ʂ
11. σβΠφʔ ΤϯδχΞ ۭؾಡΈ͖Εͳ͍ʂ
12. ύιίϯ εϚʔτϑΥϯ&λϒϨοτ Enders Analysis ੈքͷσόΠεൢച୆਺ʢສʣ 1995 1997 1999 2001 2003 2005 2007 2009 2011 2013 250 500 750 1000 1250 εϚϗ͸೔ຊͰ͸ྲྀߦΒͳ͍
15. ݻఆΩϟϯόεʹֆΛඳ͘ ʰදݱʱ πʔϧ ԿͰ΋࡞ΕΔπʔϧ͕ͩɺ ࠷దղͰ͸ͳ͍ σβΠφʔʹ͸ศར͕ͩɺ ΤϯδχΞʹ͸ෛՙ
16. @waiwai Waimarie Maata 56 Valley Farms Road Encino, CA 91316 1:00PM December 5, 2017 Interaction Meetup @dianwa1 Dian Wahyu 56 Valley Farms Road Encino, CA 91316 7:00PM November 30, 2017 Sketch Workshop Events November 18, 2017 9:41
17. @waiwai rie Maata ey Farms Road Encino, CA 91316 1:00PM mber 5, 2017 on Meetup @dianwa1 Wahyu ey Farms Road Encino, CA 91316 7:00PM mber 30, 2017 Workshop nts r 18, 2017 6*ͷঢ়ଶͷมԽ͕෼͔Βͳ͍ ݻఆαΠζͷঢ়ଶ͔͠෼͔Βͳ͍ ίϯςϯπྔͷมԽ͕෼͔Βͳ͍ ϑΥʔΧεɾϚ΢εΦʔόʔɾεΫϩʔϧ εϚϗͱσεΫτοϓͷؒ͸ʁ ໊শ͕ߦʹͳͬͨΒͦ͏͢Δͷʁ ը໘ભҠ͕෼͔Βͳ͍ ԡͨ͠ΒͲ͏ͳΔͷ͔ʁ࢖͍৺஍͸Ͳ͏ͳͷ͔ʁ
18. .BD#PPL
    1SP J1BE
    1SP 4VSGBDF
    1SP
     (BMBYZ
    4 J1IPOF
    9 J1IPOF
    
    1MVT J1IPOF
    
    J1IPOF
    4& εϚϗ޲͚ͬͯͲΕͷ͜ͱʁ
19. σβΠφʔ ΤϯδχΞ ʜ
    0,
     ྑ͍ײ͡Ͱ͓ئ͍͠·͢
     ͳΜ͔ҧ͏
20. σβΠφʔʹ͸ࡉ෦·Ͱ߆ͬͯ΄͍͠ ੩ࢭը͚ͩʹཹ·Βͣɺࡉ෦·Ͱ࡞Γ͜Ή ϊ΢ϋ΢͕૊৫ʹ஝ੵ͞Εͳ͍ ͳΜͱͳ͘Λଓ͚Δͱɺ पΓ͕εΩϧΞοϓ͠ͳ͍ ΤϯδχΞͷ͢΂͖࢓ࣄ͕ଞʹ͋Δ ύϑΥʔϚϯεɺ ΞΫηγϏϦςΟͳͲ ͓ֆඳ͖πʔϧ͸໰୊ΛҾ͖ى͜͢ σβΠϯͷʰൈ͚ʱ͕૿੍͑ͯ࡞ɾӡ༻͕೉͘͠ͳΔ ྑ͍ײ͡Ͱ͓ئ͍͠·͢
    
21. 13ࢧԉαʔϏε ற೔ͷւ֎ϝσΟΞΛूΊͯͷϓϨεΠϕϯτɺ13ಈըͷάϩʔό ϧ഑৴ɺւ֎΁ͷϦϦʔε഑৴ͳͲ̏ͭͷαʔϏεΛల։ɻ ւ֎ϦεΫ৘ใ ւ֎ࢧہ΍ఏܞ௨৴͕ࣾ഑৴ͨ͠๲େͳχϡʔε͔ΒɺϦεΫ৘ใ ΛϐοΫΞοϓ͓ͯ͠ಧ͚͠·͢ɻ QY QY
22. #df7300 #e25b00 #ed8200 #ef7e00 #ee6400
24. ը໘ͻͱͭͻͱͭͷධՁʹͳΔ ભҠ΍Ұ؏ੑͷٞ࿦ʹͳΓʹ͍͘ ߴ͍૝૾ྗΛඞཁͱ͢Δ ໌จԽ͠ͳ͍··ઌૹΓʹͳΔ໰୊͕૿͑Δ ೉͍͔͠Β΍Βͳ͍ ԿͰ΋࡞ΕΔ͕ख͕͔͔ؒΔͷͰ์ஔͯ͠͠·͏
25. ੍໿͕ͳ͞ա͗Δ
    ΫϦΤΠςΟϒπʔϧ
26. ॻମ ϒϥ΢β ճઢ Մม ಈ͖ ӡ༻ ΫϦΤΠςΟϒ
27. 8FCɾΞϓϦͷ੍໿Λཧղͨ͠ΫϦΤΠςΟϒπʔϧ
28. σβΠϯπʔϧ දݱྗΛߴΊΔ ࿈ܞྗΛߴΊΔ
29. Մม΍ঢ়ଶͷσβΠϯ͕Ͱ͖Δ ίϯϙʔωϯτͷ࡞੒ɾ࣮૷ɾӡ༻ ը໘ભҠΛ࡞࣮ͬͯػͰૢ࡞Ͱ͖Δ ίʔυ΁ͷస׵͕͠΍͍͢
32. ෳ੡͚ͩͰͳ༷͘ʑͳ৘ใΛม͑Δ͜ͱ͕Ͱ͖Δ ՄมσβΠϯʹ΋ରԠͰ͖Δ ෳ਺ͷυΩϡϝϯτͰಉ͡γϯϘϧ͕࢖͑Δ ϧʔϧʹԊͬͯ৭ɾܗΛม͑Δ͜ͱ͕Ͱ͖Δ ίϯϙʔωϯτͷ৚݅
33. -"#&- -"#&- -"#&-
37. දݱ౓ ίϥϘϨʔγϣϯ ίϯϙʔωϯτ ΠϯλϥΫγϣϯ ίʔυͱͷ࿈ܞ Ϩεϙϯγϒ
38. σβΠϯϑΝΠϧ͔Βθϩελʔτͷඇޮ཰ ࣮૷ͯ͠෼͔Δ͜ͱ΋ଟ͍ ʰਖ਼͍͠σβΠϯʱ ͕̎ͭͰ͖ͯ͠·͏ ࠓޙͷ՝୊
39. σβΠφʔ ΤϯδχΞ
40. σβΠφʔ ΤϯδχΞ
43. 4LFUDIͷ
    KTPO
    ϑΝΠϧ࿈ܞ ίʔυ͕ʰجͷσβΠϯʱʹͳΔӡ༻ github.com/brainly/html-sketchapp ΨΠυϥΠϯʹج͍ͮͨσβΠϯ໛ࡧ
44. https://airbnb.design/sketching-interfaces/
45. ·ͱΊ ݱ৔ʹ͋Δ࿈ܞͷ՝୊͸ʁ ࣮૷ͷϘτϧωοΫͰਂࠁͳ෦෼ɺ ໛ࡧͰ͖Δ෦෼Λ୳͢ ڧΈΛཧղͨ͠πʔϧબͼ ສೳ͸ͳ͍ͷ Ͱɺ ର࿩͚ͩͰ͸೉͍͠ͱ͜ΖΛղܾ͍ͯ͘͠ ੍໿Λཧղͨ͠ΫϦΤΠςΟϒ ͓ֆඳ͖͔Βଔۀͯ͠ɺXFCͷͨΊͷσβΠϯΛ
46. ௕୩઒ګٱ @yhassy mail@yasuhisa.com !