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

by Yasuhisa Hasegawa

Slide 1

Slide 1 text

௕୩઒ګٱ

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ຊ೔ͷΞδΣϯμ σβΠϯπʔϧ͕ղܾ͠Α͏ͱ͍ͯ͠Δ՝୊ σβΠφʔʹඞཁͳߟ͑ํ σβΠϯπʔϧͷબͼํ

Slide 5

Slide 5 text

σβΠϯϓϩηε͸ͿͬյΕͯΔ

Slide 6

Slide 6 text

اըɾઃܭ σβΠϯ ࣮૷ σδλϧϓϩμΫτͷϓϩηε

Slide 7

Slide 7 text

اըɾઃܭ σβΠϯ ࣮૷

Slide 8

Slide 8 text

اըɾઃܭ σβΠϯ ࣮૷ ϓϩηεͷߔ લߦఔͰ࡞ΒΕͨ੒Ռ෺͕ྲྀ༻Ͱ͖ͳ͍ θϩ͔Β࡞Γ௚͠ʹͳΔ͜ͱ͕ଟ͍

Slide 9

Slide 9 text

اըɾઃܭ σβΠϯ ࣮૷ ϫΠϠʔϑϨʔϜ΍اըॻΛجʹσβΠϯ ˞ಡղ͠ͳ͕ΒσβΠϯ

Slide 10

Slide 10 text

اըɾઃܭ σβΠϯ ࣮૷ ࢦ͕ࣔগͳ͍ͱσβΠφʔ΁ͷෛՙ͸ߴ·Δ ࡯ͯ͠࡞Δ෦෼͕ଟ͘ͳΔʢमਖ਼΋૿͑Δʣ

Slide 11

Slide 11 text

اըɾઃܭ σβΠϯ ࣮૷ ϏδϡΞϧσβΠϯΛجʹ࣮૷ ˞ಡղ͠ͳ͕Β࣮૷

Slide 12

Slide 12 text

اըɾઃܭ σβΠϯ ࣮૷ ࢦࣔ΍ઃܭ͕଍Γͳ͍σβΠϯ ࡯ͯ͠࡞Δ෦෼͕ଟ͘ͳΔʢमਖ਼΋૿͑Δʣ

Slide 13

Slide 13 text

ϓϩηεͷՍ͚ڮ اըɾઃܭ σβΠϯ ࣮૷ ࣍ߦఔ΁ܨ͛ΔͨΊͷࢿྉ΍πʔϧ νʔϜؒͷڑ཭͕͋Δͱෛՙ͕ߴ͘ͳΔ

Slide 14

Slide 14 text

اըɾઃܭ σβΠϯ ࣮૷ ܾࡋऀͱ৮઀࿩͕Ͱ͖ͳ͍ ੍࡞νʔϜ͕հೖͰ͖ͳ͍ ಉ͡؀ڥͰ࢓ࣄΛ͍ͯ͠ͳ͍ ߦ͖དྷͷ͋Δ໛ࡧ͕Ͱ͖ͳ͍

Slide 15

Slide 15 text

اըɾઃܭ σβΠϯ ࣮૷ ҙࢥૄ௨ͷͨΊͷࢿྉ΍πʔϧ͕૿͑Δ ਐߦίετ͕૿͑ɺޙ໭Γ΋೉͘͠ͳΔ

Slide 16

Slide 16 text

اըɾઃܭ σβΠϯ ࣮૷ ϏδϡΞϧσβΠϯΛ͢Δ͚ͩͰ͋Ε͹࠷ڧ

Slide 17

Slide 17 text

اըɾઃܭ σβΠϯ ࣮૷ ࣮૷ͱͷ࿈ܞ͕೉͍͠ ༷ʑͳঢ়ଶͷσβΠϯʹ޲͍͍ͯͳ͍

Slide 18

Slide 18 text

اըɾઃܭ σβΠϯ ࣮૷ σβΠϯ͢ΔͨΊͷ৘ใ͕଍Γͳ͍৔߹͕͋Δ ఻͑ΒΕͳ͍ͱ͜Ζ͕ଟ͍ͷͰࢿྉ͕૿͑Δ

Slide 19

Slide 19 text

اըɾઃܭ σβΠϯ ࣮૷ ϓϩηεʹ͋ΔߔΛͳ͘͢͜ͱ͕Ͱ͖Δ γʔϜϨεʹҙࢥૄ௨͕Ͱ͖Δ ࠓඞཁͱ͞ΕΔσβΠϯπʔϧ

Slide 20

Slide 20 text

σβΠϯπʔϧ දݱྗΛߴΊΔ ࿈ܞྗΛߴΊΔ

Slide 21

Slide 21 text

اըɾઃܭ σβΠϯ ࣮૷ Adobe XD ૣ͘ࢹ֮Խͯ͠ҙࢥૄ௨Λߦ͏ ը໘ભҠ·Ͱݟͤͯૢ࡞ײΛڞ༗͢Δ

Slide 22

Slide 22 text

اըɾઃܭ σβΠϯ ࣮૷ Figma ϓϩηεͷಁ໌ԽʹΑΔҙݟަ׵ Ұ؏ੑͷ͋Δ6*Ξηοτͷ੍࡞ͱ؅ཧ

Slide 23

Slide 23 text

اըɾઃܭ σβΠϯ ࣮૷ Principle ײ֮తͩͬͨಈ͖΍ૢ࡞Λࢹ֮ԽͰ͖Δ આ໌͕೉͔ͬͨ͠ಈ͖Λ਺ࣈͰ఻͑Δ͜ͱ͕Ͱ͖Δ

Slide 24

Slide 24 text

اըɾઃܭ σβΠϯ ࣮૷ Sketch ༷ʑͳαʔϏεͱͷ࿈ܞͰ৘ใڞ༗͢Δ Ұ؏ੑͷ͋Δ6*ઃܭΛ࣮ͯ͠૷͠΍͘͢͢Δ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

ैདྷͷ࡞Γํ͕௨༻͠ͳ͘ͳ͖͍ͬͯͯΔ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

ʮ΋͠΋ʜʯΛߟ͑Δ 1

Slide 36

Slide 36 text

ʮ΋͠΋ʜʯΛߟ͑Δ 1

Slide 37

Slide 37 text

աఔΛΦʔϓϯʹ͢Δ 3

Slide 38

Slide 38 text

աఔΛΦʔϓϯʹ͢Δ 3

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

௕୩઒ګٱ @yhassy [email protected] !