$30 off During Our Annual Pro Sale. View Details »

BOOTH における Charcoal 実践活用術

cilvia
September 29, 2023

BOOTH における Charcoal 実践活用術

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

cilvia

September 29, 2023
Tweet

Other Decks in Technology

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