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.8k
Other Decks in Technology
See All in Technology
ローカルLLMでファインチューニング
knishioka
0
130
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
yudai00
0
490
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
490
Amplifyとゼロからはじめた AIコーディング 成果と展望
mkdev10
1
360
Agentic Workflowという選択肢を考える
tkikuchi1002
1
400
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
iotcomjpadmin
0
150
新卒3年目の後悔〜機械学習モデルジョブの運用を頑張った話〜
kameitomohiro
0
390
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.6k
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
10
2.9k
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
180
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
730
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
150
Featured
See All Featured
Docker and Python
trallard
44
3.4k
The Cult of Friendly URLs
andyhume
79
6.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Making Projects Easy
brettharned
116
6.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Navigating Team Friction
lara
187
15k
Site-Speed That Sticks
csswizardry
10
650
Automating Front-end Workflow
addyosmani
1370
200k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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