Atomic Designを考える

UIコンポーネント設計のためのデザイン・フレームワークである『Atomic Design』について、簡単なTODOアプリを例に考えてみます。
【参考書籍】
https://gihyo.jp/book/2018/978-4-7741-9705-0
by Dec 27, 2021

Transcript

1. Atomic Designを考える 0yu @yud0uhu
2. 自己紹介 0yu@yud0uhu 公立千歳科学技術大学／B3 好きなおにぎりの具は昆布とおかか 好きな領域はWebフロントエンド 最近熱い言語はRust
3. Everett’s definition（直感的なUIの定義） 1. Affordance 2. Expectation 3. Efficiency 4. Responsiveness 5. Forgiveness 6. Explorability 7. No frustration
4. 直感的なUIの7つの定義 1. UIの見た目から与えられる情報が適切なこと 2. UIが期待通りに動作すること 3. UIが効率的で最小の工数で目的を達成できること 4. UIが適切なタイミングでフィードバックを返すこと 5. ユーザーがミスを犯してもすぐに修正可能なこと 6. ユーザーが安心してアプリケーションを遷移できること 7. それ以外でストレスがないこと
5. スタイルガイドがプロダクトから乖離する UI開発の課題 UIフレームワークの普及
6. コンポーネント指向の骨組みを提供するWebフロン トエンド・フレームワークの普及 UI開発の課題 コンポーネント・ベースの設計フレームワークの普 及
7. Atomic Design とは UIコンポーネント設計のためのデザイン・フレームワー ク https://bradfrost.com/blog/post/atomic-web-design/
8. Atomic Design とは 「Atomic」 = 「原子の～」 「Design」= 「設計」 アプリケーションと、アプリケーションを構成するボタンや プルダウンメニュー、テキストフォームなどのUI要素を物質 と原子の関係と見立てる
9. Atomic Design とは
10. UIコンポーネントの分割基準 UIデザインにおける関心事を4つに分類→Atomic Designの階 層に割り当てる
11. UIコンポーネントの分割基準 層 関心事 ATOMS デザインの統一性 MOLECULES 行動を阻害しない操作性 ORGANISMS ユーザーの行動を促すコンテンツ TEMPLATES 画面全体のレイアウト
12. UIコンポーネントの分割基準 PAGES層はプロダクトそのもの →UIデザインの関心から除外する
13. UIコンポーネントの階層化によるメリット • 分割した1つの責務だけに集中できる • 同一層で代替可能 • 下位層が上位層の変更に影響を受けない
14. ATOMS(原子)の設計 • 最小のUI要素 ◦ ボタン ▪ <button /> ◦ テキスト・インプット ▪ < input type =" text" />
15. MOLECULES(分子)の設計 • ユーザーの動機に対する機能を追加する ◦ 例：検索フォームを実装する ボタン+テキスト・インプット=検索フォーム
16. MOLECULES(分子)の設計 • MOLECULES層で満たすべきこと ◦ 以前に使ったことがある、または、直感的に使い方が わかる形をしている ◦ 似た形をしたものは常に同じ挙動をする
17. MOLECULES(分子)の設計 • MOLECULES層で満たすべきこと ◦ 以前に使ったことがある、または、直感的に使い方が わかる形をしている ◦ 似た形をしたものは常に同じ挙動をする ユーザーの動機に対する責務でコンポーネント化する
18. ORGANISMS(有機体)の設計 • 独立して存在できるスタンドアローンなコンポーネント ◦ 例：ヘッダーコンポーネント
19. TEMPLATESの設計 • ページ・レイアウトに対する責務を担う →TEMPLATES • コンテンツとコンポーネントを繋ぐ →PAGES
20. TODOリストの設計を考える Templates
21. TODOリストの設計を考える Molecular
22. TODOリストの設計を考える Atoms
23. TODOリストの設計を考える
24. 入力フォームを分割する UIコンポーネント の最小単位である 入力フォームを ATOMSに切り出 す
25. 入力フォームを分割する
26. まとめ 嬉しいこと • ロジックの責務が明確化できる うーんなところ • 層の切り分けがむずかしい（ATOMS／MOLECULES） • エンジニアとデザイナーで役割を分担していない個人開 発では恩恵を感じにくそう
27. 参考文献 原典 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
28. ご清聴ありがとうございました🙇