Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
AtomicDesignの説明と所感
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
kubo-hide-kun
September 20, 2019
Programming
2k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
AtomicDesignの説明と所感
CyberAgent様のインターン中の勉強会で使用した資料です。
特別に許可をいただき公開に至りました。
kubo-hide-kun
September 20, 2019
Transcript
32 slides
Atomic Design の説明と所感 भߴઐֶߍ ۼాल࠸(@kubo_programmer)
ࣗݾհ भۀߴઐֶߍੜ࢈σβΠϯֶՊใγεςϜίʔε̐ੜ ຊ໊ʮۼాल࠸ ΫϘλώσϠ ʯ ٕज़7VF 3FBDU 5XJUUFS*%LVCP@QSPHSBNNFS $"UFDIKPCΠϯλʔϯ
My Hobby ・コンピュータ研究部 ・コン研と略称で呼ばれることが多い ・部員数: 57名 ・活動 ・プログラミング班 (開発,競プロ,ハッカソン,etc) ・イラスト班
(ディジタルイラスト,デザイン,etc)
My Assignment Unistore Preact
My Assignment Unistore Preact 念願の Qiitaのトレンド入り
Atomic Design の説明と所感 भߴઐֶߍ ۼాल࠸(@kubo_programmer)
Atomic Design の説明と所感 भߴઐֶߍ ۼాल࠸(@kubo_programmer)
免責事項 "UPNJD%FTJHOͰ͕͢ɺ ࣗͦΕΛͬͨϓϩδΣΫτʹճ͔͠ ΞαΠϯ͞Εͨܦݧͳ͍ͷͰ ٕज़తͳϛε͕͋ΔՄೳੑ͕ߴ͍Ͱ͢
What is Atomic Design
What is Atomic Design Atoms
(アトム/原子) Molecules (モルキュール/分子) Organisms (オーガニズム/組織) Templates (テンプレート) Pages (ページ)
What is Atoms Atoms (アトム/原子)
What is Molecules Molecules (モルキュール/分子)
What is Organisms Organisms (オーガニズム/組織)
What is Templates & Pages Templates & Pages
What is Features 限定的 汎用的
Atomic Design の説明と所感 भߴઐֶߍ ۼాल࠸(@kubo_programmer)
Atomic Design の説明と所感 भߴઐֶߍ ۼాल࠸(@kubo_programmer)
What are the merits ? 再利用性が高まる
デザインが統一される デザイナーに優しい 保守性が高まる
再利用性が高まる 自明
デザインに統一感が生まれる 複数の人がバラバラで作成しても使用する部品は同じ (規模が大きいほど有用そう)
デザイナーに優しい デザイナーじゃないから分かんない()
保守性が高まる コンポーネントを修正した場合、 その修正がそれを依存しているコンポーネントにも伝播
個人的な使い方
Story book を導入する ページに反映させるまでの手順が多いので これがないとコンポーネントの変更の確認が困難
Templates を使っていない 個人的には使う理由は見つかりませんでした. そもそもあれって何を実装するんですかね?
複雑になっても汎用性を重要視する props地獄になるので Atomsに機能や状態を持たせたい気持ちも分かるが そうすると汎用性がなくなりAtmicDesignの意味がなくなる
短期的な開発ではAtomicDesign使わない 実装量が大幅に増えるので 長期的なプロジェクトでのみ使用
My Important point
My Important point 汎用性のあるコンポーネントを作成し再利用
My Important point 汎用性のあるコンポーネントを作成し再利用 メリットを感じるのは完成してからなので最初は我慢
My Important point 汎用性のあるコンポーネントを作成し再利用 メリットを感じるのは完成してからなので最初は我慢 実装量が多くなるのでそれに見合うのかを考える
Thank you!! भߴઐֶߍ ۼాल࠸(@kubo_programmer)
More Decks by kubo-hide-kun
See All by kubo-hide-kun
CA BASE NEXT でスクロールに 連動したUIを構築した話
kubo_programmer
1
620
ハイレベルな環境こそが最高である 科学的なお話
kubo_programmer
0
180
SQL Injection
kubo_programmer
0
140
IPアドレスとは何か?
kubo_programmer
0
4k
クライアント/サーバーシステム
kubo_programmer
0
16k
DHCPサーバ
kubo_programmer
0
3.6k
How to make Readable Slide
kubo_programmer
0
190
Moonblock入門
kubo_programmer
3
1.5k
TCP/UDPの違い
kubo_programmer
4
6.4k
Other Decks in Programming
See All in Programming
Distance field of Julia set
kinakomoti321
0
320
TanStack Vue Query と Pinia Colada から学ぶ非同期状態の型設計
aoshi
0
670
SFCで実現する病院・医療システムの動的組み立て式UI
koukimiura
1
180
Engineering Biometric UX Across Android Versions | DroidKnights 2026
ryunen344
1
200
AI時代のFlutter品質設計 — アプリ品質を守るQuality Layers
omatty198
0
380
動画プレイヤーはなぜカクつくのか 〜Flutterのレンダリングとネイティブの境界を解剖する〜
naruogram
0
340
作れるエンジニアから、価値を届けるエンジニアへ
ryunakayama
1
290
はじめてのPLATEAU
nokonoko1203
1
650
flutter_test のその先へ — Flutter アプリの LLM 機能に「評価」という品質保証を
kosukesaigusa
0
200
AIがコードを書いてくれる時代、我々は何を確かめるのか
yosuke_furukawa
PRO
13
5.9k
PyConTW 2026 - AI Coding 不只是工具升級, 區域醫院醫療資訊系統協作開發與資訊團隊轉型實踐
cclai999
0
250
自作Discord音声botをLambda MicroVMsに移行した話 / Migrating My Discord Voice Bot to Lambda MicroVMs
akihisaikeda
1
320
Featured
See All Featured
Writing Fast Ruby
sferik
630
63k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
2.2k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
1
1.7k
Code Review Best Practice
trishagee
74
20k
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
610
Visualization
eitanlees
153
17k
The Art of Programming - Codeland 2020
erikaheidi
57
14k
Automating Front-end Workflow
addyosmani
1370
210k
The Cult of Friendly URLs
andyhume
79
7.1k
Building the Perfect Custom Keyboard
takai
2
960
Odyssey Design
rkendrick25
PRO
3
940
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
2
2.2k