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
從開發到架構設計的可觀測性實踐
philipz
0
120
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
25k
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
takatama
4
1.5k
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.2k
mnt_data_とは?ChatGPTコード実行環境を深堀りしてみた
icck
0
210
うちの会社の評判は?SNSの投稿分析にAIを使ってみた
doumae
0
270
Slackひと声でブログ校正!Claudeレビュー自動化編
yusukeshimizu
3
180
Javaアプリケーションの配布とパッケージング / Distribution and packaging of Java applications
hogelog
1
250
オープンソースのハードウェアのコンテストに参加している話
iotengineer22
0
650
GoogleのAI Agent
shukob
0
140
RDRA3.0を知ろう
kanzaki
2
430
Swiftは最高だよの話
yuukiw00w
2
290
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Cost Of JavaScript in 2023
addyosmani
49
8.1k
The Cult of Friendly URLs
andyhume
78
6.4k
BBQ
matthewcrist
88
9.7k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
A Tale of Four Properties
chriscoyier
159
23k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
KATA
mclloyd
29
14k
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