あきらめる Atomic Design

Transcript

1. あきらめる Atomic Design TomPenguin karabiner. inc 2021/06/02 案件が回ればいいじゃない

2. あなたは誰ですか？ Vue.jsばっかりさわっているエンジニア 仙台から福岡のシステム開発会社へフル リモートで勤務 昔は仙台の某百貨店の店員 TomPenguin tompenguin_ Work at karabiner,

   inc

3. 話を聞いて欲しい人 • デザイナー • エンジニア

4. あきらめるまでの手順 ① まずは知る ② 嫌なところ ③ 何がうれしいのか ④ 感覚をつかむ ⑤

   Molecule と Organism ⑥ 頑張ることをあきらめる

5. 話さないこと • コンポーネントのI/F周り • データの扱い方 • 具体的な実装方法 • テスト

6. ① まずは知る

7. Atomic Design とはデザインシステムを構築するための方法論です。 ① まずは知る

8. None

9. ① まずは知る デザインシステム とはこれです Material Design / https://material.io

10. つまり、Atomic Design とは フロントエンドのためのものではない ① まずは知る

11. とはいえフロントエンドの設計とは 親和性が高いので 良いトコどりをしていこう というのが本日のスタンス ① まずは知る 原典通り運用するのは あきらめたよ

12. ② 嫌なところ

13. ② 嫌なところ • なんかちょっと難しい • 小さいプロジェクトには向かない • 命名で悩みがち • ビルドが重くなりがち

    • データの管理が難しくなりがち

14. ② 嫌なところ 嫌なところはありつつも、 それを上回るメリットが大きい！

15. ③ 何がうれしいのか

16. From the designer ③ 何がうれしいのか • UI/UXの一貫性が高まる • デザインを理解しやすくなる •

    適切な要素を素早く見つけられる

17. From the engineer ③ 何がうれしいのか • コンポーネントの再利用性が高まる • 仕様やUIの変更に強くなる •

    作業分担がしやすくなる

18. From the team ③ 何がうれしいのか • 要素の分割時の指針ができる • 共通言語で会話のコストが減る

19. ④ 感覚をつかむ

20. ５つのレベルに分類する ④ 感覚をつかむ https://atomicdesign.bradfrost.com/chapter-2/

21. ５つのレベルに分類する ④ 感覚をつかむ https://atomicdesign.bradfrost.com/chapter-2/ ボトムアップ的手法

22. ④ 感覚をつかむ ボトムアップで作るのは難しい ボトムアップは あきらめたよ

23. ④ 感覚をつかむ まずはデザインカンプを一つ作り そこから要素を分割していく のがおすすめ デザインカンプができている 前提で話をすすめるよ

24. 分割するときの観点 ④ 感覚をつかむ https://atomicdesign.bradfrost.com/chapter-2/ 再掲

25. 分割するときの観点 ④ 感覚をつかむ https://atomicdesign.bradfrost.com/chapter-2/ 再掲 ✘ Page はビルドされてクライアン トで表示されたものだよ

26. ④ 感覚をつかむ これはどのレベルでしょう？ https://atomicdesign.bradfrost.com/chapter-2/

27. ④ 感覚をつかむ これはどのレベルでしょう？ Atom https://atomicdesign.bradfrost.com/chapter-2/ （あとむ）

28. ④ 感覚をつかむ これはどのレベルでしょう？ Atom https://atomicdesign.bradfrost.com/chapter-2/ • 分割できない最小要素 • デフォルトのUI •

    トンマナを合わせる 例）ボタン、入力欄、ラベル、見出し、 画像、カード、配色・フォントなど （あとむ）

29. ④ 感覚をつかむ これはどのレベルでしょう？ https://atomicdesign.bradfrost.com/chapter-2/

30. ④ 感覚をつかむ これはどのレベルでしょう？ Molecule https://atomicdesign.bradfrost.com/chapter-2/ （もる[れ]きゅーる）

31. ④ 感覚をつかむ これはどのレベルでしょう？ Molecule https://atomicdesign.bradfrost.com/chapter-2/ • Atom の組み合わせ • 汎用的な機能を提供する

    • 単体では意味を成さない 例）検索フォーム、カードリスト、シェア ボタンリストなど （もる[れ]きゅーる）

32. ④ 感覚をつかむ これはどのレベルでしょう？ https://atomicdesign.bradfrost.com/chapter-2/

33. ④ 感覚をつかむ これはどのレベルでしょう？ https://atomicdesign.bradfrost.com/chapter-2/ （おーがにずむ） Organism

34. ④ 感覚をつかむ これはどのレベルでしょう？ https://atomicdesign.bradfrost.com/chapter-2/ • Atom か Molecule の組み合わせ •

    特定のサービスを知っている • 独立して使用できる要素 例）ヘッダー、フッター、ナビゲーション、記事 要素のような独立したコンテンツなど （おーがにずむ） Organism

35. ④ 感覚をつかむ これはどのレベルでしょう？ https://atomicdesign.bradfrost.com/chapter-2/

36. ④ 感覚をつかむ これはどのレベルでしょう？ Template https://atomicdesign.bradfrost.com/chapter-2/ （てんぷれーと）

37. ④ 感覚をつかむ これはどのレベルでしょう？ Template https://atomicdesign.bradfrost.com/chapter-2/ • 組み合わせてレイアウトする • １ページに１つ （てんぷれーと）

38. ⑤ Molecule と Organism

39. ⑤ Molecule と Organism 要素を分割していくときに頻出する問題 え、これ Molecule? Organism?

40. ⑤ Molecule と Organism こんなものは Molecule https://www.futurelearn.com/info/blog/atomic-desi gn-molecules-organisms • 単体では何ができるか分からない

    • 他の要素を「補助」している • 分解すると構成要素がボタン、ラベ ル、見出しなどになる (Helper)

41. ⑤ Molecule と Organism こんなものは Organism https://www.futurelearn.com/info/blog/atomic-design-molecules-organisms • 単体で何ができるのか分かる •

    独立して存在することができる • 分解すると構成要素がシェアボタン リスト、検索フォームなどになる (Standalone)

42. ⑤ Molecule と Organism それでもやっぱり分からない https://www.futurelearn.com/info/blog/atomic-design-molecu les-organisms

43. ⑤ Molecule と Organism それでもやっぱり分からない https://www.futurelearn.com/info/blog/atomic-design-molecu les-organisms ぱっと見は Organism だよなあ

    いやでもこれ なにがシェアされるか分からんな （じゃあ Molecule か？）

44. ⑤ Molecule と Organism そういう時はデザインを変更するという手もある https://www.futurelearn.com/info/blog/atomic-design-molecu les-organisms たとえばここにコース名を 入れてみたらどうだろう

45. ⑥ 頑張ることをあきらめる

46. ⑥ 頑張ることをあきらめる あまりこだわりすぎない • 厳密に分類することにあまり価値は ない • 正直なところ Atom と

    Molecule の 分割はそんなに重要ではない 肩の力をぬいていこうね

47. ⑥ 頑張ることをあきらめる すべてをAtomで作らなくてもよい • やりたくなっちゃうけど我慢 • 特定のMoleculeでしか使われない AtomはMoleculeの中で実装しても 良い 肩の力をぬいていこうね

    かえって実装増えちゃうからね

48. ⑥ 頑張ることをあきらめる 決まった区分・分割は尊重する • 後から蒸し返したりしない • 十分な根拠のある反対意見でもなけ れば尊重しよう 肩の力をぬいていこうね リスペクトは大事よ

49. 参考文献 • https://atomicdesign.bradfrost.com/ • https://www.futurelearn.com/info/blog/atomic -design-molecules-organisms • https://design.dena.com/design/atomic-design- %E3%82%92%E5%88%86%E3%81%8B%E3%81 %A3%E3%81%9F%E3%81%A4%E3%82%82%E3

    %82%8A%E3%81%AB%E3%81%AA%E3%82%8B • https://www.amazon.co.jp/dp/B07CJ5TLK2/ref =dp-kindle-redirect?_encoding=UTF8&btkr=1