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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 3. 終わりに

    View full-size slide

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

    View full-size slide

  12. 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 full-size slide