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
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.3k
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
110
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
390
The Spectacular Lies of Maps
axbom
PRO
1
260
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
130
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
240
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
1.7k
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
150
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
320
mento Design Team Portfolio
mento0fficial
1
630
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.1k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
800
Unsuck your backbone
ammeep
671
58k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
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