実装まで視野に入れるならAtomic Designを辞めましょう

「WCAN 2020 Design Special 〜デザイン力の基本とブランドづくりの一歩〜」でのLT内容です。

---

Atomic Designは「汎用的なデザイン制作の概念」「コンポーネント設計のベストプラクティス」なのでしょうか？
私は、一概にそうとは言えないと思います。
どういう場面ではAtomic Designが適さないのか。そのときどういった手法を取ると良さそうかについてお話します。

Transcript

1. 2020.10.03 @WCAN 2020 Design Special 綿貫佳祐 Increments 実装まで視野に入れるなら Atomic Design 辞めましょう を
2. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special 2017年 2020年 株式会社エイチームに新卒入社 株式会社エイチームライフスタイルに配属 Increments株式会社に異動 綿貫 佳祐 @xrxoxcxox
3. エンジニア採用支援サービス 社内向け情報共有サービス プログラミングに特化した情報共有コミュニティ 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special
4. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special 現在Atomic Designを使っている人を 否定するような文脈ではありません
5. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special 汎用的なデザイン制作の概念 コンポーネント設計のベストプラクティス
6. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special 汎用的なデザイン制作の概念 コンポーネント設計のベストプラクティス ？
7. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special Atomic Designが 向いているケース / 向いてないケース
8. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special 向いているケース - デザイナーとエンジニアでチームがキッチリ分かれている - デザインデータをモックアップとして納品するのがゴール Illustration by Freepik Stories
9. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special 向いていないケース - デザイナーとエンジニアが同じチームとして制作している - モックアップ作成の役割とコーディングの役割に境界がない Illustration by Freepik Stories
10. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special 「向いている / 向いていない」が 生まれる理由
11. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special ❶ ❷ ❸ CSS設計やデータの受け渡しなど コード的な概念は含んでいない考え方 Atomicでいう 「Page」 の概念は コーディングのときには存在しない AtomとMoleculeとOrganismの 分け方でみんな迷う
12. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special ❶ ❷ ❸ CSS設計やデータの受け渡しなど コード的な概念は含んでいない考え方 Atomicでいう 「Page」 の概念は コーディングのときには存在しない AtomとMoleculeとOrganismの 分け方でみんな迷う
13. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special それはそう 当たり前の話
14. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special なぜ分け方に迷うのか？ 人数が増える →意思の統一が難しい デザイナーとエンジニアの 視点の違い Illustration by Freepik Stories
15. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special ❶ ❷ ❸ CSS設計やデータの受け渡しなど コード的な概念は含んでいない考え方 Atomicでいう 「Page」 の概念は コーディングのときには存在しない AtomとMoleculeとOrganismの 分け方でみんな迷う
16. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special Atomic Design適用すると不整合が起きる ディレクトリ構造や データの流れ Design TokenやUtility ≒目に見えないもの Illustration by Freepik Stories
17. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special ❶ ❷ ❸ CSS設計やデータの受け渡しなど コード的な概念は含んでいない考え方 Atomicでいう 「Page」 の概念は コーディングのときには存在しない AtomとMoleculeとOrganismの 分け方でみんな迷う
18. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special レンダリング結果≒Page モックアップ≒レンダリングの 「設計図」 コードで書く内容≒Template
19. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special レンダリング結果≒Page モックアップ≒レンダリングの 「設計図」 コードで書く内容≒Template 不整合 →Page形骸化
20. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special 個人的なオススメ
21. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special - Componentのサイズ感で分類しない - 分類するとしたら種類ごと - Material DesignやAnt Designのイメージ
22. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special 同一Componentであっても 渡されるデータの有無やStateに合わせて デザインモックアップを作る デザインモックアップの作り方
23. 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special - Atomを探そう < ボタンを探そう - SketchやFimgaのライブラリ活用 （Atomic Designより柔軟） →コードにAtomic Designを適用する 　メリットが少なくなる