BOOTH における Charcoal 実践活用術

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

Transcript

1. pixiv Inc.
   BOOTHにおける
   Charcoal実践活用術
   @cilvia
   

   View Slide

2. Profile
   cilvia
   BOOTH部 サービス開発チーム
   ● 22新卒、2年目エンジニア
   ● MEETUP LP実装も担当
   ● スプラではホクサイ使い
   

   View Slide

3. BOOTHについて
   

   View Slide

4. クリエイター向けECサービス
   こんな感じのロゴのやつです。
   

   View Slide

5. フロントエンド技術スタック
   Ruby on Rails
   Slim (テンプレートエンジン)
   デザインツール
   figma
   JS (TypeScript)
   React, Vue, jQuery
   

   View Slide

6. Charcoal について
   

   View Slide

7. ピクシブのデザインシステム
   こんな感じのロゴのやつです。
   

   View Slide

8. ピクシブの価値観と
   各プロダクトの特徴
   を重視した汎用的デザインシステム
   

   View Slide

9. 少しずつ BOOTH に
   Charcoal を導入中！
   

   View Slide

10. pixiv Inc.
    BOOTHにおける
    Charcoal実践活用術
    @cilvia
    

    View Slide

11. こんなことで困った！
    

    View Slide

12. Charcoal の導入
    【事例 #1】
    

    View Slide

13. 1⃣ フロント環境が複雑 😭
    Slim
    React Vue
    

    View Slide

14. 2⃣ BOOTH のテーマ色がない 😭
    Charcoal には pixiv のカラーしかない
    Primary Secondary
    

    View Slide

15. A.
    を使おう！
    

    View Slide

16. Tailwindcss を使おう！
    - tailwindcss で使える実装
    - 複雑な技術スタックでも、class さえ書ければ使える
    - 拡張もtailwind 公式ドキュメント見るだけ、簡単
    @charcoal-ui/tailwind-config
    

    View Slide

17. こんな感じで書くと...
    

    View Slide

18. こうなります
    

    View Slide

19. Tailwindcss はいいぞ！
    結論
    

    View Slide

20. こんなことで困った！
    

    View Slide

21. Typography の
    特殊な仕様
    【事例 #2】
    

    View Slide

22. → half-leading-cancellation
    デザインと実装が違う⁉
    デザイン上と、実装でテキストの上下の余白が異なる
    

    View Slide

23. half-leading-cancellation???
    Charcoal (typography)
    web標準
    

    View Slide

24. なんかのボタン
    half-leading-cancellation???
    web標準のhalf-leading が グリッドシステム と
    相性が悪い😭
    

    View Slide

25. 実装で解決する！
    A1.
    

    View Slide

26. .preserve-half-leading
    上下のマージンを、web標準に戻してくれる
    

    View Slide

27. デザインで解決する！
    A2.
    

    View Slide

28. figmaで文字の余白を消す
    default
    Vertical Trim
    

    View Slide

29. Vertical trim で設定
    

    View Slide

30. やり方はそれぞれ
    あった方法で！
    結論
    

    View Slide

31. こんなことで困った！
    

    View Slide

32. コンポーネントの
    カスタマイズ
    【事例 #3】
    

    View Slide

33. 古いデザインとの競合
    既存 CSS のスタイルと競合する
    @charcoal-ui/react は便利なんだけど...
    
    

    View Slide

34. BOOTH カラーがない！
    pixiv カラーだけ😭
    BOOTH では浮く...
    

    View Slide

35. コンポーネントを
    拡張して使おう！
    A.
    

    View Slide

36. !important を使って、スタイル修正している例
    

    View Slide

37. 意外と力技で
    なんとかなる
    結論
    

    View Slide

38. 終わりに
    

    View Slide

39. Charcoalは
    かなりカスタマイズ
    できて便利！
    今日のまとめ
    

    View Slide

40. みんなも使ってみてね！
    今日のまとめ
    https://charcoal-web.pixiv.design/
    

    View Slide

41. こんなことで困った！
    

    View Slide

42. まだ話したいのに
    時間がない
    【事例 #extra】
    

    View Slide

43. この後、AtSで
    質問お待ちしています
    

    View Slide

44. 以上！
    

    View Slide