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

スライドだけみると面白くないので、こちら台本付きのをおすすめします： https://www.figma.com/community/file/1424823581198686752/charcoal-2-0

Transcript

1. pixiv Inc. 小神（Kogami） Charcoal 2.0: デザインシステムの 基盤を再構築
2. デザインシステム部
 マネージャー
 プロダクトデザイナー ピクシブ2014新卒入社 小神（Kogami）
3. デザインシステムとは？ 開発効率を向上させるために
 UI キット、ドキュメントなどを提供する
7. 2.0
8. 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
9. 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 色
10. どうして 色の基盤を 再構築するのか？
11. 「このコンポーネントは この色でいいのか？」 でよく悩んでた
12. リニューアル前のパレット
13. 問題1 色が足りない
17. 文字
18. 文字 文字
19. 文字 文字
20. 文字 文字
21. 文字 文字 #FFEE00 #DBCD0C #B19400 #E4C308
22. #Tag #Tag #Tag #Tag #Tag #Tag #Tag #Tag #Tag NEW R-18 9月23日まで 1 2 3 ↑
23. #Tag #Tag #Tag #Tag #Tag #Tag #Tag #Tag #Tag NEW R-18 9月23日まで 1 2 3 ↑ 色を指定 ユーザー A ユーザー C ユーザー B ユーザー D
24. 問題2 拡張しづらい
26. pixiv のデフォルトテーマ プレミアムのテーマ リクエストのテーマ
27. BOOTHのテーマ 既存のエラー用赤 既存の警告用橙色 プレミアムのテーマ
28. 2カラーテーマ × 13ブランド
29. × 2コントラストテーマ × 3色域
30. 問題3 アクセシビリティが足りない
31. 2018年08月30日 総合 イラスト マンガ 小説 うごくイラスト デイリー ランキング
32. アクセシビリティって、 創作界隈のピクシブにとって そんなに重要なの？
33. Yes！ むしろ平均より 重視するべき
34. クロード・モネ
35. 世界で最も高価な絵の一枚：7035万ドル
36. ルートヴィヒ・ヴァン・ ベートーヴェン 20代後半から難聴が悪化し
 40代では完全に聴力を失ってた 代表Q I 交響曲第5番（当時34歳7 I 交響曲第9番（当時54歳）
37. アクセシビリティに 十分配慮しなければ、 次に pixiv の入り口で 締め出されるのは 未来の巨匠かもしれない
38. 新しい カラーシステム
39. 新カラーシステムの要& $ 体系的で拡張しやす# $ カスタマイズしやす# $ アクセシビリティ対応
40. 『大工がよい仕事をしようとすれば、 まず道具をよく整えて おかなければならない』 工欲善其事、必先利其器 孔子
41. 最も慣れ親しんだ 色ツールを手放す
42. HSL/HSB 色空間を捨てる 人間中心の
 OKLCH 色空間を採用
43. 最も使われている色空間 HSL HSB
44. 最も使われている色空間 HSL HSB 実は人間の感覚と 大きくずれている
45. 知覚的に不均等 HSL HSB
46. HSL 色相 変更
47. HSL 色相 変更 違いがあまりない
48. HSL 色相 変更 違いがあまりない 同じ色相なのに紫ぽい 同じ色相なのに青ぽい
49. HSL 色相 変更 違いがあまりない 同じ色相なのに紫ぽい 同じ色相なのに青ぽい 青は黄色より沈んでるように見える
50. HSL OKLCH
51. OK Lightness Chroma Hue OKな 輝度 彩度 色相 2020年に発表された色空間 OKLCH
52. HSL
 知覚的に不均等 OKLCH
 知覚的に均等
53. OKLCH で一貫する色を素早く作れる
54. 列が簡単に一貫性を保てるようになれば
 アクセシビリティの調整も容易になります 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文 文
55. WCAG2のコントラスト比計算方法を捨てる 人間中心の
 APCA 計算方法を採用
56. 「文字色の見やすさ」の 現行世界基準WCAG2
57. 「文字色の見やすさ」の 現行世界基準WCAG2 実は人間の感覚と 大きくずれてる
58. 読みやすいですか？ 読みやすいですか？ 読みやすいですか？ 読みやすいですか？ 読みやすいですか？ 読みやすいですか？ 左の列 と 右の列 どっちが読みやすい？
59. 読みやすいですか？ 読みやすいですか？ 読みやすいですか？ 読みやすいですか？ 読みやすいですか？ 読みやすいですか？ WCAG2 で合格 ( すべて 4.5 : 1 ) WCAG2 で不合格 ( すべて 2.9 : 1 )
60. 読みやすいですか？ 読みやすいですか？ 読みやすいですか？ 読みやすいですか？ 読みやすいですか？ 読みやすいですか？ APCA アルゴリズムの場合 44 点 30 点 39 点 55 点 54 点 57 点
61. Advanced Perceptual Contrast Algorithm 高度な 知覚 コントラスト アルゴリズム 2019年始動のプロジェクト APCA
62. APCA と OKLCH を
 同時に使用することで
 その真の力が解き放たれます
63. 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点はどのあたりにありますか？
64. HSB空間でのチョイスを言語化できない
 ↓
 属人化
 ↓
 拡張しづらい
65. OKLCH + APCA でコントラスト比を調整する：
 輝度を変えるのみ
66. 吾輩は猫 吾輩は猫 吾輩は猫 吾輩は猫 吾輩は猫 吾輩は猫 吾輩は猫 吾輩は猫 吾輩は猫 吾輩は猫 吾輩は猫 吾輩は猫 WCAG2 + HSB
 で設計 不安定な視認性 輝度/彩度/色相 3軸で
 コントラスト比が「ランダム」に変わる APCA + OKLCH
 で設計 一貫する視認性 OKLCH の輝度だけを調整
67. 新しい パレット
69. 4種の本文色 3種の背景色
70. まとめ
71. ) デザインシステムの最も重要な基盤の一 つですが、その設計には高い難易度が伴 b ) アクセシビリティは、ピクシブにとって 非常に重D ) OKLCHとAPCAを両方活用しましょう
72. ドキュメント、ツールなどリソースを公開中