Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
1
480
Other Decks in Design
See All in Design
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
220
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
0
250
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
910
What makes a great Director?
_limex_
0
350
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
370
チームをデザイン対象にする / Design for your team
kaminashi
0
120
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
450
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1.3k
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
170
アクセシビリティに取り組むメリット
magi1125
2
280
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
0
230
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
140
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Navigating Team Friction
lara
191
16k
Making the Leap to Tech Lead
cromwellryan
135
9.7k
Speed Design
sergeychernyshev
33
1.4k
KATA
mclloyd
PRO
32
15k
Producing Creativity
orderedlist
PRO
348
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
7.8k
Practical Orchestrator
shlominoach
190
11k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
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 Ҡߦ͢ΔͨΊʹ