Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Atomic Designとの 上手な付き合い方 Takanori Oki
Slide 2
Slide 2 text
自己紹介 • Takanori Oki(@takanorip) • フロントエンドエンジニア • React / Nuxt.js / Polymer ... • フォントが好き • 前職で1年くらいAtomicDesign運用経験あり
Slide 3
Slide 3 text
たぶん 前の人達と同じような 話をします
Slide 4
Slide 4 text
私的な感情論なので あまり真面目に捉えないで ください
Slide 5
Slide 5 text
最近思うこと
Slide 6
Slide 6 text
みんな Atomic Design に 真面目すぎるんじゃない?
Slide 7
Slide 7 text
真面目すぎる • コンポーネントの分け方の議論に時間を かけすぎて、実装が進まない • 設計の手助けをしてくれるはずのものが 設計を難しくしてる、本末転倒 • 全てに満足することはできない
Slide 8
Slide 8 text
「コンポーネントの設計しっかりしなきゃ…」 「これはMolecules? Organisms?」
Slide 9
Slide 9 text
つらい!!
Slide 10
Slide 10 text
つらくならないためには 「大雑把に」 付き合うことが大切
Slide 11
Slide 11 text
最小単位を意識する • コンポーネントを作る際は最小単位(Atom) だけ意識する • Molecules か Organisms かは大した問題じゃ ないし、早すぎる最適化を生む危険もある • ある程度全体が見えてきてから考えたほうが 良い
Slide 12
Slide 12 text
「正解はない」 • Atomic Design は概念 • 正解はないので、チームやプロダクトに 合わせた階層構造を考える必要がある • 厳密になりすぎず、ゆとりを持つことが必要 • が、ルールは必要
Slide 13
Slide 13 text
ルールを整備することで 考えることを減らす
Slide 14
Slide 14 text
基本再利用しないものとして コンポーネントをつくる
Slide 15
Slide 15 text
重要なのは Templates/Pages と Organisms 以下の分離
Slide 16
Slide 16 text
責務を分離する
Slide 17
Slide 17 text
Template/Pagasは Storeに接続され、 アプリケーション全体の状態 を知っている
Slide 18
Slide 18 text
Organisms以下の コンポーネントは そのコンポーネントのこと しか知らない
Slide 19
Slide 19 text
デザイナーを巻き込むこと
Slide 20
Slide 20 text
デザイナー重要 • そもそも、エンジニアだけでこういう話を するのは良くない • デザイナーに Atomic Design の概念を デザインフローに組み込んでもらう • コンポーネントの単位はデザイナーに決めて もらうのが良いかも
Slide 21
Slide 21 text
Atomic Designをちゃんと 機能させるには デザインと実装 両方の知識が必要!
Slide 22
Slide 22 text
僕の理想 • デザイナーがコンポーネントをデザインする 段階で、おおよその階層を決める(Atoms/ Molecules/Organizms) • 実装時に不都合がある場合は、エンジニア側 から相談し解決
Slide 23
Slide 23 text
コンポーネントのデザイン管理 • コンポーネントごとのデザイン管理は Figmaが優秀(ただし有料プランのみ) • コンポーネントを保存でき、同じチーム内の プロジェクトで使い回せる • エンジニアもコンポーネントの デザイン一覧を確認できるので便利
Slide 24
Slide 24 text
どっちが主導権を握るかで 使うツールを変えても良い
Slide 25
Slide 25 text
おわり!