アトミックデザイン入門

Transcript

1. アトミックデザイン入門
   

   View Slide

2. 都内のIT事業会社で勤務。
   フロントエンド開発からバックエンド開発まで広く(浅く)担当
   Name : 官野 慎太朗(かんの しんたろう)
   GitHub @shinshin8
   Medium @doctorkanno572
   

   View Slide

3. 本日の内容
   1. アトミックデザインとは
   2. 実際に作ってみた
   3. 終わりに
   

   View Slide

4. 1. アトミックデザインとは？
   

   View Slide

5. アトミックデザインとは？
   ● Webデザイナー・作家のBrad Frost氏によって提唱されたデザイン体系
   ● この世の物体は原子の組み合わせからできているという化学がヒント
   

   View Slide

6. ● Atom
   ○ デザインを構成する最小コンポーネント
   ● Molecule
   ○ 複数の原子を組み合わせたコンポーネント
   ● Organism
   ○ 複数の原子や分子が組み合わさったコンポーネント
   ● Template
   ○ 複数の生体を組み合わせたレイアウト
   ● Page
   ○ テンプレートに実際のコンテンツを埋め込んだもの
   アトミックデザインの構成要素
   

   View Slide

7. 2. 実際に作ってみた
   

   View Slide

8. Nuxt.jsを使ったアプリ
   

   View Slide

9. Directory
   ● src/componets配下に以下のコンポーネント
   ○ atoms
   ○ molecules
   ○ organisms
   ○ tempaltes
   ● pagesはsrc配下に設置
   

   View Slide

10. Template
    

    View Slide

11. Organism
    

    View Slide

12. Molecules
    

    View Slide

13. Atoms
    

    View Slide

14. 3. 終わりに
    

    View Slide

15. メリット
    1. コンポーネントの再利用可能
    2. 仕様の把握が比較的楽
    デメリット
    1. props&emitがややこしい
    2. 設計が面倒
    

    View Slide

16. Thanks!!
    References
    - https://xd.adobe.com/ideas/process/ui-design/ato
    mic-design-principles-methodology-101/
    - https://bradfrost.com/
    - https://en.ryte.com/wiki/Atomic_Design
    

    View Slide