2018年に向けたツールの選び方

Webサイトやアプリのデザインは、平面上で描かれるデザインとは大きく異なります。従来のデザインツールでは難しかった課題を解決していることから、ここ数年 Sketch が『次のデザインツール』として選ばれています。なかなか埋まることのない、設計・ビジュアル・コードの狭間をどのように埋めていけば良いのでしょうか。ツールとの向き合い方を理解することで、現場に合うツールの使い方・組み合わせ方のヒントを紹介します。

Transcript

1. ௕୩઒ګٱ
2. 2010೥ 9݄ Sketch 2011೥ 12݄ UXPin 2011೥ 7݄ inVision 2011೥ 7݄ Proto.io 2013೥ 5݄ Framer 2013೥ 4݄ Flinto 2013೥ 12݄ Origami 2014೥ 4݄ Marvel 2014೥ 10݄ Prott 2014೥ 10݄ Affinity Designer 2015೥ 1 Figma 2014೥ 11݄ Atomic.io 2015೥ 8݄ Principle 2016 Ado
3. 2011೥ 12݄ UXPin 2011೥ 7݄ inVision 2011೥ 7݄ Proto.io 2013೥ 5݄ Framer 2013೥ 4݄ Flinto 2013೥ 12݄ Origami 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
4. ຊ೔ͷΞδΣϯμ σβΠϯπʔϧ͕ղܾ͠Α͏ͱ͍ͯ͠Δ՝୊ σβΠφʔʹඞཁͳߟ͑ํ σβΠϯπʔϧͷબͼํ
5. σβΠϯϓϩηε͸ͿͬյΕͯΔ
6. اըɾઃܭ σβΠϯ ࣮૷ σδλϧϓϩμΫτͷϓϩηε
7. اըɾઃܭ σβΠϯ ࣮૷
8. اըɾઃܭ σβΠϯ ࣮૷ ϓϩηεͷߔ લߦఔͰ࡞ΒΕͨ੒Ռ෺͕ྲྀ༻Ͱ͖ͳ͍
   θϩ͔Β࡞Γ௚͠ʹͳΔ͜ͱ͕ଟ͍
9. اըɾઃܭ σβΠϯ ࣮૷ ϫΠϠʔϑϨʔϜ΍اըॻΛجʹσβΠϯ
   ˞ಡղ͠ͳ͕ΒσβΠϯ
10. اըɾઃܭ σβΠϯ ࣮૷ ࢦ͕ࣔগͳ͍ͱσβΠφʔ΁ͷෛՙ͸ߴ·Δ ࡯ͯ͠࡞Δ෦෼͕ଟ͘ͳΔʢमਖ਼΋૿͑Δʣ
11. اըɾઃܭ σβΠϯ ࣮૷ ϏδϡΞϧσβΠϯΛجʹ࣮૷
    ˞ಡղ͠ͳ͕Β࣮૷
12. اըɾઃܭ σβΠϯ ࣮૷ ࢦࣔ΍ઃܭ͕଍Γͳ͍σβΠϯ
    ࡯ͯ͠࡞Δ෦෼͕ଟ͘ͳΔʢमਖ਼΋૿͑Δʣ
13. ϓϩηεͷՍ͚ڮ اըɾઃܭ σβΠϯ ࣮૷ ࣍ߦఔ΁ܨ͛ΔͨΊͷࢿྉ΍πʔϧ
    νʔϜؒͷڑ཭͕͋Δͱෛՙ͕ߴ͘ͳΔ
14. اըɾઃܭ σβΠϯ ࣮૷ ܾࡋऀͱ৮઀࿩͕Ͱ͖ͳ͍
    ੍࡞νʔϜ͕հೖͰ͖ͳ͍ ಉ͡؀ڥͰ࢓ࣄΛ͍ͯ͠ͳ͍ ߦ͖དྷͷ͋Δ໛ࡧ͕Ͱ͖ͳ͍
15. اըɾઃܭ σβΠϯ ࣮૷ ҙࢥૄ௨ͷͨΊͷࢿྉ΍πʔϧ͕૿͑Δ
    ਐߦίετ͕૿͑ɺޙ໭Γ΋೉͘͠ͳΔ
16. اըɾઃܭ σβΠϯ ࣮૷ ϏδϡΞϧσβΠϯΛ͢Δ͚ͩͰ͋Ε͹࠷ڧ
17. اըɾઃܭ σβΠϯ ࣮૷ ࣮૷ͱͷ࿈ܞ͕೉͍͠
    ༷ʑͳঢ়ଶͷσβΠϯʹ޲͍͍ͯͳ͍
18. اըɾઃܭ σβΠϯ ࣮૷ σβΠϯ͢ΔͨΊͷ৘ใ͕଍Γͳ͍৔߹͕͋Δ
    ఻͑ΒΕͳ͍ͱ͜Ζ͕ଟ͍ͷͰࢿྉ͕૿͑Δ
19. اըɾઃܭ σβΠϯ ࣮૷ ϓϩηεʹ͋ΔߔΛͳ͘͢͜ͱ͕Ͱ͖Δ γʔϜϨεʹҙࢥૄ௨͕Ͱ͖Δ ࠓඞཁͱ͞ΕΔσβΠϯπʔϧ
20. σβΠϯπʔϧ දݱྗΛߴΊΔ ࿈ܞྗΛߴΊΔ
21. اըɾઃܭ σβΠϯ ࣮૷ Adobe XD ૣ͘ࢹ֮Խͯ͠ҙࢥૄ௨Λߦ͏ ը໘ભҠ·Ͱݟͤͯૢ࡞ײΛڞ༗͢Δ
22. اըɾઃܭ σβΠϯ ࣮૷ Figma ϓϩηεͷಁ໌ԽʹΑΔҙݟަ׵ Ұ؏ੑͷ͋Δ6*Ξηοτͷ੍࡞ͱ؅ཧ
23. اըɾઃܭ σβΠϯ ࣮૷ Principle ײ֮తͩͬͨಈ͖΍ૢ࡞Λࢹ֮ԽͰ͖Δ આ໌͕೉͔ͬͨ͠ಈ͖Λ਺ࣈͰ఻͑Δ͜ͱ͕Ͱ͖Δ
24. اըɾઃܭ σβΠϯ ࣮૷ Sketch ༷ʑͳαʔϏεͱͷ࿈ܞͰ৘ใڞ༗͢Δ Ұ؏ੑͷ͋Δ6*ઃܭΛ࣮ͯ͠૷͠΍͘͢͢Δ
25. اըɾઃܭ σβΠϯ ࣮૷ ݱ৔ͰσβΠφʔʹٻΊΒΕ͍ͯΔ৬Ҭ͸ʁ Ͳͷ ʮߔʯ ͕ϘτϧωοΫʹͳ͍ͬͯΔ͔ʁ ΤϯδχΞͱσβΠφʔͱͷؔ܎͸ʁڑ཭ײ͸ʁ ܾࡋϑϩʔ͸ʁ௚઀ίϛϡχέʔγϣϯ͸ͱΕΔ͔ʁ σβΠϯπʔϧΛબͿͱ͖ͷ࣭໰
27. ैདྷͷ࡞Γํ͕௨༻͠ͳ͘ͳ͖͍ͬͯͯΔ
28. σβΠφʔͱ ͠ ͯੜ͖࢒Γ͚ͨΕ͹ɺ ίʔ υΛֶͿ΂͖ Wiredʢ2017ʣ
30. ʮ΋͠΋
    ʜʯΛߟ͑Δ 1 ϧʔϧʹԊͬͯ࡞Δ 2 աఔΛΦʔϓϯʹ͢Δ 3
31. ճઢ͕஗͘ͳͬͨΒʁ ίϯςϯπͷྔ͕૿͑ͨΒʁ ޡૢ࡞͕͋ͬͨΒʁ ۓٸͷ৘ใͷܝࡌ͸ʁ ৘ใ͕଍Γͳ͍৔߹͸ʁ ը໘ͷେ͖͕͞มΘͬͨΒʁ ʮ΋͠΋
    ʜʯΛߟ͑Δ 1
32. ֶशίετͷ௿Լ ૢ࡞ϛεͷ௿Լ ৴པੑ޲্ Ұ؏ੑͷ͋ΔσβΠϯ ϧʔϧʹԊͬͯ࡞Δ 2
33. σβΠϯͷϒϥοΫϘοΫεԽΛආ͚Δ աఔΛΦʔϓϯʹ͢Δ 3
35. ʮ΋͠΋
    ʜʯΛߟ͑Δ 1
36. ʮ΋͠΋
    ʜʯΛߟ͑Δ 1
37. աఔΛΦʔϓϯʹ͢Δ 3
38. աఔΛΦʔϓϯʹ͢Δ 3
39. 8FCɾΞϓϦσβΠϯʹ͓͚Δ ʢࠓͷͱ͜Ζʣ ࠷దղ
40. Sketch͕׆͖Δݱ৔ දݱྗΑΓઃܭྗ͕ॏࢹ͞ΕΔҊ݅ ಛʹΤϯδχΞͱͷ࿈ܞΛڧԽ͍ͤͨ͞ ֎෦πʔϧͱࣗ༝ʹ࿈ܞ͍ͤͨ͞ σβΠϯͷӡ༻Λ͍͖͍ͯͨ͠
41. 8FCɾΞϓϦσβΠϯʹ͓͚Δ ʢࠓͷͱ͜Ζʣ ࠷దղ ͦΖͦΖ৭؅ཧͪΌΜͱ΍͍ͬͯͩ͘͞ ʜ
    ͱࢥͬͨΒ
    4LFUDI
    
    Ͱ࣮૷͞Ε·͢Ͷ
42. ࠓޙͷσβΠϯπʔϧͷඞਢ߲໨ σβΠϯϓϩηεʹ͋ΔߔΛຒΊΔͨΊͷػೳ ը໘ɾ6*ཁૉͷભҠΛ࡞Δ͜ͱ͕Ͱ͖Δ Մม͚ͩͰͳ͘ɺ ঢ়ଶʹԠͨ͡ઃܭ͕Ͱ͖Δ σβΠϯΞηοτͷ؅ཧɾڞ༗ɾಉظ͕༰қʹͰ͖Δ اըɾઃܭ σβΠϯ ࣮૷ Կ͔͠ΒͷܗͰίʔυʹॻ͖ग़͢͜ͱ͕Ͱ͖Δ ͤΊͯ̍ͭཉ͍͠
43. ௕୩઒ګٱ @yhassy mail@yasuhisa.com !