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

9eb7e7de20420d02ad289b8713be6823?s=47 Yasuhisa Hasegawa
November 10, 2017

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

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

9eb7e7de20420d02ad289b8713be6823?s=128

Yasuhisa Hasegawa

November 10, 2017
Tweet

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. اըɾઃܭ σβΠϯ ࣮૷ ݱ৔ͰσβΠφʔʹٻΊΒΕ͍ͯΔ৬Ҭ͸ʁ Ͳͷ ʮߔʯ ͕ϘτϧωοΫʹͳ͍ͬͯΔ͔ʁ ΤϯδχΞͱσβΠφʔͱͷؔ܎͸ʁڑ཭ײ͸ʁ ܾࡋϑϩʔ͸ʁ௚઀ίϛϡχέʔγϣϯ͸ͱΕΔ͔ʁ σβΠϯπʔϧΛબͿͱ͖ͷ࣭໰

  26. None
  27. ैདྷͷ࡞Γํ͕௨༻͠ͳ͘ͳ͖͍ͬͯͯΔ

  28. σβΠφʔͱ ͠ ͯੜ͖࢒Γ͚ͨΕ͹ɺ ίʔ υΛֶͿ΂͖ Wiredʢ2017ʣ

  29. None
  30. ʮ΋͠΋ʜʯΛߟ͑Δ 1 ϧʔϧʹԊͬͯ࡞Δ 2 աఔΛΦʔϓϯʹ͢Δ 3

  31. ճઢ͕஗͘ͳͬͨΒʁ ίϯςϯπͷྔ͕૿͑ͨΒʁ ޡૢ࡞͕͋ͬͨΒʁ ۓٸͷ৘ใͷܝࡌ͸ʁ ৘ใ͕଍Γͳ͍৔߹͸ʁ ը໘ͷେ͖͕͞มΘͬͨΒʁ ʮ΋͠΋ʜʯΛߟ͑Δ 1

  32. ֶशίετͷ௿Լ ૢ࡞ϛεͷ௿Լ ৴པੑ޲্ Ұ؏ੑͷ͋ΔσβΠϯ ϧʔϧʹԊͬͯ࡞Δ 2

  33. σβΠϯͷϒϥοΫϘοΫεԽΛආ͚Δ աఔΛΦʔϓϯʹ͢Δ 3

  34. None
  35. ʮ΋͠΋ʜʯΛߟ͑Δ 1

  36. ʮ΋͠΋ʜʯΛߟ͑Δ 1

  37. աఔΛΦʔϓϯʹ͢Δ 3

  38. աఔΛΦʔϓϯʹ͢Δ 3

  39. 8FCɾΞϓϦσβΠϯʹ͓͚Δ ʢࠓͷͱ͜Ζʣ ࠷దղ

  40. Sketch͕׆͖Δݱ৔ දݱྗΑΓઃܭྗ͕ॏࢹ͞ΕΔҊ݅ ಛʹΤϯδχΞͱͷ࿈ܞΛڧԽ͍ͤͨ͞ ֎෦πʔϧͱࣗ༝ʹ࿈ܞ͍ͤͨ͞ σβΠϯͷӡ༻Λ͍͖͍ͯͨ͠

  41. 8FCɾΞϓϦσβΠϯʹ͓͚Δ ʢࠓͷͱ͜Ζʣ ࠷దղ ͦΖͦΖ৭؅ཧͪΌΜͱ΍͍ͬͯͩ͘͞ ʜͱࢥͬͨΒ4LFUDIͰ࣮૷͞Ε·͢Ͷ

  42. ࠓޙͷσβΠϯπʔϧͷඞਢ߲໨ σβΠϯϓϩηεʹ͋ΔߔΛຒΊΔͨΊͷػೳ ը໘ɾ6*ཁૉͷભҠΛ࡞Δ͜ͱ͕Ͱ͖Δ Մม͚ͩͰͳ͘ɺ ঢ়ଶʹԠͨ͡ઃܭ͕Ͱ͖Δ σβΠϯΞηοτͷ؅ཧɾڞ༗ɾಉظ͕༰қʹͰ͖Δ اըɾઃܭ σβΠϯ ࣮૷ Կ͔͠ΒͷܗͰίʔυʹॻ͖ग़͢͜ͱ͕Ͱ͖Δ

    ͤΊͯ̍ͭཉ͍͠
  43. ௕୩઒ګٱ @yhassy mail@yasuhisa.com !