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

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

Avatar for Ryo Sakaguchi Ryo Sakaguchi
March 28, 2018
Design
3
460

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

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

Avatar for Ryo Sakaguchi

Ryo Sakaguchi

March 28, 2018
Tweet

More Decks by Ryo Sakaguchi

See All by Ryo Sakaguchi
Android Architecture Componentsを使って、改善・効率化するAndroidアプリ開発
Avatar for Ryo Sakaguchi wakwak3125
0
1.2k
Test multiple APKs 
with Robolectric
Avatar for Ryo Sakaguchi wakwak3125
0
750
Clip, Elevation and 
ViewOutlineProvider
Avatar for Ryo Sakaguchi wakwak3125
1
1.2k
WebView as 
Fancy and effective 
View
Avatar for Ryo Sakaguchi wakwak3125
1
1.5k
ViewPager2をちょっとさわってみよう
Avatar for Ryo Sakaguchi wakwak3125
0
1.6k
年末だし、振り返るKotlin
Avatar for Ryo Sakaguchi wakwak3125
1
1k
社内ライブラリのアップデートフロー
Avatar for Ryo Sakaguchi wakwak3125
4
3.7k
Wantedly Peopleのリリースフロー
Avatar for Ryo Sakaguchi wakwak3125
1
4.6k
KOINかわいいよ、KOIN
Avatar for Ryo Sakaguchi wakwak3125
0
920

Other Decks in Design

See All in Design
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
Avatar for Yu Morita securecat
5
1.7k
サービスデザインにおける、 映像活用の可能性（Spectrum Tokyo Meetup #18）
Avatar for Akihide Kanai ka71
0
160
Designing User Experience through Interaction Design
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
370
ビジネスアナリシスはビジネス”分析”じゃないよ！～システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス～
Avatar for BPStudy bpstudy
0
620
アプリ360onWeb使い方と裏ワザ？紹介！
Avatar for ikejun360 ikejun360
0
250
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
200
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ！
Avatar for Akiko Kurono cremacrema
0
1.5k
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
Avatar for Takahiro Hayashi taka_piya
1
3.2k
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
880k
Light My Fire/ハートに火をつけるコミュニティ
Avatar for kgsi kgsi
1
150
事例で学ぶ！今日から使えるWebサービスUI改善ポイント
Avatar for NCDC ncdc
0
240
組織で取り組むアクセシビリティのはじめ方
Avatar for cawpea masakiohsumi
0
180

Featured

See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
6k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
920
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
36
2.5k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.8k
Code Review Best Practice
Avatar for Trisha Gee trishagee
70
19k

Transcript

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

    from Wantedly People

  2. 2018.3.28 | ©2018 wakwak3125 2 About me Ryo Sakaguchi @wakwak3125

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

  3. 2018.3.28 | ©2018 wakwak3125 3 Wantedly People? ໊ࢗΛ؅ཧ͢ΔΞϓϦ ਓ຺Λϙʔλϒϧʹ࣋ͪา͜͏ •

    ͺͺͬͱෳ਺ຕҰׅऔΓࠐΈ • ͙͢ʹσʔλԽ͞ΕΔ • ಡΈऔ໊ͬͨࢗʹؔ࿈͢Δ࿩୊͕Έ͔ͭΔ • WantedlyϢʔβʔͷ໊ࢗΛऔΓࠐΜͩΒͦͷ৘ใ ΋෇༩͞ΕΔ • OCR + Machine Learning

  4. 2018.3.28 | ©2018 wakwak3125 4 αΠϯΞοϓϑϩʔվमͷσβΠϯϓϩηε ࠓ೔࿩͢͜ͱ ΞϓϦͷαΠϯΞοϓϑϩʔվमͷϓϩηε͕ϝΠϯ • վળϓϩηε

    • ͏·͍ͬͨ͘ࢪࡦ • ͏·͍͔͘ͳ͔ͬͨࢪࡦ • ·ͱΊ

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

  6. 2018.3.28 | ©2018 wakwak3125 6 վળϓϩηε ମݧΛߟ͑Δ σβΠϯ ࣮૷ ݕূ

    ؆ུԽͨ͠΋ͷ

  7. 2018.3.28 | ©2018 wakwak3125 7 ମݧΛߟ͑Δ σβΠϯ ࣮૷ ݕূ վળϓϩηε

    ࣗ෼ʢΤϯδχΞʣͷ୲౰ྖҬ

  8. 2018.3.28 | ©2018 wakwak3125 8 վળϓϩηε ମݧΛߟ͑Δ σβΠϯ ࣮૷ ݕূ

    σβΠφʔͷ୲౰ྖҬ

  9. 2018.3.28 | ©2018 wakwak3125 9 վળϓϩηε جຊతʹίΞͳ෦෼Ҏ֎͸ڞ௨ྖҬ

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

  11. 2018.3.28 | ©2018 wakwak3125 11 վળϓϩηε ମݧΛߟ͑Δ ڞ௨ʹཧղͰ͖Δ΋ͷͱͯ͠ɺUIFlowΛ࡞Δ • ςΩετϕʔεͷUIFlow͕͋Ε͹ίϛϡχέʔ

    γϣϯ͠΍͍͢ • ࣗ෼͸guiflowͱ͍͏πʔϧΛ࢖ͬͨ • ৄࡉ·Ͱ݁ߏ٧ΊΔ • Τϥʔൃੜ࣌ͷڍಈ΍ϑΥʔϧόοΫઌؚΉ • ͦΕΛݩʹɺσβΠφʔ͕ϥϑͳϓϩτλΠϓΛ ࡞Δ • νʔϜʹڞ༗ͯ͠ݕূ • Αͦ͞͏ͳΒσβΠϯϓϩηεʹਐΉ HOW?

  12. 2018.3.28 | ©2018 wakwak3125 12 վળϓϩηε σβΠϯ σβΠφʔ͕ΧοίΠΠཧ૝Λ࡞ͬͯ͘ΕΔ • ·ͣ͸׬શʹཧ૝ϕʔεͰ࠷ߴʹΧοίΠΠ΋ͷ

    Λ࡞ͬͯ΋Β͏ • Sketch -> Zeplin • ͔ͦ͜Βௐ੔͍ͯ͘͠ • ͜Ε͸ͻͱͦΕͧΕ΍Γํ͕͋Δ͔΋͠Εͳ͍ • ઐ໳ྖҬͰ͸ͳ͍ͷͰ͝ΊΜͳ͍͞ HOW?

  13. 2018.3.28 | ©2018 wakwak3125 13 վળϓϩηε ࣮૷ มߋʹ଱͑͏Δ͍͍ײ͡ͷઃܭͰ΍ͬͨ • ৽نొ࿥ͷը໘ભҠ͸ΦʔτϚτϯΛ׆༻͍ͯ͠

    ͍ײ͡ʹͨ͠ɻ • มߋͱςετ͕͠қ͍ͷͰ࢓༷มߋʹ଱͑ΕΔ • A/Bςετ΋΍ͬͨ • ϓογϡ௨஌ͷࢪࡦ΋ಉ࣌ʹߦͬͨͷͰɺαʔόʔ αΠυͷ؆୯ͳ࣮૷΋ߦͬͨɻ • ظ೔ͱ͔Ͱݫͦ͠͏ͳͱ͜Ζʹؔͯ͠͸దٓ૬ஊ ͯ͠࡟ͬͨΓ HOW?

  14. 2018.3.28 | ©2018 wakwak3125 14 վળϓϩηε ݕূ σβΠφʔ΋ࢀՃ͠΍͘͢ɺՄࢹԽΛॏࢹ • Wantedly͸͍Ζ͍ΖͳϩάΛBigQueryʹͨΊ͍ͯ

    Δ • ͦͷϩάΛDOMOͱ͍͏BIπʔϧͰՄࢹԽ͢Δ • ࠓճ͸αΠϯΞοϓϑϩʔͷϑΝωϧΛࣗલͰ ΫΤϦॻ͍ͯɺDOMOʹ൓өͨ͠ • جຊతʹσβΠϯ͸ఆੑతͳ΋ͷͱଊ͑ΒΕ͍ͯ ΔͷͰɺΤϯδχΞ͕͖ͪΜͱ਺஋Խͯ͠ՄࢹԽ ͢Δ͜ͱͰɺఆྔతʹଊ͑Δ͜ͱ͕Ͱ͖Δɻ • ͜͜Ͱྑ͘ͳ͍ݸॴΛݟ͚ͭͯ࣍ʹ׆͔͢ HOW? ʴ

  15. 2018.3.28 | ©2018 wakwak3125 15 վળϓϩηε ͱ͍͏ϓϩηεΛ͙Δ͙Δճ͢

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

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

  18. 2018.3.28 | ©2018 wakwak3125 18 αΠϯΞοϓΛඞਢʹ͠ͳ͍ αʔϏεʹΑΔ
 ࣗ෼ͷαʔϏε͸Ͳ͏͔ͰܾΊͯ΄͍͠ ͏·͍ͬͨ͘ࢪࡦ

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

    ͏·͍ͬͨ͘ࢪࡦ

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

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

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

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

  24. 2018.3.28 | ©2018 wakwak3125 24 αΠϯΞοϓϑϩʔվमͷσβΠϯϓϩηε ·ͱΊ • ମݧΛ࡞Δɾߟ͑Δͷ͸σΟϨΫλʔ΍σβΠφʔ ͚ͩͷ࢓ࣄ͡Όͳ͍

    • ͦͷ্ͰΤϯδχΞͱͯ͠ͷڧΈΛ׆͔ͯ͠ڞಉ ࡞ۀ͍͖͍ͯͨ͠ • αΠϯΞοϓʹؔͯ͠͸αʔϏε͝ͱʹཁ͕݅͋ Δͱ͜ΖͳͷͰɺ࣌ؒΛ͔͚ͯͬ͘͡Γվળͯ͠ ͍͘ͷ͕๬·͍͠