マルチブランドの実装としてのペパボのデザインシステム「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」
   

   View Slide

2. View Slide

3. GMOペパボのサービス
   

   View Slide

4. Q.
   
   A.
   どうしてマルチブランドなの？
   
   サービス・プロダクトごとにターゲットもマーケットも異なるので最適化してます
   

   View Slide

5. デザインシステムとは
   

   View Slide

6. 「デザインシステム」という言葉は、デザ
   インコミュニティ内に標準の定義があるわ
   けではなく、様々な用途で使用されていま
   す。「スタイルガイド」や「パターンライ
   ブラリ」と同じような意味で使われること
   もあります。本書でデザインシステムと言
   うときは、
   を指します。
   
   デジタルプロダクトの目的を果
   たすために一貫性を持って編成された、一
   連のつながったパターンと共通の実践方法
   日本語版「Design Systems」p.11 より
   
   著者: アラ・コルマトヴァ、監訳者: 佐藤伸哉
   デジタル庁のnote「デザインシステム勉強会を開催しまし
   た」https://digital-gov.note.jp/n/n78f6a2f82e48 より
   WEB+DB PRESS Vol.129, p.40
   
   特集「小さくはじめるデザインシステム」（谷拓樹）より
   デザインシステムとは「
   」です。
   あるべきデザイン
   を一貫性をもってユーザーに提供するため
   の仕組み
   デザインシステムの目的はその定義ととも
   に、
   。
   デザインシステムに取り組む企業や組
   織によって異なります
   デザインシステムの定義
   

   View Slide

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個のデザインシステムに含まれていた要素のまとめ
   

   View Slide

8. Atlassian Design System
   
   https://atlassian.design/
   コンポーネントだけでなく、コンポーネントを組み合わせ
   た頻出するパターンや、コンテンツの制作に関するガイド
   ラインまで幅広くカバーしていて参考になる。
   

   View Slide

9. Starbucks Creative Expression
   
   https://creative.starbucks.com/
   シーズンごとの配色の例や、トーンの分類にマッピングさ
   れたイラストの例から、「スタバらしさ」がビジュアルで
   共有されている。
   

   View Slide

10. GMOペパボがデザインシステムへ取り組む目的
    7 ユーザー体験の向(
    7 判断コストの削$
    7 ブランドへの信頼構築の効率化
    

    View Slide

11. ブランドとデザインシステム
    

    View Slide

12. ブランド
    
    資産形成
    ブランド
    
    資産活用
    投資
    リターン
    

    View Slide

13. 記号
    意味、約束
    累積、強化
    体験
    名称、ロゴ、VI 利用体験
    
    広告やクチコミの認知
    

    View Slide

14. UXタイムスパン
    利用前
    いつ 利用中 利用後 利用時間全体
    予期的UX
    なにを 一時的UX エピソード的UX 累積的UX
    体験を想像する
    どのように 体験する ある体験を
    
    内省する
    多種多様な利用期間を
    
    回想する
    UX白書の日本語訳 http://site.hcdvalue.org/docs より
    

    View Slide

15. ブランドとデザインシステムの関係
    r ブランドという記号を用意して紐づけることで

    体験の累積が可能になF
    r ブランドの形成と活用のサイクルをつくるためには

    記号の意味の一貫性が必
    r デザインシステムはブランドの実装
    

    View Slide

16. ペパボの共通基盤デザインシステム
    
    Inhouse
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

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
    

    View Slide

21. Flavorを差し替えるプロセス
    
    ブランドごとにカラーパレットを制作
    色相と彩度はブランドのトーンにあわせて決定するが、
    
    明度（10段階）は全社で揃える
    

    View Slide

22. minneのブランドを反映したカラーパレットができるまで
    
    https://note.com/sziaoreo/n/n6df3b2120354
    もっと詳しく
    

    View Slide

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
    

    View Slide

24. 実装の解説やデモは Figma Config 2022 のセッションで！
    
    https://www.youtube.com/watch?v=vWaePdvHEhE
    もっと詳しく
    

    View Slide

25. Flavorを差し替えるプロセス
    
    UIにブランドを反映する
    GMOペパボ コーポレートサイト SUZURI minne
    ブランドのキーカラーを基準に定めたそれぞれのカラーパ
    レットから、ブランドを表現した配色をUIに反映する
    

    View Slide

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を差し替
    えることで以下のデザイントークンをブランドにあわせて
    カスタマイズできるようになっている
    

    View Slide

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
    

    View Slide

28. もっとデザインしていくためのシステム
    Inhouseは、厳しい制約を設けるものでも、統制を目的とし
    たものでもありません。限られた時間で、よりクリエイティ
    ブな成果を生む土台としての、便利な制約を提供します。
    「デザインされたシステム」ではなく、「もっとデザインし
    ていくためのシステム」です。
    Inhouse: Principles
    
    https://design.pepabo.com/inhouse/about/
    

    View Slide

29. デザインシステム活用事例
    
    コーポレート
    コーポレートサイトや決算資料のスタイリングなど社外へ
    の発信だけでなく、ノベルティの制作や社内用の業務ツー
    ルのスタイリングなどインナーブランディングにも活用
    

    View Slide

30. デザインシステム活用事例
    
    SUZURI
    Inhouseが提供するライブラリを取り込んだうえで、
    SUZURIでのみ使用するコンポーネントを追加したサービ
    スのコンポーネントライブラリを開発
    Inhouse Nachiguro
    Web iOSアプリ
    SUZURIのデザインシステム
    

    View Slide

31. デザインシステム活用事例
    
    GMOレンシュ
    新規事業のローンチにあたり、既存のサービスで開発した
    コンポーネントをFlavorを差し替えて転用することで、
    Webフロントエンドの開発工数を短縮
    

    View Slide

32. マルチブランドを実装する
    
    デザインシステム
    

    View Slide

33. マルチブランドの弱点
    0 ブランドごとのリソースの割当が少な
    0 車輪の再発明が起こりがち
    

    View Slide

34. ブランドA
    アップデート アップデート
    ブランドB
    Inhouse
    

    View Slide

35. ブランドA
    バックポート アップデート
    ブランドB
    Inhouse
    

    View Slide

36. Inhouse
    

    View Slide

37. アセットの
    
    蓄積
    アセットの
    
    活用
    

    View Slide

38. ブランド
    
    資産形成
    ブランド
    
    資産活用
    投資
    リターン
    

    View Slide

39. 多様なマーケットとユーザーへ出会えるのは、
    
    マルチブランドだからこそ。
    
    ペパボが成長する鍵は、デザインシステムにあります。
    
    ぜひ、いっしょに取り組みましょう！
    

    View Slide