Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

278e5835d64cc25f3ba6ae93de10ba24?s=47 tamai
July 27, 2022

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

278e5835d64cc25f3ba6ae93de10ba24?s=128

tamai

July 27, 2022
Tweet

Other Decks in Design

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