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

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

kenjow
November 28, 2022

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

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

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

kenjow

November 28, 2022
Tweet

Other Decks in Design

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 前時代的な印象 デザインがバラバラで開 発効率が悪い

  14. 15

  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 クックパッドらしさを踏襲した独自アイコン

  32. 33

  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 組織→メンバー→ユーザーへと届ける取り組み 我々から 全社メンバーへ 認知&浸透 担当メンバーが プロダクトに 反映していく プロダクトから ユーザーに正しく

    届けられる
  56. None