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

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

pika_shi
February 11, 2018

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

Inside Frontend #2

pika_shi

February 11, 2018
Tweet

More Decks by pika_shi

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size 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 full-size slide

  4. ① What is Compliance?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ෩આͷྲྀ෍Λڐ༰͢ΔߦҝʹͳΓ͑ͳ͍͔
    ૬৔ૢॎΛ͞ΕΔϦεΫ͕ͳ͍͔ etc…

    View full-size slide

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

    View full-size slide

  11. ② Term & CondiAons

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ௕͍, ೉͍͠, ෼͔Γʹ͍͘!

    View full-size slide

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

    View full-size slide


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

    View full-size slide

  17. Compliance
    Creator

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Compliance
    Creator

    View full-size slide

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

    View full-size slide

  22. ③ UI History of Term & CondiAons

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. To Be Condnued…
    1 2 3 4

    View full-size slide

  33. ④ Collaborate with Compliance

    View full-size slide

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

    View full-size slide

  35. Word HTML
    Markdown

    View full-size slide

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

    View full-size slide

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

    (Web)
    TextView

    (Android)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. Word Word
    Markdown
    ݪຊ
    چݪຊ

    View full-size slide

  46. Word Word
    Markdown
    ݪຊ

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  49. Confluence ؅ཧͷ๾໓ʹ੒ޭ

    View full-size slide

  50. GitLab ͰͷҰݩ؅ཧʹ

    View full-size slide

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

    View full-size slide

  52. ⑤ As a Frontend Engineer

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ΠΞϯε
    Ϛʔέ

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

    View full-size slide

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

    View full-size slide