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
BOOTH における Charcoal 実践活用術
Search
cilvia
September 29, 2023
Technology
0
930
BOOTH における Charcoal 実践活用術
PIXIV MEETUP 2023 LT セッションにて発表した資料です
cilvia
September 29, 2023
Tweet
Share
Other Decks in Technology
See All in Technology
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
3
350
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
120
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
3
1.2k
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
[OCI Skill Mapping] AWSユーザーのためのOCI – IaaS編(Compute/Storage/Networking) (2025年10月8日開催)
oracle4engineer
PRO
1
100
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
Introdução a Service Mesh usando o Istio
aeciopires
1
250
Kubernetes self-healing of your workload
hwchiu
0
300
難しいセキュリティ用語をわかりやすくしてみた
yuta3110
0
340
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
110
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
480
OpenTelemetry が拡げる Gemini CLI の可観測性
phaya72
2
920
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Designing for Performance
lara
610
69k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Speed Design
sergeychernyshev
32
1.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Transcript
pixiv Inc. BOOTHにおける Charcoal実践活用術 @cilvia
Profile cilvia BOOTH部 サービス開発チーム • 22新卒、2年目エンジニア • MEETUP LP実装も担当 •
スプラではホクサイ使い
BOOTHについて
クリエイター向けECサービス こんな感じのロゴのやつです。
フロントエンド技術スタック Ruby on Rails Slim (テンプレートエンジン) デザインツール figma JS (TypeScript)
React, Vue, jQuery
Charcoal について
ピクシブのデザインシステム こんな感じのロゴのやつです。
ピクシブの価値観と 各プロダクトの特徴 を重視した汎用的デザインシステム
少しずつ BOOTH に Charcoal を導入中!
pixiv Inc. BOOTHにおける Charcoal実践活用術 @cilvia
こんなことで困った!
Charcoal の導入 【事例 #1】
1⃣ フロント環境が複雑 😭 Slim React Vue
2⃣ BOOTH のテーマ色がない 😭 Charcoal には pixiv のカラーしかない Primary Secondary
A. を使おう!
Tailwindcss を使おう! - tailwindcss で使える実装 - 複雑な技術スタックでも、class さえ書ければ使える - 拡張もtailwind
公式ドキュメント見るだけ、簡単 @charcoal-ui/tailwind-config
こんな感じで書くと...
こうなります
Tailwindcss はいいぞ! 結論
こんなことで困った!
Typography の 特殊な仕様 【事例 #2】
→ half-leading-cancellation デザインと実装が違う⁉ デザイン上と、実装でテキストの上下の余白が異なる
half-leading-cancellation??? Charcoal (typography) web標準
なんかのボタン half-leading-cancellation??? web標準のhalf-leading が グリッドシステム と 相性が悪い😭
実装で解決する! A1.
.preserve-half-leading 上下のマージンを、web標準に戻してくれる
デザインで解決する! A2.
figmaで文字の余白を消す default Vertical Trim
Vertical trim で設定
やり方はそれぞれ あった方法で! 結論
こんなことで困った!
コンポーネントの カスタマイズ 【事例 #3】
古いデザインとの競合 既存 CSS のスタイルと競合する @charcoal-ui/react は便利なんだけど...
BOOTH カラーがない! pixiv カラーだけ😭 BOOTH では浮く...
コンポーネントを 拡張して使おう! A.
!important を使って、スタイル修正している例
意外と力技で なんとかなる 結論
終わりに
Charcoalは かなりカスタマイズ できて便利! 今日のまとめ
みんなも使ってみてね! 今日のまとめ https://charcoal-web.pixiv.design/
こんなことで困った!
まだ話したいのに 時間がない 【事例 #extra】
この後、AtSで 質問お待ちしています
以上!