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
23
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
[2024/09/28 - フロントエンド・オブザーバビリティ Meetup] フロントエンドエンジニアとして、オブザーバビリティにコミットすること
becyn
0
660
[2023/10/06 - Four Keysで改善する開発生産性] フロントエンド開発における、 デプロイ頻度を上げるための テスト設計と仕組みづくりのヒント / Tips for designing and structuring tests to increase deployment frequency in front-end development
becyn
17
2.8k
[2023.06.17] うちのデザインシステム
becyn
3
220
2023.03.08@高まるウェブアクセシビリティの需要ーfreee×ニューズピックスー〜フロントエンド最前線〜
becyn
0
34
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
becyn
0
84
[Next.js Update! 2021/11/24] Web Frontend Unit の立ち上げとリアーキテクチャに際してNext.js を採用したワケ
becyn
0
27
Other Decks in Design
See All in Design
freee + Product Design FY25Q4
freee
4
16k
7 Core Values of Round-L
wired888
0
1.8k
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
1.8k
エンジニアでも捗る デザイナー的思考入門
tinykitten
1
1.2k
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
3.9k
The Spectacular Lies of Maps
axbom
PRO
1
280
Findyのプロデチームの 歩みとこれから
satty9556
0
270
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
600
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
370
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
110
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
580
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.5k
Featured
See All Featured
Fireside Chat
paigeccino
39
3.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Building an army of robots
kneath
306
46k
Faster Mobile Websites
deanohume
309
31k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
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 ଓ͖ɺ࠙ձͰ͓͠·͠ΐ͏ʔ🍻 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ