Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
大規模サービスのUIデザインを管理する工夫
Search
tamai
July 27, 2022
Design
2
14k
大規模サービスのUIデザインを管理する工夫
tamai
July 27, 2022
Tweet
Share
Other Decks in Design
See All in Design
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
3
2.9k
最速[要出典]アクセシビリティチェック
magi1125
2
200
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
140
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
200
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.3k
太田博三(@usagisan2020)
otanet
0
220
横断組織デザイナーの働き方
mixi_design
PRO
0
330
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
180
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
110
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
260
Tableau曲線表現講座(2024.11.21)
cielo1985
0
250
Personal Story Sequence - Vendetta(WIP)
elrns88
0
400
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
98
5.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Side Projects
sachag
452
42k
BBQ
matthewcrist
86
9.5k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Thoughts on Productivity
jonyablonski
69
4.5k
Scaling GitHub
holman
459
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
A better future with KSS
kneath
238
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
2022/07/27 Figma Japan Community Event 大規模サービスの UIデザインを 管理する工夫 2022 Figma
Japan Community Event Figmaの活用策をシェアしよう! 玉井 雄一郎
2022/07/27 Figma Japan Community Event 玉井 雄一郎 i クックパッド株式会社 レシピサービス開発部
デザイナb i 2021年新卒入 i クックパッドアプリの体験設計・UIデザインに 取り組んでいます5 i 自炊力向上に奮闘中。 自己紹介 @Tamaai2
2022/07/27 Figma Japan Community Event 毎日の料理を楽しみにする」 ことを 目標に料理に関する課題を解決できる プロダクトを開発 3部署、合計9人のデザイナー体制
クックパッド 「 レシピサービス開発部 デザイナー 買物事業部 デザイナー ユーザーコミュニケーション部 デザイナー
2022/07/27 Figma Japan Community Event 大規模サービスのUIデザインを 管理する工夫
2022/07/27 Figma Japan Community Event 課題1 施策/デザイナーが複数関係していて トンマナ管理・仕様の把握が大変...。
2022/07/27 Figma Japan Community Event 解決策 すべての情報が集まる場を作り、 代表者が管理する
2022/07/27 Figma Japan Community Event 代表者が企画に関することを 1つのファイルに集約させる スケジュールや資料、issueのリンクなどすべて掲T
「ここを見ればいい」 という安心感 すべての情報が集まる場を作り、代表者が管理する バレンタインキャンペーンの場合 ※すべての施策で担当者がバラバラ 実際のバレンタインキャンペーン管理データ 関連リンク集 施策1 施策2 施策3 施策5 施策9 施策11 施策7 施策4 施策6 施策8 施策10 施策12
2022/07/27 Figma Japan Community Event 仕様メモを横に残し、遷移先のリンクや 条件を書き残す v みんなで見るので仕様考慮漏れがなくなu v
なぜこのデザインにしたのかのメモも残せu v エンジニア同士の会話コストも削減 工夫1 バレンタインキャンペーンの場合 リンクやメモのコンポーネント
2022/07/27 Figma Japan Community Event 実装が画像になる部分はマスターコン ポーネントをUIデザインから切り分け UIデザインをAuto layoutで組んでおけば、
後からのデザイン変更にも柔軟に対応できq エンジニアが任意のタイミングで画像を書き出して すぐ実装に着手できる 工夫2 バレンタインキャンペーンの場合 対応
2022/07/27 Figma Japan Community Event 課題2 決済周りの仕様が複雑 & 関係者が多い...。
2022/07/27 Figma Japan Community Event 解決策 UIをコンポーネント化し 画面遷移図のページを作成
2022/07/27 Figma Japan Community Event 画面遷移図ページを用意し、 デザインマスターから画面データを参照 h 仕様とクリエイティブデザインを引き剥がし、 それぞれ議論しつつシームレスに変更を反映
UIをコンポーネント化し画面遷移図のページを作成 とあるキャンペーンの場合
2022/07/27 Figma Japan Community Event FigJamのコンポーネントを用いて 仕様把握をしやすく エンジニアとの認識すり合わせはもちろん、 POやサポートチームとのコミュニケーションにも役立つ 工夫
とあるキャンペーンの場合 FigJamの矢印と図形が便利 ! !
2022/07/27 Figma Japan Community Event And more... コンポーネント化されたデザイン素材 社内プラグイン
2022/07/27 Figma Japan Community Event Y 施策/デザイナーが複数入り組んでいてトンマナ管理・仕様把握が大変...B Y 決済周りの仕様が複雑 &
関係者が多い...B 9 Y 他デザイナーとの施策の把握がしづらく、バッティングが心配...B 9 9 すべての情報が集まる場を作り、代表者が管理す UIをコンポーネント化し、画面遷移図のページを作 施策やデザインを共有する「デザイン横断会」 をFigJamで実施 参考になれば幸いです ご質問等あればDMまで! おわりに 資料を公開しました ! 大規模サービスのUIデザインを管理する 工夫 たまい 2022/07/27 @Tamaai2