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
22
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
600
[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
33
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
becyn
0
81
[Next.js Update! 2021/11/24] Web Frontend Unit の立ち上げとリアーキテクチャに際してNext.js を採用したワケ
becyn
0
25
Other Decks in Design
See All in Design
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
480
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
2.8k
私とデザインの10年
iflection
0
130
AI動画生成ガチャ紹介
piyo7
1
100
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
120
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
550
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
420
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
180
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
230
Goodpatch Tour💙 / We are hiring!
goodpatch
31
850k
デザイナーとPMの両ロール_3つのポイント
toy1618
1
320
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
For a Future-Friendly Web
brad_frost
179
9.8k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Raft: Consensus for Rubyists
vanstee
140
7k
The Cult of Friendly URLs
andyhume
79
6.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
43
2.4k
Optimizing for Happiness
mojombo
379
70k
Navigating Team Friction
lara
186
15k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Side Projects
sachag
455
42k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Visualization
eitanlees
146
16k
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 ଓ͖ɺ࠙ձͰ͓͠·͠ΐ͏ʔ🍻 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ