Slide 1
Slide 1 text
ひとりで
Atomic Workflow
を試してみた
#dist28
こばしゅん@ksyunnnn
Slide 2
Slide 2 text
デザインはチーム全員でやったほうがよさそう
結論：
Slide 3
Slide 3 text
UXデザイン
VISUALデザイン
開発
よくあるワークフロー
このあたりでビジネスサイドを含めた関係者との議論がある
Slide 4
Slide 4 text
UXデザイン
VISUALデザイン
開発
よくあるワークフロー
関係者の反応の推移
Slide 5
Slide 5 text
UXデザイン
VISUALデザイン
開発
よくあるワークフロー
関係者の反応の推移
Slide 6
Slide 6 text
UXデザイン
VISUALデザイン
開発
よくあるワークフロー
関係者の反応の推移
Slide 7
Slide 7 text
UXデザイン
VISUALデザイン
開発
よくあるワークフロー
関係者の反応の推移
Slide 8
Slide 8 text
UXデザイン
VISUALデザイン
開発
よくあるワークフロー
関係者の反応の推移
Slide 9
Slide 9 text
なぜこんなことが起きてしまうのか？
Slide 10
Slide 10 text
Design is too important to be left to designers.
デザインはデザイナーだけに任せるには重要すぎる
Slide 11
Slide 11 text
(Web)デザインはデザイナーだけに任せるには重要すぎる
速度、画面サイズ、環境、技術的能力、フォームファクター、人間工
学、ユーザビリティ、アクセシビリティ、コンテキスト、ユーザーの好
み、柔軟性、ネットワークの影響、インタラクション、モーション、人
間工学、色とテキストのレンダリング、画素密度、スクロール性能、デ
バイスとブラウザの癖、ユーザー設定、etc
Slide 12
Slide 12 text
UXデザイン
VISUALデザイン
開発
よくあるワークフロー
デザインフェーズだけであらゆるファクターを
検討しきることはかなりむずかしい
Slide 13
Slide 13 text
http://atomicdesign.bradfrost.com/chapter-4/
Slide 14
Slide 14 text
http://atomicdesign.bradfrost.com/chapter-4/
http://atomicdesign.bradfrost.com/chapter-4/
Slide 15
Slide 15 text
http://atomicdesign.bradfrost.com/chapter-4/
http://atomicdesign.bradfrost.com/chapter-4/
Slide 16
Slide 16 text
UXデザイン
VISUALデザイン
開発
Atomic Workflow
すぐ共有！ すぐ共有！
すぐ実装！ すぐFB！
すぐFB！
全部(ほぼ)同時進行でやる。すぐにブラウザに起こす。全員で確認する。
Slide 17
Slide 17 text
ひとりで
Atomic Workflow
を試してみた
#dist28
こばしゅん@ksyunnnn
Slide 18
Slide 18 text
#dist28
こばしゅん@ksyunnnn
フリーのフロントエンドエンジニア
デザイナー1人/バックエンド1人/フロント自分1人みたいな仕事が多い
React完全に理解した
Slide 19
Slide 19 text
こんなサービスを作ってみています
-「ひさしぶり〜、今度飲もな！」
あらゆる飲む飲む詐欺をなくし
飲みに行くことができる唯一の方法
Beerup
Figma React
Slide 20
Slide 20 text
Atomic Workflow実践で意識したこと
- UX - VISUAL - 開発 の実装は明確に分業(ひとりだったので特に)
- デザインができたらすぐ実装
- 実装の単位はOrganisms(※)くらいの単位を目安
- 確認(意思決定)は必ずブラウザ上で行う
※Atomic Designにおけるコンポーネントの粒度
Slide 21
Slide 21 text
実践した所感
- デザイン後にUIパターンや性質上の考慮漏れ、懸念に素早く気づけた
- 読込中の表示は？nullの表示は？ダイアログのインタラクションは？etc
- 小さな単位で確認のサイクルを回しているので、修正が小さく済んだ
- ブラウザでの確認が早い段階でできるので、フィードバックがしやすかった
ポジティブ
Slide 22
Slide 22 text
実践した所感
- (ひとりで実践じゃわかることすくない...（?!）))
- 小さい粒度の実装でも、変更があるかもと思うと精神衛生上よくない
- チーム内での対話がかなり細かく必要そう
ネガティブ
Slide 23
Slide 23 text
デザインはチーム全員でやったほうがよさそう
結論：
デザインツールのコラボレーション機能、これからは必須ですね〜
Slide 24
Slide 24 text
ひとりで
Atomic Workflow
を試してみた
#dist28
こばしゅん@ksyunnnn