価値あるフロントエンドデザイン領域開拓

Transcript

1. 価値あるフロントエンドデザイン領域開拓 価値あるフロントエンドデザイン領域開拓 Futoshi Iwashita

2. 自己紹介 自己紹介 岩下 太 (@jaxx2104) 株式会社リクルート Front-end engineer

3. やってきたこと やってきたこと Vue にしたり Nuxt にしたり VuePress にしたり etc.

4. 趣味 #keyboard 趣味 #keyboard

5. 趣味 #minecraft 趣味 #minecraft

6. キーボードとゲームがあれば だいたいの人間わかり合える

7. 本題 本題

8. フロントエンドの周辺 フロントエンドの周辺

9. Somewhere between design – a world of personas, pixels, and

   polish – and engineering – a world of logic, loops, and linux – lies frontend design. frontend-design - http://bradfrost.com/blog/post/frontend-design/

10. こういった役割 こういった役割

11. 「フロントエンド」がなぜ専門領域になったのかを思い出そう 体験と設計 フロントエンドエンジニアの二つの責務について #FROKAN - https://speakerdeck.com/potato4d/ti-yan-toshe-ji-hurontoendoenziniafalseer-tufalseze-wu- nituite-number-frokan?slide=37

12. フロントエンドエンジニアの責務 フロントエンドエンジニアの責務 設計 (Frontend develop) 体験 (Frontend design)

13. なので今日は体験の方 フロントエンドデザインの話をします。

14. まずは課題集め まずは課題集め 開発の前後工程に実際に参加してみる

15. ワイヤーフレーム作成に参加 店舗ヒアリング

16. 感想 感想 開発する意義や成果を感じる満足感が高かった 職能間の手法と情報のギャップは感じた

17. そこで以下のことを手助けしたいと思った そこで以下のことを手助けしたいと思った 1. 共通認識を持つ 2. チームの力学について話し合う場を作る 3. チームの強化と改善にリーダーを巻き込む https://rework.withgoogle.com/jp/guides/understanding-team-e ectiveness/steps/help-teams-

    take-action/

18. ギャップを埋めて最終的に開発組織にとっての ロールモデルを作れたら最高だ

19. やったこと やったこと

20. デザイン指示書のオンライン化 デザイン指示書のオンライン化

21. デザインレビュー観点の整備 デザインレビュー観点の整備

22. デザインレビューフロー（対面）の整備 デザインレビューフロー（対面）の整備

23. デザインファイルと UI モックの統一 デザインファイルと UI モックの統一

24. デザインファイルの自動化 デザインファイルの自動化 CLI - https://developer.sketch.com/cli/

25. 成果物の向上（WF） 成果物の向上（WF） 社内限URLなので割愛

26. 成果物の向上（画面設計） 成果物の向上（画面設計）

27. 得られたこと 得られたこと コミュニケーションの可視化と 交通整理が出来た 職能間の目線を揃えることが出来た フロントエンドデザイン領域を 体系的に学ぶ環境が出来た

28. ありがとうございました！ ありがとうございました！