Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
「規約に同意」のUX -ストレスフリーな同意UIとその実現方法-
Search
pika_shi
February 11, 2018
Technology
21
14k
「規約に同意」の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
4.9k
Other Decks in Technology
See All in Technology
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
670
AWSで始める実践Dagster入門
kitagawaz
1
580
シークレット管理だけじゃない!HashiCorp Vault でデータ暗号化をしよう / Beyond Secret Management! Let's Encrypt Data with HashiCorp Vault
nnstt1
3
230
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
17
7.3k
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
290
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
9.7k
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.2k
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
660
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
260
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
120
フィンテック養成勉強会#56
finengine
0
140
Featured
See All Featured
Producing Creativity
orderedlist
PRO
347
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Balancing Empowerment & Direction
lara
3
620
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
It's Worth the Effort
3n
187
28k
We Have a Design System, Now What?
morganepeng
53
7.8k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Agile that works and the tools we love
rasmusluckow
330
21k
The Invisible Side of Design
smashingmag
301
51k
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