Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

---

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

A3db1cdacad2a1b5de5af000a1c94fda?s=128

Keisuke Watanuki

October 03, 2020
Tweet

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を適用する  メリットが少なくなる