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