デザイナーとエンジニアで一緒にワイヤーフレームを作ったらとても良かった話

Transcript

1. 2024.12.13 Figma Winter Night 2024 Yuuri Isogai デザイナーとエンジニアで一緒に ワイヤーフレームを作ったらとても良かった話
2. 株式会社 Fusic デザイナー 礒谷 悠莉 Yuuri Isogai 2021年1月にFusicの社内1人目デザイナーとして入社。 BtoB/BtoC問わず 、Webシステムやモバイルアプリの UIデザインを主に担当。顧客と一緒にサービスフローの設 計を行ったり、UXデザインの領域でも奮闘中。 実装することも好きで、Figmaで設計したコンポーネントを ひたすらStorybookに構築することが趣味。
3. 本題に入る前に
4. Fusicでのシステム開発プロジェクト クライアントワーク 自社プロダクト
5. Fusicでのシステム開発プロジェクト クライアントワーク 自社プロダクト
6. 開発に関わるメンバーの構成イメージ 顧客 Fusic プロジェクトメンバー エンジニア デザイナー プロジェクトメンバー
7. ここから本題の話
8. プロジェクトの流れ こういうものを 作りたい
9. プロジェクトの流れ こういうものを 作りたい
10. プロジェクトの流れ こういうものを 作りたい ディスカッション 提案
11. プロジェクトの流れ こういうものを 作りたい ディスカッション 提案
12. プロジェクトの流れ こういうものを 作りたい ディスカッション デザイン 実装 提案
13. プロジェクトの流れ こういうものを 作りたい ディスカッション デザイン 実装 提案
14. プロジェクトの流れ こういうものを 作りたい デザイナー
15. プロジェクトの流れ こういうものを 作りたい デザイナー 顧客から受け取った要件を確認しながら ワイヤーフレーム（最初のたたき台）を作成する
16. プロジェクトの流れ こういうものを 作りたい デザイナー 顧客に具体的なイメージを持って検討してもらうため 顧客から受け取った要件を確認しながら ワイヤーフレーム（最初のたたき台）を作成する
17. プロジェクトの流れ こういうものを 作りたい デザイナー 顧客に具体的なイメージを持って検討してもらうため 要確認の項目・提案したい箇所をエンジニアに共有 顧客から受け取った要件を確認しながら ワイヤーフレーム（最初のたたき台）を作成する
18. プロジェクトの流れ こういうものを 作りたい エンジニア
19. プロジェクトの流れ こういうものを 作りたい エンジニア 顧客から受け取った要件を確認しながら 確認事項＋詳細を詰める必要がある要望をリストアップ
20. ある日 ワイヤーフレームと確認メモリストを見たエンジニア
21. ワイヤーフレームを見ると ここ確認しなきゃ！が分かりやすいな〜
22. （そういえば同じインプット作業を別々でやっているな…）
23. そうだ！一緒にワイヤーフレーム作ってみよう！
24. これから作ろうとしているもののイメージ
25. 一緒にやってみた お互いに要望リストを確認しながら画面に表示したい要素をFigmaで作成 この段階でユーザー目線を意識しながら画面内に要素を配置して行く
26. 一緒にやってみた お互いに要望リストを確認しながら画面に表示したい要素をFigmaで作成 この段階でユーザー目線を意識しながら画面内に要素を配置して行く お仕事マッチングサービスのユーザープロフィール画面 例）
27. 一緒にやってみた お互いに要望リストを確認しながら画面に表示したい要素をFigmaで作成 この段階でユーザー目線を意識しながら画面内に要素を配置して行く お仕事マッチングサービスのユーザープロフィール画面 要望リスト – ユーザー“ – 所在ˆ – 得意な業† – 実績 例）
28. 一緒にやってみた お互いに要望リストを確認しながら画面に表示したい要素をFigmaで作成 この段階でユーザー目線を意識しながら画面内に要素を配置して行く お仕事マッチングサービスのユーザープロフィール画面 要望リスト 項目＋サンプルデータをワイヤーに並べていく t ユーザーq t 所在l t 得意な業j t 実績 t ユーザー名: 佐藤太Ž t 所在地: 東京都新宿± t 得意な業務: ウェブデザイン、マーケティン” t 実績: 5年以上の経験、数々のプロジェクトを成功に導いた実績あり 例）
29. 一緒にやってみた お互いに要望リストを確認しながら画面に表示したい要素をFigmaで作成 この段階でユーザー目線を意識しながら画面内に要素を配置して行く お仕事マッチングサービスのユーザープロフィール画面 FigmaのAI機能に生成してもらった 要望リスト 項目＋サンプルデータをワイヤーに並べていく ‡ ユーザー„ ‡ 所在 ‡ 得意な業} ‡ 実績 ‡ ユーザー名: 佐藤太¡ ‡ 所在地: 東京都新宿Ä ‡ 得意な業務: ウェブデザイン、マーケティン§ ‡ 実績: 5年以上の経験、数々のプロジェクトを成功に導いた実績あり 例）
30. とても粗いざっくりワイヤーフレーム
31. 確認事項や提案アイデアのメモを残していく
32. ワイヤーフレーム（という名のたたき台）が完成
33. 一緒にやってみて良かったこと
34. 一緒にやってみて良かったこと I お互いに別々でやっていた要件のインプットと確認したい項目のすり合わせが同 時にできて効率が良かった
35. 一緒にやってみて良かったこと I お互いに別々でやっていた要件のインプットと確認したい項目のすり合わせが同 時にできて効率が良かった I 実装に時間がかかるから今回のスコープでは難しい、ということもリアルタイム で分かるので、ワイヤーを使ってから判明することを回避できる
36. 一緒にやってみて良かったこと I お互いに別々でやっていた要件のインプットと確認したい項目のすり合わせが同 時にできて効率が良かった I 実装に時間がかかるから今回のスコープでは難しい、ということもリアルタイム で分かるので、ワイヤーを使ってから判明することを回避できる I この要件だと、もっとこうした方がユーザーにとって良いのでは？それは実現可 能なのか？と思いついた提案アイデアについて、リアルタイムでエンジニアと ディスカッションできる
37. おまけ
38. 顧客とのディスカッション
40. 顧客とのディスカッション F エンジニアが機能要件についてお客さんと話している時に、デザイナーがリアル タイムでワイヤーを更新しながらイメージを形にして行く
41. 顧客とのディスカッション F エンジニアが機能要件についてお客さんと話している時に、デザイナーがリアル タイムでワイヤーを更新しながらイメージを形にして行く F デザイナーがUIについてお客さんに提案したり、お客さんとディスカッション してでてきた案などをデザイナーの手が追いつかない時にワイヤーを起こすのを 一緒にエンジニアがやってくれたりする
44. ディスカッションの内容がリアルタイムで可視化されながら話が進められるので、 より具体的なイメージで顧客に検討してもらえる 「あとで形にしてみたらイメージと違った」を回避できる
45. まとめ
46. まとめ & 最初のたたき台を一緒に作るのはとても良さそうに感じている
47. まとめ & 最初のたたき台を一緒に作るのはとても良さそうに感じている シンプルに効率的・最初からデザイナー・エンジニアの両視点で検討できる
48. まとめ & 最初のたたき台を一緒に作るのはとても良さそうに感じている シンプルに効率的・最初からデザイナー・エンジニアの両視点で検討できる & すべてのワイヤーを一緒に作るのか？は引き続き検討していきたい
49. まとめ & 最初のたたき台を一緒に作るのはとても良さそうに感じている シンプルに効率的・最初からデザイナー・エンジニアの両視点で検討できる & すべてのワイヤーを一緒に作るのか？は引き続き検討していきたい & たたき台をどの粒度まで一緒に作り込むとよいのか？も引き続き検討
50. 同時編集がスムーズにできる Figmaならではのアプローチ
51. We Are Hiring! https:/ /recruit.fusic.co.jp/ Thank You ご清聴いただきありがとうございました