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
920
BOOTH における Charcoal 実践活用術
PIXIV MEETUP 2023 LT セッションにて発表した資料です
cilvia
September 29, 2023
Tweet
Share
Other Decks in Technology
See All in Technology
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
180
Android Audio: Beyond Winning On It
atsushieno
0
2.4k
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
980
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
250
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
440
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
普通のチームがスクラムを会得するたった一つの冴えたやり方 / the best way to scrum
okamototakuyasr2
0
100
2025年夏 コーディングエージェントを統べる者
nwiizo
0
180
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
330
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
770
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
160
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
1
320
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Visualization
eitanlees
148
16k
Optimizing for Happiness
mojombo
379
70k
Context Engineering - Making Every Token Count
addyosmani
3
52
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Invisible Side of Design
smashingmag
301
51k
Scaling GitHub
holman
463
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
GitHub's CSS Performance
jonrohan
1032
460k
Speed Design
sergeychernyshev
32
1.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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で 質問お待ちしています
以上!