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
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
670
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
120
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.8k
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
370
How to get a Tiger to Tulsa
mcduckyart
0
110
オープンデータを利用して色々なものを作った話
hjmkth
1
110
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
2.1k
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.8k
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
670
The Golden Whitney
ohtristanart
PRO
0
500
Echoes Boomerang
artcloudyu
PRO
0
240
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Code Reviewing Like a Champion
maltzj
524
40k
4 Signs Your Business is Dying
shpigford
184
22k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Cult of Friendly URLs
andyhume
79
6.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Speed Design
sergeychernyshev
32
1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
BBQ
matthewcrist
89
9.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