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
420
Other Decks in Design
See All in Design
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
freee + Product Design FY25Q4
freee
4
16k
#Dubois Challenge 2025: Economics
ajstarks
1
170
Cyber Heart Online Book
hjnasby
0
170
sachi_y_portfolio
sachi337
0
520
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
510
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.7k
Yumika Yamada Portfolio
yumii
0
1.3k
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
270
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
870
Featured
See All Featured
Fireside Chat
paigeccino
39
3.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Into the Great Unknown - MozCon
thekraken
40
2k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
RailsConf 2023
tenderlove
30
1.2k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
A better future with KSS
kneath
239
17k
Designing Experiences People Love
moore
142
24k
GraphQLとの向き合い方2022年版
quramy
49
14k
Gamification - CAS2011
davidbonilla
81
5.4k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Six Lessons from altMBA
skipperchong
28
4k
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 Ҡߦ͢ΔͨΊʹ