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

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

278e5835d64cc25f3ba6ae93de10ba24?s=47 tamai
July 27, 2022
Design
0
10k

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

278e5835d64cc25f3ba6ae93de10ba24?s=128

tamai

July 27, 2022
Tweet

Other Decks in Design

See All in Design
アンラーンし続けるデザインプロセス / DESIGNWAVEvol.04
76490a22db71352df65342bcd2d69af2?s=48 daitorii
2
340
The HIG & Software UI Design
A4c8177aa00623c9593f10be748b3861?s=48 usagimaru
3
1.4k
はじめまして、株式会社サインコサインです。（2022.07）
6581d0d2debbc8be5e4808cf46b4f104?s=48 kakukoki
PRO
4
4.1k
Детский парк Фили
E56b3a9f8228a4274e30ae739ecca06c?s=48 zapoimu
0
760
あじたま販売株式会社_最終プレゼンテーション
4f1699756ddbf3f2b6f5517c29747518?s=48 zhikto
0
130
Big Surからの四角いアイコン / Rounded Rectangle Icons since Big Sur
2174bd20a68bf55c494a424ad3790f4a?s=48 1024jp
3
600
Forget-me-not
B9f1579b53c0fd588aa685f98d97076d?s=48 kackington
1
230
Омские улицы — 2022
3ed98d0c9704e28a7da4d5d7ea9c320f?s=48 roudakov
0
230
Dear User, Let's Be Friends: Designing Friendly Interfaces - UX Lisbon 2022
Ce6b45b1634ac1b27b7b4c40f68a84db?s=48 scottkubie
1
300
ShippioのProduct Designerになりませんか？
3bb2326963c24027cdf173579290bd6d?s=48 shippio
0
1.3k
The Party! - Story Sequence
77b4173a70942a13969b84335c2e7695?s=48 diablicos_
0
150
サービス設計12箇条で紐解く「サービスデザイン思考」
40638b9e3a098313234f358d35103735?s=48 y150saya
0
620

Featured

See All Featured
Happy Clients
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
89
5.6k
A better future with KSS
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
226
16k
Designing Dashboards & Data Visualisations in Web Apps
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
223
49k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
173
8.6k
Become a Pro
828ace851b606e1206900f26459f55ad?s=48 speakerdeck
PRO
3
910
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
29
4.4k
How To Stay Up To Date on Web Technology
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
250k
We Have a Design System, Now What?
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
35
3k
How GitHub Uses GitHub to Build GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
465
280k
Done Done
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
Building Your Own Lightsaber
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
95
4.7k
The Mythical Team-Month
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
210
39k

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