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

Eeff1c9b0fb81b813e97dc8436c1b0f8?s=47 pika_shi
February 11, 2018

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

Inside Frontend #2

Eeff1c9b0fb81b813e97dc8436c1b0f8?s=128

pika_shi

February 11, 2018
Tweet

Transcript

  1. ňن໿ʹಉҙʼnͷUX Inside Frontend #2 (2018/02/11) @pika_shi - Hikaru Takemura -

    ετϨεϑϦʔͳಉҙUIͱͦͷ࣮ݱํ๏ -
  2. ‣ Hikaru Takemura ( @pika_shi ) ‣ Frontend Engineer at

    FOLIO ‣ Por4olio: pikashi.tokyo
  3. ① What is Compliance? ίϯϓϥΠΞϯεͱ͸ʁ ② Term & Condi>ons ར༻ن໿ʹ͍ͭͯ

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

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

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

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

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

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

  10. ‣ FOLIO ͸ۚ༥ػؔͰ͋Γ, αʔϏε UI ͱίϯϓ ϥΠΞϯε͸ৗʹഎத߹Θͤ ‣ ௨ৗͷ Web

    αʔϏεͰ͸౰ͨΓલͷ͜ͱ͕౰ͨ ΓલʹͰ͖ͳ͍ੈքͰ, ߴ͍ UX Λ໨ࢦ͍ͯ͘͠ඞ ཁ͕͋Δ COMPLIANCE
  11. ② Term & CondiAons

  12. 7%

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

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

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

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

    ͯ͠αʔϏεΛ࢖ͬͯ΋Β͏͜ͱʼn TERM & CONDITIONS
  17. None
  18. ۚ༥঎඼औҾ๏ (ۚ঎๏) ʹͷͬͱΓ, ๲େͳྔͷॻྨʹ໨Λ௨ͯ͠΋Β͏ඞཁ͕͋Δ

  19. Compliance Creator

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

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

  22. Compliance Creator

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

  24. ③ UI History of Term & CondiAons

  25. 1 2 3 4 ‣ 100 ϖʔδΛ 1 ຕͷ PDF

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

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

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

    ʹ ‣ ॻ໘ΛΫϦοΫ͢ΔͱಉҙϘλϯ͕ΞΫςΟϒʹ ?
  29. ‣ ϦϯΫ͕ n ݸʹͳΔͱ, ϢʔβͷϝΠϯίϯςΩ ετ͔Βͷ཭୤ (ผλϒભҠ) ͕ n ճʹͳΔ

    ‣ Ұൠతͳ Web αʔϏεͰ͸, ಡΉ͔εϧʔ͢Δ͔ Λબ΂ΔͷͰ GOOD UI ͕ͩ, ඞͣΫϦοΫͯ͠΄ ͍͠৔߹ʹ͸཭୤ͷڧ੍ͱͳΓ BAD UI ͱԽ͢
  30. 1 2 3 4 ‣ ॻ໘Λϖʔδ಺ʹຒΊࠐΈ, Ϟʔμϧ UI Ͱදࣔ

  31. ‣ Ϣʔβ͕ϖʔδ͔Β཭୤ͤͣʹॻ໘ʹ໨Λ௨ͤΔ ‣ Ϟʔμϧ͸ň෇Ճతʹ৘ใΛఏࣔ͢Δʼnೝ஌ͷ͋Δ UI ͳͷͰ, ॻ໘ʹॏ͍ۤ͠ΠϝʔδΛ༩͑ͳ͍ ‣ FOLIO Ͱ͸༷ʑͳ৔໘Ͱॻ໘΁ͷಉҙΛଅ͢ඞ

    ཁ͕͋Δ͕, Ϟʔμϧʹ౷Ұ͢Δ͜ͱͰ, ͲΜͳ৔ ໘Ͱ΋ίϯςΩετΛҡ࣋ͭͭ͠දࣔͰ͖Δ
  32. 1 2 3 4

  33. ‣ PDF ͷจࣈαΠζ͕σϑΥϧτͰখ͘͞ͳͬͯ͠ ·͍, Ϣʔβ͕ٯʹܯռ৺Λ࣋ͬͯ͠·͏ ‣ <object /> Ͱ PDF

    ຒΊࠐΈΛ͍͕ͯͨ͠, ؀ڥґ ଘͷόά͕ඇৗʹଟ͘ϝϯς͕େม
  34. 1 2 3 4

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

    3 4
  36. To Be Condnued… 1 2 3 4

  37. ④ Collaborate with Compliance

  38. Word → HTML Creator Compliance ‣ UX ޲্ͷͨΊʹ, Word →

    HTML ͕ෆՄܽͩͬͨ
  39. Word HTML

  40. Word HTML Markdown

  41. Word HTML Markdown ‣ ϞόΠϧΞϓϦͳͲ, Web Ҏ֎ͷΫϥΠΞϯτͰ ΋࠷దͳܗͰදࣔͰ͖ΔΑ͏ʹ͢ΔͨΊ ‣ HTML

    ͸͋͘·Ͱ Web ༻ͷੜ੒෺ͷ 1 ͭͱ͍͏ Ґஔ͚ͮ
  42. Word HTML Markdown AKributed String (iOS) React Component
 (Web) TextView


    (Android)
  43. Word HTML Markdown ‣ Pandoc (CLI ͷυΩϡϝϯτม׵πʔϧ) Ͱͬ͘͟ ΓͱMarkdownʹม׵ ‣Word

    ಛ༗ͷه๏΍ϦονͳදͳͲ͸खಈͰमਖ਼ Λ͓͜ͳ͍׬੒
  44. Word HTML Markdown ‣ markdown-styles Λ࢖ͬͯ HTML ʹม׵ ‣ ΫΦϦςΟͷߴ͍ελΠϧ͕ͦΖ͍ͬͯΔͷͰ͓

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

    ͢͢Ί
  46. ‣ ॻ໘ݪຊΛ Markdown ʹ͢Δʹ͋ͨΓ, ίϯϓϥ ΠΞϯε෦Ͱ؅ཧ͞Ε͍ͯͨ Word Λ, ΫϦΤΠ λʔͱίϯϓϥ͕ͱ΋ʹ࢖͑Δ

    Confluence ΁Ҡߦ ‣ Markdown ͷॻ͖ํΛڞ༗͠, Confluence Λίϯ ϓϥͱΫϦΤΠλʔͰڞಉฤू͠͸͡Ί͕ͨ…
  47. Compliance Creator หޢ࢜ͱͷ΍ΓͱΓ͸
 Word Ͱͳ͍ͱͰ͖ͳ͍! Confluence ͩͱཤྺΛḷΓʹ͘ ͍ͷͰ git Ͱ؅ཧ͍ͨ͠!

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

  49. ‣ Word ͕ඞཁͳͷ͸෼͔Δ͕, ໨తΛߟ͑ΔͱԿ ΋چݪຊΛ؅ཧ͢Δඞཁ͸ͳ͍ͷͰ͸ʁ ‣ Markdown ͔Β Pandoc Ͱ

    Word Λٯੜ੒͠, ͦ ͪΒΛ࢖͏͜ͱ͸Ͱ͖ͳ͍͔ Markdown → Word Word Word Markdown ݪຊ چݪຊ
  50. Word Word Markdown ݪຊ چݪຊ

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

  52. Confluence → GitLab ‣ Word ͸๾໓Ͱ͖͕ͨ, ґવͱͯ͠ Confluence ͱ GitLab

    ͷೋॏ؅ཧ ‣ ίϯϓϥͷํʑʹ GitLab Λར༻ͯ͠΋Β͏͜ͱ ͸Ͱ͖ͳ͍͔ʁ ‣ Markdown ͷฤू͚ͩͩͱ Web UI Ͱ׬݁͢Δ
  53. ‣ GitLab ͷ࢖͍ํΛυΩϡϝϯτʹ·ͱΊ, ϋϯζ ΦϯΛ࣮ࢪ ‣ ݱࡏ͸ίϯϓϥͷํʑʹ GitLab Λ௚઀ฤूͯ͠ ΋Β͍ͬͯΔ

  54. Confluence ؅ཧͷ๾໓ʹ੒ޭ

  55. None
  56. GitLab ͰͷҰݩ؅ཧʹ

  57. COLLABORATION ‣ ίϯϓϥΠΞϯεͷํʑͱ, զʑ Web ΤϯδχΞ Ͱ͸όοΫάϥ΢ϯυ͕େ͖͘ҟͳΓ, ͦΕͧΕ ͷۀքͷ׳श΋͋Δ ‣

    ͦΕΛཧղ্ͨ͠Ͱ, গͣͭ͠าΈد͍ͬͯ͘͜ ͱ͕େ੾ (ܾͯ͠΍ΓํΛԡ͠෇͚ͨΓ͸͠ͳ͍) ‣ ͜ͷ͋ͨΓ͕ FinTech ͳΒͰ͸ͷ୉ޣຯͰ΋͋Δ
  58. ⑤ As a Frontend Engineer

  59. ‣ •• Tech ͱݺ͹ΕΔΑ͏ͳطଘͷۀքΛΑͯ͘͠ ͍ͨ͘Ίʹ͸, ΫϦΤΠλʔͷίϯϓϥΠΞϯε΍ ๏཯΁ͷཧղ΍าΈدΓ͕ඞਢ ‣ ٯʹ, ίϯϓϥΠΞϯε΍๏཯΁ͷ஌͕ࣝͳ͍ͱ,

    ߴ͍ UX Λ໨ࢦ͢͜ͱ͸౸ఈͰ͖ͳ͍ ‣ FOLIO Ͱ΋, Web ۀքग़਎ͷଟ͘ͷΫϦΤΠλʔ ͕ূ݊֎຿һΛऔಘ͍ͯ͠Δ MediTech FinTech EdTech H ch
  60. ϑϩϯτ Τϯυ σβΠϯ γεςϜ ϑϩϯτ͸, σβΠϯ ͱ γεςϜ Λͭͳ͙ϋϒ

  61. σβΠϯ γεςϜ ίϯϓϥ
 ΠΞϯε Ϛʔέ
 ςΟϯά ϑϩϯτ Τϯυ ϑϩϯτ͸, σβΠϯ

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

    ؤு͍͖ͬͯ·͠ΐ͏ CONCLUSION