Atomic Designとの
上手な付き合い方 / better-relationship-between-atomic-design

Transcript

1. Atomic Designとの
 上手な付き合い方 Takanori Oki

2. 自己紹介 • Takanori Oki（@takanorip） • フロントエンドエンジニア • React / Nuxt.js

   / Polymer ... • フォントが好き • 前職で1年くらいAtomicDesign運用経験あり

3. たぶん 前の人達と同じような 話をします

4. 私的な感情論なので あまり真面目に捉えないで ください

5. 最近思うこと

6. みんな Atomic Design に 真面目すぎるんじゃない？

7. 真面目すぎる • コンポーネントの分け方の議論に時間を
 かけすぎて、実装が進まない • 設計の手助けをしてくれるはずのものが
 設計を難しくしてる、本末転倒 • 全てに満足することはできない

8. 「コンポーネントの設計しっかりしなきゃ…」 「これはMolecules? Organisms?」

9. つらい！！

10. つらくならないためには 「大雑把に」 付き合うことが大切

11. 最小単位を意識する • コンポーネントを作る際は最小単位（Atom） だけ意識する • Molecules か Organisms かは大した問題じゃ ないし、早すぎる最適化を生む危険もある

    • ある程度全体が見えてきてから考えたほうが 良い

12. 「正解はない」 • Atomic Design は概念 • 正解はないので、チームやプロダクトに
 合わせた階層構造を考える必要がある • 厳密になりすぎず、ゆとりを持つことが必要

    • が、ルールは必要

13. ルールを整備することで 考えることを減らす

14. 基本再利用しないものとして コンポーネントをつくる

15. 重要なのは Templates/Pages と Organisms 以下の分離

16. 責務を分離する

17. Template/Pagasは Storeに接続され、 アプリケーション全体の状態 を知っている

18. Organisms以下の コンポーネントは そのコンポーネントのこと しか知らない

19. デザイナーを巻き込むこと

20. デザイナー重要 • そもそも、エンジニアだけでこういう話を
 するのは良くない • デザイナーに Atomic Design の概念を
 デザインフローに組み込んでもらう

    • コンポーネントの単位はデザイナーに決めて もらうのが良いかも

21. Atomic Designをちゃんと 機能させるには デザインと実装 両方の知識が必要！

22. 僕の理想 • デザイナーがコンポーネントをデザインする 段階で、おおよその階層を決める（Atoms/ Molecules/Organizms） • 実装時に不都合がある場合は、エンジニア側 から相談し解決

23. コンポーネントのデザイン管理 • コンポーネントごとのデザイン管理は
 Figmaが優秀（ただし有料プランのみ） • コンポーネントを保存でき、同じチーム内の プロジェクトで使い回せる • エンジニアもコンポーネントの
 デザイン一覧を確認できるので便利

24. どっちが主導権を握るかで 使うツールを変えても良い

25. おわり！