ひとりで Atomic Workflow を試してみた

https://dist.connpass.com/event/144496/

Transcript

1. ひとりで
   
   Atomic Workflow
   
   を試してみた
   #dist28
   こばしゅん@ksyunnnn
   

   View Slide

2. デザインはチーム全員でやったほうがよさそう
   結論：
   

   View Slide

3. UXデザイン
   VISUALデザイン
   開発
   よくあるワークフロー
   このあたりでビジネスサイドを含めた関係者との議論がある
   

   View Slide

4. UXデザイン
   VISUALデザイン
   開発
   よくあるワークフロー
   関係者の反応の推移
   

   View Slide

5. UXデザイン
   VISUALデザイン
   開発
   よくあるワークフロー
   関係者の反応の推移
   

   View Slide

6. UXデザイン
   VISUALデザイン
   開発
   よくあるワークフロー
   関係者の反応の推移
   

   View Slide

7. UXデザイン
   VISUALデザイン
   開発
   よくあるワークフロー
   関係者の反応の推移
   

   View Slide

8. UXデザイン
   VISUALデザイン
   開発
   よくあるワークフロー
   関係者の反応の推移
   

   View Slide

9. なぜこんなことが起きてしまうのか？
   

   View Slide

10. Design is too important to be left to designers.
    デザインはデザイナーだけに任せるには重要すぎる
    
    

    View Slide

11. (Web)デザインはデザイナーだけに任せるには重要すぎる
    速度、画面サイズ、環境、技術的能力、フォームファクター、人間工
    学、ユーザビリティ、アクセシビリティ、コンテキスト、ユーザーの好
    み、柔軟性、ネットワークの影響、インタラクション、モーション、人
    間工学、色とテキストのレンダリング、画素密度、スクロール性能、デ
    バイスとブラウザの癖、ユーザー設定、etc
    

    View Slide

12. UXデザイン
    VISUALデザイン
    開発
    よくあるワークフロー
    デザインフェーズだけであらゆるファクターを
    
    検討しきることはかなりむずかしい
    

    View Slide

13. http://atomicdesign.bradfrost.com/chapter-4/
    

    View Slide

14. http://atomicdesign.bradfrost.com/chapter-4/
    http://atomicdesign.bradfrost.com/chapter-4/
    

    View Slide

15. http://atomicdesign.bradfrost.com/chapter-4/
    http://atomicdesign.bradfrost.com/chapter-4/
    

    View Slide

16. UXデザイン
    VISUALデザイン
    開発
    Atomic Workflow
    すぐ共有！ すぐ共有！
    すぐ実装！ すぐFB！
    すぐFB！
    全部(ほぼ)同時進行でやる。すぐにブラウザに起こす。全員で確認する。
    

    View Slide

17. ひとりで
    
    Atomic Workflow
    
    を試してみた
    #dist28
    こばしゅん@ksyunnnn
    

    View Slide

18. #dist28
    こばしゅん@ksyunnnn
    
    フリーのフロントエンドエンジニア
    
    
    デザイナー1人/バックエンド1人/フロント自分1人みたいな仕事が多い
    
    React完全に理解した
    

    View Slide

19. こんなサービスを作ってみています
    -「ひさしぶり〜、今度飲もな！」
    
    
    あらゆる飲む飲む詐欺をなくし
    
    飲みに行くことができる唯一の方法
    
    
    Beerup
    Figma React
    

    View Slide

20. Atomic Workflow実践で意識したこと
    - UX - VISUAL - 開発 の実装は明確に分業(ひとりだったので特に)
    
    - デザインができたらすぐ実装
    
    - 実装の単位はOrganisms(※)くらいの単位を目安
    
    - 確認(意思決定)は必ずブラウザ上で行う
    ※Atomic Designにおけるコンポーネントの粒度
    

    View Slide

21. 実践した所感
    - デザイン後にUIパターンや性質上の考慮漏れ、懸念に素早く気づけた
    
    - 読込中の表示は？nullの表示は？ダイアログのインタラクションは？etc
    
    - 小さな単位で確認のサイクルを回しているので、修正が小さく済んだ
    
    - ブラウザでの確認が早い段階でできるので、フィードバックがしやすかった
    ポジティブ
    
    

    View Slide

22. 実践した所感
    - (ひとりで実践じゃわかることすくない...（?!）))
    - 小さい粒度の実装でも、変更があるかもと思うと精神衛生上よくない
    
    - チーム内での対話がかなり細かく必要そう
    
    ネガティブ
    
    

    View Slide

23. デザインはチーム全員でやったほうがよさそう
    結論：
    デザインツールのコラボレーション機能、これからは必須ですね〜
    

    View Slide

24. ひとりで
    
    Atomic Workflow
    
    を試してみた
    #dist28
    こばしゅん@ksyunnnn
    

    View Slide