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
16
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
480
[2023/10/06 - Four Keysで改善する開発生産性] フロントエンド開発における、 デプロイ頻度を上げるための テスト設計と仕組みづくりのヒント / Tips for designing and structuring tests to increase deployment frequency in front-end development
becyn
17
2.7k
[2023.06.17] うちのデザインシステム
becyn
3
190
2023.03.08@高まるウェブアクセシビリティの需要ーfreee×ニューズピックスー〜フロントエンド最前線〜
becyn
0
27
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
becyn
0
70
[Next.js Update! 2021/11/24] Web Frontend Unit の立ち上げとリアーキテクチャに際してNext.js を採用したワケ
becyn
0
19
Other Decks in Design
See All in Design
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
270
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.6k
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
280
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
630
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
300
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
300
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
kiyoshifuwa
0
130
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
330
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
720
LLMによるRAG評価用合成テストデータの生成
licux
6
710
LayerX DesignersDeck
layerx
PRO
0
2.8k
Goodpatch Tour💙 / We are hiring!
goodpatch
31
800k
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Site-Speed That Sticks
csswizardry
4
410
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Visualization
eitanlees
146
15k
Why Our Code Smells
bkeepers
PRO
336
57k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Facilitating Awesome Meetings
lara
52
6.2k
What's in a price? How to price your products and services
michaelherold
244
12k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.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 ଓ͖ɺ࠙ձͰ͓͠·͠ΐ͏ʔ🍻 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ