Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.


Atomic Design
2018.6.6 IT STAFFING
YUSUKE GOTO
https://ygoto3.com/
@ygoto3_










インターネットでテレビを作りたい
iOS、Android、Web のアプリを作る。

どんな機能があると良いだろう?
必要に感じたら感じたタイミングで

随時技術を導入したい

(どうせなら新しい技術の方がテンション上がる)
Plan
Do
Check
Action
Plan
Check
Action Do
Plan
Check
Action Do
壊れるときもある
Do
Do
実装に問題
実装に問題
Do
デザインに問題
デザインに問題
デザインに問題
Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/
Pages
Templates
Organisms
Molecules
Atoms
Pages
Templates
Organisms
Molecules
Atoms
Pages
Templates
Organisms
Molecules
Atoms
Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms
Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels




Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels
使用可能
使用可能
使用可能
使用可能
使用可能


Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms
依

存


Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms
依

存


Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms
依

存


Photo by Dhyamis Kleber from Pexels
変更
Pages
Templates
Organisms
Molecules
Atoms
依

存
Photo by Dhyamis Kleber from Pexels
変更
影響
影響
Pages
Templates
Organisms
Molecules
Atoms
依

存


Photo by Dhyamis Kleber from Pexels
変更
Pages
Templates
Organisms
Molecules
Atoms
依

存


Photo by Dhyamis Kleber from Pexels
変更
Pages
Templates
Organisms
Molecules
Atoms
依

存
Photo by Dhyamis Kleber from Pexels
変更


Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels


Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels
再利用性が高い


Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels






We’re not designing pages, we’re designing systems of
components.—Stephen Hay






?
ワイヤーフレーム
デザインカンプ
























UI も拡張性や保守性のために

構造をデザインする














https://www.dropbox.com/branding/
http://ux.mailchimp.com/patterns
http://ui-patterns.com/


順番 行動プロセス デザイン対象
1 画面全体から情報を探す 画面全体のレイアウト
2
3
4
順番 行動プロセス デザイン対象
1 画面全体から情報を探す 画面全体のレイアウト
2 興味を引くコンテンツを見つける
ユーザーの行動を促す

コンテンツの見せ方
3
4
順番 行動プロセス デザイン対象
1 画面全体から情報を探す 画面全体のレイアウト
2 興味を引くコンテンツを見つける
ユーザーの行動を促す

コンテンツの見せ方
3 コンテンツに促されて行動をする 行動を阻害しない操作性
4
順番 行動プロセス デザイン対象
1 画面全体から情報を探す 画面全体のレイアウト
2 興味を引くコンテンツを見つける
ユーザーの行動を促す

コンテンツの見せ方
3 コンテンツに促されて行動をする 行動を阻害しない操作性
4 全体を通してサー...
Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/
層 デザインの関心
Templates 画面全体のレイアウト
Organisms
Molecules
Atoms
層 デザインの関心
Templates 画面全体のレイアウト
Organisms ユーザーの行動を促すコンテンツの見せ方
Molecules
Atoms
層 デザインの関心
Templates 画面全体のレイアウト
Organisms ユーザーの行動を促すコンテンツの見せ方
Molecules 行動を阻害しない操作性
Atoms
層 デザインの関心
Templates 画面全体のレイアウト
Organisms ユーザーの行動を促すコンテンツの見せ方
Molecules 行動を阻害しない操作性
Atoms デザインの統一性




問題の分解が必要
Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels
コンポーネント
コンポーネント
コンポーネント
コンポーネント
コンポーネント
コンポー...
Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels
コンポーネント郡
コンポーネント郡
コンポーネント郡
コンポーネント郡
コンポーネント郡




コンポーネントは1つの役割を

持つように作る
ソースコードをいじらなくても

モジュールの振る舞いを変更できる


同じ役割を持つコンポーネントが
満たすべき仕様は同一であるように作る


機能を持ち過ぎたインタフェースを

作ってはいけない
使う側と使われる側をハッキリさせる
A Project Suitable for Agile Development
The Dependency Inversion Principle
Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/
http://bradfrost.com/blog/post/atomic-web-design/
Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/
http://bradfrost.com/blog/post/atomic-web-design/
Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/
http://bradfrost.com/blog/post/atomic-web-design/
http://bradfrost.com/blog/post/atomic-web-design/


Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/
http://bradfrost.com/blog/post/atomic-web-design/
Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/
http://bradfrost.com/blog/post/atomic-web-design/
情報デザイン時のフロー
Templates
Organisms
Organisms
Elements Inside
Atoms
Molecules
Atoms Inside the Molecule
ソフトウェア実装時のフロー
Atoms: Balloon
Atoms: Balloon
Atoms: Balloon




Atoms: Balloon
Atoms: Balloon




Atoms: Balloon
Atoms: TrashCanIcon
Atoms: TrashCanIcon
Atoms: TrashCanIcon






















Atoms: TrashCanIcon
Molecules: DeleteButton
Molecules: DeleteButton




















Atoms: TrashCanIcon
Organisms: Notification
Organisms: Notification








Organisms: Notification
















Organisms: NotificationList
Organisms: NotificationList














Templates: NotificationListTemplate
Templates: NotificationListTemplate




























例えば Flux
Templates
データを流し込む
例えば Flux
Pages
😁
https://storybook.js.org/




https://blog.nagisa-inc.jp/archives/3459








Interface Inventory
Interface Inventory ワークショップ
https://www.wantedly.com/companies/abema/post_articles/53312


























層 デザインの関心
Templates 画面全体のレイアウト
Organisms ユーザーの行動を促すコンテンツの見せ方
Molecules 行動を阻害しない操作性
Atoms デザインの統一性
層 デザインの関心
Templates 画面全体のレイアウト
Organisms ユーザーの行動を促すコンテンツの見せ方
Molecules 行動を阻害しない操作性
Atoms デザインの統一性
😁








ぜひ試してみてください
Atomic Design

本日紹介したトピックは

本書で更に詳しく

紹介しています。
https://www.amazon.co.jp/dp/477419705X
YUSUKE GOTO
https://ygoto3.com/
@ygoto3_
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development...
Upcoming SlideShare
Loading in …5
×

(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development-100961721 )

871 views

Published on

The slides describe how you can adopt Atomic Design to make your UI development agile.

Published in: Technology
  • Be the first to comment

(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development-100961721 )

  1. 1. 
 Atomic Design 2018.6.6 IT STAFFING
  2. 2. YUSUKE GOTO https://ygoto3.com/ @ygoto3_ 
 
 
 
 

  3. 3. インターネットでテレビを作りたい
  4. 4. iOS、Android、Web のアプリを作る。
 どんな機能があると良いだろう?
  5. 5. 必要に感じたら感じたタイミングで
 随時技術を導入したい
 (どうせなら新しい技術の方がテンション上がる)
  6. 6. Plan Do Check Action
  7. 7. Plan Check Action Do
  8. 8. Plan Check Action Do 壊れるときもある
  9. 9. Do
  10. 10. Do 実装に問題 実装に問題
  11. 11. Do デザインに問題 デザインに問題 デザインに問題
  12. 12. Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
  13. 13. Pages Templates Organisms Molecules Atoms
  14. 14. Pages Templates Organisms Molecules Atoms
  15. 15. Pages Templates Organisms Molecules Atoms
  16. 16. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  17. 17. Pages Templates Organisms Molecules Atoms
  18. 18. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  19. 19. 
 
 Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels 使用可能 使用可能 使用可能 使用可能 使用可能
  20. 20. 
 Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  21. 21. Pages Templates Organisms Molecules Atoms 依
 存 
 Photo by Dhyamis Kleber from Pexels
  22. 22. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  23. 23. Pages Templates Organisms Molecules Atoms 依
 存 
 Photo by Dhyamis Kleber from Pexels
  24. 24. Pages Templates Organisms Molecules Atoms 依
 存 
 Photo by Dhyamis Kleber from Pexels 変更
  25. 25. Pages Templates Organisms Molecules Atoms 依
 存 Photo by Dhyamis Kleber from Pexels 変更 影響 影響
  26. 26. Pages Templates Organisms Molecules Atoms 依
 存 
 Photo by Dhyamis Kleber from Pexels 変更
  27. 27. Pages Templates Organisms Molecules Atoms 依
 存 
 Photo by Dhyamis Kleber from Pexels 変更
  28. 28. Pages Templates Organisms Molecules Atoms 依
 存 Photo by Dhyamis Kleber from Pexels 変更
  29. 29. 
 Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  30. 30. 
 Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels 再利用性が高い
  31. 31. 
 Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  32. 32. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  33. 33. 
 
 

  34. 34. We’re not designing pages, we’re designing systems of components.—Stephen Hay
  35. 35.
  36. 36.
  37. 37. 
 ?
  38. 38. ワイヤーフレーム
  39. 39. デザインカンプ
  40. 40.
  41. 41.
  42. 42.
  43. 43.
  44. 44. 
 

  45. 45. 
 

  46. 46. 
 
 

  47. 47.
  48. 48. UI も拡張性や保守性のために
 構造をデザインする
  49. 49.
  50. 50.
  51. 51. 
 

  52. 52. 
 

  53. 53.
  54. 54. https://www.dropbox.com/branding/
  55. 55. http://ux.mailchimp.com/patterns
  56. 56. http://ui-patterns.com/
  57. 57.
  58. 58. 順番 行動プロセス デザイン対象 1 画面全体から情報を探す 画面全体のレイアウト 2 3 4
  59. 59. 順番 行動プロセス デザイン対象 1 画面全体から情報を探す 画面全体のレイアウト 2 興味を引くコンテンツを見つける ユーザーの行動を促す
 コンテンツの見せ方 3 4
  60. 60. 順番 行動プロセス デザイン対象 1 画面全体から情報を探す 画面全体のレイアウト 2 興味を引くコンテンツを見つける ユーザーの行動を促す
 コンテンツの見せ方 3 コンテンツに促されて行動をする 行動を阻害しない操作性 4
  61. 61. 順番 行動プロセス デザイン対象 1 画面全体から情報を探す 画面全体のレイアウト 2 興味を引くコンテンツを見つける ユーザーの行動を促す
 コンテンツの見せ方 3 コンテンツに促されて行動をする 行動を阻害しない操作性 4 全体を通してサービスに良い印象を抱く デザインの統一性
  62. 62. Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
  63. 63. 層 デザインの関心 Templates 画面全体のレイアウト Organisms Molecules Atoms
  64. 64. 層 デザインの関心 Templates 画面全体のレイアウト Organisms ユーザーの行動を促すコンテンツの見せ方 Molecules Atoms
  65. 65. 層 デザインの関心 Templates 画面全体のレイアウト Organisms ユーザーの行動を促すコンテンツの見せ方 Molecules 行動を阻害しない操作性 Atoms
  66. 66. 層 デザインの関心 Templates 画面全体のレイアウト Organisms ユーザーの行動を促すコンテンツの見せ方 Molecules 行動を阻害しない操作性 Atoms デザインの統一性
  67. 67. 
 

  68. 68. 問題の分解が必要
  69. 69. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  70. 70. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels コンポーネント コンポーネント コンポーネント コンポーネント コンポーネント コンポーネントコンポーネント
  71. 71. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels コンポーネント郡 コンポーネント郡 コンポーネント郡 コンポーネント郡 コンポーネント郡
  72. 72.
  73. 73. 
 コンポーネントは1つの役割を
 持つように作る
  74. 74. ソースコードをいじらなくても
 モジュールの振る舞いを変更できる
  75. 75. 
 同じ役割を持つコンポーネントが 満たすべき仕様は同一であるように作る
  76. 76. 
 機能を持ち過ぎたインタフェースを
 作ってはいけない
  77. 77. 使う側と使われる側をハッキリさせる
  78. 78. A Project Suitable for Agile Development
  79. 79. The Dependency Inversion Principle
  80. 80. Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
  81. 81. http://bradfrost.com/blog/post/atomic-web-design/
  82. 82. Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
  83. 83. http://bradfrost.com/blog/post/atomic-web-design/
  84. 84. Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
  85. 85. http://bradfrost.com/blog/post/atomic-web-design/
  86. 86. http://bradfrost.com/blog/post/atomic-web-design/
  87. 87.
  88. 88. Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
  89. 89. http://bradfrost.com/blog/post/atomic-web-design/
  90. 90. Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
  91. 91. http://bradfrost.com/blog/post/atomic-web-design/
  92. 92. 情報デザイン時のフロー
  93. 93. Templates
  94. 94. Organisms
  95. 95. Organisms
  96. 96. Elements Inside
  97. 97. Atoms
  98. 98. Molecules
  99. 99. Atoms Inside the Molecule
  100. 100. ソフトウェア実装時のフロー
  101. 101. Atoms: Balloon
  102. 102. Atoms: Balloon
  103. 103. Atoms: Balloon 
 

  104. 104. Atoms: Balloon
  105. 105. Atoms: Balloon 
 

  106. 106. Atoms: Balloon
  107. 107. Atoms: TrashCanIcon
  108. 108. Atoms: TrashCanIcon
  109. 109. Atoms: TrashCanIcon 
 
 
 
 
 
 
 
 
 
 

  110. 110. Atoms: TrashCanIcon
  111. 111. Molecules: DeleteButton
  112. 112. Molecules: DeleteButton 
 
 
 
 
 
 
 
 
 

  113. 113. Atoms: TrashCanIcon
  114. 114. Organisms: Notification
  115. 115. Organisms: Notification 
 
 
 

  116. 116. Organisms: Notification 
 
 
 
 
 
 
 

  117. 117. Organisms: NotificationList
  118. 118. Organisms: NotificationList 
 
 
 
 
 
 

  119. 119. Templates: NotificationListTemplate
  120. 120. Templates: NotificationListTemplate 
 
 
 
 
 
 
 
 
 
 
 
 
 

  121. 121. 例えば Flux
  122. 122. Templates データを流し込む 例えば Flux
  123. 123. Pages
  124. 124. 😁
  125. 125. https://storybook.js.org/
  126. 126.
  127. 127.
  128. 128. https://blog.nagisa-inc.jp/archives/3459
  129. 129.
  130. 130.
  131. 131.
  132. 132. 
 Interface Inventory
  133. 133. Interface Inventory ワークショップ
  134. 134. https://www.wantedly.com/companies/abema/post_articles/53312
  135. 135.
  136. 136. 
 

  137. 137. 
 
 
 

  138. 138. 
 

  139. 139. 
 
 
 

  140. 140. 層 デザインの関心 Templates 画面全体のレイアウト Organisms ユーザーの行動を促すコンテンツの見せ方 Molecules 行動を阻害しない操作性 Atoms デザインの統一性
  141. 141. 層 デザインの関心 Templates 画面全体のレイアウト Organisms ユーザーの行動を促すコンテンツの見せ方 Molecules 行動を阻害しない操作性 Atoms デザインの統一性
  142. 142. 😁
  143. 143. 
 

  144. 144. 
 
 ぜひ試してみてください
  145. 145. Atomic Design
 本日紹介したトピックは
 本書で更に詳しく
 紹介しています。 https://www.amazon.co.jp/dp/477419705X
  146. 146. YUSUKE GOTO https://ygoto3.com/ @ygoto3_

×