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
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
LLMによるRAG評価用合成テストデータの生成
licux
6
720
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
730
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
300
Tableau曲線表現講座(2024.11.21)
cielo1985
0
270
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
200
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
290
Rayout Pattern 01
one0
0
1.5k
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
400
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
69k
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.1k
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.3k
Featured
See All Featured
Docker and Python
trallard
44
3.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The Pragmatic Product Professional
lauravandoore
32
6.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Building an army of robots
kneath
303
45k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Fireside Chat
paigeccino
35
3.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
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