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.2k
ペパボのデザインシステムと、モバイル領域における取り組み
2020.10.16 ペパボモバイルテックカンファレンスの発表資料です
Yusuke Yagyu
October 16, 2020
Tweet
Share
More Decks by Yusuke Yagyu
See All by Yusuke Yagyu
Dart Sass であれを作った
gyugyu
0
80
Android CI: 2016 edition
gyugyu
3
2.4k
少し変わった論理削除
gyugyu
3
18k
Other Decks in Programming
See All in Programming
CursorはMCPを使った方が良いぞ
taigakono
1
190
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
580
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
500
PicoRuby on Rails
makicamel
2
110
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.4k
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
980
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
810
Is Xcode slowly dying out in 2025?
uetyo
1
210
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
47
31k
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
200
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Balancing Empowerment & Direction
lara
1
380
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Facilitating Awesome Meetings
lara
54
6.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Visualization
eitanlees
146
16k
Done Done
chrislema
184
16k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
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 ペパボのデザインシステムと、モバイル領域における取り組み デザインエンジニア募集中!