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との 上手な付き合い方 / better-relationship-...
Search
takanorip
December 10, 2018
Programming
1
1.5k
Atomic Designとの 上手な付き合い方 / better-relationship-between-atomic-design
takanorip
December 10, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
340
Bulletproof Design System with TypeScript
takanorip
6
3.6k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
140
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
900
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
7.3k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
2k
早わかり W3C Community Group
takanorip
0
500
Ubieとアクセシビリティのこれからを考える
takanorip
0
460
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.9k
Other Decks in Programming
See All in Programming
すべてのコンテキストを、 ユーザー価値に変える
applism118
4
1.4k
CDK引数設計道場100本ノック
badmintoncryer
1
250
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
Goで作る、開発・CI環境
sin392
0
240
テスト駆動Kaggle
isax1015
1
490
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
580
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
150
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
570
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
800
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.3k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
710
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
Practical Orchestrator
shlominoach
189
11k
How GitHub (no longer) Works
holman
314
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Language of Interfaces
destraynor
158
25k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
YesSQL, Process and Tooling at Scale
rocio
173
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Side Projects
sachag
455
42k
What's in a price? How to price your products and services
michaelherold
246
12k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Transcript
Atomic Designとの 上手な付き合い方 Takanori Oki
自己紹介 • Takanori Oki(@takanorip) • フロントエンドエンジニア • React / Nuxt.js
/ Polymer ... • フォントが好き • 前職で1年くらいAtomicDesign運用経験あり
たぶん 前の人達と同じような 話をします
私的な感情論なので あまり真面目に捉えないで ください
最近思うこと
みんな Atomic Design に 真面目すぎるんじゃない?
真面目すぎる • コンポーネントの分け方の議論に時間を かけすぎて、実装が進まない • 設計の手助けをしてくれるはずのものが 設計を難しくしてる、本末転倒 • 全てに満足することはできない
「コンポーネントの設計しっかりしなきゃ…」 「これはMolecules? Organisms?」
つらい!!
つらくならないためには 「大雑把に」 付き合うことが大切
最小単位を意識する • コンポーネントを作る際は最小単位(Atom) だけ意識する • Molecules か Organisms かは大した問題じゃ ないし、早すぎる最適化を生む危険もある
• ある程度全体が見えてきてから考えたほうが 良い
「正解はない」 • Atomic Design は概念 • 正解はないので、チームやプロダクトに 合わせた階層構造を考える必要がある • 厳密になりすぎず、ゆとりを持つことが必要
• が、ルールは必要
ルールを整備することで 考えることを減らす
基本再利用しないものとして コンポーネントをつくる
重要なのは Templates/Pages と Organisms 以下の分離
責務を分離する
Template/Pagasは Storeに接続され、 アプリケーション全体の状態 を知っている
Organisms以下の コンポーネントは そのコンポーネントのこと しか知らない
デザイナーを巻き込むこと
デザイナー重要 • そもそも、エンジニアだけでこういう話を するのは良くない • デザイナーに Atomic Design の概念を デザインフローに組み込んでもらう
• コンポーネントの単位はデザイナーに決めて もらうのが良いかも
Atomic Designをちゃんと 機能させるには デザインと実装 両方の知識が必要!
僕の理想 • デザイナーがコンポーネントをデザインする 段階で、おおよその階層を決める(Atoms/ Molecules/Organizms) • 実装時に不都合がある場合は、エンジニア側 から相談し解決
コンポーネントのデザイン管理 • コンポーネントごとのデザイン管理は Figmaが優秀(ただし有料プランのみ) • コンポーネントを保存でき、同じチーム内の プロジェクトで使い回せる • エンジニアもコンポーネントの デザイン一覧を確認できるので便利
どっちが主導権を握るかで 使うツールを変えても良い
おわり!