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

Inside Frontend #2

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
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 ؅ཧͷ๾໓ʹ੒ޭ
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