マルチブランドの実装としてのペパボのデザインシステム「Inhouse」

SUZURI、minne、ロリポップ！レンタルサーバーなど、GMOペパボは多くのブランドを抱えた老舗の事業会社です。そんなペパボが開発・活用している、マルチブランドで利用できる共通基盤デザインシステム「Inhouse」を通して、デザインシステムがブランドの確立へどのように役立つのか、それを実現する実装について、詳しくご紹介します。

この資料はイベント《【セブンデックス｜GMOペパボ】ブランドを確立するための視覚戦略とデザインシステム》で発表したものです。
https://pepabo.connpass.com/event/254708/

# 資料のなかで紹介したURL
デジタル庁のnote「デザインシステム勉強会を開催しまし た」
https://digital-gov.note.jp/n/n78f6a2f82e48
Design Systems Sprint 0: The Silver Bullet of Product Development.
https://link.medium.com/NAgQwjAR4rb
Atlassian Design System
https://atlassian.design/
Starbucks Creative Expression
https://creative.starbucks.com/
UX白書の日本語訳
http://site.hcdvalue.org/docs
minneのブランドを反映したカラーパレットができるまで
https://note.com/sziaoreo/n/n6df3b2120354
実装の解説やデモは Figma Config 2022 のセッションで！
https://www.youtube.com/watch?v=vWaePdvHEhE
Inhouse: Principles
https://design.pepabo.com/inhouse/about/

Transcript

1. マルチブランドの実装としての ペパボのデザインシステム「Inhouse」
3. GMOペパボのサービス
4. Q. A. どうしてマルチブランドなの？ サービス・プロダクトごとにターゲットもマーケットも異なるので最適化してます
5. デザインシステムとは
6. 「デザインシステム」という言葉は、デザ インコミュニティ内に標準の定義があるわ けではなく、様々な用途で使用されていま す。「スタイルガイド」や「パターンライ ブラリ」と同じような意味で使われること もあります。本書でデザインシステムと言 うときは、 を指します。 デジタルプロダクトの目的を果 たすために一貫性を持って編成された、一 連のつながったパターンと共通の実践方法 日本語版「Design Systems」p.11 より 著者: アラ・コルマトヴァ、監訳者: 佐藤伸哉 デジタル庁のnote「デザインシステム勉強会を開催しまし た」https://digital-gov.note.jp/n/n78f6a2f82e48 より WEB+DB PRESS Vol.129, p.40 特集「小さくはじめるデザインシステム」（谷拓樹）より デザインシステムとは「 」です。 あるべきデザイン を一貫性をもってユーザーに提供するため の仕組み デザインシステムの目的はその定義ととも に、 。 デザインシステムに取り組む企業や組 織によって異なります デザインシステムの定義
7. Building Blocks 6 Color Palette' 6 Typographic Scale' 6 Grid Definition' 6 Icons & Assets Rules 6 Design Principle' 6 Implementation 
 Guideline' 6 Editional Guidelines UI Patterns 6 Template' 6 Module' 6 Component' 6 Elements Design Systems Sprint 0: The Silver Bullet of Product Development. https://link.medium.com/NAgQwjAR4rb 「Structure of a Design System」の図より デザインシステムを構成する要素の傾向 2017年に分析された39個のデザインシステムに含まれていた要素のまとめ
8. Atlassian Design System https://atlassian.design/ コンポーネントだけでなく、コンポーネントを組み合わせ た頻出するパターンや、コンテンツの制作に関するガイド ラインまで幅広くカバーしていて参考になる。
9. Starbucks Creative Expression https://creative.starbucks.com/ シーズンごとの配色の例や、トーンの分類にマッピングさ れたイラストの例から、「スタバらしさ」がビジュアルで 共有されている。
10. GMOペパボがデザインシステムへ取り組む目的 7 ユーザー体験の向( 7 判断コストの削$ 7 ブランドへの信頼構築の効率化
11. ブランドとデザインシステム
12. ブランド 資産形成 ブランド 資産活用 投資 リターン
13. 記号 意味、約束 累積、強化 体験 名称、ロゴ、VI 利用体験 広告やクチコミの認知
14. UXタイムスパン 利用前 いつ 利用中 利用後 利用時間全体 予期的UX なにを 一時的UX エピソード的UX 累積的UX 体験を想像する どのように 体験する ある体験を 内省する 多種多様な利用期間を 回想する UX白書の日本語訳 http://site.hcdvalue.org/docs より
15. ブランドとデザインシステムの関係 r ブランドという記号を用意して紐づけることで
 体験の累積が可能になF r ブランドの形成と活用のサイクルをつくるためには
 記号の意味の一貫性が必 r デザインシステムはブランドの実装
16. ペパボの共通基盤デザインシステム Inhouse
20. Flavorを差し替えるプロセス 汎用的に使えるカラーパレットを制作 ブランドのキーカラーを手がかりに、色相を等間隔でずら して調和のとれたカラーパレットを制作 H: 208 600 ペパボブルー #1f7acc 30° H: 158 H: 48 H: 23 H: 358 = = 600 500 400 300 200 100 Blue H: 208 50 700 800 900 600 500 400 300 200 100 Red H: 358 50 700 800 900 600 500 400 300 200 100 Gray 50 700 800 900
21. Flavorを差し替えるプロセス ブランドごとにカラーパレットを制作 色相と彩度はブランドのトーンにあわせて決定するが、 明度（10段階）は全社で揃える
22. minneのブランドを反映したカラーパレットができるまで https://note.com/sziaoreo/n/n6df3b2120354 もっと詳しく
23. Flavorを差し替えるプロセス デザイントークンをコードで一元管理 カラーパレットの値はYAMLで管理し、Style Dictionaryを 利用して、Web・モバイルアプリ・デザインツールの各プ ラットフォームで最適な形式へ変換して共有 color: val: blue: 50: value: r: g: b: a: attributes: category: type: 100: value: r: g: b: a: attributes: category: type: 200: 245 250 255 1 color val 229 243 255 1 color val Figma & Figma Tokens + Sass SwiftUI Jetpack Compose Flutter Style Dictionary YAML
24. 実装の解説やデモは Figma Config 2022 のセッションで！ https://www.youtube.com/watch?v=vWaePdvHEhE もっと詳しく
25. Flavorを差し替えるプロセス UIにブランドを反映する GMOペパボ コーポレートサイト SUZURI minne ブランドのキーカラーを基準に定めたそれぞれのカラーパ レットから、ブランドを表現した配色をUIに反映する
26. Flavorに含まれるデザイントークン Color Opacity Size Typography R backgrounW R bordeb R buttoX R overlaI R semantiU R shadoC R texf R textfielW R option R backgrounW R shadow R bordeb R boundarI R contenf R fonf R ga‘ R heighf R line-heighf R radiuˆ R scaln R shadoC R spacin• R width R font-family Inhouseのコンポーネントライブラリは、Flavorを差し替 えることで以下のデザイントークンをブランドにあわせて カスタマイズできるようになっている
27. Figmaでデザインするときに選んだオプションの値を、 Sass mixinの引数として渡すことで実装が利用できる コンポーネントライブラリ @use as @include ; .button { .button-style( ( interactive, flat, text, light, none, square, l, enabled, none ) ); } '@inhouse/inhouse-components-web' inhouse inhouse $options: color: appearance: body: brightness: leading: shape: size: state: trailing: Sass
28. もっとデザインしていくためのシステム Inhouseは、厳しい制約を設けるものでも、統制を目的とし たものでもありません。限られた時間で、よりクリエイティ ブな成果を生む土台としての、便利な制約を提供します。 「デザインされたシステム」ではなく、「もっとデザインし ていくためのシステム」です。 Inhouse: Principles https://design.pepabo.com/inhouse/about/
29. デザインシステム活用事例 コーポレート コーポレートサイトや決算資料のスタイリングなど社外へ の発信だけでなく、ノベルティの制作や社内用の業務ツー ルのスタイリングなどインナーブランディングにも活用
30. デザインシステム活用事例 SUZURI Inhouseが提供するライブラリを取り込んだうえで、 SUZURIでのみ使用するコンポーネントを追加したサービ スのコンポーネントライブラリを開発 Inhouse Nachiguro Web iOSアプリ SUZURIのデザインシステム
31. デザインシステム活用事例 GMOレンシュ 新規事業のローンチにあたり、既存のサービスで開発した コンポーネントをFlavorを差し替えて転用することで、 Webフロントエンドの開発工数を短縮
32. マルチブランドを実装する デザインシステム
33. マルチブランドの弱点 0 ブランドごとのリソースの割当が少な 0 車輪の再発明が起こりがち
34. ブランドA アップデート アップデート ブランドB Inhouse
35. ブランドA バックポート アップデート ブランドB Inhouse
36. Inhouse
37. アセットの 蓄積 アセットの 活用
38. ブランド 資産形成 ブランド 資産活用 投資 リターン
39. 多様なマーケットとユーザーへ出会えるのは、 マルチブランドだからこそ。 ペパボが成長する鍵は、デザインシステムにあります。 ぜひ、いっしょに取り組みましょう！