エンジニアがアプリのUIトレースをやってみた話

by akatsuki174

Slide 1

Slide 1 text

ΤϯδχΞ͕ ΞϓϦͷUIτϨʔεΛ ΍ͬͯΈͨ࿩ @akatsuki174

Slide 2

Slide 2 text

ࣗݾ঺հ • ਢ౻ຘ • גࣜձࣾZaimॴଐ • iOSΤϯδχΞ • Twitter, Qiita, SlideShare, Github, SpeakerDeck →akatsuki174

Slide 3

Slide 3 text

1/25ʹvol.5 ։࠵ʂ

Slide 4

Slide 4 text

ɾiOSΤϯδχΞྺɿ3೥͘Β͍ʁ ɾSketchྺɿ൒݄͘Β͍ ɾSketchͷֶशʹ࢖ͬͨ΋ͷɿ ɹʮΤϯδχΞͷͨΊͷSketchೖ໳ʯ ɹhttps://dotinstall.com/lessons/ basic_sketch ࢲͷεϖοΫ

Slide 5

Slide 5 text

Sketch࢖ͬͨ͜ͱ͋Δํɺ ͲΕ͘Β͍͍·͔͢ʁ

Slide 6

Slide 6 text

ɾUIσβΠϯ࡞੒πʔϧ ɾCSS / Ξηοτग़ྗ͕Ͱ͖Δ ɾखݩͷσόΠεͰ֬ೝͰ͖Δ ɾϓϥάΠϯ͕๛෋ Sketchͱ͸

Slide 7

Slide 7 text

ɾྑ͍σβΠϯΛϚωΔ͜ͱͰֶ΂Δ ɾྑ͍σβΠϯɺѱ͍σβΠϯΛݴޠԽ ɹͰ͖ΔΑ͏ʹͳΔʢͨͿΜʣ UIτϨʔεΛ͢ΔͱԿ͕͍͍ͷ͔

Slide 8

Slide 8 text

ͱ͍͏͜ͱͰ τϨʔεͯ͠Έ·ͨ͠

Slide 9

Slide 9 text

΋͏গ͠ৄ͍͠಺༰͸QiitaͰ https://qiita.com/akatsuki174/ items/0af30984d64c991cfddf

Slide 10

Slide 10 text

UIτϨʔεͷखॱ

Slide 11

Slide 11 text

ɾࠓճͷ৔߹͸͜Εˠ ɾͰ͖Δ͚͍ͩΖΜͳཁૉ͕ ɹ٧·͍ͬͯΔ࣌ͷεΫγϣΛ ɹબ୒ τϨʔε͍ͨ͠ը૾ͷ εΫγϣΛࡱΔ

Slide 12

Slide 12 text

ΞʔτϘʔυΛ༻ҙ͢Δ

Slide 13

Slide 13 text

εΫγϣΛSketchͷ ΞʔτϘʔυͷ্ʹషΓ෇͚Δ

Slide 14

Slide 14 text

τϨʔε༻ͷΞʔτϘʔυΛ ༻ҙ͢Δ

Slide 15

Slide 15 text

εΫγϣ্Ͱ ύʔπΛ࡞੒͢Δ

Slide 16

Slide 16 text

ಉ͡࠲ඪʹύʔπΛ഑ஔ

Slide 17

Slide 17 text

ɾ1ϐΫηϧ୯ҐͰͷ؍࡯ྗ͕਎ʹͭ͘ ɾҙ͍ࣝͯ͠ͳ͔ͬͨʮσβΠϯʯ͕ ɹݟ͑ͯ͘Δ ɾࣗ෼ͰΞϓϦ࡞Δ࣌ʹύʔπ࡞੒ͷ ɹಓ۩ͱͯ͠࢖͑ͦ͏ UIτϨʔεΛ΍ͬͯ ྑ͔ͬͨ͜ͱ

Slide 18

Slide 18 text

ɾಉ͡ΞϓϦͷผը໘ͷτϨʔε ɾҧ͏ΞϓϦͷτϨʔε ɾྑ͍σβΠϯͷ๏ଇΛݟ͚͍͖͍ͭͯͨ ͜Ε͔Β

Slide 19

Slide 19 text

͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ʂ