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
530
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
520
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
640
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
610
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.3k
Other Decks in Design
See All in Design
portfolio.pdf
onof003
0
200
アクセシビリティに取り組むメリット
magi1125
2
270
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
210
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
190
Correspondence:共に生成していく過程
akiramotomura
0
110
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
170
decksh object reference
ajstarks
2
1.3k
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
150
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
120
【最新】マズロー安達の弟子実績(1期-6期の37人分)
maslow_akkun
0
3.1k
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
160
CursorでAI活用のナレッジベースを構築する
kanzaki
0
800
Featured
See All Featured
Side Projects
sachag
455
43k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Thoughts on Productivity
jonyablonski
70
4.9k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Optimizing for Happiness
mojombo
379
70k
Code Reviewing Like a Champion
maltzj
526
40k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Music & Morning Musume
bryan
46
6.9k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
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