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. アトミックデザイン入門

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

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

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

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

  6. • Atom ◦ デザインを構成する最小コンポーネント • Molecule ◦ 複数の原子を組み合わせたコンポーネント • Organism

    ◦ 複数の原子や分子が組み合わさったコンポーネント • Template ◦ 複数の生体を組み合わせたレイアウト • Page ◦ テンプレートに実際のコンテンツを埋め込んだもの アトミックデザインの構成要素
  7. 2. 実際に作ってみた

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

  9. Directory • src/componets配下に以下のコンポーネント ◦ atoms ◦ molecules ◦ organisms ◦

    tempaltes • pagesはsrc配下に設置
  10. Template

  11. Organism

  12. Molecules

  13. Atoms

  14. 3. 終わりに

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

  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