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. ① What is Compliance? ίϯϓϥΠΞϯεͱ͸ʁ ② Term & Condi>ons ར༻ن໿ʹ͍ͭͯ

    ③ UI History of Term & Condi>ons ňن໿ʹಉҙʼnUI ͷมભ ④ Collaborate with Compliance UX ޲্ͷͨΊͷίϯϓϥͱͷڠۀ ⑤ As a Frontend Engineer ňϑϩϯτΤϯυΤϯδχΞʼnͱͯ͠ͷܞΘΓํ AGENDA
  2. ‣ FOLIO ͸ۚ༥ػؔͰ͋Γ, αʔϏε UI ͱίϯϓ ϥΠΞϯε͸ৗʹഎத߹Θͤ ‣ ௨ৗͷ Web

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

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

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

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

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

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

    ‣ Ұൠతͳ Web αʔϏεͰ͸, ಡΉ͔εϧʔ͢Δ͔ Λબ΂ΔͷͰ GOOD UI ͕ͩ, ඞͣΫϦοΫͯ͠΄ ͍͠৔߹ʹ͸཭୤ͷڧ੍ͱͳΓ BAD UI ͱԽ͢
  9. Word HTML Markdown ‣ markdown-styles Λ࢖ͬͯ HTML ʹม׵ ‣ ΫΦϦςΟͷߴ͍ελΠϧ͕ͦΖ͍ͬͯΔͷͰ͓

    ͢͢Ί ‣ ͜ΕʹΑΓॻ໘ͷ HTML Խ͕׬ྃ (ূ݊ձ͕ࣾ HTML Ͱॻ໘Λ഑෍͢Δͷ͸ॳʁ)
  10. ‣ ॻ໘ݪຊΛ Markdown ʹ͢Δʹ͋ͨΓ, ίϯϓϥ ΠΞϯε෦Ͱ؅ཧ͞Ε͍ͯͨ Word Λ, ΫϦΤΠ λʔͱίϯϓϥ͕ͱ΋ʹ࢖͑Δ

    Confluence ΁Ҡߦ ‣ Markdown ͷॻ͖ํΛڞ༗͠, Confluence Λίϯ ϓϥͱΫϦΤΠλʔͰڞಉฤू͠͸͡Ί͕ͨ…
  11. ‣ Word ͕ඞཁͳͷ͸෼͔Δ͕, ໨తΛߟ͑ΔͱԿ ΋چݪຊΛ؅ཧ͢Δඞཁ͸ͳ͍ͷͰ͸ʁ ‣ Markdown ͔Β Pandoc Ͱ

    Word Λٯੜ੒͠, ͦ ͪΒΛ࢖͏͜ͱ͸Ͱ͖ͳ͍͔ Markdown → Word Word Word Markdown ݪຊ چݪຊ
  12. Confluence → GitLab ‣ Word ͸๾໓Ͱ͖͕ͨ, ґવͱͯ͠ Confluence ͱ GitLab

    ͷೋॏ؅ཧ ‣ ίϯϓϥͷํʑʹ GitLab Λར༻ͯ͠΋Β͏͜ͱ ͸Ͱ͖ͳ͍͔ʁ ‣ Markdown ͷฤू͚ͩͩͱ Web UI Ͱ׬݁͢Δ
  13. COLLABORATION ‣ ίϯϓϥΠΞϯεͷํʑͱ, զʑ Web ΤϯδχΞ Ͱ͸όοΫάϥ΢ϯυ͕େ͖͘ҟͳΓ, ͦΕͧΕ ͷۀքͷ׳श΋͋Δ ‣

    ͦΕΛཧղ্ͨ͠Ͱ, গͣͭ͠าΈد͍ͬͯ͘͜ ͱ͕େ੾ (ܾͯ͠΍ΓํΛԡ͠෇͚ͨΓ͸͠ͳ͍) ‣ ͜ͷ͋ͨΓ͕ FinTech ͳΒͰ͸ͷ୉ޣຯͰ΋͋Δ
  14. ‣ •• Tech ͱݺ͹ΕΔΑ͏ͳطଘͷۀքΛΑͯ͘͠ ͍ͨ͘Ίʹ͸, ΫϦΤΠλʔͷίϯϓϥΠΞϯε΍ ๏཯΁ͷཧղ΍าΈدΓ͕ඞਢ ‣ ٯʹ, ίϯϓϥΠΞϯε΍๏཯΁ͷ஌͕ࣝͳ͍ͱ,

    ߴ͍ UX Λ໨ࢦ͢͜ͱ͸౸ఈͰ͖ͳ͍ ‣ FOLIO Ͱ΋, Web ۀքग़਎ͷଟ͘ͷΫϦΤΠλʔ ͕ূ݊֎຿һΛऔಘ͍ͯ͠Δ MediTech FinTech EdTech H ch