BOOTH における Charcoal 実践活用術

by cilvia

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

BOOTHについて

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Charcoal について

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

こんなことで困った！

Slide 12

Slide 12 text

Charcoal の導入【事例 #1】

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

A. を使おう！

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

こうなります

Slide 19

Slide 19 text

Tailwindcss はいいぞ！結論

Slide 20

Slide 20 text

こんなことで困った！

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

実装で解決する！ A1.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Vertical trim で設定

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

こんなことで困った！

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

終わりに

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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