Atomic Design てなぁに？

2019.01.29に開催された、Think DESIGN#3 「体験AtomicDesign」で発表した資料です。

https://think-design.connpass.com/event/115171/

Transcript

1. Atomic Design てなぁに？ 5IJOL
   %FTJHO
    / /
2. Atomic Design てなぁに？
3. Atomic Designとは、
 UIデザインをパーツ単位で定義し、
 それを組み合わせてインターフェースを作成する⼿法。 簡単に⾔うと
4. LEGOブロック ⾝近なものに例えてみると
5. どんなメリットがあるの？
6. よく聞く話 • Atomic Designは、パーツを再利⽤ するので開発⼯数が減る • メンテナンス‧拡張しやすい
7. その通りなんだけど。。。
8. デザイナにとって難しそうな印象
9. ほんのすこし、デザイナー寄り でご説明できたらと思います。
10. Atomic Design とは
11. Atomic Design とは • Brad Frost⽒が考案したUIデザインの設計⼿法。 • ⼩さなパーツをつなげて組み合わることで、
 UIを構築する • UIの構造を5つの段階で考えている。 Atomic Designとは
12. Atomic Designとは UIの構造の5つの段階 Atoms Molecules Organisms Templates Pages 原⼦ 分⼦ 有機体
13. Atomic Designとは UIの構造の5つの段階 Atoms Molecules Organisms Templates Pages 原⼦ 分⼦ 有機体 化学⽤語
14. Atomic Designとは Button Label Atom (原⼦) 最⼩のUIパーツ
15. Atomic Designとは Search Search form Molecules (分⼦) Atom同⼠が組み合わさったパーツ。
16. Atomic Designとは Organisms (有機体) Atom, Moleculesが組み合わさったパーツ。 Search Search form Header
17. Atomic Designとは Templates ページのレイアウト。中⾝はダミー。 コンテンツを⼊れないことで、本来集中すべき、ページの構造にフォーカスできる。
18. Atomic Designとは Pages Templatesに本来のコンテンツを挿⼊したもの。 Atomic Design ワークショップ開催！ Top ニュース About
19. Atomic Designとは UIの構造の5つの段階 Atoms Molecules Organisms Templates Pages 原⼦ 分⼦ 有機体 化学⽤語 ! ! ステークホルーダーにも 分かりやすい名前
20. サンプル （会場でBrad Frost⽒のサイトの、Atomic Designの説明を⾒ながら解説しました。）
21. Atomic Design のメリット
22. • 構造とコンテンツを分離することで、関⼼すべき ポイントをコントロールできる Atomic Design のメリット
23. Atomic Design のメリット Atoms Molecules Organisms Templates Pages 原⼦ 分⼦ 有機体 レイアウト 全体像 コンテンツ の内容 パーツの段階に そった作業
24. • 全体と細部を横断的にデザインすることができ る Atomic Design のメリット
25. Atomic Design のメリット Atoms Molecules Organisms Templates Pages 原⼦ 分⼦ 有機体 細部 全体
26. Atomic Design の注意点
27. Atomic Designの注意点 Atoms Molecules Organisms Templates Pages 原⼦ 分⼦ 有機体
28. Atomic Designの注意点 Atoms Molecules Organisms Templates Pages 原⼦ 分⼦ 有機体
29. 粒度の定義が難しい！ • MoleculesとOrganisms の違いが難しい • プロダクトによって定義するしかない • Molecules と Organismsを統合するのアリ。 Atomic Design の注意点
30. #VU
    BUPNJD
    EFTJHO
    JT
    OPU
    SJHJE
    EPHNB Atomic Design の注意点 #Z
    #SBE
    'SPTU
31. Atomic Designは拡張が必要 • 絶対的なルールはない。 • プロダクトやチームに合わせて拡張すべき • ⼀つのソースを⼀神教とするような、
 原理主義に陥ってはならない Atomic Design の注意点