Charcoal 2.0: デザインシステムの基盤を再構築

by 小神

Slide 1

Slide 1 text

pixiv Inc. 小神（Kogami） Charcoal 2.0: デザインシステムの基盤を再構築

Slide 2

Slide 2 text

デザインシステム部  マネージャー  プロダクトデザイナーピクシブ2014新卒入社小神（Kogami）

Slide 3

Slide 3 text

デザインシステムとは？開発効率を向上させるために  UI キット、ドキュメントなどを提供する

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

2.0

Slide 8

Slide 8 text

0 2 4 6 8 12 16 20 24 28 32 40 48 64 80 96 0 4 8 16 24 40 64 104 168 272 Head ing Heading Heading Heading Heading Heading Heading Heading HEADING Body Caption Caption Heading Heading Heading Heading Heading Heading Heading Heading HEADING Body Caption Caption Heading Heading Heading Heading Heading Heading Heading Heading HEADING Body Caption Caption 2.0

Slide 9

Slide 9 text

Slide 10

Slide 10 text

どうして色の基盤を再構築するのか？

Slide 11

Slide 11 text

「このコンポーネントはこの色でいいのか？」でよく悩んでた

Slide 12

Slide 12 text

リニューアル前のパレット

Slide 13

Slide 13 text

問題1 色が足りない

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

文字

Slide 18

Slide 18 text

文字文字

Slide 19

Slide 19 text

文字文字

Slide 20

Slide 20 text

文字文字

Slide 21

Slide 21 text

文字文字 #FFEE00 #DBCD0C #B19400 #E4C308

Slide 22

Slide 22 text

#Tag #Tag #Tag #Tag #Tag #Tag #Tag #Tag #Tag NEW R-18 9月23日まで 1 2 3 ↑

Slide 23

Slide 23 text

#Tag #Tag #Tag #Tag #Tag #Tag #Tag #Tag #Tag NEW R-18 9月23日まで 1 2 3 ↑ 色を指定ユーザー A ユーザー C ユーザー B ユーザー D

Slide 24

Slide 24 text

問題2 拡張しづらい

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

pixiv のデフォルトテーマプレミアムのテーマリクエストのテーマ

Slide 27

Slide 27 text

BOOTHのテーマ既存のエラー用赤既存の警告用橙色プレミアムのテーマ

Slide 28

Slide 28 text

2カラーテーマ × 13ブランド

Slide 29

Slide 29 text

× 2コントラストテーマ × 3色域

Slide 30

Slide 30 text

問題3 アクセシビリティが足りない

Slide 31

Slide 31 text

2018年08月30日総合イラストマンガ小説うごくイラストデイリーランキング

Slide 32

Slide 32 text

アクセシビリティって、創作界隈のピクシブにとってそんなに重要なの？

Slide 33

Slide 33 text

Yes！むしろ平均より重視するべき

Slide 34

Slide 34 text

クロード・モネ

Slide 35

Slide 35 text

世界で最も高価な絵の一枚：7035万ドル

Slide 36

Slide 36 text

ルートヴィヒ・ヴァン・ベートーヴェン 20代後半から難聴が悪化し  40代では完全に聴力を失ってた代表Q I 交響曲第5番（当時34歳7 I 交響曲第9番（当時54歳）

Slide 37

Slide 37 text

アクセシビリティに十分配慮しなければ、次に pixiv の入り口で締め出されるのは未来の巨匠かもしれない

Slide 38

Slide 38 text

新しいカラーシステム

Slide 39

Slide 39 text

新カラーシステムの要& $ 体系的で拡張しやす# $ カスタマイズしやす# $ アクセシビリティ対応

Slide 40

Slide 40 text

『大工がよい仕事をしようとすれば、まず道具をよく整えておかなければならない』工欲善其事、必先利其器孔子

Slide 41

Slide 41 text

最も慣れ親しんだ色ツールを手放す

Slide 42

Slide 42 text

HSL/HSB 色空間を捨てる人間中心の  OKLCH 色空間を採用

Slide 43

Slide 43 text

最も使われている色空間 HSL HSB

Slide 44

Slide 44 text

最も使われている色空間 HSL HSB 実は人間の感覚と大きくずれている

Slide 45

Slide 45 text

知覚的に不均等 HSL HSB

Slide 46

Slide 46 text

HSL 色相変更

Slide 47

Slide 47 text

HSL 色相変更違いがあまりない

Slide 48

Slide 48 text

HSL 色相変更違いがあまりない同じ色相なのに紫ぽい同じ色相なのに青ぽい

Slide 49

Slide 49 text

HSL 色相変更違いがあまりない同じ色相なのに紫ぽい同じ色相なのに青ぽい青は黄色より沈んでるように見える

Slide 50

Slide 50 text

HSL OKLCH

Slide 51

Slide 51 text

OK Lightness Chroma Hue OKな輝度彩度色相 2020年に発表された色空間 OKLCH

Slide 52

Slide 52 text

HSL  知覚的に不均等 OKLCH  知覚的に均等

Slide 53

Slide 53 text

OKLCH で一貫する色を素早く作れる

Slide 54

Slide 54 text

列が簡単に一貫性を保てるようになれば  アクセシビリティの調整も容易になります文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文

Slide 55

Slide 55 text

WCAG2のコントラスト比計算方法を捨てる人間中心の  APCA 計算方法を採用

Slide 56

Slide 56 text

「文字色の見やすさ」の現行世界基準WCAG2

Slide 57

Slide 57 text

「文字色の見やすさ」の現行世界基準WCAG2 実は人間の感覚と大きくずれてる

Slide 58

Slide 58 text

読みやすいですか？読みやすいですか？読みやすいですか？読みやすいですか？読みやすいですか？読みやすいですか？左の列と右の列どっちが読みやすい？

Slide 59

Slide 59 text

読みやすいですか？読みやすいですか？読みやすいですか？読みやすいですか？読みやすいですか？読みやすいですか？ WCAG2 で合格 ( すべて 4.5 : 1 ) WCAG2 で不合格 ( すべて 2.9 : 1 )

Slide 60

Slide 60 text

読みやすいですか？読みやすいですか？読みやすいですか？読みやすいですか？読みやすいですか？読みやすいですか？ APCA アルゴリズムの場合 44 点 30 点 39 点 55 点 54 点 57 点

Slide 61

Slide 61 text

Advanced Perceptual Contrast Algorithm 高度な知覚コントラストアルゴリズム 2019年始動のプロジェクト APCA

Slide 62

Slide 62 text

APCA と OKLCH を  同時に使用することで  その真の力が解き放たれます

Slide 63

Slide 63 text

HSL HSB 4.66 1 1 21 21 21 1 3.41 2.99 7.33 2.52 3.99 21 21 21 1 10.6 3.84 WCAG2 値の分布図質問：本文色として合格する3点はどのあたりにありますか？

Slide 64

Slide 64 text

HSB空間でのチョイスを言語化できない  ↓  属人化  ↓  拡張しづらい

Slide 65

Slide 65 text

OKLCH + APCA でコントラスト比を調整する：  輝度を変えるのみ

Slide 66

Slide 66 text

吾輩は猫吾輩は猫吾輩は猫吾輩は猫吾輩は猫吾輩は猫吾輩は猫吾輩は猫吾輩は猫吾輩は猫吾輩は猫吾輩は猫 WCAG2 + HSB  で設計不安定な視認性輝度/彩度/色相 3軸で  コントラスト比が「ランダム」に変わる APCA + OKLCH  で設計一貫する視認性 OKLCH の輝度だけを調整

Slide 67

Slide 67 text

新しいパレット

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

4種の本文色 3種の背景色

Slide 70

Slide 70 text

まとめ

Slide 71

Slide 71 text

) デザインシステムの最も重要な基盤の一つですが、その設計には高い難易度が伴 b ) アクセシビリティは、ピクシブにとって非常に重D ) OKLCHとAPCAを両方活用しましょう

Slide 72

Slide 72 text

ドキュメント、ツールなどリソースを公開中