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