アトミックデザイン入門 

都内のIT事業会社で勤務。 フロントエンド開発からバックエンド開発まで広く(浅く)担当 Name : 官野 慎太朗(かんの しんたろう) GitHub @shinshin8 Medium @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/ato mic-design-principles-methodology-101/ - https://bradfrost.com/ - https://en.ryte.com/wiki/Atomic_Design