PIXIV MEETUP 2023 LT セッションにて発表した資料です
pixiv Inc.BOOTHにおけるCharcoal実践活用術@cilvia
View Slide
ProfilecilviaBOOTH部 サービス開発チーム● 22新卒、2年目エンジニア● MEETUP LP実装も担当● スプラではホクサイ使い
BOOTHについて
クリエイター向けECサービスこんな感じのロゴのやつです。
フロントエンド技術スタックRuby on RailsSlim (テンプレートエンジン)デザインツールfigmaJS (TypeScript)React, Vue, jQuery
Charcoal について
ピクシブのデザインシステムこんな感じのロゴのやつです。
ピクシブの価値観と各プロダクトの特徴を重視した汎用的デザインシステム
少しずつ BOOTH にCharcoal を導入中!
こんなことで困った!
Charcoal の導入【事例 #1】
1⃣ フロント環境が複雑 😭SlimReact 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で文字の余白を消すdefaultVertical Trim
Vertical trim で設定
やり方はそれぞれあった方法で!結論
コンポーネントのカスタマイズ【事例 #3】
古いデザインとの競合既存 CSS のスタイルと競合する@charcoal-ui/react は便利なんだけど...
BOOTH カラーがない!pixiv カラーだけ😭BOOTH では浮く...
コンポーネントを拡張して使おう!A.
!important を使って、スタイル修正している例
意外と力技でなんとかなる結論
終わりに
Charcoalはかなりカスタマイズできて便利!今日のまとめ
みんなも使ってみてね!今日のまとめhttps://charcoal-web.pixiv.design/
まだ話したいのに時間がない【事例 #extra】
この後、AtSで質問お待ちしています
以上!