Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ペパボのデザインシステムと、モバイル領域における取り組み
Search
Yusuke Yagyu
October 16, 2020
Programming
0
1.1k
ペパボのデザインシステムと、モバイル領域における取り組み
2020.10.16 ペパボモバイルテックカンファレンスの発表資料です
Yusuke Yagyu
October 16, 2020
Tweet
Share
More Decks by Yusuke Yagyu
See All by Yusuke Yagyu
Dart Sass であれを作った
gyugyu
0
77
Android CI: 2016 edition
gyugyu
3
2.3k
少し変わった論理削除
gyugyu
3
17k
Other Decks in Programming
See All in Programming
開発者とQAの越境で自動テストが増える開発プロセスを実現する
92thunder
1
220
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
210
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
820
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
500
オニオンアーキテクチャを使って、 Unityと.NETでコードを共有する
soi013
0
350
快速入門可觀測性
blueswen
0
480
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
140
サーバーゆる勉強会 DBMS の仕組み編
kj455
1
200
iOS開発におけるCopilot For XcodeとCode Completion / copilot for xcode
fuyan777
1
1.2k
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
240
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう?知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.7k
KubeCon NA 2024の全DB関連セッションを紹介
nnaka2992
0
110
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
Code Review Best Practice
trishagee
65
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Practical Orchestrator
shlominoach
186
10k
The Pragmatic Product Professional
lauravandoore
32
6.4k
It's Worth the Effort
3n
183
28k
For a Future-Friendly Web
brad_frost
176
9.5k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Transcript
1 ペパボのデザインシステ ムと、モバイル領域にお ける取り組み 2020.10.16 Yusuke Yagyu (gyugyu)
2 • 柳生 祐介 (gyugyu) • デザイン部 デザイン戦略チーム エンジニア •
器用貧乏 • OSS Developer ◦ github.com/gyugyu 自己紹介 ペパボのデザインシステムと、モバイル領域における取り組み 2
3 ペパボのデザインに見られ る特徴と課題 Section 1 3
4 4 ペパボのサービス ペパボのデザインシステムと、モバイル領域における取り組み etc...
5 5 ペパボのミッション ペパボのデザインシステムと、モバイル領域における取り組み インターネットで可能性をつなげる、広げる pepabo.com/company/vision
6 6 ペパボのデザインの特徴 ペパボのデザインシステムと、モバイル領域における取り組み • マルチブランド • 人の可能性・善性を信じる
7 7 ペパボのデザインの課題 ペパボのデザインシステムと、モバイル領域における取り組み • ペパボそのもののブランドは弱い • レガシー ◦ 技術的レガシー
◦ メディア的レガシー
8 ペパボのデザインシステム Chapter 2 8
9 9 ペパボのデザインシステムのこれまで ペパボのデザインシステムと、モバイル領域における取り組み • 2019年前半まで ◦ 各サービスでのパターン化 • 2019年後半から
◦ 全体としてペパボのブランドの掘り下げ(追加) • 2020年前半から ◦ 各サービスの取り組みを取りまとめ(追加)
10 10 ボトムアップのデザインシステム ペパボのデザインシステムと、モバイル領域における取り組み • 各サービスでのパターン化 ◦ カラースキーム ◦ コンポーネントスタイルライブラリ
(CSS, Sass, etc.) • サービスのブランド精緻化
11 11 トップダウンのデザインシステム ペパボのデザインシステムと、モバイル領域における取り組み • ペパボというブランドの掘り下げ ◦ 例:「もっとおもしろくできる」の「おもしろく」とは? • ブランド価値を信じることの実践
12 12 ブランドとデザインシステムの関係 ペパボのデザインシステムと、モバイル領域における取り組み デザインシステムのスコープは大きくなる ブランド パーソナリティ デザイン システム デザイン
プリンシプル 各種 ガイドライン 各種アセット ブランド ビジョン
13 13 Inhouse Design System ペパボのデザインシステムと、モバイル領域における取り組み • 包括的 ◦ 各サービスを取りまとめる
• 広いスコープ ◦ 例:文章
14 Inhouse Component Design Library Chapter 3 14
15 15 Inhouse Component Design Library ペパボのデザインシステムと、モバイル領域における取り組み • デザインシステムの実装 •
各サービスでの利用を想定
16 16 既存のライブラリが持つ問題 ペパボのデザインシステムと、モバイル領域における取り組み • 各事業において必要なパターンの不足・過剰 • APIの強制 • コミュニケーションのガイドラインが不足
17 ペパボのデザインシステムと、モバイル領域における取り組み 17
18 18 要件 ペパボのデザインシステムと、モバイル領域における取り組み • 設定によるマルチサービス対応 • なめらかなAPI ◦ e.g.
ユビキタス言語
19 19 Inhouse for Web ペパボのデザインシステムと、モバイル領域における取り組み • 最初に実装 (2020.6 社内リリース)
• Dart Sass
20 20 依存性逆転パターンでの実装 ペパボのデザインシステムと、モバイル領域における取り組み • 各サービスのflavor(色・形・大きさ etc.)を抽象 化したインターフェースを定義 • 上位のAPIではインターフェースを利用する
• 各サービスが実装を注入できるようにする
21 21 Adapterパターンでの実装 ペパボのデザインシステムと、モバイル領域における取り組み • 各サービスの言葉とライブラリのAPIを結びつけ る中間層を作る
22 22 パッケージ管理システムの世界に乗る ペパボのデザインシステムと、モバイル領域における取り組み • e.g. NPM, CocoaPods, Maven, Pub
• 独自で仕組みを作らない • ディレクトリ構成も標準化する
23 モバイル領域での取り組み Chapter 4 23
24 24 カンファレンスアプリ ペパボのデザインシステムと、モバイル領域における取り組み
25 25 カンファレンスアプリ ペパボのデザインシステムと、モバイル領域における取り組み • Flutter • MaterialへのAdapter実装 ◦ 今回はMaterialColor/Colorsあたりをやった
• インターフェース化とサービス側実装
26 26 Dart Packageとして配布 ペパボのデザインシステムと、モバイル領域における取り組み • flutter create --template=package <name>
• github.com/gyugyu/semantic_palette
27 27 余った時間でコード解説
28 まとめ Chapter 5 28
29 29 ペパボのデザインシステム ペパボのデザインシステムと、モバイル領域における取り組み • マルチブランドの包括的なデザインシステムは 難しい ◦ OSS開発的な傾向がある
30 30 デザインとエンジニアリング ペパボのデザインシステムと、モバイル領域における取り組み • デザインにおいてもプログラミングのパターンを 生かすことができる ◦ 特にFlutter (SwiftUI,
React etc.)の宣言的なUI記述が 一つのパラダイムとなって乗り入れがしやすくなった
31 • ペパボではモバイルエンジニアだけではなく、デ ザインエンジニアも募集しています ◦ やれることは無限にあります 31 ペパボのデザインシステムと、モバイル領域における取り組み デザインエンジニア募集中!