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
940
BOOTH における Charcoal 実践活用術
PIXIV MEETUP 2023 LT セッションにて発表した資料です
cilvia
September 29, 2023
Tweet
Share
Other Decks in Technology
See All in Technology
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.5k
パフォーマンスチューニングのために普段からできること/Performance Tuning: Daily Practices
fujiwara3
2
140
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
sansan_randd
1
510
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
330
仕様駆動開発を実現する上流工程におけるAIエージェント活用
sergicalsix
1
240
ラスベガスの歩き方 2025年版(re:Invent 事前勉強会)
junjikoide
0
400
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
1.8k
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
270
abema-trace-sampling-observability-cost-optimization
tetsuya28
0
190
Okta Identity Governanceで実現する最小権限の原則
demaecan
0
140
SOTA競争から人間を超える画像認識へ
shinya7y
0
590
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
160
Featured
See All Featured
How to Ace a Technical Interview
jacobian
280
24k
Building Adaptive Systems
keathley
44
2.8k
Writing Fast Ruby
sferik
630
62k
Building Applications with DynamoDB
mza
96
6.7k
KATA
mclloyd
PRO
32
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Navigating Team Friction
lara
190
15k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Producing Creativity
orderedlist
PRO
347
40k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
For a Future-Friendly Web
brad_frost
180
10k
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で 質問お待ちしています
以上!