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

アトミックデザイン入門

Shintaro Kanno
September 14, 2022

 アトミックデザイン入門

Shintaro Kanno

September 14, 2022
Tweet

More Decks by Shintaro Kanno

Other Decks in Design

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