Upgrade to Pro — share decks privately, control downloads, hide ads and more …

大規模サービスのUIデザインを管理する工夫

tamai
July 27, 2022
Design
2
12k

 大規模サービスのUIデザインを管理する工夫

tamai

July 27, 2022
Tweet

Other Decks in Design

See All in Design
リサーチの前に詩を描く
hiranotomoki
0
570
メタバース プレゼン講座1. マインドセット編
yusuke_akita
0
150
Ameba Illustration Systemの開発フローとプロダクト浸透
toshiharutakemoto
0
270
本質を理解してデザインに取り組む / Hatena Engineer Seminar #23 aoym_05
hatena
0
410
TIPSTARでのデザイナーの働き方について
mixil
0
520
Presentation_JM22.pdf
amritdevta
0
110
UDM#2 水産現場のユーザーに寄り添う ウーオ流プロダクト開発
misaaa09
0
150
fetch
sarahvanderark
1
150
モデルとダイアグラムの活用の本質
akiramotomura
0
420
to B SaaS のコミュニケーションデザインが目指すもの - SmartHR Communication Design Group
bebe
1
1.5k
UIを完全に理解して、 プロダクトをチョット良くする
tojimasan
1
290
デザイン本部デザイナーのお仕事
mixil
0
570

Featured

See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
Testing 201, or: Great Expectations
jmmastey
25
5.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
182
15k
5 minutes of I Can Smell Your CMS
philhawksworth
198
18k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
31
20k
Intergalactic Javascript Robots from Outer Space
tanoku
261
26k
Clear Off the Table
cherdarchuk
79
290k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
214
12k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.5k
Pencils Down: Stop Designing & Start Developing
hursman
114
10k
Large-scale JavaScript Application Architecture
addyosmani
499
110k

Transcript

  1. 2022/07/27 Figma Japan Community Event 大規模サービスの UIデザインを 管理する工夫 2022 Figma

    Japan Community Event Figmaの活用策をシェアしよう！ 玉井 雄一郎

  2. 2022/07/27 Figma Japan Community Event 玉井 雄一郎 i クックパッド株式会社 レシピサービス開発部

    デザイナb i 2021年新卒入† i クックパッドアプリの体験設計・UIデザインに
 取り組んでいます5 i 自炊力向上に奮闘中。 自己紹介 @Tamaai2

  3. 2022/07/27 Figma Japan Community Event 毎日の料理を楽しみにする」 ことを 目標に料理に関する課題を解決できる プロダクトを開発 3部署、合計9人のデザイナー体制

    クックパッド 「 レシピサービス開発部 デザイナー 買物事業部 デザイナー ユーザーコミュニケーション部 デザイナー

  4. 2022/07/27 Figma Japan Community Event 大規模サービスのUIデザインを 管理する工夫

  5. 2022/07/27 Figma Japan Community Event 課題1 施策/デザイナーが複数関係していて トンマナ管理・仕様の把握が大変...。

  6. 2022/07/27 Figma Japan Community Event 解決策 すべての情報が集まる場を作り、 代表者が管理する

  7. 2022/07/27 Figma Japan Community Event 代表者が企画に関することを 1つのファイルに集約させる ƒ スケジュールや資料、issueのリンクなどすべて掲T ƒ

    「ここを見ればいい」 という安心感 すべての情報が集まる場を作り、代表者が管理する バレンタインキャンペーンの場合 ※すべての施策で担当者がバラバラ 実際のバレンタインキャンペーン管理データ 関連リンク集 施策1 施策2 施策3 施策5 施策9 施策11 施策7 施策4 施策6 施策8 施策10 施策12

  8. 2022/07/27 Figma Japan Community Event 仕様メモを横に残し、遷移先のリンクや 条件を書き残す v みんなで見るので仕様考慮漏れがなくなu v

    なぜこのデザインにしたのかのメモも残せu v エンジニア同士の会話コストも削減 工夫1 バレンタインキャンペーンの場合 リンクやメモのコンポーネント

  9. 2022/07/27 Figma Japan Community Event 実装が画像になる部分はマスターコン ポーネントをUIデザインから切り分け ‘ UIデザインをAuto layoutで組んでおけば、


    後からのデザイン変更にも柔軟に対応できq ‘ エンジニアが任意のタイミングで画像を書き出して
 すぐ実装に着手できる 工夫2 バレンタインキャンペーンの場合 対応

  10. 2022/07/27 Figma Japan Community Event 課題2 決済周りの仕様が複雑 & 関係者が多い...。

  11. 2022/07/27 Figma Japan Community Event 解決策 UIをコンポーネント化し 画面遷移図のページを作成

  12. 2022/07/27 Figma Japan Community Event 画面遷移図ページを用意し、 デザインマスターから画面データを参照 h 仕様とクリエイティブデザインを引き剥がし、
 それぞれ議論しつつシームレスに変更を反映

    UIをコンポーネント化し画面遷移図のページを作成 とあるキャンペーンの場合

  13. 2022/07/27 Figma Japan Community Event FigJamのコンポーネントを用いて 仕様把握をしやすく エンジニアとの認識すり合わせはもちろん、 POやサポートチームとのコミュニケーションにも役立つ 工夫

    とあるキャンペーンの場合 FigJamの矢印と図形が便利 ！ ！

  14. 2022/07/27 Figma Japan Community Event And more... コンポーネント化されたデザイン素材 社内プラグイン

  15. 2022/07/27 Figma Japan Community Event Y 施策/デザイナーが複数入り組んでいてトンマナ管理・仕様把握が大変...B Y 決済周りの仕様が複雑 &

    関係者が多い...B 9 Y 他デザイナーとの施策の把握がしづらく、バッティングが心配...B 9 9 すべての情報が集まる場を作り、代表者が管理す‡ UIをコンポーネント化し、画面遷移図のページを作‘ 施策やデザインを共有する「デザイン横断会」 をFigJamで実施 参考になれば幸いです ご質問等あればDMまで！ おわりに 資料を公開しました ！ 大規模サービスのUIデザインを管理する 工夫 たまい 2022/07/27 @Tamaai2