デザインシステムを使ってプロダクトのデザイン負債を解消する / TechConf2022

TechConf2022の発表資料です。
https://techconf.cookpad.com/2022/

クックパッド株式会社
デザイン推進部 デザイン基盤グループ
村山 賢太 / 見上 香桜里

Transcript

1. デザインシステムを使って プロダクトのデザイン負債を解消する 村山 賢太 / 見上 香桜里 デザイン推進部 2
2. 3 1. デザイン負債との対峙 2. デザインシステムについて 3. デザインシステムを適用した結果 4. まとめ お話しすること
3. 4 プロダクトのデザイン負債を 解消したいけどどうしたら いいんだろう... デザインシステムって 作ったあとどうするの？
4. 5 村山 賢太 デザイン推進部 デザイン基盤グループ UXエンジニア 見上 香桜里 デザイン推進部 デザイン基盤グループ デザイナー 本日はよろしくおねがいします！
5. 6 1. デザイン負債との対峙 2. デザインシステムについて 3. デザインシステムを適用した結果 4. まとめ お話しすること
6. 7 2000年11月 2004年10月 初期のクックパッド (1998年〜)
7. 8 クックパッド (2014年) 現在の形に近い状態へとリニューアル
8. 9 クックパッド (2021年) 7年間大きな変化なし。積もるデザイン負債... 2014年 2021年
9. 10 クックパッド (2022年リニューアル) 機能別に見直しフォントや色のルールを統一
10. 11 Before After
11. 12 レガシーな印象を与えるデザイン
12. 13 レガシーな印象を与えるデザイン • フォントサイズがバラバラで視認性が悪い • 色数が多く、ルールが統一されていない • 検証後使われていない機能のCSSが残ってしまう
13. 14 前時代的な印象 デザインがバラバラで開 発効率が悪い
15. 16 課題① ガイドラインの役目だった CSSフレームワークがレガシー化
16. 17 課題② 改善活動に大きなコストを割く ことが難しい
17. 18 時は流れ・・・
18. 19 2020年 iOSアプリの大型リニューアル
19. 20 2020年 iOSアプリの大型リニューアル レシピサービス 開発チーム
20. 21 2020年 iOSアプリの大型リニューアル レシピサービス 開発チーム デザイン 基盤グループ デザインシステム つくろう
21. 22 1. デザイン負債との対峙 2. デザインシステムについて 3. デザインシステムを適用した結果 4. まとめ お話しすること
22. 23 ガイドラインの定義 みんなが使うためのシステム化
23. 24 ガイドラインの定義 みんなが使うためのシステム化
24. 25 カラー・フォント・UIコンポーネントの整理
25. 26 色・テキスト・グリッドのルール
26. 27 UIコンポーネント別の制作ルール
27. 28 コミュニケーション・伝え方のルール
28. 29 デザインコンセプト・キーワードの言語化
29. 30 「美味しい」を伝えるグラフィック・写真のルール
30. 31 オリジナルのイラストレーションシステム
31. 32 クックパッドらしさを踏襲した独自アイコン
33. 34 ガイドラインの定義 みんなが使うためのシステム化
34. 35 全員がスムーズに使えるための仕組み作り ドキュメントweb化 (全社員) コードライブラリ (エンジニア) Figma Component (デザイナー向け)
35. 36 ドキュメントをweb化し、社内公開 ドキュメントの構築 Gatsby ビルドしたコードをホスティ ングして社内公開 Amazon S3
36. 37 Apron Button Page
37. 38 Cookpad独自のコードライブラリ CSSのライブラリ Reactのライブラリ
38. 39 variables.css
39. 40 button.css
40. 41 コードライブラリ -データ出力- postCSSでUtilityファイルと Componentファイルをまとめて apron.cssの形で出力
41. 42 コードライブラリ -サービスに反映- 出力ファイルをCodeArtfact上 にアップロードして、レシピサー ビスやMakersTownで利用す る Publish Install
42. 43 Figma Component デザイナー用にFigmaデザインで簡 易に利用できるApronコンポーネント を提供 Web/iOS/Android版それぞれ用意さ れている
43. 44 Component Library
44. 45 プロパティで任意のスタイルに変更可能
45. 46 1. デザイン負債との対峙 2. デザインシステムについて 3. デザインシステムを適用した結果 4. まとめ お話しすること
46. 47 Webサイト デザインシステムを適用するためのプ ロジェクト進行中
47. 48 Before After
48. 49 Before After
49. 50 Before After
50. 51 Top LightHouse Score SearchResult RecipeDetail Before (2021/12) After (2022/03)
51. 52 デザインの力ってすごいですね PCのレシピ画面がかわいくなっ て、画像が高画質になって嬉し い！ 弊社サポートチーム 投稿ユーザー
52. 53 アジリティ観点 今秋リリースされたヘルプページも事 業部デザイナーがデザイン推進部の ヘルプなしにApronベースでリニュー アル
53. 54 1. デザイン負債との対峙 2. デザインシステムについて 3. デザインシステムを適用した結果 4. まとめ お話しすること
54. 55 3つの要素を作り、デザイン負債と対峙する 横断組織 デザインガイドライン コンポーネント デザインシステムを導入したリニューアルの実施 サービスの品質向上 デザイン負債の解消に 集中できる環境を作る デザイン負債の再発を防 ぐ仕組みを作る デザインや実装に導入し やすいUI素材を作る
55. 56 組織→メンバー→ユーザーへと届ける取り組み 我々から 全社メンバーへ 認知&浸透 担当メンバーが プロダクトに 反映していく プロダクトから ユーザーに正しく 届けられる