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
78
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
130
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
880
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
140
とある自社開発の苦楽の軌跡/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
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
190
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
240
いま注目のAIエージェントを作ってみよう
supermarimobros
0
350
プラットフォーム転換期におけるGitHub Copilot活用〜Coding agentがそれを加速するか〜 / Leveraging GitHub Copilot During Platform Transition Periods
aeonpeople
1
230
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
310
エンジニアが主導できる組織づくり ー 製品と事業を進化させる体制へのシフト
ueokande
1
100
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
460
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
今日から始めるAWSセキュリティ対策 3ステップでわかる実践ガイド
yoshidatakeshi1994
0
110
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
180
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
280
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
It's Worth the Effort
3n
187
28k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Optimizing for Happiness
mojombo
379
70k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
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ͦͷͷ σβΠϯ͢ΔਓͷͨΊͷπʔϧ • ΤϯδχΞͷͨΊͷπʔϧͰͳ͍ • ݱʹΑͬͯ͞Βͳ͍͜ͱ͋Δ •
ͳΜ໊͔͍͍લ͕΄͍͠ʢখฒײ