Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
デザインシステムを使ってプロダクトのデザイン負債を解消する / TechConf2022
kenjow
November 28, 2022
Design
0
3.2k
デザインシステムを使ってプロダクトのデザイン負債を解消する / TechConf2022
TechConf2022の発表資料です。
https://techconf.cookpad.com/2022/
クックパッド株式会社
デザイン推進部 デザイン基盤グループ
村山 賢太 / 見上 香桜里
kenjow
November 28, 2022
Tweet
Share
Other Decks in Design
See All in Design
自分のYUMEMIに出会ってから、内定承諾までのストーリー
tact0001
0
740
UDM#2 水産現場のユーザーに寄り添う ウーオ流プロダクト開発
misaaa09
0
140
Tu fais du Web et tu ne connais pas les Layout Shifts ?! Nan mais...
goetter
2
200
Installing and Running decksh/pdfdeck
ajstarks
0
210
副業デザイナーズで作るデザイン組織 / Design Teams as a Side Job Designer
kgsi
0
640
デザイン本部デザイナーのお仕事
mixil
0
560
とあるデザインマネージャーのキャリアパスとキャリア観
ray110
0
1.2k
Cleaning Kimba's Eyes
kignato1
0
530
【Designship2022登壇資料】企業の経済活動をデザインし、日本のマーケティングにイノベーションを起こす
sevendex
1
260
noteが目指す創作をつづけるためのエモーショナルデザイン
yumatsushita
0
3.7k
The Consolations of Complexity
tsmorgan
1
270
Introduction to Design Tokens
fmerian
PRO
2
130
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
21
3.4k
Typedesign – Prime Four
hannesfritz
34
1.5k
Into the Great Unknown - MozCon
thekraken
2
300
Bash Introduction
62gerente
601
210k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
2
400
Pencils Down: Stop Designing & Start Developing
hursman
114
10k
Teambox: Starting and Learning
jrom
124
7.9k
It's Worth the Effort
3n
177
26k
Faster Mobile Websites
deanohume
295
29k
The Invisible Customer
myddelton
113
12k
Designing for Performance
lara
600
65k
Six Lessons from altMBA
skipperchong
15
2.3k
Transcript
デザインシステムを使って プロダクトのデザイン負債を解消する 村山 賢太 / 見上 香桜里 デザイン推進部 2
3 1. デザイン負債との対峙 2. デザインシステムについて 3. デザインシステムを適用した結果 4. まとめ お話しすること
4 プロダクトのデザイン負債を 解消したいけどどうしたら いいんだろう... デザインシステムって 作ったあとどうするの?
5 村山 賢太 デザイン推進部 デザイン基盤グループ UXエンジニア 見上 香桜里 デザイン推進部 デザイン基盤グループ
デザイナー 本日はよろしくおねがいします!
6 1. デザイン負債との対峙 2. デザインシステムについて 3. デザインシステムを適用した結果 4. まとめ お話しすること
7 2000年11月 2004年10月 初期のクックパッド (1998年〜)
8 クックパッド (2014年) 現在の形に近い状態へとリニューアル
9 クックパッド (2021年) 7年間大きな変化なし。積もるデザイン負債... 2014年 2021年
10 クックパッド (2022年リニューアル) 機能別に見直しフォントや色のルールを統一
11 Before After
12 レガシーな印象を与えるデザイン
13 レガシーな印象を与えるデザイン • フォントサイズがバラバラで視認性が悪い • 色数が多く、ルールが統一されていない • 検証後使われていない機能のCSSが残ってしまう
14 前時代的な印象 デザインがバラバラで開 発効率が悪い
15
16 課題① ガイドラインの役目だった CSSフレームワークがレガシー化
17 課題② 改善活動に大きなコストを割く ことが難しい
18 時は流れ・・・
19 2020年 iOSアプリの大型リニューアル
20 2020年 iOSアプリの大型リニューアル レシピサービス 開発チーム
21 2020年 iOSアプリの大型リニューアル レシピサービス 開発チーム デザイン 基盤グループ デザインシステム つくろう
22 1. デザイン負債との対峙 2. デザインシステムについて 3. デザインシステムを適用した結果 4. まとめ お話しすること
23 ガイドラインの定義 みんなが使うためのシステム化
24 ガイドラインの定義 みんなが使うためのシステム化
25 カラー・フォント・UIコンポーネントの整理
26 色・テキスト・グリッドのルール
27 UIコンポーネント別の制作ルール
28 コミュニケーション・伝え方のルール
29 デザインコンセプト・キーワードの言語化
30 「美味しい」を伝えるグラフィック・写真のルール
31 オリジナルのイラストレーションシステム
32 クックパッドらしさを踏襲した独自アイコン
33
34 ガイドラインの定義 みんなが使うためのシステム化
35 全員がスムーズに使えるための仕組み作り ドキュメントweb化 (全社員) コードライブラリ (エンジニア) Figma Component (デザイナー向け)
36 ドキュメントをweb化し、社内公開 ドキュメントの構築 Gatsby ビルドしたコードをホスティ ングして社内公開 Amazon S3
37 Apron Button Page
38 Cookpad独自のコードライブラリ CSSのライブラリ Reactのライブラリ
39 variables.css
40 button.css
41 コードライブラリ -データ出力- postCSSでUtilityファイルと Componentファイルをまとめて apron.cssの形で出力
42 コードライブラリ -サービスに反映- 出力ファイルをCodeArtfact上 にアップロードして、レシピサー ビスやMakersTownで利用す る Publish Install
43 Figma Component デザイナー用にFigmaデザインで簡 易に利用できるApronコンポーネント を提供 Web/iOS/Android版それぞれ用意さ れている
44 Component Library
45 プロパティで任意のスタイルに変更可能
46 1. デザイン負債との対峙 2. デザインシステムについて 3. デザインシステムを適用した結果 4. まとめ お話しすること
47 Webサイト デザインシステムを適用するためのプ ロジェクト進行中
48 Before After
49 Before After
50 Before After
51 Top LightHouse Score SearchResult RecipeDetail Before (2021/12) After (2022/03)
52 デザインの力ってすごいですね PCのレシピ画面がかわいくなっ て、画像が高画質になって嬉し い! 弊社サポートチーム 投稿ユーザー
53 アジリティ観点 今秋リリースされたヘルプページも事 業部デザイナーがデザイン推進部の ヘルプなしにApronベースでリニュー アル
54 1. デザイン負債との対峙 2. デザインシステムについて 3. デザインシステムを適用した結果 4. まとめ お話しすること
55 3つの要素を作り、デザイン負債と対峙する 横断組織 デザインガイドライン コンポーネント デザインシステムを導入したリニューアルの実施 サービスの品質向上 デザイン負債の解消に 集中できる環境を作る デザイン負債の再発を防
ぐ仕組みを作る デザインや実装に導入し やすいUI素材を作る
56 組織→メンバー→ユーザーへと届ける取り組み 我々から 全社メンバーへ 認知&浸透 担当メンバーが プロダクトに 反映していく プロダクトから ユーザーに正しく
届けられる
None