｢規約に同意｣のUX -ストレスフリーな同意UIとその実現方法-

Inside Frontend #2

Transcript

1. ňن໿ʹಉҙʼnͷUX
   Inside Frontend #2 (2018/02/11)
   @pika_shi - Hikaru Takemura
   - ετϨεϑϦʔͳಉҙUIͱͦͷ࣮ݱํ๏ -
   

   View Slide

2. ‣ Hikaru Takemura ( @pika_shi )
   ‣ Frontend Engineer at FOLIO
   ‣ Por4olio: pikashi.tokyo
   

   View Slide

3. ① What is Compliance? ίϯϓϥΠΞϯεͱ͸ʁ
   ② Term & Condi>ons ར༻ن໿ʹ͍ͭͯ
   ③ UI History of Term & Condi>ons ňن໿ʹಉҙʼnUI ͷมભ
   ④ Collaborate with Compliance UX ޲্ͷͨΊͷίϯϓϥͱͷڠۀ
   ⑤ As a Frontend Engineer ňϑϩϯτΤϯυΤϯδχΞʼnͱͯ͠ͷܞΘΓํ
   AGENDA
   

   View Slide

4. ① What is Compliance?
   

   View Slide

5. גࣜձࣾFOLIO ۚ༥঎඼औҾۀऀ ؔ౦ࡒ຿ہ௕ʢۚ঎ʣୈ2983߸ʗՃೖڠձɿ೔ຊূ݊ۀڠձɺҰൠࣾஂ๏ਓ೔ຊ౤ࢿސ໰ۀڠձ
   גՁͷมಈ౳ʹΑΓଛࣦ͕ੜ͡Δ͓ͦΕ͕͋Γ·͢ɻৄࡉ͸ܖ໿క݁લަ෇ॻ໘Λ֬͝ೝ͍ͩ͘͞ɻ
   

   View Slide

6. גࣜձࣾFOLIO ۚ༥঎඼औҾۀऀ ؔ౦ࡒ຿ہ௕ʢۚ঎ʣୈ2983߸ʗՃೖڠձɿ೔ຊূ݊ۀڠձɺҰൠࣾஂ๏ਓ೔ຊ౤ࢿސ໰ۀڠձ
   גՁͷมಈ౳ʹΑΓଛࣦ͕ੜ͡Δ͓ͦΕ͕͋Γ·͢ɻৄࡉ͸ܖ໿క݁લަ෇ॻ໘Λ֬͝ೝ͍ͩ͘͞ɻ
   

   View Slide

7. גࣜձࣾFOLIO ۚ༥঎඼औҾۀऀ ؔ౦ࡒ຿ہ௕ʢۚ঎ʣୈ2983߸ʗՃೖڠձɿ೔ຊূ݊ۀڠձɺҰൠࣾஂ๏ਓ೔ຊ౤ࢿސ໰ۀڠձ
   גՁͷมಈ౳ʹΑΓଛࣦ͕ੜ͡Δ͓ͦΕ͕͋Γ·͢ɻৄࡉ͸ܖ໿క݁લަ෇ॻ໘Λ֬͝ೝ͍ͩ͘͞ɻ
   COMPLIANCE
   (اۀྙཧ, ๏ྩ९क)
   

   View Slide

8. גࣜձࣾFOLIO ۚ༥঎඼औҾۀऀ ؔ౦ࡒ຿ہ௕ʢۚ঎ʣୈ2983߸ʗՃೖڠձɿ೔ຊূ݊ۀڠձɺҰൠࣾஂ๏ਓ೔ຊ౤ࢿސ໰ۀڠձ
   גՁͷมಈ౳ʹΑΓଛࣦ͕ੜ͡Δ͓ͦΕ͕͋Γ·͢ɻৄࡉ͸ܖ໿క݁લަ෇ॻ໘Λ֬͝ೝ͍ͩ͘͞ɻ
   

   View Slide

9. גࣜձࣾFOLIO ۚ༥঎඼औҾۀऀ ؔ౦ࡒ຿ہ௕ʢۚ঎ʣୈ2983߸ʗՃೖڠձɿ೔ຊূ݊ۀڠձɺҰൠࣾஂ๏ਓ೔ຊ౤ࢿސ໰ۀڠձ
   גՁͷมಈ౳ʹΑΓଛࣦ͕ੜ͡Δ͓ͦΕ͕͋Γ·͢ɻৄࡉ͸ܖ໿క݁લަ෇ॻ໘Λ֬͝ೝ͍ͩ͘͞ɻ
   
   ෩આͷྲྀ෍Λڐ༰͢ΔߦҝʹͳΓ͑ͳ͍͔
   ૬৔ૢॎΛ͞ΕΔϦεΫ͕ͳ͍͔ etc…
   

   View Slide

10. ‣ FOLIO ͸ۚ༥ػؔͰ͋Γ, αʔϏε UI ͱίϯϓ
    ϥΠΞϯε͸ৗʹഎத߹Θͤ
    ‣ ௨ৗͷ Web αʔϏεͰ͸౰ͨΓલͷ͜ͱ͕౰ͨ
    ΓલʹͰ͖ͳ͍ੈքͰ, ߴ͍ UX Λ໨ࢦ͍ͯ͘͠ඞ
    ཁ͕͋Δ
    COMPLIANCE
    

    View Slide

11. ② Term & CondiAons
    

    View Slide

12. 7%
    

    View Slide

13. 7%
    ར༻ن໿͸શମͷ ͔͠ಡΜͰ͍ͳ͍
    

    View Slide

14. hKps:/
    /www.gizmodo.jp/2017/07/wifi_terms_of_service_agreemen.html
    

    View Slide

15. hKps:/
    /www.gizmodo.jp/2017/07/wifi_terms_of_service_agreemen.html
    
    ௕͍, ೉͍͠, ෼͔Γʹ͍͘!
    

    View Slide

16. ‣ ೉͍͠จষΛॻ͖ͨͯ͘ॻ͍͍ͯΔΘ͚Ͱ͸ͳ͍
    ‣ Ϣʔβͷղऍʹᴥᴪ͕ੜ͡ͳ͍Α͏ʹ, ݫີ͔ͭ
    ໌֬ʹॻ͔Ε͍ͯͳ͚Ε͹ͳΒͳ͍
    ‣ Ұํ, ຊདྷͷ໨త͸ňਖ਼͘͠ཧղͯ͠΋Β͍, ҆৺
    ͯ͠αʔϏεΛ࢖ͬͯ΋Β͏͜ͱʼn
    TERM & CONDITIONS
    

    View Slide

17. View Slide

18. 
    ۚ༥঎඼औҾ๏ (ۚ঎๏) ʹͷͬͱΓ,
    ๲େͳྔͷॻྨʹ໨Λ௨ͯ͠΋Β͏ඞཁ͕͋Δ
    

    View Slide

19. Compliance
    Creator
    

    View Slide

20. Compliance
    Creator
    ‣ γϯϓϧͰඒ͍͠ UI Λ
    อ͍ͪͨ
    ‣ Ͱ͖Δ͚ͩεϜʔζʹಉ
    ҙͤͯ͞ޱ࠲։ઃͷ CVR
    ޲্Λ໨ࢦ͍ͨ͠
    

    View Slide

21. Compliance
    Creator
    ‣ Ϣʔβʹ͖ͪΜͱܖ໿಺
    ༰Λཧղͯ͠΋Β͍͍ͨ
    ‣ ैདྷͷॻ໘ԡҹʹྼΒ͵
    Α͏, ৻ॏʹಉҙΛͯ͠΋
    Β͍͍ͨ
    

    View Slide

22. Compliance
    Creator
    

    View Slide

23. Compliance
    Creator
    ͍͔ʹ
    εϜʔζ ʹ
    ৻ॏ ͳಉҙ͕Ͱ͖Δ͔
    COLLABORATION
    

    View Slide

24. ③ UI History of Term & CondiAons
    

    View Slide

25. 1 2 3 4
    ‣ 100 ϖʔδΛ 1 ຕͷ PDF ʹ
    ‣ ॻ໘ΛΫϦοΫ͢ΔͱಉҙϘλϯ͕ΞΫςΟϒʹ
    

    View Slide

26. 1 2 3 4
    ‣ 100 ϖʔδΛ 1 ຕͷ PDF ʹ
    ‣ ॻ໘ΛΫϦοΫ͢ΔͱಉҙϘλϯ͕ΞΫςΟϒʹ
    Compliance
    ໿׺, ܖ໿క݁લަ෇ॻ໘, ޱ࠲։ઃਃࠐॻͳͲ͸
    ੑ࣭ͷҧ͏΋ͷͳͷͰ෼͚ͯಉҙΛಘͨํ͕͍͍
    

    View Slide

27. 1 2 3 4
    ‣ 100 ϖʔδΛ 1 ຕͷ PDF ʹ
    ‣ ॻ໘ΛΫϦοΫ͢ΔͱಉҙϘλϯ͕ΞΫςΟϒʹ
    ?
    

    View Slide

28. 1 2 3 4
    ‣ 100 ϖʔδΛ 1 ຕͷ PDF ʹ
    ‣ ॻ໘ΛΫϦοΫ͢ΔͱಉҙϘλϯ͕ΞΫςΟϒʹ
    ?
    
    

    View Slide

29. ‣ ϦϯΫ͕ n ݸʹͳΔͱ, ϢʔβͷϝΠϯίϯςΩ
    ετ͔Βͷ཭୤ (ผλϒભҠ) ͕ n ճʹͳΔ
    ‣ Ұൠతͳ Web αʔϏεͰ͸, ಡΉ͔εϧʔ͢Δ͔
    Λબ΂ΔͷͰ GOOD UI ͕ͩ, ඞͣΫϦοΫͯ͠΄
    ͍͠৔߹ʹ͸཭୤ͷڧ੍ͱͳΓ BAD UI ͱԽ͢
    
    

    View Slide

30. 1 2 3 4
    ‣ ॻ໘Λϖʔδ಺ʹຒΊࠐΈ, Ϟʔμϧ UI Ͱදࣔ
    

    View Slide

31. ‣ Ϣʔβ͕ϖʔδ͔Β཭୤ͤͣʹॻ໘ʹ໨Λ௨ͤΔ
    ‣ Ϟʔμϧ͸ň෇Ճతʹ৘ใΛఏࣔ͢Δʼnೝ஌ͷ͋Δ
    UI ͳͷͰ, ॻ໘ʹॏ͍ۤ͠ΠϝʔδΛ༩͑ͳ͍
    ‣ FOLIO Ͱ͸༷ʑͳ৔໘Ͱॻ໘΁ͷಉҙΛଅ͢ඞ
    ཁ͕͋Δ͕, Ϟʔμϧʹ౷Ұ͢Δ͜ͱͰ, ͲΜͳ৔
    ໘Ͱ΋ίϯςΩετΛҡ࣋ͭͭ͠දࣔͰ͖Δ
    
    

    View Slide

32. 1 2 3 4
    

    View Slide

33. ‣ PDF ͷจࣈαΠζ͕σϑΥϧτͰখ͘͞ͳͬͯ͠
    ·͍, Ϣʔβ͕ٯʹܯռ৺Λ࣋ͬͯ͠·͏
    ‣ Ͱ PDF ຒΊࠐΈΛ͍͕ͯͨ͠, ؀ڥґ
    ଘͷόά͕ඇৗʹଟ͘ϝϯς͕େม
    
    

    View Slide

34. 1 2 3 4
    

    View Slide

35. ‣ ίϯϓϥͷํʑͱڠྗ͠, PDF Λ͢΂ͯ HTML Խ
    ‣ εϚϗͰ΋໰୊ͳ͘දࣔ͞ΕΔΑ͏ʹͳͬͨ
    1 2 3 4
    

    View Slide

36. To Be Condnued…
    1 2 3 4
    

    View Slide

37. ④ Collaborate with Compliance
    

    View Slide

38. Word → HTML
    Creator
    Compliance
    ‣ UX ޲্ͷͨΊʹ, Word → HTML ͕ෆՄܽͩͬͨ
    

    View Slide

39. Word HTML
    

    View Slide

40. Word HTML
    Markdown
    

    View Slide

41. Word HTML
    Markdown
    ‣ ϞόΠϧΞϓϦͳͲ, Web Ҏ֎ͷΫϥΠΞϯτͰ
    ΋࠷దͳܗͰදࣔͰ͖ΔΑ͏ʹ͢ΔͨΊ
    ‣ HTML ͸͋͘·Ͱ Web ༻ͷੜ੒෺ͷ 1 ͭͱ͍͏
    Ґஔ͚ͮ
    

    View Slide

42. Word HTML
    Markdown
    AKributed String
    (iOS)
    React Component

    (Web)
    TextView

    (Android)
    

    View Slide

43. Word HTML
    Markdown
    ‣ Pandoc (CLI ͷυΩϡϝϯτม׵πʔϧ) Ͱͬ͘͟
    ΓͱMarkdownʹม׵
    ‣Word ಛ༗ͷه๏΍ϦονͳදͳͲ͸खಈͰमਖ਼
    Λ͓͜ͳ͍׬੒
    

    View Slide

44. Word HTML
    Markdown
    ‣ markdown-styles Λ࢖ͬͯ HTML ʹม׵
    ‣ ΫΦϦςΟͷߴ͍ελΠϧ͕ͦΖ͍ͬͯΔͷͰ͓
    ͢͢Ί
    ‣ ͜ΕʹΑΓॻ໘ͷ HTML Խ͕׬ྃ
    (ূ݊ձ͕ࣾ HTML Ͱॻ໘Λ഑෍͢Δͷ͸ॳʁ)
    

    View Slide

45. Word HTML
    Markdown
    ‣ markdown-styles Λ࢖ͬͯ HTML ʹม׵
    ‣ ΫΦϦςΟͷߴ͍ελΠϧ͕ͦΖ͍ͬͯΔͷͰ͓
    ͢͢Ί
    

    View Slide

46. ‣ ॻ໘ݪຊΛ Markdown ʹ͢Δʹ͋ͨΓ, ίϯϓϥ
    ΠΞϯε෦Ͱ؅ཧ͞Ε͍ͯͨ Word Λ, ΫϦΤΠ
    λʔͱίϯϓϥ͕ͱ΋ʹ࢖͑Δ Confluence ΁Ҡߦ
    ‣ Markdown ͷॻ͖ํΛڞ༗͠, Confluence Λίϯ
    ϓϥͱΫϦΤΠλʔͰڞಉฤू͠͸͡Ί͕ͨ…
    

    View Slide

47. Compliance Creator
    หޢ࢜ͱͷ΍ΓͱΓ͸

    Word Ͱͳ͍ͱͰ͖ͳ͍!
    Confluence ͩͱཤྺΛḷΓʹ͘
    ͍ͷͰ git Ͱ؅ཧ͍ͨ͠!
    
    

    View Slide

48. Confluence, Word, GitLab ͷࡾॏ؅ཧʹ
    

    View Slide

49. ‣ Word ͕ඞཁͳͷ͸෼͔Δ͕, ໨తΛߟ͑ΔͱԿ
    ΋چݪຊΛ؅ཧ͢Δඞཁ͸ͳ͍ͷͰ͸ʁ
    ‣ Markdown ͔Β Pandoc Ͱ Word Λٯੜ੒͠, ͦ
    ͪΒΛ࢖͏͜ͱ͸Ͱ͖ͳ͍͔
    Markdown → Word
    Word Word
    Markdown
    ݪຊ
    چݪຊ
    

    View Slide

50. Word Word
    Markdown
    ݪຊ
    چݪຊ
    

    View Slide

51. Word Word
    Markdown
    ݪຊ
    
    Word ؅ཧͷ๾໓ʹ੒ޭ
    چݪຊ
    

    View Slide

52. Confluence → GitLab
    ‣ Word ͸๾໓Ͱ͖͕ͨ, ґવͱͯ͠ Confluence ͱ
    GitLab ͷೋॏ؅ཧ
    ‣ ίϯϓϥͷํʑʹ GitLab Λར༻ͯ͠΋Β͏͜ͱ
    ͸Ͱ͖ͳ͍͔ʁ
    ‣ Markdown ͷฤू͚ͩͩͱ Web UI Ͱ׬݁͢Δ
    

    View Slide

53. ‣ GitLab ͷ࢖͍ํΛυΩϡϝϯτʹ·ͱΊ, ϋϯζ
    ΦϯΛ࣮ࢪ
    ‣ ݱࡏ͸ίϯϓϥͷํʑʹ GitLab Λ௚઀ฤूͯ͠
    ΋Β͍ͬͯΔ
    

    View Slide

54. 
    Confluence ؅ཧͷ๾໓ʹ੒ޭ
    

    View Slide

55. View Slide

56. GitLab ͰͷҰݩ؅ཧʹ
    

    View Slide

57. COLLABORATION
    ‣ ίϯϓϥΠΞϯεͷํʑͱ, զʑ Web ΤϯδχΞ
    Ͱ͸όοΫάϥ΢ϯυ͕େ͖͘ҟͳΓ, ͦΕͧΕ
    ͷۀքͷ׳श΋͋Δ
    ‣ ͦΕΛཧղ্ͨ͠Ͱ, গͣͭ͠าΈد͍ͬͯ͘͜
    ͱ͕େ੾ (ܾͯ͠΍ΓํΛԡ͠෇͚ͨΓ͸͠ͳ͍)
    ‣ ͜ͷ͋ͨΓ͕ FinTech ͳΒͰ͸ͷ୉ޣຯͰ΋͋Δ
    

    View Slide

58. ⑤ As a Frontend Engineer
    

    View Slide

59. ‣ ●● Tech ͱݺ͹ΕΔΑ͏ͳطଘͷۀքΛΑͯ͘͠
    ͍ͨ͘Ίʹ͸, ΫϦΤΠλʔͷίϯϓϥΠΞϯε΍
    ๏཯΁ͷཧղ΍าΈدΓ͕ඞਢ
    ‣ ٯʹ, ίϯϓϥΠΞϯε΍๏཯΁ͷ஌͕ࣝͳ͍ͱ,
    ߴ͍ UX Λ໨ࢦ͢͜ͱ͸౸ఈͰ͖ͳ͍
    ‣ FOLIO Ͱ΋, Web ۀքग़਎ͷଟ͘ͷΫϦΤΠλʔ
    ͕ূ݊֎຿һΛऔಘ͍ͯ͠Δ
    MediTech FinTech EdTech H
    ch
    

    View Slide

60. ϑϩϯτ
    Τϯυ
    σβΠϯ γεςϜ
    ϑϩϯτ͸,
    σβΠϯ ͱ
    γεςϜ Λͭͳ͙ϋϒ
    

    View Slide

61. σβΠϯ γεςϜ
    ίϯϓϥ

    ΠΞϯε
    Ϛʔέ

    ςΟϯά
    ϑϩϯτ
    Τϯυ
    ϑϩϯτ͸,
    σβΠϯ ͱ
    γεςϜ Λͭͳ͙ϋϒ
    

    View Slide

62. ‣ ϑϩϯτΤϯυΤϯδχΞ͸, ͨͩňϑϩϯτΤϯ
    υΛ։ൃ͢Δʼn͚͕ͩ࢓ࣄͰ͸ͳ͍
    ‣ σβΠϯͱ΋γεςϜͱ΋ີ઀ʹܞΘΔϙδγϣ
    ϯͱଊ͑Δ͜ͱͰ, Ͱ͖Δ͜ͱ͸Ұؾʹ޿͕Δ
    ‣ ϑϩϯτΤϯυ, ؤு͍͖ͬͯ·͠ΐ͏
    CONCLUSION
    

    View Slide