（穴あり版） UI 開発をアジャイルに行うための Atomic Design （穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development-100961721 ）
•
1 like•1,857 views
The slides describe how you can adopt Atomic Design to make your UI development agile.
Recommended
Recommended
More Related Content
More from Yusuke Goto
More from Yusuke Goto (20)
Recently uploaded
Recently uploaded (11)
（穴あり版） UI 開発をアジャイルに行うための Atomic Design （穴埋め解答版 → https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development-100961721 ）
- 1. Atomic Design 2018.6.6 IT STAFFING
- 15. Do
- 16. Do 実装に問題 実装に問題
- 27. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
- 29. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
- 30. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels 使用可能 使用可能 使用可能 使用可能 使用可能
- 31. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
- 32. Pages Templates Organisms Molecules Atoms 依 存 Photo by Dhyamis Kleber from Pexels
- 33. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
- 34. Pages Templates Organisms Molecules Atoms 依 存 Photo by Dhyamis Kleber from Pexels
- 35. Pages Templates Organisms Molecules Atoms 依 存 Photo by Dhyamis Kleber from Pexels 変更
- 36. Pages Templates Organisms Molecules Atoms 依 存 Photo by Dhyamis Kleber from Pexels 変更 影響 影響
- 37. Pages Templates Organisms Molecules Atoms 依 存 Photo by Dhyamis Kleber from Pexels 変更
- 38. Pages Templates Organisms Molecules Atoms 依 存 Photo by Dhyamis Kleber from Pexels 変更
- 39. Pages Templates Organisms Molecules Atoms 依 存 Photo by Dhyamis Kleber from Pexels 変更
- 40. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
- 41. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels 再利用性が高い
- 42. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
- 43. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
- 48. We’re not designing pages, we’re designing systems of components.—Stephen Hay
- 51. ?
- 57. ワイヤーフレーム
- 58. デザインカンプ
- 111. 順番 行動プロセス デザイン対象 1 画面全体から情報を探す 画面全体のレイアウト 2 3 4
- 112. 順番 行動プロセス デザイン対象 1 画面全体から情報を探す 画面全体のレイアウト 2 興味を引くコンテンツを見つける ユーザーの行動を促す コンテンツの見せ方 3 4
- 113. 順番 行動プロセス デザイン対象 1 画面全体から情報を探す 画面全体のレイアウト 2 興味を引くコンテンツを見つける ユーザーの行動を促す コンテンツの見せ方 3 コンテンツに促されて行動をする 行動を阻害しない操作性 4
- 114. 順番 行動プロセス デザイン対象 1 画面全体から情報を探す 画面全体のレイアウト 2 興味を引くコンテンツを見つける ユーザーの行動を促す コンテンツの見せ方 3 コンテンツに促されて行動をする 行動を阻害しない操作性 4 全体を通してサービスに良い印象を抱く デザインの統一性
- 117. 層 デザインの関心 Templates 画面全体のレイアウト Organisms ユーザーの行動を促すコンテンツの見せ方 Molecules Atoms
- 118. 層 デザインの関心 Templates 画面全体のレイアウト Organisms ユーザーの行動を促すコンテンツの見せ方 Molecules 行動を阻害しない操作性 Atoms
- 119. 層 デザインの関心 Templates 画面全体のレイアウト Organisms ユーザーの行動を促すコンテンツの見せ方 Molecules 行動を阻害しない操作性 Atoms デザインの統一性
- 124. 問題の分解が必要
- 126. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
- 127. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels コンポーネント コンポーネント コンポーネント コンポーネント コンポーネント コンポーネントコンポーネント
- 128. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels コンポーネント郡 コンポーネント郡 コンポーネント郡 コンポーネント郡 コンポーネント郡
- 135. 使う側と使われる側をハッキリさせる
- 136. A Project Suitable for Agile Development
- 137. The Dependency Inversion Principle
- 161. 情報デザイン時のフロー
- 163. Templates
- 164. Organisms
- 165. Organisms
- 166. Elements Inside
- 167. Atoms
- 168. Molecules
- 169. Atoms Inside the Molecule
- 170. ソフトウェア実装時のフロー
- 171. Atoms: Balloon
- 172. Atoms: Balloon
- 173. Atoms: Balloon
- 174. Atoms: Balloon
- 175. Atoms: Balloon
- 176. Atoms: Balloon
- 177. Atoms: TrashCanIcon
- 178. Atoms: TrashCanIcon
- 179. Atoms: TrashCanIcon
- 180. Atoms: TrashCanIcon
- 183. Atoms: TrashCanIcon
- 191. 例えば Flux
- 193. Pages
- 194. 😁
- 209. Interface Inventory
- 222. 層 デザインの関心 Templates 画面全体のレイアウト Organisms ユーザーの行動を促すコンテンツの見せ方 Molecules 行動を阻害しない操作性 Atoms デザインの統一性
- 223. 層 デザインの関心 Templates 画面全体のレイアウト Organisms ユーザーの行動を促すコンテンツの見せ方 Molecules 行動を阻害しない操作性 Atoms デザインの統一性
- 225. 😁
- 227. ぜひ試してみてください