アトミックデザイン入門
View Slide
都内のIT事業会社で勤務。フロントエンド開発からバックエンド開発まで広く(浅く)担当Name : 官野 慎太朗(かんの しんたろう)GitHub @shinshin8Medium @doctorkanno572
本日の内容1. アトミックデザインとは2. 実際に作ってみた3. 終わりに
1. アトミックデザインとは?
アトミックデザインとは?● Webデザイナー・作家のBrad Frost氏によって提唱されたデザイン体系● この世の物体は原子の組み合わせからできているという化学がヒント
● Atom○ デザインを構成する最小コンポーネント● Molecule○ 複数の原子を組み合わせたコンポーネント● Organism○ 複数の原子や分子が組み合わさったコンポーネント● Template○ 複数の生体を組み合わせたレイアウト● Page○ テンプレートに実際のコンテンツを埋め込んだものアトミックデザインの構成要素
2. 実際に作ってみた
Nuxt.jsを使ったアプリ
Directory● src/componets配下に以下のコンポーネント○ atoms○ molecules○ organisms○ tempaltes● pagesはsrc配下に設置
Template
Organism
Molecules
Atoms
3. 終わりに
メリット1. コンポーネントの再利用可能2. 仕様の把握が比較的楽デメリット1. props&emitがややこしい2. 設計が面倒
Thanks!!References- https://xd.adobe.com/ideas/process/ui-design/atomic-design-principles-methodology-101/- https://bradfrost.com/- https://en.ryte.com/wiki/Atomic_Design