Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
「規約に同意」のUX -ストレスフリーな同意UIとその実現方法-
pika_shi
February 11, 2018
Technology
20
10k
「規約に同意」のUX -ストレスフリーな同意UIとその実現方法-
Inside Frontend #2
pika_shi
February 11, 2018
Tweet
Share
More Decks by pika_shi
See All by pika_shi
JSON Schema Centralized Design
pika_shi
5
3.4k
Other Decks in Technology
See All in Technology
5分で完全理解するGoのiota
uji
3
1.9k
2022年度ロボットフロンティア第1回
ryuichiueda
0
140
Data-Driven Healthcare - Techplay
kotaroito
0
110
jaws-ug-asa-datasync-20220510
hiashisan
0
470
目と耳を持った自然言語処理 - スタートアップにおける価値創出のために
yag_ays
PRO
0
520
Research Paper Introduction #98 "NSDI 2022 recap"
cafenero_777
0
200
AWS CloudShellという推しサービスについて / lt-20220502-jawsug-cli
becominn
0
650
プロダクトグロースと技術のベースアップを両立させるRettyのアプリ開発スタイル / Achieve Product Growth and Tech Update
imaizume
1
270
AWS Control TowerとAWS Organizationsを活用した組織におけるセキュリティ設定
fu3ak1
2
620
Kubernetesの上に作る、統一されたマイクロサービス運用体験
tkuchiki
1
750
A Conditional Point Diffusion-Refinement Paradigm for 3D Point Cloud Completion
takmin
0
200
Babylon.js で簡単 WebXR
yuhara0928
2
980
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
910
Fantastic passwords and where to find them - at NoRuKo
philnash
25
1.5k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
12k
Building Adaptive Systems
keathley
25
1.1k
Building Flexible Design Systems
yeseniaperezcruz
310
33k
What the flash - Photography Introduction
edds
61
9.9k
Mobile First: as difficult as doing things right
swwweet
212
7.5k
Transcript
ňنʹಉҙʼnͷUX Inside Frontend #2 (2018/02/11) @pika_shi - Hikaru Takemura -
ετϨεϑϦʔͳಉҙUIͱͦͷ࣮ݱํ๏ -
‣ Hikaru Takemura ( @pika_shi ) ‣ Frontend Engineer at
FOLIO ‣ Por4olio: pikashi.tokyo
① What is Compliance? ίϯϓϥΠΞϯεͱʁ ② Term & Condi>ons ར༻نʹ͍ͭͯ
③ UI History of Term & Condi>ons ňنʹಉҙʼnUI ͷมભ ④ Collaborate with Compliance UX ্ͷͨΊͷίϯϓϥͱͷڠۀ ⑤ As a Frontend Engineer ňϑϩϯτΤϯυΤϯδχΞʼnͱͯ͠ͷܞΘΓํ AGENDA
① What is Compliance?
גࣜձࣾFOLIO ۚ༥औҾۀऀ ؔ౦ࡒہʢۚʣୈ2983߸ʗՃೖڠձɿຊূ݊ۀڠձɺҰൠࣾஂ๏ਓຊࢿސۀڠձ גՁͷมಈʹΑΓଛࣦ͕ੜ͡Δ͓ͦΕ͕͋Γ·͢ɻৄࡉܖక݁લަॻ໘Λ֬͝ೝ͍ͩ͘͞ɻ
גࣜձࣾFOLIO ۚ༥औҾۀऀ ؔ౦ࡒہʢۚʣୈ2983߸ʗՃೖڠձɿຊূ݊ۀڠձɺҰൠࣾஂ๏ਓຊࢿސۀڠձ גՁͷมಈʹΑΓଛࣦ͕ੜ͡Δ͓ͦΕ͕͋Γ·͢ɻৄࡉܖక݁લަॻ໘Λ֬͝ೝ͍ͩ͘͞ɻ
גࣜձࣾFOLIO ۚ༥औҾۀऀ ؔ౦ࡒہʢۚʣୈ2983߸ʗՃೖڠձɿຊূ݊ۀڠձɺҰൠࣾஂ๏ਓຊࢿސۀڠձ גՁͷมಈʹΑΓଛࣦ͕ੜ͡Δ͓ͦΕ͕͋Γ·͢ɻৄࡉܖక݁લަॻ໘Λ֬͝ೝ͍ͩ͘͞ɻ COMPLIANCE (اۀྙཧ, ๏ྩ९क)
גࣜձࣾFOLIO ۚ༥औҾۀऀ ؔ౦ࡒہʢۚʣୈ2983߸ʗՃೖڠձɿຊূ݊ۀڠձɺҰൠࣾஂ๏ਓຊࢿސۀڠձ גՁͷมಈʹΑΓଛࣦ͕ੜ͡Δ͓ͦΕ͕͋Γ·͢ɻৄࡉܖక݁લަॻ໘Λ֬͝ೝ͍ͩ͘͞ɻ
גࣜձࣾFOLIO ۚ༥औҾۀऀ ؔ౦ࡒہʢۚʣୈ2983߸ʗՃೖڠձɿຊূ݊ۀڠձɺҰൠࣾஂ๏ਓຊࢿސۀڠձ גՁͷมಈʹΑΓଛࣦ͕ੜ͡Δ͓ͦΕ͕͋Γ·͢ɻৄࡉܖక݁લަॻ໘Λ֬͝ೝ͍ͩ͘͞ɻ ෩આͷྲྀΛڐ༰͢ΔߦҝʹͳΓ͑ͳ͍͔ ૬ૢॎΛ͞ΕΔϦεΫ͕ͳ͍͔ etc…
‣ FOLIO ۚ༥ػؔͰ͋Γ, αʔϏε UI ͱίϯϓ ϥΠΞϯεৗʹഎத߹Θͤ ‣ ௨ৗͷ Web
αʔϏεͰͨΓલͷ͜ͱ͕ͨ ΓલʹͰ͖ͳ͍ੈքͰ, ߴ͍ UX Λࢦ͍ͯ͘͠ඞ ཁ͕͋Δ COMPLIANCE
② Term & CondiAons
7%
7% ར༻نશମͷ ͔͠ಡΜͰ͍ͳ͍
hKps:/ /www.gizmodo.jp/2017/07/wifi_terms_of_service_agreemen.html
hKps:/ /www.gizmodo.jp/2017/07/wifi_terms_of_service_agreemen.html ͍, ͍͠, ͔Γʹ͍͘!
‣ ͍͠จষΛॻ͖ͨͯ͘ॻ͍͍ͯΔΘ͚Ͱͳ͍ ‣ Ϣʔβͷղऍʹᴥᴪ͕ੜ͡ͳ͍Α͏ʹ, ݫີ͔ͭ ໌֬ʹॻ͔Ε͍ͯͳ͚ΕͳΒͳ͍ ‣ Ұํ, ຊདྷͷతňਖ਼͘͠ཧղͯ͠Β͍, ҆৺
ͯ͠αʔϏεΛͬͯΒ͏͜ͱʼn TERM & CONDITIONS
None
ۚ༥औҾ๏ (ۚ๏) ʹͷͬͱΓ, େͳྔͷॻྨʹΛ௨ͯ͠Β͏ඞཁ͕͋Δ
Compliance Creator
Compliance Creator ‣ γϯϓϧͰඒ͍͠ UI Λ อ͍ͪͨ ‣ Ͱ͖Δ͚ͩεϜʔζʹಉ ҙͤͯ͞ޱ࠲։ઃͷ
CVR ্Λࢦ͍ͨ͠
Compliance Creator ‣ Ϣʔβʹ͖ͪΜͱܖ ༰Λཧղͯ͠Β͍͍ͨ ‣ ैདྷͷॻ໘ԡҹʹྼΒ͵ Α͏, ৻ॏʹಉҙΛͯ͠ Β͍͍ͨ
Compliance Creator
Compliance Creator ͍͔ʹ εϜʔζ ʹ ৻ॏ ͳಉҙ͕Ͱ͖Δ͔ COLLABORATION
③ UI History of Term & CondiAons
1 2 3 4 ‣ 100 ϖʔδΛ 1 ຕͷ PDF
ʹ ‣ ॻ໘ΛΫϦοΫ͢ΔͱಉҙϘλϯ͕ΞΫςΟϒʹ
1 2 3 4 ‣ 100 ϖʔδΛ 1 ຕͷ PDF
ʹ ‣ ॻ໘ΛΫϦοΫ͢ΔͱಉҙϘλϯ͕ΞΫςΟϒʹ Compliance , ܖక݁લަॻ໘, ޱ࠲։ઃਃࠐॻͳͲ ੑ࣭ͷҧ͏ͷͳͷͰ͚ͯಉҙΛಘͨํ͕͍͍
1 2 3 4 ‣ 100 ϖʔδΛ 1 ຕͷ PDF
ʹ ‣ ॻ໘ΛΫϦοΫ͢ΔͱಉҙϘλϯ͕ΞΫςΟϒʹ ?
1 2 3 4 ‣ 100 ϖʔδΛ 1 ຕͷ PDF
ʹ ‣ ॻ໘ΛΫϦοΫ͢ΔͱಉҙϘλϯ͕ΞΫςΟϒʹ ?
‣ ϦϯΫ͕ n ݸʹͳΔͱ, ϢʔβͷϝΠϯίϯςΩ ετ͔Βͷ (ผλϒભҠ) ͕ n ճʹͳΔ
‣ Ұൠతͳ Web αʔϏεͰ, ಡΉ͔εϧʔ͢Δ͔ ΛબΔͷͰ GOOD UI ͕ͩ, ඞͣΫϦοΫͯ͠΄ ͍͠߹ʹͷڧ੍ͱͳΓ BAD UI ͱԽ͢
1 2 3 4 ‣ ॻ໘ΛϖʔδʹຒΊࠐΈ, Ϟʔμϧ UI Ͱදࣔ
‣ Ϣʔβ͕ϖʔδ͔Βͤͣʹॻ໘ʹΛ௨ͤΔ ‣ ϞʔμϧňՃతʹใΛఏࣔ͢Δʼnೝͷ͋Δ UI ͳͷͰ, ॻ໘ʹॏ͍ۤ͠ΠϝʔδΛ༩͑ͳ͍ ‣ FOLIO Ͱ༷ʑͳ໘Ͱॻ໘ͷಉҙΛଅ͢ඞ
ཁ͕͋Δ͕, Ϟʔμϧʹ౷Ұ͢Δ͜ͱͰ, ͲΜͳ ໘ͰίϯςΩετΛҡ࣋ͭͭ͠දࣔͰ͖Δ
1 2 3 4
‣ PDF ͷจࣈαΠζ͕σϑΥϧτͰখ͘͞ͳͬͯ͠ ·͍, Ϣʔβ͕ٯʹܯռ৺Λ࣋ͬͯ͠·͏ ‣ <object /> Ͱ PDF
ຒΊࠐΈΛ͍͕ͯͨ͠, ڥґ ଘͷόά͕ඇৗʹଟ͘ϝϯς͕େม
1 2 3 4
‣ ίϯϓϥͷํʑͱڠྗ͠, PDF Λͯ͢ HTML Խ ‣ εϚϗͰͳ͘දࣔ͞ΕΔΑ͏ʹͳͬͨ 1 2
3 4
To Be Condnued… 1 2 3 4
④ Collaborate with Compliance
Word → HTML Creator Compliance ‣ UX ্ͷͨΊʹ, Word →
HTML ͕ෆՄܽͩͬͨ
Word HTML
Word HTML Markdown
Word HTML Markdown ‣ ϞόΠϧΞϓϦͳͲ, Web Ҏ֎ͷΫϥΠΞϯτͰ ࠷దͳܗͰදࣔͰ͖ΔΑ͏ʹ͢ΔͨΊ ‣ HTML
͋͘·Ͱ Web ༻ͷੜͷ 1 ͭͱ͍͏ Ґஔ͚ͮ
Word HTML Markdown AKributed String (iOS) React Component (Web) TextView
(Android)
Word HTML Markdown ‣ Pandoc (CLI ͷυΩϡϝϯτมπʔϧ) Ͱͬ͘͟ ΓͱMarkdownʹม ‣Word
ಛ༗ͷه๏ϦονͳදͳͲखಈͰमਖ਼ Λ͓͜ͳ͍
Word HTML Markdown ‣ markdown-styles Λͬͯ HTML ʹม ‣ ΫΦϦςΟͷߴ͍ελΠϧ͕ͦΖ͍ͬͯΔͷͰ͓
͢͢Ί ‣ ͜ΕʹΑΓॻ໘ͷ HTML Խ͕ྃ (ূ݊ձ͕ࣾ HTML Ͱॻ໘Λ͢Δͷॳʁ)
Word HTML Markdown ‣ markdown-styles Λͬͯ HTML ʹม ‣ ΫΦϦςΟͷߴ͍ελΠϧ͕ͦΖ͍ͬͯΔͷͰ͓
͢͢Ί
‣ ॻ໘ݪຊΛ Markdown ʹ͢Δʹ͋ͨΓ, ίϯϓϥ ΠΞϯε෦Ͱཧ͞Ε͍ͯͨ Word Λ, ΫϦΤΠ λʔͱίϯϓϥ͕ͱʹ͑Δ
Confluence Ҡߦ ‣ Markdown ͷॻ͖ํΛڞ༗͠, Confluence Λίϯ ϓϥͱΫϦΤΠλʔͰڞಉฤू͠͡Ί͕ͨ…
Compliance Creator หޢ࢜ͱͷΓͱΓ Word Ͱͳ͍ͱͰ͖ͳ͍! Confluence ͩͱཤྺΛḷΓʹ͘ ͍ͷͰ git Ͱཧ͍ͨ͠!
Confluence, Word, GitLab ͷࡾॏཧʹ
‣ Word ͕ඞཁͳͷ͔Δ͕, తΛߟ͑ΔͱԿ چݪຊΛཧ͢Δඞཁͳ͍ͷͰʁ ‣ Markdown ͔Β Pandoc Ͱ
Word Λٯੜ͠, ͦ ͪΒΛ͏͜ͱͰ͖ͳ͍͔ Markdown → Word Word Word Markdown ݪຊ چݪຊ
Word Word Markdown ݪຊ چݪຊ
Word Word Markdown ݪຊ Word ཧͷ໓ʹޭ چݪຊ
Confluence → GitLab ‣ Word ໓Ͱ͖͕ͨ, ґવͱͯ͠ Confluence ͱ GitLab
ͷೋॏཧ ‣ ίϯϓϥͷํʑʹ GitLab Λར༻ͯ͠Β͏͜ͱ Ͱ͖ͳ͍͔ʁ ‣ Markdown ͷฤू͚ͩͩͱ Web UI Ͱ݁͢Δ
‣ GitLab ͷ͍ํΛυΩϡϝϯτʹ·ͱΊ, ϋϯζ ΦϯΛ࣮ࢪ ‣ ݱࡏίϯϓϥͷํʑʹ GitLab Λฤूͯ͠ Β͍ͬͯΔ
Confluence ཧͷ໓ʹޭ
None
GitLab ͰͷҰݩཧʹ
COLLABORATION ‣ ίϯϓϥΠΞϯεͷํʑͱ, զʑ Web ΤϯδχΞ ͰόοΫάϥϯυ͕େ͖͘ҟͳΓ, ͦΕͧΕ ͷۀքͷ׳श͋Δ ‣
ͦΕΛཧղ্ͨ͠Ͱ, গͣͭ͠าΈد͍ͬͯ͘͜ ͱ͕େ (ܾͯ͠ΓํΛԡ͚ͨ͠Γ͠ͳ͍) ‣ ͜ͷ͋ͨΓ͕ FinTech ͳΒͰͷޣຯͰ͋Δ
⑤ As a Frontend Engineer
‣ •• Tech ͱݺΕΔΑ͏ͳطଘͷۀքΛΑͯ͘͠ ͍ͨ͘Ίʹ, ΫϦΤΠλʔͷίϯϓϥΠΞϯε ๏ͷཧղาΈدΓ͕ඞਢ ‣ ٯʹ, ίϯϓϥΠΞϯε๏ͷ͕ࣝͳ͍ͱ,
ߴ͍ UX Λࢦ͢͜ͱ౸ఈͰ͖ͳ͍ ‣ FOLIO Ͱ, Web ۀքग़ͷଟ͘ͷΫϦΤΠλʔ ͕ূ݊֎һΛऔಘ͍ͯ͠Δ MediTech FinTech EdTech H ch
ϑϩϯτ Τϯυ σβΠϯ γεςϜ ϑϩϯτ, σβΠϯ ͱ γεςϜ Λͭͳ͙ϋϒ
σβΠϯ γεςϜ ίϯϓϥ ΠΞϯε Ϛʔέ ςΟϯά ϑϩϯτ Τϯυ ϑϩϯτ, σβΠϯ
ͱ γεςϜ Λͭͳ͙ϋϒ
‣ ϑϩϯτΤϯυΤϯδχΞ, ͨͩňϑϩϯτΤϯ υΛ։ൃ͢Δʼn͚͕ͩࣄͰͳ͍ ‣ σβΠϯͱγεςϜͱີʹܞΘΔϙδγϣ ϯͱଊ͑Δ͜ͱͰ, Ͱ͖Δ͜ͱҰؾʹ͕Δ ‣ ϑϩϯτΤϯυ,
ؤு͍͖ͬͯ·͠ΐ͏ CONCLUSION