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
13k
「規約に同意」の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.6k
Other Decks in Technology
See All in Technology
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.7k
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
260
Lambda10周年!Lambdaは何をもたらしたか
smt7174
2
110
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
390
『Firebase Dynamic Links終了に備える』 FlutterアプリでのAdjust導入とDeeplink最適化
techiro
0
140
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
0
190
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
130
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
160
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Speed Design
sergeychernyshev
25
620
The Art of Programming - Codeland 2020
erikaheidi
52
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Building Your Own Lightsaber
phodgson
103
6.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Facilitating Awesome Meetings
lara
50
6.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
It's Worth the Effort
3n
183
27k
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