ペパボのデザインシステムと、モバイル領域における取り組み

 ペパボのデザインシステムと、モバイル領域における取り組み

2020.10.16 ペパボモバイルテックカンファレンスの発表資料です

0c8f21e528a49d714bd0e1629054bdf4?s=128

Yusuke Yagyu

October 16, 2020
Tweet

Transcript

  1. 1 ペパボのデザインシステ ムと、モバイル領域にお ける取り組み 2020.10.16 Yusuke Yagyu (gyugyu)

  2. 2 • 柳生 祐介 (gyugyu) • デザイン部 デザイン戦略チーム エンジニア •

    器用貧乏 • OSS Developer ◦ github.com/gyugyu 自己紹介 ペパボのデザインシステムと、モバイル領域における取り組み 2
  3. 3 ペパボのデザインに見られ る特徴と課題 Section 1 3

  4. 4 4 ペパボのサービス ペパボのデザインシステムと、モバイル領域における取り組み etc...

  5. 5 5 ペパボのミッション ペパボのデザインシステムと、モバイル領域における取り組み インターネットで可能性をつなげる、広げる pepabo.com/company/vision

  6. 6 6 ペパボのデザインの特徴 ペパボのデザインシステムと、モバイル領域における取り組み • マルチブランド • 人の可能性・善性を信じる

  7. 7 7 ペパボのデザインの課題 ペパボのデザインシステムと、モバイル領域における取り組み • ペパボそのもののブランドは弱い • レガシー ◦ 技術的レガシー

    ◦ メディア的レガシー
  8. 8 ペパボのデザインシステム Chapter 2 8

  9. 9 9 ペパボのデザインシステムのこれまで ペパボのデザインシステムと、モバイル領域における取り組み • 2019年前半まで ◦ 各サービスでのパターン化 • 2019年後半から

    ◦ 全体としてペパボのブランドの掘り下げ(追加) • 2020年前半から ◦ 各サービスの取り組みを取りまとめ(追加)
  10. 10 10 ボトムアップのデザインシステム ペパボのデザインシステムと、モバイル領域における取り組み • 各サービスでのパターン化 ◦ カラースキーム ◦ コンポーネントスタイルライブラリ

    (CSS, Sass, etc.) • サービスのブランド精緻化
  11. 11 11 トップダウンのデザインシステム ペパボのデザインシステムと、モバイル領域における取り組み • ペパボというブランドの掘り下げ ◦ 例:「もっとおもしろくできる」の「おもしろく」とは? • ブランド価値を信じることの実践

  12. 12 12 ブランドとデザインシステムの関係 ペパボのデザインシステムと、モバイル領域における取り組み デザインシステムのスコープは大きくなる ブランド パーソナリティ デザイン システム デザイン

    プリンシプル 各種 ガイドライン 各種アセット ブランド ビジョン
  13. 13 13 Inhouse Design System ペパボのデザインシステムと、モバイル領域における取り組み • 包括的 ◦ 各サービスを取りまとめる

    • 広いスコープ ◦ 例:文章
  14. 14 Inhouse Component Design Library Chapter 3 14

  15. 15 15 Inhouse Component Design Library ペパボのデザインシステムと、モバイル領域における取り組み • デザインシステムの実装 •

    各サービスでの利用を想定
  16. 16 16 既存のライブラリが持つ問題 ペパボのデザインシステムと、モバイル領域における取り組み • 各事業において必要なパターンの不足・過剰 • APIの強制 • コミュニケーションのガイドラインが不足

  17. 17 ペパボのデザインシステムと、モバイル領域における取り組み 17

  18. 18 18 要件 ペパボのデザインシステムと、モバイル領域における取り組み • 設定によるマルチサービス対応 • なめらかなAPI ◦ e.g.

    ユビキタス言語
  19. 19 19 Inhouse for Web ペパボのデザインシステムと、モバイル領域における取り組み • 最初に実装 (2020.6 社内リリース)

    • Dart Sass
  20. 20 20 依存性逆転パターンでの実装 ペパボのデザインシステムと、モバイル領域における取り組み • 各サービスのflavor(色・形・大きさ etc.)を抽象 化したインターフェースを定義 • 上位のAPIではインターフェースを利用する

    • 各サービスが実装を注入できるようにする
  21. 21 21 Adapterパターンでの実装 ペパボのデザインシステムと、モバイル領域における取り組み • 各サービスの言葉とライブラリのAPIを結びつけ る中間層を作る

  22. 22 22 パッケージ管理システムの世界に乗る ペパボのデザインシステムと、モバイル領域における取り組み • e.g. NPM, CocoaPods, Maven, Pub

    • 独自で仕組みを作らない • ディレクトリ構成も標準化する
  23. 23 モバイル領域での取り組み Chapter 4 23

  24. 24 24 カンファレンスアプリ ペパボのデザインシステムと、モバイル領域における取り組み

  25. 25 25 カンファレンスアプリ ペパボのデザインシステムと、モバイル領域における取り組み • Flutter • MaterialへのAdapter実装 ◦ 今回はMaterialColor/Colorsあたりをやった

    • インターフェース化とサービス側実装
  26. 26 26 Dart Packageとして配布 ペパボのデザインシステムと、モバイル領域における取り組み • flutter create --template=package <name>

    • github.com/gyugyu/semantic_palette
  27. 27 27 余った時間でコード解説

  28. 28 まとめ Chapter 5 28

  29. 29 29 ペパボのデザインシステム ペパボのデザインシステムと、モバイル領域における取り組み • マルチブランドの包括的なデザインシステムは 難しい ◦ OSS開発的な傾向がある

  30. 30 30 デザインとエンジニアリング ペパボのデザインシステムと、モバイル領域における取り組み • デザインにおいてもプログラミングのパターンを 生かすことができる ◦ 特にFlutter (SwiftUI,

    React etc.)の宣言的なUI記述が 一つのパラダイムとなって乗り入れがしやすくなった
  31. 31 • ペパボではモバイルエンジニアだけではなく、デ ザインエンジニアも募集しています ◦ やれることは無限にあります 31 ペパボのデザインシステムと、モバイル領域における取り組み デザインエンジニア募集中!