Atomic Design てなぁに？

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

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

Transcript

1. Atomic Design てなぁに？
   5IJOL%FTJHO
   / /
   

   View Slide

2. Atomic Design
   てなぁに？
   

   View Slide

3. Atomic Designとは、

   UIデザインをパーツ単位で定義し、

   それを組み合わせてインターフェースを作成する⼿法。
   簡単に⾔うと
   

   View Slide

4. LEGOブロック
   ⾝近なものに例えてみると
   

   View Slide

5. どんなメリットがあるの？
   

   View Slide

6. よく聞く話
   • Atomic Designは、パーツを再利⽤
   するので開発⼯数が減る
   • メンテナンス‧拡張しやすい
   

   View Slide

7. その通りなんだけど。。。
   

   View Slide

8. デザイナにとって難しそうな印象
   

   View Slide

9. ほんのすこし、デザイナー寄り
   でご説明できたらと思います。
   

   View Slide

10. Atomic Design とは
    

    View Slide

11. Atomic Design とは
    • Brad Frost⽒が考案したUIデザインの設計⼿法。
    • ⼩さなパーツをつなげて組み合わることで、

    UIを構築する
    • UIの構造を5つの段階で考えている。
    Atomic Designとは
    

    View Slide

12. Atomic Designとは
    UIの構造の5つの段階
    Atoms Molecules Organisms Templates Pages
    原⼦ 分⼦ 有機体
    

    View Slide

13. Atomic Designとは
    UIの構造の5つの段階
    Atoms Molecules Organisms Templates Pages
    原⼦ 分⼦ 有機体
    化学⽤語
    

    View Slide

14. Atomic Designとは
    Button
    Label
    Atom (原⼦)
    最⼩のUIパーツ
    

    View Slide

15. Atomic Designとは
    Search
    Search form
    Molecules (分⼦)
    Atom同⼠が組み合わさったパーツ。
    

    View Slide

16. Atomic Designとは
    Organisms (有機体)
    Atom, Moleculesが組み合わさったパーツ。
    Search
    Search form
    Header
    

    View Slide

17. Atomic Designとは
    Templates
    ページのレイアウト。中⾝はダミー。
    コンテンツを⼊れないことで、本来集中すべき、ページの構造にフォーカスできる。
    

    View Slide

18. Atomic Designとは
    Pages
    Templatesに本来のコンテンツを挿⼊したもの。
    Atomic Design ワークショップ開催！
    Top ニュース About
    

    View Slide

19. Atomic Designとは
    UIの構造の5つの段階
    Atoms Molecules Organisms Templates Pages
    原⼦ 分⼦ 有機体
    化学⽤語
    ! !
    ステークホルーダーにも
    分かりやすい名前
    

    View Slide

20. サンプル
    （会場でBrad Frost⽒のサイトの、Atomic Designの説明を⾒ながら解説しました。）
    

    View Slide

21. Atomic Design のメリット
    

    View Slide

22. • 構造とコンテンツを分離することで、関⼼すべき
    ポイントをコントロールできる
    Atomic Design のメリット
    

    View Slide

23. Atomic Design のメリット
    Atoms Molecules Organisms Templates Pages
    原⼦ 分⼦ 有機体
    レイアウト
    全体像
    コンテンツ
    の内容
    パーツの段階に
    そった作業
    

    View Slide

24. • 全体と細部を横断的にデザインすることができ
    る
    Atomic Design のメリット
    

    View Slide

25. Atomic Design のメリット
    Atoms Molecules Organisms Templates Pages
    原⼦ 分⼦ 有機体
    細部 全体
    

    View Slide

26. Atomic Design の注意点
    

    View Slide

27. Atomic Designの注意点
    Atoms Molecules Organisms Templates Pages
    原⼦ 分⼦ 有機体
    

    View Slide

28. Atomic Designの注意点
    Atoms Molecules Organisms Templates Pages
    原⼦ 分⼦ 有機体
    

    View Slide

29. 粒度の定義が難しい！
    • MoleculesとOrganisms の違いが難しい
    • プロダクトによって定義するしかない
    • Molecules と Organismsを統合するのアリ。
    Atomic Design の注意点
    

    View Slide

30. #VUBUPNJDEFTJHOJTOPUSJHJEEPHNB
    Atomic Design の注意点
    #Z#SBE'SPTU
    

    View Slide

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

    原理主義に陥ってはならない
    Atomic Design の注意点
    

    View Slide