大規模サービスのUIデザインを管理する工夫

Transcript

1. 2022/07/27 Figma Japan Community Event 大規模サービスの UIデザインを 管理する工夫 2022 Figma Japan Community Event Figmaの活用策をシェアしよう！ 玉井 雄一郎
2. 2022/07/27 Figma Japan Community Event 玉井 雄一郎 i クックパッド株式会社 レシピサービス開発部 デザイナb i 2021年新卒入† i クックパッドアプリの体験設計・UIデザインに
 取り組んでいます5 i 自炊力向上に奮闘中。 自己紹介 @Tamaai2
3. 2022/07/27 Figma Japan Community Event 毎日の料理を楽しみにする」 ことを 目標に料理に関する課題を解決できる プロダクトを開発 3部署、合計9人のデザイナー体制 クックパッド 「 レシピサービス開発部 デザイナー 買物事業部 デザイナー ユーザーコミュニケーション部 デザイナー
4. 2022/07/27 Figma Japan Community Event 大規模サービスのUIデザインを 管理する工夫
5. 2022/07/27 Figma Japan Community Event 課題1 施策/デザイナーが複数関係していて トンマナ管理・仕様の把握が大変...。
6. 2022/07/27 Figma Japan Community Event 解決策 すべての情報が集まる場を作り、 代表者が管理する
7. 2022/07/27 Figma Japan Community Event 代表者が企画に関することを 1つのファイルに集約させる ƒ スケジュールや資料、issueのリンクなどすべて掲T ƒ 「ここを見ればいい」 という安心感 すべての情報が集まる場を作り、代表者が管理する バレンタインキャンペーンの場合 ※すべての施策で担当者がバラバラ 実際のバレンタインキャンペーン管理データ 関連リンク集 施策1 施策2 施策3 施策5 施策9 施策11 施策7 施策4 施策6 施策8 施策10 施策12
8. 2022/07/27 Figma Japan Community Event 仕様メモを横に残し、遷移先のリンクや 条件を書き残す v みんなで見るので仕様考慮漏れがなくなu v なぜこのデザインにしたのかのメモも残せu v エンジニア同士の会話コストも削減 工夫1 バレンタインキャンペーンの場合 リンクやメモのコンポーネント
9. 2022/07/27 Figma Japan Community Event 実装が画像になる部分はマスターコン ポーネントをUIデザインから切り分け ‘ UIデザインをAuto layoutで組んでおけば、
 後からのデザイン変更にも柔軟に対応できq ‘ エンジニアが任意のタイミングで画像を書き出して
 すぐ実装に着手できる 工夫2 バレンタインキャンペーンの場合 対応
10. 2022/07/27 Figma Japan Community Event 課題2 決済周りの仕様が複雑 & 関係者が多い...。
11. 2022/07/27 Figma Japan Community Event 解決策 UIをコンポーネント化し 画面遷移図のページを作成
12. 2022/07/27 Figma Japan Community Event 画面遷移図ページを用意し、 デザインマスターから画面データを参照 h 仕様とクリエイティブデザインを引き剥がし、
 それぞれ議論しつつシームレスに変更を反映 UIをコンポーネント化し画面遷移図のページを作成 とあるキャンペーンの場合
13. 2022/07/27 Figma Japan Community Event FigJamのコンポーネントを用いて 仕様把握をしやすく エンジニアとの認識すり合わせはもちろん、 POやサポートチームとのコミュニケーションにも役立つ 工夫 とあるキャンペーンの場合 FigJamの矢印と図形が便利 ！ ！
14. 2022/07/27 Figma Japan Community Event And more... コンポーネント化されたデザイン素材 社内プラグイン
15. 2022/07/27 Figma Japan Community Event Y 施策/デザイナーが複数入り組んでいてトンマナ管理・仕様把握が大変...B Y 決済周りの仕様が複雑 & 関係者が多い...B 9 Y 他デザイナーとの施策の把握がしづらく、バッティングが心配...B 9 9 すべての情報が集まる場を作り、代表者が管理す‡ UIをコンポーネント化し、画面遷移図のページを作‘ 施策やデザインを共有する「デザイン横断会」 をFigJamで実施 参考になれば幸いです ご質問等あればDMまで！ おわりに 資料を公開しました ！ 大規模サービスのUIデザインを管理する 工夫 たまい 2022/07/27 @Tamaai2