Atomic Designを考える

Slide 1

Slide 1 text

Atomic Designを考える 0yu @yud0uhu

Slide 2

Slide 2 text

自己紹介 0yu@yud0uhu 公立千歳科学技術大学／B3 好きなおにぎりの具は昆布とおかか好きな領域はWebフロントエンド最近熱い言語はRust

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Atomic Design とは

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

TODOリストの設計を考える

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

入力フォームを分割する

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

参考文献原典 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

Slide 28

Slide 28 text

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