Upgrade to Pro — share decks privately, control downloads, hide ads and more …

サインアップフロー改修のデザインプロセス

 サインアップフロー改修のデザインプロセス

Androidエンジニアデザイン部 #1

Ryo Sakaguchi

March 28, 2018
Tweet

More Decks by Ryo Sakaguchi

Other Decks in Design

Transcript

  1. 2018.3.28 | ©2018 wakwak3125
    αΠϯΞοϓϑϩʔվमͷ
    σβΠϯϓϩηε
    σβΠφʔͱ΍͍ͬͯ͘΍Γ͔ͨ
    AndroidΤϯδχΞσβΠϯ෦ #1
    @wakwak3125 from Wantedly People

    View Slide

  2. 2018.3.28 | ©2018 wakwak3125
    2
    About me
    Ryo Sakaguchi
    @wakwak3125
    • Wantedly, Inc (2017/2~)
    • Wantedly People͍ͬͯ͏ΞϓϦ࡞ͬͯ·͢
    • Kotlin޷͖
    • Kotlin޷͖
    • UI/UXߟ͑Δͷ޷͖(ಘҙͩͱ͸ݴ͍ͬͯͳ͍)
    • ௼ΓͱΪλʔͱεϊʔϘʔυ͕޷͖

    View Slide

  3. 2018.3.28 | ©2018 wakwak3125
    3
    Wantedly People?
    ໊ࢗΛ؅ཧ͢ΔΞϓϦ
    ਓ຺Λϙʔλϒϧʹ࣋ͪา͜͏
    • ͺͺͬͱෳ਺ຕҰׅऔΓࠐΈ
    • ͙͢ʹσʔλԽ͞ΕΔ
    • ಡΈऔ໊ͬͨࢗʹؔ࿈͢Δ࿩୊͕Έ͔ͭΔ
    • WantedlyϢʔβʔͷ໊ࢗΛऔΓࠐΜͩΒͦͷ৘ใ
    ΋෇༩͞ΕΔ
    • OCR + Machine Learning

    View Slide

  4. 2018.3.28 | ©2018 wakwak3125
    4
    αΠϯΞοϓϑϩʔվमͷσβΠϯϓϩηε
    ࠓ೔࿩͢͜ͱ
    ΞϓϦͷαΠϯΞοϓϑϩʔվमͷϓϩηε͕ϝΠϯ
    • վળϓϩηε
    • ͏·͍ͬͨ͘ࢪࡦ
    • ͏·͍͔͘ͳ͔ͬͨࢪࡦ
    • ·ͱΊ

    View Slide

  5. 2018.3.28 | ©2018 wakwak3125
    5
    վળϓϩηε

    View Slide

  6. 2018.3.28 | ©2018 wakwak3125
    6
    վળϓϩηε
    ମݧΛߟ͑Δ σβΠϯ ࣮૷ ݕূ
    ؆ུԽͨ͠΋ͷ

    View Slide

  7. 2018.3.28 | ©2018 wakwak3125
    7
    ମݧΛߟ͑Δ σβΠϯ ࣮૷ ݕূ
    վળϓϩηε ࣗ෼ʢΤϯδχΞʣͷ୲౰ྖҬ

    View Slide

  8. 2018.3.28 | ©2018 wakwak3125
    8
    վળϓϩηε
    ମݧΛߟ͑Δ σβΠϯ ࣮૷ ݕূ
    σβΠφʔͷ୲౰ྖҬ

    View Slide

  9. 2018.3.28 | ©2018 wakwak3125
    9
    վળϓϩηε

    جຊతʹίΞͳ෦෼Ҏ֎͸ڞ௨ྖҬ

    View Slide

  10. 2018.3.28 | ©2018 wakwak3125
    10
    վળϓϩηε

    HOW?

    View Slide

  11. 2018.3.28 | ©2018 wakwak3125
    11
    վળϓϩηε
    ମݧΛߟ͑Δ
    ڞ௨ʹཧղͰ͖Δ΋ͷͱͯ͠ɺUIFlowΛ࡞Δ
    • ςΩετϕʔεͷUIFlow͕͋Ε͹ίϛϡχέʔ
    γϣϯ͠΍͍͢
    • ࣗ෼͸guiflowͱ͍͏πʔϧΛ࢖ͬͨ
    • ৄࡉ·Ͱ݁ߏ٧ΊΔ
    • Τϥʔൃੜ࣌ͷڍಈ΍ϑΥʔϧόοΫઌؚΉ
    • ͦΕΛݩʹɺσβΠφʔ͕ϥϑͳϓϩτλΠϓΛ
    ࡞Δ
    • νʔϜʹڞ༗ͯ͠ݕূ
    • Αͦ͞͏ͳΒσβΠϯϓϩηεʹਐΉ
    HOW?

    View Slide

  12. 2018.3.28 | ©2018 wakwak3125
    12
    վળϓϩηε
    σβΠϯ
    σβΠφʔ͕ΧοίΠΠཧ૝Λ࡞ͬͯ͘ΕΔ
    • ·ͣ͸׬શʹཧ૝ϕʔεͰ࠷ߴʹΧοίΠΠ΋ͷ
    Λ࡞ͬͯ΋Β͏
    • Sketch -> Zeplin
    • ͔ͦ͜Βௐ੔͍ͯ͘͠
    • ͜Ε͸ͻͱͦΕͧΕ΍Γํ͕͋Δ͔΋͠Εͳ͍
    • ઐ໳ྖҬͰ͸ͳ͍ͷͰ͝ΊΜͳ͍͞
    HOW?

    View Slide

  13. 2018.3.28 | ©2018 wakwak3125
    13
    վળϓϩηε
    ࣮૷
    มߋʹ଱͑͏Δ͍͍ײ͡ͷઃܭͰ΍ͬͨ
    • ৽نొ࿥ͷը໘ભҠ͸ΦʔτϚτϯΛ׆༻͍ͯ͠
    ͍ײ͡ʹͨ͠ɻ
    • มߋͱςετ͕͠қ͍ͷͰ࢓༷มߋʹ଱͑ΕΔ
    • A/Bςετ΋΍ͬͨ
    • ϓογϡ௨஌ͷࢪࡦ΋ಉ࣌ʹߦͬͨͷͰɺαʔόʔ
    αΠυͷ؆୯ͳ࣮૷΋ߦͬͨɻ
    • ظ೔ͱ͔Ͱݫͦ͠͏ͳͱ͜Ζʹؔͯ͠͸దٓ૬ஊ
    ͯ͠࡟ͬͨΓ
    HOW?

    View Slide

  14. 2018.3.28 | ©2018 wakwak3125
    14
    վળϓϩηε
    ݕূ
    σβΠφʔ΋ࢀՃ͠΍͘͢ɺՄࢹԽΛॏࢹ
    • Wantedly͸͍Ζ͍ΖͳϩάΛBigQueryʹͨΊ͍ͯ
    Δ
    • ͦͷϩάΛDOMOͱ͍͏BIπʔϧͰՄࢹԽ͢Δ
    • ࠓճ͸αΠϯΞοϓϑϩʔͷϑΝωϧΛࣗલͰ
    ΫΤϦॻ͍ͯɺDOMOʹ൓өͨ͠
    • جຊతʹσβΠϯ͸ఆੑతͳ΋ͷͱଊ͑ΒΕ͍ͯ
    ΔͷͰɺΤϯδχΞ͕͖ͪΜͱ਺஋Խͯ͠ՄࢹԽ
    ͢Δ͜ͱͰɺఆྔతʹଊ͑Δ͜ͱ͕Ͱ͖Δɻ
    • ͜͜Ͱྑ͘ͳ͍ݸॴΛݟ͚ͭͯ࣍ʹ׆͔͢
    HOW?
    ʴ

    View Slide

  15. 2018.3.28 | ©2018 wakwak3125
    15
    վળϓϩηε

    ͱ͍͏ϓϩηεΛ͙Δ͙Δճ͢

    View Slide

  16. 2018.3.28 | ©2018 wakwak3125
    16
    ͏·͍ͬͨ͘ࢪࡦ

    View Slide

  17. 2018.3.28 | ©2018 wakwak3125
    17
    ͏·͍ͬͨ͘ࢪࡦ
    ը໘਺͸ۃྗݮΒ͢
    1ը໘ຖʹ20%͸཭୤

    View Slide

  18. 2018.3.28 | ©2018 wakwak3125
    18
    αΠϯΞοϓΛඞਢʹ͠ͳ͍
    αʔϏεʹΑΔ

    ࣗ෼ͷαʔϏε͸Ͳ͏͔ͰܾΊͯ΄͍͠
    ͏·͍ͬͨ͘ࢪࡦ

    View Slide

  19. 2018.3.28 | ©2018 wakwak3125
    19
    ίΞͳମݧΛؚΊΔ
    Wantedly People͸໊ࢗࡱӨମݧ͕Ұ൪ڻ͖ͱײಈ
    Λ༩͑ΒΕΔͷͰɺ໊ࢗࡱӨ͚ͩͰ৽نొ࿥Ͱ͖
    ΔΑ͏ʹͨ͠
    ͏·͍ͬͨ͘ࢪࡦ

    View Slide

  20. 2018.3.28 | ©2018 wakwak3125
    20
    ͏·͍͔͘ͳ͔ͬͨࢪࡦ

    View Slide

  21. 2018.3.28 | ©2018 wakwak3125
    21
    ͏·͍͔͘ͳ͔ͬͨࢪࡦ
    ௕Ίͷ΢ΥʔΫεϧʔ
    LottieΛ࢖͔͍͍ͬͯͬ͜΍ͭΛ࡞͚ͬͨͲ
    ͦ͜Ͱ͏·͘ັྗΛ఻͑ΒΕͳ͔ͬͨɻ
    ମݧͯ͠΋ΒΘͳ͍ͱܧଓ཰΋ొ࿥཰΋ѱ͍

    View Slide

  22. 2018.3.28 | ©2018 wakwak3125
    22
    ͏·͍͔͘ͳ͔ͬͨࢪࡦ
    ೖྗ߲໨Λࡉ͔͘ը໘ʹ෼͚ͨ
    ը໘਺ͷ૿ՃʹΑΓɺ཭୤͕ଟ͘ͳͬͯ͠·ͬͨ

    View Slide

  23. 2018.3.28 | ©2018 wakwak3125
    23
    ͏·͍͔͘ͳ͔ͬͨࢪࡦ
    αΠϯΞοϓํ๏Λબ͹ͤͨ
    Facebook/Wantedly/Email
    ͜ΕΛબ୒͢Δஈ֊ͰϢʔβʔ͸཭୤

    View Slide

  24. 2018.3.28 | ©2018 wakwak3125
    24
    αΠϯΞοϓϑϩʔվमͷσβΠϯϓϩηε
    ·ͱΊ
    • ମݧΛ࡞Δɾߟ͑Δͷ͸σΟϨΫλʔ΍σβΠφʔ
    ͚ͩͷ࢓ࣄ͡Όͳ͍
    • ͦͷ্ͰΤϯδχΞͱͯ͠ͷڧΈΛ׆͔ͯ͠ڞಉ
    ࡞ۀ͍͖͍ͯͨ͠
    • αΠϯΞοϓʹؔͯ͠͸αʔϏε͝ͱʹཁ͕݅͋
    Δͱ͜ΖͳͷͰɺ࣌ؒΛ͔͚ͯͬ͘͡Γվળͯ͠
    ͍͘ͷ͕๬·͍͠

    View Slide