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
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
120
Social Anxiety
ksmith2024
0
110
How to go from research data to insights?
mastervicedesign
0
230
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
230
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
530
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
290
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
390
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
580
250131_product meetup
motokoishida
0
120
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
140
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
220
クライアントワークにおける UXリサーチの実践
kozotaira
0
360
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
Designing for Performance
lara
604
68k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Practical Orchestrator
shlominoach
186
10k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Making Projects Easy
brettharned
116
6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Typedesign – Prime Four
hannesfritz
40
2.5k
How to Ace a Technical Interview
jacobian
276
23k
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