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
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
210
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.3k
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
120
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3k
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.6k
今日から意識できるアクセシビリティ
fumiko
0
280
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
900
sachi_y_portfolio
sachi337
0
410
portfolio_YumiYasuda
yum0418
0
300
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
300
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
270
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Music & Morning Musume
bryan
46
6.7k
Speed Design
sergeychernyshev
32
1k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Building Applications with DynamoDB
mza
95
6.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
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