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
デザイン編 Hatena Engineer Seminar #19
Search
takuwolog
April 01, 2022
Design
3
1.6k
デザイン編 Hatena Engineer Seminar #19
takuwolog
April 01, 2022
Tweet
Share
More Decks by takuwolog
See All by takuwolog
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
430
Other Decks in Design
See All in Design
デザイナー向けフライル説明資料
toshiblues
0
160
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
610
Installing and Running decksh/pdfdeck
ajstarks
1
850
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.5k
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
900
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
310
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
250
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
140
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
120
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
480
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
140
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
560
Featured
See All Featured
Embracing the Ebb and Flow
colly
87
4.8k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Become a Pro
speakerdeck
PRO
29
5.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Automating Front-end Workflow
addyosmani
1371
200k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
KATA
mclloyd
32
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Transcript
Hatena Engineer Seminar #19 id: σβΠϯฤ ΧΫϤϜͷΛݟਾٕ͑ͨज़ takuwolog 2022.03.30
id:takuwolog ҏ౻ ϊϕϧνʔϜϦʔυσβΠφʔ
σβΠφʔ͕ΤϯδχΞͱ ڠۀͯ͠ίϯϙʔωϯτࢦͰ 3FBDUҠߦͨ͠ ࠓճͷ͓
ͷલఏ • ΧΫϤϜαϙʔλʔζύεϙʔτͷຊ֨తͳ։ൃ͕8݄͔Βελʔ τ • ͜ͷ։ൃ͔ΒReactҠߦΛ։࢝͠·ͨ͠ ◦ ಉ͡λΠϛϯάͰσβΠϯγεςϜͷߏங։࢝ • σβΠφʔۀͰHTMLͱCSSΛॻ͍͍ͯ·͢
◦ Ϣʔβʔͷखʹ৮ΕΔσβΠϯΛ࠷ޙ·Ͱ্͛Δ͜ͱ͕ త • σβΠφʔReactʹ৮Δͷ΄΅ॳΊͯͰ͢
४උ͢Δ ڞ௨ೝࣝΛἧ͑Δ
ϖʔδ͔Βίϯϙʔωϯτ globalNav (header) footer sidebar heroHeader main globalNav (header) footer
sidebar heroHeader main
ͳͥڠۀͯ͠ίϯϙʔωϯτΛ࡞Δͷ͔ ίϯϙʔωϯτʹݟͨͱৼΔ͍ʹؔ͢Δׂ͕͋Δ߹ ɺΤϯδχΞ͚ͩͰܾΊΕͳ͍ͷͰσβΠφʔҰॹʹ ͳͬͯߟ͍͑ͯ͘ɻ Ұॹʹͳͬͯߟ͍͑ͯ͘தͰϕετͳίϯϙʔωϯτͷ࢟Λ ࡧ͢Δɻ
ίϯϙʔωϯτͷ͍ํΛ໌֬ʹ͢Δ ίϯϙʔωϯτ͕େ͖͘ͳΓ͗͢ͳ͍Α͏ʹɺ·ͨ૿ ͑͗͢ͳ͍Α͏ʹɺԿΛ͢Δίϯϙʔωϯτͳͷ͔ɺ νʔϜͰೝࣝΛἧ͑Δɻ
UI Organisms etc… Ұ൪খ͍͞୯Ґ υϝΠϯʹґଘ͠ͳ͍ υϝΠϯݻ༗ͷ ػೳσβΠϯ Icon, TemplateͳͲ ίϯϙʔωϯτͷ୯Ґ
ڠۀ͢Δ ίϯϙʔωϯτ։ൃͷ ϫʔΫϑϩʔ
σβΠϯϞοΫ͔Β ίϯϙʔωϯτΛׂ͢Δ
ϖʔδ͔Βίϯϙʔωϯτʹ
ϖʔδ୯ҐͷϞοΫ
ίϯϙʔωϯτʹׂ
UI Organisms άϧʔϐϯά͢Δ
໋໊ɾґଘؔ
variantΛग़͓ͯ͘͠
σβΠϯπʔϧ্ͰίϯϙʔωϯτԽͯ͠λεΫʹ͢Δ
૬ஊɺ࣮ɺڞ༗
ࠔͬͨΒૉૣ͘૬ஊ • ϖΞϓϩ • ͨ͘͞Μ࣭ͯ͠ɺҙݟΛग़ ͠߹ͬͯɺݟΛͨΊΔ • ϨϏϡʔ૬ஊͷ
• Ͱݟͳ͕Βίϯϙʔωϯτ Λ࡞͍͚ͬͯΔͷͰσβΠ φʔϏϦςΟ͕ߴ͍ ◦ σβΠϯϨϏϡʔḿΔ • ͋Δఔ·Ͱ࡞ۀͯ͠ɺ࠷ऴ ௐ࣮ࡍͷը໘Λ࡞Γͳ͕ ΒਐΊͨ
StotybookͰ֬ೝ͠ͳ͕ΒਐΊΔ
ػೳͱݟͨͷ σβΠϯͷ߹Ͱى͜ΔίϯϙʔωϯτͷංେԽΛ͑Δ <Link> <LinkAppearance variant=’underline’ hoverVariant=’blue’>ϦϯΫ</LinkAppearance> </Link> <Link> <a> <ButtonAppearance
variant=’initial’>Ϙλϯ</ButtonAppearance> </a> </Link> LinkAppearanceͷvariants: ButtonAppearanceͷvariants:
νʔϜͰڞ༗͢Δ • ৽͍ܾ͠·ΓࣄจॻԽ͢Δ • ෳਓͰಉ࣌ਐߦͰ࡞ۀͯ͠ΔͷͰɺࣗͷΒͳ͍ͱ͜ΖͰ༷ʑͳ͜ ͱ͕ى͜Δ ◦ Β͵ؒʹศརͳίϯϙʔωϯτ͕ര͢Δ͜ͱ͋Δ ◦ ίϯϙʔωϯτͷ͍ํStorybookʹॻ͍͓ͯ͘
• ࡞ͬͨίϯϙʔωϯτΛνʔϜʹհ͢Δ ◦ ϓϩδΣΫτΛΓ্͛Δ׆ಈ
ঢ়گʹԠͯ͡ ৬छΛӽڥͯ͠։ൃ͢Δ
σβΠφʔ ΤϯδχΞ ঢ়گʹΑͬͯɺσβΠφʔͷख͕Γͳ͍ɺ ·ͨΤϯδχΞͷख͕Γͳ͍͜ͱ͕͋Δɻ ͜Ε·ͰͷݟΛ׆͔ͯ͠ӽڥͯ͠ΈΔɻ
σβΠφʔ͕ΤϯδχΞྖҬʹೖͬͯΈΔ • ίϯϙʔωϯτΛ৽نͰ࡞Δ ◦ ίʔυҰൃͰ৽نͰίϯϙʔωϯτͷܗ͕࡞Εͨ ◦ ੩తͳDOMΛॻ͍ͯͦ͜ʹελΠϧΛ͍ͯͯ͘ • طଘͷίϯϙʔωϯτΛ֦ு͢Δ ◦
σβΠϯʹؔ͢ΔPropsVariantΛ૿͢ σβΠφʔ͚ͩͰͰ͖Δ͜ͱΛ૿ͯ͠ͱޮΛ্͛ͨ
ΤϯδχΞʹσβΠφʔྖҬΛͬͯΒ͏ • ίϯϙʔωϯτ͕ἧͬͯ͘ΔͱͦΕΛΈ߹Θͤͯը໘Λ࡞Δ ͜ͱ͕Ͱ͖Δ ◦ σβΠϯͷ࠷ऴௐ͚ͩσβΠφʔ͕ೖΔ ◦ ࠷ऴௐ͚ͩͳͷͰ0͔Β࡞ΔΑΓ͍ ྟػԠมʹཱͪճΔ͜ͱͰϦιʔεΛ࠷େݶʹ׆͔͢
ӽڥͷ৺ߏ͑ • ·ͣͱΓ͋͑ͣͬͯΈΔ • ࣭lintVRTɺϨϏϡʔͳͲͰ୲อ͢Δ • ৺ཧత҆શੑσΠϦʔεΫϥϜͳͲͰ૬ஊ ্ख͍ͬͯ͘Δ߹ײँ͢Δɺͦͯ͠๙Ί߹͏ʂ
·ͱΊ
• ڞ௨ೝࣝΛἧ͑ͯҰॹʹ࡞ۀͰ͖ΔΑ͏ʹ • ϞοΫ͔ΒίϯϙʔωϯτͷઃܭਤΛ࡞Δ • ݟΛਂΊͯɺঢ়گʹԠͯ͡ӽڥͯ͠ΈΔ ΤϯδχΞͱڠۀͯ͠ίϯϙʔωϯτࢦͰReact Ҡߦ͢ΔͨΊʹ