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
410
Other Decks in Design
See All in Design
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
120
Kid Cowboy 103
marilutwin
0
300
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
340
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
520
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
320
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
660
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
140
The Spectacular Lies of Maps
axbom
PRO
1
240
Memory Man v3 (WIP)
storybychad
PRO
0
2.4k
UXデザインはなぜ定着しないのか?
designstudiopartners
0
850
信念を持つ方法
magi1125
0
180
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
730
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
How STYLIGHT went responsive
nonsquared
100
5.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
880
A designer walks into a library…
pauljervisheath
207
24k
Adopting Sorbet at Scale
ufuk
77
9.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to Ace a Technical Interview
jacobian
278
23k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
The Cost Of JavaScript in 2023
addyosmani
51
8.8k
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 Ҡߦ͢ΔͨΊʹ