Slide 1
Slide 1 text
アトミックデザイン入門
Slide 2
Slide 2 text
都内のIT事業会社で勤務。
フロントエンド開発からバックエンド開発まで広く(浅く)担当
Name : 官野 慎太朗(かんの しんたろう)
GitHub @shinshin8
Medium @doctorkanno572
Slide 3
Slide 3 text
本日の内容
1. アトミックデザインとは
2. 実際に作ってみた
3. 終わりに
Slide 4
Slide 4 text
1. アトミックデザインとは？
Slide 5
Slide 5 text
アトミックデザインとは？
● Webデザイナー・作家のBrad Frost氏によって提唱されたデザイン体系
● この世の物体は原子の組み合わせからできているという化学がヒント
Slide 6
Slide 6 text
● Atom
○ デザインを構成する最小コンポーネント
● Molecule
○ 複数の原子を組み合わせたコンポーネント
● Organism
○ 複数の原子や分子が組み合わさったコンポーネント
● Template
○ 複数の生体を組み合わせたレイアウト
● Page
○ テンプレートに実際のコンテンツを埋め込んだもの
アトミックデザインの構成要素
Slide 7
Slide 7 text
2. 実際に作ってみた
Slide 8
Slide 8 text
Nuxt.jsを使ったアプリ
Slide 9
Slide 9 text
Directory
● src/componets配下に以下のコンポーネント
○ atoms
○ molecules
○ organisms
○ tempaltes
● pagesはsrc配下に設置
Slide 10
Slide 10 text
Template
Slide 11
Slide 11 text
Organism
Slide 12
Slide 12 text
Molecules
Slide 13
Slide 13 text
Atoms
Slide 14
Slide 14 text
3. 終わりに
Slide 15
Slide 15 text
メリット
1. コンポーネントの再利用可能
2. 仕様の把握が比較的楽
デメリット
1. props&emitがややこしい
2. 設計が面倒
Slide 16
Slide 16 text
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