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
Webデザイナーに聞きたいこと / Questions to ask web designers
Search
tipo159
December 08, 2017
Design
0
170
Webデザイナーに聞きたいこと / Questions to ask web designers
Webデザイナーに期待すること
・Webデザイナーの役割
・スタイルガイドが更新されないのはなぜか?
・デザイナーとエンジニアの共同作業方法
tipo159
December 08, 2017
Tweet
Share
More Decks by tipo159
See All by tipo159
Type-safe front-end development using Rust/Rustを使った型安全なフロントエンド開発
tipo159
0
440
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
520
REASONの紹介 / Introductory talk about REASON
tipo159
1
390
PWAで何ができるようになるのか / What does PWA do
tipo159
1
970
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
640
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
510
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
640
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
600
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.3k
Other Decks in Design
See All in Design
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
730
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
130
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.7k
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
180
Memory Man v3 (WIP)
storybychad
PRO
0
2.6k
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
140
Cyber Heart Online Book
hjnasby
0
180
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
620
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
280
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
130
7 Core Values of Round-L
wired888
0
1.8k
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
BBQ
matthewcrist
89
9.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Scaling GitHub
holman
463
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Faster Mobile Websites
deanohume
309
31k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
930
Transcript
WebσβΠφʔʹฉ͖͍ͨ͜ͱ Co-EdoͰΤϯδχΞɾWebσβΠφʔҿΈձ 2017.12.8 tipo159
LT༰ • 12/6ͷUX JAM 22Ͱͨ͠WebσβΠφʔͷํɿʮίϯϙʔωϯτ Λ͍ͬͯΔ͕ɼແବͳ࡞ۀ͕૿͑Δ͔Βݏ͍ʯ • ผͷํɿࠓWeb ComponentʹΑͬͯCSSͷॻ͖ํ͕Ͳ͏มΘΔ͔ Λ͢༧ఆͱݴͬͨΒɼʮWebσβΠφʔʹίʔσΟϯάدΓͷ
ฉ͍ͯΒ͑ͳ͍ͷͰʯ • ݸਓతʹWebσβΠφʔʹظ͢Δ͜ͱΛͯ͠ɼͦΕ͕Ͳͷఔ ड͚ೖΕΒΕΔͷ͔Λฉ͍ͯΈ͍ͨ • Ҏ߱ͷεϥΠυͷͷจࣈ͕ظ͢Δ͜ͱ 2
ίϯϙʔωϯτԽආ͚ΒΕͳ͍ • Material Components for the webͳͲͷCSSϑϨʔϜϫʔΫ͚ͩͰ ͳ͘ɼReactɾVue.jsɾAngularͳͲͷJavaScriptϑϨʔϜϫʔΫ ίϯϙʔωϯτΛ͍ͬͯΔ •W3CͰWebίϯϙʔωϯτͷඪ४Խ͕ਐΜͰ͍Δ
• Shadow DOM v1࡞ۀҊ(Working Draft)͕ͩɼChrome, Chrome for Android, Safari, iOS SafariͰ࣮ࡁΈͰɼFirefox, EdgeͰ࣮த • AtomicσβΠϯʹج͍ͮͯɼUIίϯϙʔωϯτͷઃܭͯͩ͘͠͞ ͍ 3
WebσβΠφʔͷׂ • WebΫϦΤʔλʔϘοΫεͷʮ͜Ε͔ΒͷWebσβΠϯɺίϯϙʔωϯτԽΛҙࣝ͠Α ͏ʯͱ͍͏هࣄͷʮ͜Ε͔ΒͷWebσβΠϯͷ࡞खॱʁʯʹ 1. ϓϥϯχϯά 2. αΠτϚοϓ࡞ 3. ϫΠϠʔϑϨʔϜɾϓϩτλΠϓ࡞
4. ελΠϧΨΠυ࡞ɾίϯϙʔωϯτσβΠϯ 5. ֤σόΠεʹରԠͨ͠ը໘σβΠϯ 6. ը૾ͷॻ͖ग़͠ 7. HTMLϚʔΫΞοϓ 8. CSSͰΈཱͯɾ০ 9. WebαΠτެ։ ͱॻ͔Ε͍ͯ·͕ͨ͠ɼWebσβΠφʔ͕1͔ΒࢀՃ͢Δ͜ͱͲͷ͘Β͍͋Γ·͔͢ʁ https://www.webcreatorbox.com/inspiration/component-design 4
ελΠϧΨΠυ͕ߋ৽͞Εͳ͍ͷͳ͔ͥʁ • WebΛݕࡧ͢Δͱʮ࠷ॳʹ࡞ͨ͠ελΠϧΨΠυ͕ɼߋ৽͞Εͣ ʹܗ֚Խ͢Δͱ͍͏ࣄྫʯ͕ଟݟ͔͕ͭͬͨɼελΠϧΨΠυ͕ ߋ৽͞Εͳ͍ͷͳͥͰ͔͢ʁ • WebΫϦΤʔλʔϘοΫεͷʮϒϥβ্ͰελΠϧΨΠυ͕࡞Ε ΔFrontifyΛࢼͯ͠ΈͨʯͰհ͞Ε͍ͯΔɼFrontify Style Guideͷ
Α͏ͳπʔϧΛར༻͢Δ͜ͱͰߋ৽ͷखؒΛݮͰ͖ΔͷͰʁ https://www.webcreatorbox.com/webinfo/style- guide-frontify https://frontify.com/styleguide 5
σβΠφʔͱΤϯδχΞͷڞಉ࡞ۀํ๏ • CSSϑΝΠϧΛϝʔϧͰΓऔΓ <- ϋοΧιϯͰܦݧ͋Γ • GitHubͰCSSϑΝΠϧΛڞ༗ • Storybook(React, React
Native, Vue.jsʹରԠ)ͷΑ͏ͳUI։ൃπʔϧ https://storybook.js.org/ • InVisionͷΑ͏ͳϓϩτλΠϓ։ൃπʔϧ https://invisionapp.com/ • ReactStudio(ReactʹରԠ)ͷΑ͏ͳΞϓϦέʔγϣϯ։ൃπʔϧ https://reactstudio.com/ 6
ॳͦ͏ͱߟ͍͑ͯͨ͜ͱ • Shadow DOM v1ͰScoped CSSͰɼCSSηϨΫλʔͷ໊લͷڝ߹ ͕ແ͘ͳΔ • BEMͷΑ͏ͳ໋໊͍نଇΘͳͯ͘ྑ͘ͳΔ •
CSS Containment Module Level 1(קࠂީิ:Candidate Recommendation)ͷcontainଐੑΛ͏ͱɼʮཁૉͱͦͷ༰͕ɼ จॻͷΓ͔ΒՄೳͳݶΓಠཱͰ͋Δʯ͜ͱΛࢦࣔͰ͖ΔΑ͏ʹ ͳΔɽ • Chrome, Chrome for Android࣮ࡁΈɼ 7