エンジニアリングとデザインを繋ぐ視点で意識したこと

https://rosca.connpass.com/event/337472/

Transcript

1. エンジニアリングとデザインを 繋ぐ視点で意識したこと プロダクト開発部 第2グループ 小松 永幸
2. 自己紹介 • 2022年6月スタメンに入社 • フロントエンドを中心に開発しています • 現在はフロントエンドの技術刷新 プロジェクトに参画中です • デザインシステムの開発も行っています
3. 会社 / プロダクト紹介
7. エンジニアリングとデザインを 繋ぐ視点で意識したこと
8. デザインエンジニア 「デザインとエンジニアリングの2つの視点を持って、 プロダクトの価値を最大化する」 「デザイナーさんとエンジニアを繋ぐ架け橋」
9. 違和感には敏感に ただとどめず共有する 01
10. なんか違和感を感じる...。 01. 違和感には敏感に、ただとどめず共有する
11. 01. 違和感には敏感に、ただとどめず共有する 「UIデザインを見直す良いきっかけ」 「プロダクトらしさ、一貫性を守る手がかり」 違和感とは？
12. 01. 違和感には敏感に、ただとどめず共有する 放置せず違和感に向き合う • 理想は、違和感を言語化・認識し 改善案までセットで提示すること • ただ違和感を認識できなかったり 時間がなかったりと実装まで持っていくことが難しい
13. 01. 違和感には敏感に、ただとどめず共有する
14. 共有することの利点 • 改善策がみつかる • チームがデザインに関心を持つようになる • 他のメンバーが実装まで行なってくれる可能性がある 01. 違和感には敏感に、ただとどめず共有する
15. 提案することを恐れない 02
16. 「デザインは課題解決や価値創造の手段であり チーム全体で取り組むもの」 02. 提案することを恐れない デザインはデザイナーだけのものではない
17. • 提案を起点に議論のきっかけや 新たな視点の広がりを生むことができる • 埋もれていたデザイン案が実現可能になることもある ◦ デザイナーさんが無意識で実装工数がかかるから と避けていたデザイン 02. 提案することを恐れない 提案が生む新たな価値
18. • 視覚言語 ••• 視覚を通じて、言語のように伝達・表現を 行うもの（Figmaやモックアップなど） • 共通認識が生まれ議論がしやすくなる 02. 提案することを恐れない 視覚言語で提案することを意識する
19. 02. 提案することを恐れない
20. オーバーエンジニアリングを避ける 03
21. • デザインがもたらす事業インパクトに対して 実装工数が大きい • デザインが技術的に実現できない 03. オーバーエンジニアリングを避ける デザインを実装に落とし込む上で よく起こる事象
22. • 実現可能か？ ◦ この仕様は現在の技術スタックで実現できるのか • 開発が複雑にならないか？ ◦ 既存のコンポーネントを組み合わせて対応できるか 03. オーバーエンジニアリングを避ける エンジニアリング視点でのレビュー
23. • エンジニア：実装を効率化し、変更容易性の高い実装 • デザイナー：理想のユーザー体験を実現するデザイン 03. オーバーエンジニアリングを避ける この両者のバランスを保ちつつ、 最適な解決策を見つけることが重要 理想のデザインと実装のバランスを探る
24. デザインの意図を汲み取る 04
25. • デザインは単なるグラフィックの美しさではなく、問題解決のため の手段であり、プロダクトの1つ1つのデザインには必ず意図がある • この意図を理解することで、エンジニアリング視点での提案の幅が 広がる 04. デザインの意図を汲み取る デザインとは 課題解決や価値創造の手段
26. • デザインの意図やペルソナを理解することで 提案の幅が広がる • デザイナーさんとのコミュニケーションが深まる • デザインの一貫性を保ち、品質向上につながる 04. デザインの意図を汲み取る なぜデザインの意図を汲み取る必要があるのか
27. • なぜこのデザインになったのかをデザイナーに聞く • ペルソナやユーザーストーリーを共有してもらう • 普段から良いプロダクトに触れ、観察し、気づきを得る 04. デザインの意図を汲み取る デザインを深堀りするためのアプローチ
28. まとめ 05
29. 01 違和感には敏感に、ただとどめず共有する 05. まとめ 小さな違和感を放置せず チームで共有することで改善のきっかけを作る
30. 03 オーバーエンジニアリングを避ける 05. まとめ エンジニア視点でのレビューを早い段階で行う デザインの背景やペルソナを理解することで 提案の質と実装の価値が向上する
31. 02 提案することを恐れない 05. まとめ 提案は新しい視点や可能性を生む 視覚化や具体化を意識して提案を行う
32. 04 デザインの意図を汲み取る 05. まとめ デザインの背景やペルソナを理解することで より的確な提案や実装が可能になる
33. ありがとうございました！
34. プロダクト職種 積極採用中！ @stmn_eng