Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Atomic Design てなぁに?

C0e40025e5098e025a249b0cda428434?s=47 m-yoshiro
January 29, 2019

Atomic Design てなぁに?

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

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

C0e40025e5098e025a249b0cda428434?s=128

m-yoshiro

January 29, 2019
Tweet

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. #VUBUPNJDEFTJHOJTOPUSJHJEEPHNB Atomic Design の注意点 #Z#SBE'SPTU

  31. Atomic Designは拡張が必要 • 絶対的なルールはない。 • プロダクトやチームに合わせて拡張すべき • ⼀つのソースを⼀神教とするような、
 原理主義に陥ってはならない Atomic

    Design の注意点