UIコンポーネント設計のためのデザイン・フレームワークである『Atomic Design』について、簡単なTODOアプリを例に考えてみます。

1. Atomic Designを考える
0yu @denham95173179

2. Everett’s definition（直感的なUIの定義）
1. Affordance
2. Expectation
3. Efficiency
4. Responsiveness
5. Forgiveness
6. Explorability
7. No frustration

3. 直感的なUIの7つの定義
1. UIの見た目から与えられる情報が適切なこと
2. UIが期待通りに動作すること
3. UIが効率的で最小の工数で目的を達成できること
4. UIが適切なタイミングでフィードバックを返すこと
5. ユーザーがミスを犯してもすぐに修正可能なこと
6. ユーザーが安心してアプリケーションを遷移できること
7. それ以外でストレスがないこと

4. スタイルガイドがプロダクトから乖離する
UI開発の課題
UIフレームワークの普及

5. コンポーネント指向の骨組みを提供するWebフロン
トエンド・フレームワークの普及
UI開発の課題
コンポーネント・ベースの設計フレームワークの普
及

6. Atomic Design とは
UIコンポーネント設計のためのデザイン・フレームワー
ク
https://bradfrost.com/blog/post/atomic-web-design/

7. Atomic Design とは
「Atomic」 = 「原子の～」
「Design」= 「設計」
アプリケーションと、アプリケーションを構成するボタンや
プルダウンメニュー、テキストフォームなどのUI要素を物質
と原子の関係と見立てる

8. Atomic Design とは

9. UIコンポーネントの分割基準
UIデザインにおける関心事を4つに分類→Atomic Designの階
層に割り当てる

10. UIコンポーネントの分割基準
層 関心事
ATOMS デザインの統一性
MOLECULES 行動を阻害しない操作性
ORGANISMS ユーザーの行動を促すコンテンツ
TEMPLATES 画面全体のレイアウト

11. UIコンポーネントの分割基準
PAGES層はプロダクトそのもの
→UIデザインの関心から除外する

12. UIコンポーネントの階層化によるメリット
● 分割した1つの責務だけに集中できる
● 同一層で代替可能
● 下位層が上位層の変更に影響を受けない

13. ATOMS(原子)の設計
● 最小のUI要素
○ ボタン
■ <button />
○ テキスト・インプット
■ < input type =" text" />

14. MOLECULES(分子)の設計
● ユーザーの動機に対する機能を追加する
○ 例：検索フォームを実装する
ボタン+テキスト・インプット=検索フォーム

15. MOLECULES(分子)の設計
● MOLECULES層で満たすべきこと
○ 以前に使ったことがある、または、直感的に使い方が
わかる形をしている
○ 似た形をしたものは常に同じ挙動をする

16. MOLECULES(分子)の設計
● MOLECULES層で満たすべきこと
○ 以前に使ったことがある、または、直感的に使い方が
わかる形をしている
○ 似た形をしたものは常に同じ挙動をする
ユーザーの動機に対する責務でコンポーネント化する

17. ORGANISMS(有機体)の設計
● 独立して存在できるスタンドアローンなコンポーネント
○ 例：ヘッダーコンポーネント

18. TEMPLATESの設計
● ページ・レイアウトに対する責務を担う
→TEMPLATES
● コンテンツとコンポーネントを繋ぐ
→PAGES

19. TODOリストの設計を考える
Templates

20. TODOリストの設計を考える
Molecular

21. TODOリストの設計を考える
Atoms

22. TODOリストの設計を考える

23. 入力フォームを分割する
UIコンポーネント
の最小単位である
入力フォームを
ATOMSに切り出
す

24. 入力フォームを分割する

25. まとめ
嬉しいこと
● ロジックの責務が明確化できる
うーんなところ
● 層の切り分けがむずかしい（ATOMS／MOLECULES）
● エンジニアとデザイナーで役割を分担していない個人開
発では恩恵を感じにくそう

26. 参考文献
原典
https://bradfrost.com/blog/post/atomic-web-design/
『Atomic Design ～堅牢で使いやすいUIを効率良く設計する
／五藤佑典』
https://www.amazon.co.jp/dp/B07CJ5TLK2/ref=dp-kindl
e-redirect?_encoding=UTF8&btkr=1

27. ご清聴ありがとうございました🙇