Tweet
Tweet

Slide 1

Slide 1 text

2020.10.03 @WCAN 2020 Design Special 綿貫佳祐 Increments 実装まで視野に入れるなら Atomic Design 辞めましょう を

Slide 2

Slide 2 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special 2017年 2020年 株式会社エイチームに新卒入社 株式会社エイチームライフスタイルに配属 Increments株式会社に異動 綿貫 佳祐 @xrxoxcxox

Slide 3

Slide 3 text

エンジニア採用支援サービス 社内向け情報共有サービス プログラミングに特化した情報共有コミュニティ 実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special

Slide 4

Slide 4 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special 現在Atomic Designを使っている人を 否定するような文脈ではありません

Slide 5

Slide 5 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special 汎用的なデザイン制作の概念 コンポーネント設計のベストプラクティス

Slide 6

Slide 6 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special 汎用的なデザイン制作の概念 コンポーネント設計のベストプラクティス ？

Slide 7

Slide 7 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special Atomic Designが 向いているケース / 向いてないケース

Slide 8

Slide 8 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special 向いているケース - デザイナーとエンジニアでチームがキッチリ分かれている - デザインデータをモックアップとして納品するのがゴール Illustration by Freepik Stories

Slide 9

Slide 9 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special 向いていないケース - デザイナーとエンジニアが同じチームとして制作している - モックアップ作成の役割とコーディングの役割に境界がない Illustration by Freepik Stories

Slide 10

Slide 10 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special 「向いている / 向いていない」が 生まれる理由

Slide 11

Slide 11 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special ❶ ❷ ❸ CSS設計やデータの受け渡しなど コード的な概念は含んでいない考え方 Atomicでいう 「Page」 の概念は コーディングのときには存在しない AtomとMoleculeとOrganismの 分け方でみんな迷う

Slide 12

Slide 12 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special ❶ ❷ ❸ CSS設計やデータの受け渡しなど コード的な概念は含んでいない考え方 Atomicでいう 「Page」 の概念は コーディングのときには存在しない AtomとMoleculeとOrganismの 分け方でみんな迷う

Slide 13

Slide 13 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special それはそう 当たり前の話

Slide 14

Slide 14 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special なぜ分け方に迷うのか？ 人数が増える →意思の統一が難しい デザイナーとエンジニアの 視点の違い Illustration by Freepik Stories

Slide 15

Slide 15 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special ❶ ❷ ❸ CSS設計やデータの受け渡しなど コード的な概念は含んでいない考え方 Atomicでいう 「Page」 の概念は コーディングのときには存在しない AtomとMoleculeとOrganismの 分け方でみんな迷う

Slide 16

Slide 16 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special Atomic Design適用すると不整合が起きる ディレクトリ構造や データの流れ Design TokenやUtility ≒目に見えないもの Illustration by Freepik Stories

Slide 17

Slide 17 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special ❶ ❷ ❸ CSS設計やデータの受け渡しなど コード的な概念は含んでいない考え方 Atomicでいう 「Page」 の概念は コーディングのときには存在しない AtomとMoleculeとOrganismの 分け方でみんな迷う

Slide 18

Slide 18 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special レンダリング結果≒Page モックアップ≒レンダリングの 「設計図」 コードで書く内容≒Template

Slide 19

Slide 19 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special レンダリング結果≒Page モックアップ≒レンダリングの 「設計図」 コードで書く内容≒Template 不整合 →Page形骸化

Slide 20

Slide 20 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special 個人的なオススメ

Slide 21

Slide 21 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special - Componentのサイズ感で分類しない - 分類するとしたら種類ごと - Material DesignやAnt Designのイメージ

Slide 22

Slide 22 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special 同一Componentであっても 渡されるデータの有無やStateに合わせて デザインモックアップを作る デザインモックアップの作り方

Slide 23

Slide 23 text

実装まで視野に入れるならAtomic Designを辞めましょう WCAN 2020 Design Special - Atomを探そう < ボタンを探そう - SketchやFimgaのライブラリ活用 （Atomic Designより柔軟） →コードにAtomic Designを適用する 　メリットが少なくなる