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

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

shikakun
August 03, 2022

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

shikakun

August 03, 2022
Tweet

More Decks by shikakun

Other Decks in Design

Transcript

  1. 「デザインシステム」という言葉は、デザ インコミュニティ内に標準の定義があるわ けではなく、様々な用途で使用されていま す。「スタイルガイド」や「パターンライ ブラリ」と同じような意味で使われること もあります。本書でデザインシステムと言 うときは、 を指します。 デジタルプロダクトの目的を果 たすために一貫性を持って編成された、一

    連のつながったパターンと共通の実践方法 日本語版「Design Systems」p.11 より 著者: アラ・コルマトヴァ、監訳者: 佐藤伸哉 デジタル庁のnote「デザインシステム勉強会を開催しまし た」https://digital-gov.note.jp/n/n78f6a2f82e48 より WEB+DB PRESS Vol.129, p.40 特集「小さくはじめるデザインシステム」(谷拓樹)より デザインシステムとは「 」です。 あるべきデザイン を一貫性をもってユーザーに提供するため の仕組み デザインシステムの目的はその定義ととも に、 。 デザインシステムに取り組む企業や組 織によって異なります デザインシステムの定義
  2. 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個のデザインシステムに含まれていた要素のまとめ
  3. UXタイムスパン 利用前 いつ 利用中 利用後 利用時間全体 予期的UX なにを 一時的UX エピソード的UX

    累積的UX 体験を想像する どのように 体験する ある体験を 内省する 多種多様な利用期間を 回想する UX白書の日本語訳 http://site.hcdvalue.org/docs より
  4. 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
  5. 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
  6. 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を差し替 えることで以下のデザイントークンをブランドにあわせて カスタマイズできるようになっている
  7. 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