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
Atomic designで助かった人たち
Search
Yukako IIDA
December 06, 2016
Design
0
10
Atomic designで助かった人たち
frontrend vol.8 LT枠にて、AbemaTVで採用しているatomic designの話を「Atomic designで助かった人たち」というタイトルで発表しました。
Yukako IIDA
December 06, 2016
Tweet
Share
More Decks by Yukako IIDA
See All by Yukako IIDA
[2023/10/06 - Four Keysで改善する開発生産性] フロントエンド開発における、 デプロイ頻度を上げるための テスト設計と仕組みづくりのヒント / Tips for designing and structuring tests to increase deployment frequency in front-end development
becyn
16
2.4k
[2023.06.17] うちのデザインシステム
becyn
3
160
2023.03.08@高まるウェブアクセシビリティの需要ーfreee×ニューズピックスー〜フロントエンド最前線〜
becyn
0
14
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
becyn
0
47
[Next.js Update! 2021/11/24] Web Frontend Unit の立ち上げとリアーキテクチャに際してNext.js を採用したワケ
becyn
0
10
Other Decks in Design
See All in Design
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.4k
UIをもたらすコンテクストの考察
securecat
9
2.6k
root Design Partnership Policy
root_recruit
0
4.1k
Sociotechnical design for software and human systems
xinyao
2
500
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
640
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
360
ポートフォリオ思考を通じたデザイナーキャリアの形成と未来への展望
recruitengineers
PRO
3
2.3k
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
0
4.4k
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.3k
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.4k
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
200
ウェブディレクターを救うBacklog
wattlaa
0
290
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
How to train your dragon (web standard)
notwaldorf
74
5.2k
What's new in Ruby 2.0
geeforr
337
31k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Happy Clients
brianwarren
92
6.4k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
BBQ
matthewcrist
80
8.8k
Facilitating Awesome Meetings
lara
43
5.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
222
21k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Transcript
atomic designͰ ͔ͨͬͨ͢ਓͨͪ front-end engineer@AbemaTV Yukako IIDA @becyn
about myself • front-end engineer @ AbemaTV • AbemaTV join࣌ۀͰͷfrontܦݧ΄΅0
• atomic designʹͱͯॿ͚ΒΕͨਓ • server-side 2.5y • android 0.5y
what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏ • ཻʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠ ATOMS MOLECULES ORGANISMS
TEMPLATES PAGES
what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏ • ཻʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠ ATOMS MOLECULES ORGANISMS
TEMPLATES PAGES ίϯϙʔωϯτͷதͷ࠷খ୯Ґ
what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏ • ཻʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠ ATOMS MOLECULES ORGANISMS
TEMPLATES PAGES ATOMSΛΈ߹Θͤͨͷ
what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏ • ཻʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠ ATOMS MOLECULES ORGANISMS
TEMPLATES PAGES ߋʹΈ߹Θͤͨ ࠶ར༻Մೳͳͷύʔπ
what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏ • ཻʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠ ATOMS MOLECULES ORGANISMS
TEMPLATES PAGES ۩ମతʹ֤ίϯϙʔωϯτͷ ؔΛද͍ͯ͠Δͷ
what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏ • ཻʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠ ATOMS MOLECULES ORGANISMS
TEMPLATES PAGES ςϯϓϨʔτͷΠϯελϯε
what’s atomic design? • σβΠϯγεςϜΛ࡞ΔͨΊͷํ๏ • ཻʹΑͬͯɺίϯϙʔωϯτΛ5ͭʹ۠ ATOMS MOLECULES ORGANISMS
TEMPLATES PAGES ͜ΕΛݩʹϓϩμΫτͷσβΠϯγεςϜΛ࡞͍ͬͯ͘
what’s atomic design? • AbemaTVͰҎԼͷ3۠ͷΈ࠾༻ ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
atomic design খ with me
atomic design খ • ҟಈॳɺڥඋͨ͠ޙɺ 1PR͚ͩͰ͍͍͔Β௺ࠟͯ͠ؼΓ͍ͨ…ʂ • ॳͷλεΫ͍͍ͨͩͨ • ͰͲ͔͜Βணखͨ͠Β͍͍ͷ͔ख୳Γ😭
None
atomic design খ • ͔Βͷ atomic design ʹ͍ͭͯͷઆ໌Λࢥ͍ग़͠ɺ ͍͍ͨͩͨσβΠϯΛཻ͝ͱʹղ atomic
design ͷಋࢣ @ygoto3_
hover࣌
͜Ε͕ҰͭͷओͳཁૉͬΆ͍
ओͳίϯϙʔωϯτͷதͷओͳίϯϙʔωϯτ
hover࣌ ͦΕͧΕͰ ఆٛͰ͖ͦ͏ ͬͱղͰ͖Δʂ·͍͚ͩΔʂ
ORGANISMS MOLECULES ATOMS ORGANISMS hover࣌ ATOMS ATOMS
atomic design খ • ͔Βͷ atomic design ʹ͍ͭͯͷઆ໌Λࢥ͍ग़͠ɺ ͍͍ͨͩͨσβΠϯΛཻ͝ͱʹղ •
ҟಈॳʹ”όϧʔϯͷ࡞” ͷ PRΛૹΔ͜ͱ͕Ͱ͖ͨʢ҆ṉʣ atomic design ͷಋࢣ @ygoto3_ ͜ͷtooltipత balloon࡞PR
atomic designΛݩʹ͠ɺ ʮίϯϙʔωϯτࢥߟʯͷ ʢײ֮తʹڞ༗͍ͯ͠ΔʣཻΛ ΑΓΘ͔Γ͘͢ೝࣝՄೳʹʂ
atomic design খ with designers
atomic design খ (2) ͜ͷؒͷΞϨͱΞϨΈ߹Θͤͯ งғؾͰ࡞͓ͬͯ͘ͷͰɺ ଞͷσβΠϯͷޙணखͰOKͰ͢Α💪 ϑϩϯτΤϯυ͞Μ ৽ϖʔδͷσβΠϯΔͶ💦 σβΠφʔ͞Μ
࠷ߴɻ σβΠφʔ͞Μ
σβΠφʔ͞ΜͱѨჴͷݺٵ͕ ΑΓͰ͖ΔΑ͏ʹͳΔʂ ʢຊϦϦʔεલͱ͔ͱ͍͍ͯײ͡ʹಈ͚ͨʣ
atomic design খ (3) • σβΠφʔI௩͞Μ ʮ͜͜ɺΧϥʔίʔυมߋͰ͢ʂʯ • σβΠφʔUా ʮΞϓϦΞΠίϯͷѹॖɺมߋͨ͠ʂʯ
atomic design খ (3) • σβΠφʔI௩͞Μ ʮ͜͜ɺΧϥʔίʔυมߋͰ͢ʂʯ • σβΠφʔUా ʮΞϓϦΞΠίϯͷѹॖɺมߋͨ͠ʂʯ
Ͱͳ͘ɺ ্ͷձ
ߏ͕γϯϓϧͳͷͰɺ σβΠφʔ͞Μʹͱͬͯ ͓͠PRΛૹΓ͍͢ڥʂ
࠷ߴ
·ͱΊ
atomic designͷ͓͢͢ΊϙΠϯτ γϯϓϧͳߟ͑ ΤϯδχΞͷख़࿅ΛΘͣɺ νʔϜͰͷڞ௨ೝࣝΛ͍࣋ͪ͢ σβΠϯ͕౷Ұ͞Ε͍͢ ʮ͜ͷϖʔδ͚༷͕ͩҧ͏ʯͳͲ͕ͳ͘ͳΓɺ ϓϩμΫτΛ͍͍͢ɺૢ࡞ʹ໎͍͕ͳ͘ͳΔ σβΠφʔ͞ΜͱΑΓྑ͘ͳΕΔ ͢ػձ͕૿͑ɺ͓ޓ͍ʹํ๏Λ࣠ʹ͠ͳ͕Βɺ
ఏҊ͠߹͏ؔʹͳΕΔ
atomic designͰ ͔ͨͬͨ͢ਓͨͪ front-end engineer@AbemaTV Yukako IIDA ଓ͖ɺ࠙ձͰ͓͠·͠ΐ͏ʔ🍻 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ