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と刺さらない現場/Atomic Design and it fit ...
Search
果物リン
July 31, 2019
Technology
3
2k
Atomic Designと刺さらない現場/Atomic Design and it fit to Project or not
コンポーネント設計の話といえばAtomic Design一強な印象だけど、
Atomic Design、うまくいってますか?
果物リン
July 31, 2019
Tweet
Share
More Decks by 果物リン
See All by 果物リン
Electron+Vue+Swift=真のデスクトップアプリ / How to create "Really" desktop app using Electron
fruitriin
0
81
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
130
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
890
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
170
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
150
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
250
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
940
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
360
Other Decks in Technology
See All in Technology
【SORACOM UG Explorer 2025】さらなる10年へ ~ SORACOM MVC 発表
soracom
PRO
0
150
20251027_マルチエージェントとは
almondo_event
1
430
GraphRAG グラフDBを使ったLLM生成(自作漫画DBを用いた具体例を用いて)
seaturt1e
1
150
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
710
Building a cloud native business on open source
lizrice
0
180
AIエージェントによる業務効率化への飽くなき挑戦-AWS上の実開発事例から学んだ効果、現実そしてギャップ-
nasuvitz
5
1.2k
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
380
Dify on AWS 環境構築手順
yosse95ai
0
130
IoTLT@ストラタシスジャパン_20251021
norioikedo
0
140
Observability — Extending Into Incident Response
nari_ex
1
370
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
300
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
10k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
7k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Rails Girls Zürich Keynote
gr2m
95
14k
Agile that works and the tools we love
rasmusluckow
331
21k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
A better future with KSS
kneath
239
18k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Mobile First: as difficult as doing things right
swwweet
225
10k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Transcript
Atomic Designと 刺さらない現場 ՌϦϯ@FruitRiin גࣜձࣾΏΊΈ 2019/07/31 Roppongi.vue #2
Atomic Designͬͯ·͔͢ʁ
Atomic Design ͏·͍ͬͯ͘·͔͢ʁ
自己紹介 • ՌϦϯ@FruitRiin • גࣜձࣾΏΊΈ • ϑϩϯτΤϯυΤϯδχΞ • ϦʔυΤϯδχΞΒ͍͠ •
Vue͍͍ͧ • Ionic/Vue࠷ۙਪ͠
Atomic Designといえば Α͘ݟΔͭ
ϞμϯϑϩϯτΤϯυઃܭ ʹ͍͍ͩͨAtomic Designઆʁ
None
Atomic Designとは • σβΠϯΛݪࢠ͔ΒΈཱͯΔ • ڞ௨Ͱ͑Δࢠɾ༗ػମͱͯ͠࠶ར༻͕ಛ • શମͱͯ͠ͷ౷ҰײΛੜΈग़͢ σβΠϯγεςϜͷͻͱͭ
デザインシステム? “σβΠϯγεςϜͱɺσβΠϯͷݪଇɺ֓೦ɺΨΠυɺίϯ ϙʔωϯτͳͲɺσβΠϯʹؔ͢Δ͋ΒΏΔϧʔϧΛఆΊͨͷ ͷ͜ͱΛݴ͍·͢ɻ” “ελΠϧΨΠυίϯϙʔωϯτϥΠϒϥϦʢύλʔϯϥΠϒϥ ϦʣσβΠϯελΠϧͷҰ෦ʹ͋ͨΓ·͢ɻ” σβΠϯγεςϜΛਖ਼͘͠ཧղ͠Α͏ɻ࡞Γํɾࢀߟࣄྫͷ·ͱΊ ʕʕ8FC%FTJHO5SFOET
デザインシステムのメリット • Ұ؏ͨ͠σβΠϯΛ࡞ΕΔΑ͏ʹͳΔ • νʔϜͰͷσβΠϯ੍࡞ΛεϜʔζʹ • σβΠφʔҎ֎ͷਓͱڞ௨ೝࣝΛ࣋ͭ
ຊདྷɺΤϯδχΞͷͨΊͷͷͰͳ͍ ʢΤϯδχΞʹͱ͍͍ͬͯ͢ͷͰ͋Δʣ
࣮Atomic DesignͷݪஶͰ… • ࣮ʢσʔλϩδοΫͷʣʹ৮Ε͍ͯͳ͍ • ͨ·ͨ·ίϯϙʔωϯτͱ૬ੑ͕ྑ͔͚ͬͨͩ
刺さる現場 • ܧଓ։ൃɺن͕େ͖͍ • σβΠφʔ͞Μͱͷ ڞ௨ݴޠͱͯ͠Atomic Design͕ػೳ͢Δ • σβΠφʔ͞Μ͕ ίʔυΛར༻ͯ͠σβΠϯ͢Δ
刺さらない現場 • ܧଓ͠ͳ͍ɺن͕খ͍͞ • σβΠφʔͱΤϯδχΞͷڑ͕ԕ͍ • σβΠφʔ͕Atomic DesignΛ࠾༻ͯ͠ͳ͍
刺さらない時どうすべきか? • Atomic DesignΛ࠾༻͠ͳ͍ • ࣗͰίϯϙʔωϯτΛ͚Δ • ͍ճ͞ͳ͍ͱ͖ີʹͭͬͯ͘ྑͦ͞͏ • ͍·Θͨ͘͠ͳͬͨΒΓग़ׂͭͭ͠
• ݟ௨͕͠ѱ͘ͳͬͨΒΓग़ׂͯ͠ • ϖʔδίϯϙʔωϯτʹ̍ͭίϯϙʔωϯτڬΉͷׂͱศར
Appendix:私のディレクトリ分け • ΈͲ͜Ζ • ڞ௨ͳͭͱີ݁߹ͳ͚ͭΔʁ • ̎͘Β͍ωετͨ͠΄͏͕͚͍͢ʁ
まとめ • Atomic Designͦͷͷ σβΠϯ͢ΔਓͷͨΊͷπʔϧ • ΤϯδχΞͷͨΊͷπʔϧͰͳ͍ • ݱʹΑͬͯ͞Βͳ͍͜ͱ͋Δ •
ͳΜ໊͔͍͍લ͕΄͍͠ʢখฒײ