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
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
200
portfolio.pdf
onof003
0
160
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
290
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
510
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.6k
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
210
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.4k
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
430
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
310
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.8k
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
580
UXデザインはなぜ定着しないのか?
designstudiopartners
0
970
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
GitHub's CSS Performance
jonrohan
1032
460k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
The Invisible Side of Design
smashingmag
301
51k
Side Projects
sachag
455
43k
We Have a Design System, Now What?
morganepeng
53
7.8k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Speed Design
sergeychernyshev
32
1.1k
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