Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
BOOTH における Charcoal 実践活用術
Search
cilvia
September 29, 2023
Technology
0
630
BOOTH における Charcoal 実践活用術
PIXIV MEETUP 2023 LT セッションにて発表した資料です
cilvia
September 29, 2023
Tweet
Share
Other Decks in Technology
See All in Technology
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
750
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
150
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8k
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
A better future with KSS
kneath
231
17k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
For a Future-Friendly Web
brad_frost
173
9.2k
GraphQLとの向き合い方2022年版
quramy
36
13k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
What's new in Ruby 2.0
geeforr
338
31k
Transcript
pixiv Inc. BOOTHにおける Charcoal実践活用術 @cilvia
Profile cilvia BOOTH部 サービス開発チーム • 22新卒、2年目エンジニア • MEETUP LP実装も担当 •
スプラではホクサイ使い
BOOTHについて
クリエイター向けECサービス こんな感じのロゴのやつです。
フロントエンド技術スタック Ruby on Rails Slim (テンプレートエンジン) デザインツール figma JS (TypeScript)
React, Vue, jQuery
Charcoal について
ピクシブのデザインシステム こんな感じのロゴのやつです。
ピクシブの価値観と 各プロダクトの特徴 を重視した汎用的デザインシステム
少しずつ BOOTH に Charcoal を導入中!
pixiv Inc. BOOTHにおける Charcoal実践活用術 @cilvia
こんなことで困った!
Charcoal の導入 【事例 #1】
1⃣ フロント環境が複雑 😭 Slim React 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で文字の余白を消す default Vertical Trim
Vertical trim で設定
やり方はそれぞれ あった方法で! 結論
こんなことで困った!
コンポーネントの カスタマイズ 【事例 #3】
古いデザインとの競合 既存 CSS のスタイルと競合する @charcoal-ui/react は便利なんだけど...
BOOTH カラーがない! pixiv カラーだけ😭 BOOTH では浮く...
コンポーネントを 拡張して使おう! A.
!important を使って、スタイル修正している例
意外と力技で なんとかなる 結論
終わりに
Charcoalは かなりカスタマイズ できて便利! 今日のまとめ
みんなも使ってみてね! 今日のまとめ https://charcoal-web.pixiv.design/
こんなことで困った!
まだ話したいのに 時間がない 【事例 #extra】
この後、AtSで 質問お待ちしています
以上!