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

by pika_shi

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

① What is Compliance?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

② Term & CondiAons

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

hKps:/ /www.gizmodo.jp/2017/07/wiﬁ_terms_of_service_agreemen.html

Slide 15

Slide 15 text

hKps:/ /www.gizmodo.jp/2017/07/wiﬁ_terms_of_service_agreemen.html ௕͍, ೉͍͠, ෼͔Γʹ͍͘!

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Compliance Creator

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Compliance Creator

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

③ UI History of Term & CondiAons

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

1 2 3 4

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

1 2 3 4

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

To Be Condnued… 1 2 3 4

Slide 37

Slide 37 text

④ Collaborate with Compliance

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Word HTML

Slide 40

Slide 40 text

Word HTML Markdown

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Word HTML Markdown AKributed String (iOS) React Component  (Web) TextView  (Android)

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Compliance Creator หޢ࢜ͱͷ΍ΓͱΓ͸  Word Ͱͳ͍ͱͰ͖ͳ͍! Conﬂuence ͩͱཤྺΛḷΓʹ͘ ͍ͷͰ git Ͱ؅ཧ͍ͨ͠!

Slide 48

Slide 48 text

Conﬂuence, Word, GitLab ͷࡾॏ؅ཧʹ

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Word Word Markdown ݪຊ چݪຊ

Slide 51

Slide 51 text

Word Word Markdown ݪຊ Word ؅ཧͷ๾໓ʹ੒ޭ چݪຊ

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Conﬂuence ؅ཧͷ๾໓ʹ੒ޭ

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

GitLab ͰͷҰݩ؅ཧʹ

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

⑤ As a Frontend Engineer

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

σβΠϯ γεςϜ ίϯϓϥ  ΠΞϯε Ϛʔέ  ςΟϯά ϑϩϯτ Τϯυ ϑϩϯτ͸, σβΠϯ ͱ γεςϜ Λͭͳ͙ϋϒ

Slide 62

Slide 62 text

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