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
430
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
510
REASONの紹介 / Introductory talk about REASON
tipo159
1
390
PWAで何ができるようになるのか / What does PWA do
tipo159
1
950
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
620
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
490
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
1
630
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
590
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.3k
Other Decks in Design
See All in Design
マンガで分かるサービスデザインガイドライン
senryakuka
1
880
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
3.9k
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
rdlabo
1
150
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
600
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
120
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
480
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
350
Haley's adventure chase
ivettetwin
0
220
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
180
DC Style Redesign
mcduckyart
0
120
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
120
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.4k
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
320
Embracing the Ebb and Flow
colly
86
4.7k
Thoughts on Productivity
jonyablonski
69
4.7k
How STYLIGHT went responsive
nonsquared
100
5.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Designing for Performance
lara
609
69k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Adopting Sorbet at Scale
ufuk
77
9.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
A designer walks into a library…
pauljervisheath
206
24k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
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