BOOTH における Charcoal 実践活用術

PIXIV MEETUP 2023 LT セッションにて発表した資料です

Transcript

1. pixiv Inc. BOOTHにおける Charcoal実践活用術 @cilvia
2. Profile cilvia BOOTH部 サービス開発チーム • 22新卒、2年目エンジニア • MEETUP LP実装も担当 • スプラではホクサイ使い
3. BOOTHについて
4. クリエイター向けECサービス こんな感じのロゴのやつです。
5. フロントエンド技術スタック Ruby on Rails Slim (テンプレートエンジン) デザインツール figma JS (TypeScript) React, Vue, jQuery
6. Charcoal について
7. ピクシブのデザインシステム こんな感じのロゴのやつです。
8. ピクシブの価値観と 各プロダクトの特徴 を重視した汎用的デザインシステム
9. 少しずつ BOOTH に Charcoal を導入中！
10. pixiv Inc. BOOTHにおける Charcoal実践活用術 @cilvia
11. こんなことで困った！
12. Charcoal の導入 【事例 #1】
13. 1⃣ フロント環境が複雑 😭 Slim React Vue
14. 2⃣ BOOTH のテーマ色がない 😭 Charcoal には pixiv のカラーしかない Primary Secondary
15. A. を使おう！
16. Tailwindcss を使おう！ - tailwindcss で使える実装 - 複雑な技術スタックでも、class さえ書ければ使える - 拡張もtailwind 公式ドキュメント見るだけ、簡単 @charcoal-ui/tailwind-config
17. こんな感じで書くと...
18. こうなります
19. Tailwindcss はいいぞ！ 結論
20. こんなことで困った！
21. Typography の 特殊な仕様 【事例 #2】
22. → half-leading-cancellation デザインと実装が違う⁉ デザイン上と、実装でテキストの上下の余白が異なる
23. half-leading-cancellation??? Charcoal (typography) web標準
24. なんかのボタン half-leading-cancellation??? web標準のhalf-leading が グリッドシステム と 相性が悪い😭
25. 実装で解決する！ A1.
26. .preserve-half-leading 上下のマージンを、web標準に戻してくれる
27. デザインで解決する！ A2.
28. figmaで文字の余白を消す default Vertical Trim
29. Vertical trim で設定
30. やり方はそれぞれ あった方法で！ 結論
31. こんなことで困った！
32. コンポーネントの カスタマイズ 【事例 #3】
33. 古いデザインとの競合 既存 CSS のスタイルと競合する @charcoal-ui/react は便利なんだけど...
34. BOOTH カラーがない！ pixiv カラーだけ😭 BOOTH では浮く...
35. コンポーネントを 拡張して使おう！ A.
36. !important を使って、スタイル修正している例
37. 意外と力技で なんとかなる 結論
38. 終わりに
39. Charcoalは かなりカスタマイズ できて便利！ 今日のまとめ
40. みんなも使ってみてね！ 今日のまとめ https://charcoal-web.pixiv.design/
41. こんなことで困った！
42. まだ話したいのに 時間がない 【事例 #extra】
43. この後、AtSで 質問お待ちしています
44. 以上！