Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ひとりで Atomic Workflow を試してみた
Search
ksyunnnn
September 13, 2019
Design
2
1.5k
ひとりで Atomic Workflow を試してみた
https://dist.connpass.com/event/144496/
ksyunnnn
September 13, 2019
Tweet
Share
More Decks by ksyunnnn
See All by ksyunnnn
個人がコミュニティに参加して得られるもの
ksyunnnn
0
1.4k
HTMLから入門してJavaScriptまで習得する会.mmc
ksyunnnn
0
270
非エンジニアの エンジニアのなり方
ksyunnnn
0
910
Other Decks in Design
See All in Design
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
150
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.6k
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
860
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
240
Dive Deep into Communication
yomtsu
0
210
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
520
Masked shaman-Storyboard 2025
ashley0521
0
170
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
570
OLTA株式会社/デザイン紹介資料
taxy
0
110
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
650
横断組織デザイナーの働き方
mixi_design
PRO
0
330
プロダクトデザインの「守破離」の「破」について
hayashirine
0
310
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
330
Bash Introduction
62gerente
611
210k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Speed Design
sergeychernyshev
27
790
YesSQL, Process and Tooling at Scale
rocio
172
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
Fireside Chat
paigeccino
34
3.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Transcript
ひとりで Atomic Workflow を試してみた #dist28 こばしゅん@ksyunnnn
デザインはチーム全員でやったほうがよさそう 結論:
UXデザイン VISUALデザイン 開発 よくあるワークフロー このあたりでビジネスサイドを含めた関係者との議論がある
UXデザイン VISUALデザイン 開発 よくあるワークフロー 関係者の反応の推移
UXデザイン VISUALデザイン 開発 よくあるワークフロー 関係者の反応の推移
UXデザイン VISUALデザイン 開発 よくあるワークフロー 関係者の反応の推移
UXデザイン VISUALデザイン 開発 よくあるワークフロー 関係者の反応の推移
UXデザイン VISUALデザイン 開発 よくあるワークフロー 関係者の反応の推移
なぜこんなことが起きてしまうのか?
Design is too important to be left to designers. デザインはデザイナーだけに任せるには重要すぎる
(Web)デザインはデザイナーだけに任せるには重要すぎる 速度、画面サイズ、環境、技術的能力、フォームファクター、人間工 学、ユーザビリティ、アクセシビリティ、コンテキスト、ユーザーの好 み、柔軟性、ネットワークの影響、インタラクション、モーション、人 間工学、色とテキストのレンダリング、画素密度、スクロール性能、デ バイスとブラウザの癖、ユーザー設定、etc
UXデザイン VISUALデザイン 開発 よくあるワークフロー デザインフェーズだけであらゆるファクターを 検討しきることはかなりむずかしい
http://atomicdesign.bradfrost.com/chapter-4/
http://atomicdesign.bradfrost.com/chapter-4/ http://atomicdesign.bradfrost.com/chapter-4/
http://atomicdesign.bradfrost.com/chapter-4/ http://atomicdesign.bradfrost.com/chapter-4/
UXデザイン VISUALデザイン 開発 Atomic Workflow すぐ共有! すぐ共有! すぐ実装! すぐFB! すぐFB!
全部(ほぼ)同時進行でやる。すぐにブラウザに起こす。全員で確認する。
ひとりで Atomic Workflow を試してみた #dist28 こばしゅん@ksyunnnn
#dist28 こばしゅん@ksyunnnn フリーのフロントエンドエンジニア デザイナー1人/バックエンド1人/フロント自分1人みたいな仕事が多い React完全に理解した
こんなサービスを作ってみています -「ひさしぶり〜、今度飲もな!」 あらゆる飲む飲む詐欺をなくし 飲みに行くことができる唯一の方法 Beerup Figma React
Atomic Workflow実践で意識したこと - UX - VISUAL - 開発 の実装は明確に分業(ひとりだったので特に) -
デザインができたらすぐ実装 - 実装の単位はOrganisms(※)くらいの単位を目安 - 確認(意思決定)は必ずブラウザ上で行う ※Atomic Designにおけるコンポーネントの粒度
実践した所感 - デザイン後にUIパターンや性質上の考慮漏れ、懸念に素早く気づけた - 読込中の表示は?nullの表示は?ダイアログのインタラクションは?etc - 小さな単位で確認のサイクルを回しているので、修正が小さく済んだ - ブラウザでの確認が早い段階でできるので、フィードバックがしやすかった ポジティブ
実践した所感 - (ひとりで実践じゃわかることすくない...(?!))) - 小さい粒度の実装でも、変更があるかもと思うと精神衛生上よくない - チーム内での対話がかなり細かく必要そう ネガティブ
デザインはチーム全員でやったほうがよさそう 結論: デザインツールのコラボレーション機能、これからは必須ですね〜
ひとりで Atomic Workflow を試してみた #dist28 こばしゅん@ksyunnnn