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

Atomic Design てなぁに?

m-yoshiro
January 29, 2019

Atomic Design てなぁに?

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

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

m-yoshiro

January 29, 2019
Tweet

More Decks by m-yoshiro

Other Decks in Design

Transcript

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

    View full-size slide

  2. Atomic Design
    てなぁに?

    View full-size slide

  3. Atomic Designとは、

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. Atomic Design とは

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Atomic Design のメリット

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. • 全体と細部を横断的にデザインすることができ

    Atomic Design のメリット

    View full-size slide

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

    View full-size slide

  26. Atomic Design の注意点

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide