Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
普段はコミュニティサービスのデザインをしていて、C向け
サービスとデザインシステム構築が好きです。
現在はデザイン組織責任者として組織戦略や採用活動も兼任
しています。Gaudiy 6年生。
Digital Product Designer / Head of Design
自己紹介
TORAJIRO
Intro
Slide 3
Slide 3 text
今日のテーマ
0
Slide 4
Slide 4 text
今日のテーマ
ブランドカラーを持たない
カラーパレット構築プロセス
Slide 5
Slide 5 text
今日のテーマ
ブランドカラーを持たない
カラーパレット構築プロセスのお話
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
マンガやアイドル、ゲームなどのエンタメIPを中心に
ファンコミュニティを提供するプラットフォーム
Slide 8
Slide 8 text
IPの持つブランド ＝ コミュニティのブランドカラー
User
エンタメ
IP 公式コミュニティ
Slide 9
Slide 9 text
IPが変われば、提供するブランドカラーも変わる
User
エンタメ
IP 公式コミュニティ
Slide 10
Slide 10 text
Fanlink自体は
ブランドカラーを持っていない
Slide 11
Slide 11 text
ブランドカラーを持たない
プロダクトの は
どうあるべきか?
カラーシステム
Slide 12
Slide 12 text
IPの世界観に寄り添う
なカラーシステム
変幻自在
Slide 13
Slide 13 text
そんなカラーシステムの
設計プロセスをお話しします
Slide 14
Slide 14 text
はじめに伝えておきたいこと
Slide 15
Slide 15 text
はじめに伝えておきたいこと
シチュエーションにおける
を選ぼう
最適解
Slide 16
Slide 16 text
はじめに伝えておきたいこと
既存のカラーシステムを利用したり、
ブランドカラーを中心に考えたり、
方法はさまざま
Slide 17
Slide 17 text
はじめに伝えておきたいこと
今日紹介するプロセスは
出来たから取れた選択肢
投資判断
Slide 18
Slide 18 text
はじめに伝えておきたいこと
色の問題に直面した時、
になれば嬉しい
解決のヒント
Slide 19
Slide 19 text
OUTLINE
1 - この取り組みのきっかけ
2 - カラーシステムの方向性の探索
3 - カラースケールの構築
4 - 運用して見えてきた課題
5 - 次の目的地
Slide 20
Slide 20 text
この取り組みのきっかけ
1
Slide 21
Slide 21 text
当時のカラーパレットが
抱えていた課題
Slide 22
Slide 22 text
カラーパレットが抱えていた課題
1.色の役割が不明瞭で、
使われ方がズレる
2. を
考慮してなく見づらい
コントラスト比 3.新しいテーマを
追加する がない
ロジック
Slide 23
Slide 23 text
Dark Thema
Dark Theme
Slide 24
Slide 24 text
ダークテーマ要望があっても対応できない
User
Fanlink
IP 公式コミュニティ
Slide 25
Slide 25 text
そんなタイミングでダークテーマの要望がやって来た
User
Fanlink
IP 公式コミュニティ
Slide 26
Slide 26 text
さて、どう作ろう？
Slide 27
Slide 27 text
思い込んでたこと
ダークモードは色反転するだけ
Slide 28
Slide 28 text
わかったこと
ダークモードは色反転するだけ
どうやらそんな単純じゃない
Slide 29
Slide 29 text
何が大変か
色を反転すればいいだけに
見えることが厄介。
想像よりはるかに複雑。
Caption
耐久年数
イラスト利用
色相定義
濃い黄色問題
Figmaの運用
色相間の明度
状態変化の表現
コントラスト比 命名規則
Variables 実装工数
Slide 30
Slide 30 text
何が大変か
プロセスが進むにつれて、
UIの厄介な課題が表面化する
Caption
耐久年数
イラスト利用
色相定義
濃い黄色問題
Figmaの運用
色相間の明度
状態変化の表現
コントラスト比 命名規則
Variables 実装工数
Slide 31
Slide 31 text
複数のツールを
組み合わせて
しなけれ
ばならない
試行錯誤
調査
設計
実装
Slide 32
Slide 32 text
カラーシステムの方向性の探索
2
Slide 33
Slide 33 text
満たすべき要件
1. 意識せず、コントラスト比が担保される
2. 意識せず、ダークモード切り替えが可能
3. 将来的なカラー拡張が可能
Slide 34
Slide 34 text
片っ端から事例を調べて
いくつか方向性のヒント
Slide 35
Slide 35 text
カラーシステムの方向性の探索
出典：https://www.radix-ui.com/
1 Radix
Slide 36
Slide 36 text
出典：https://www.radix-ui.com/
カラーシステムの方向性の探索
1 Radixの特徴：役割を持つカラースケール
各カラースケールは12stepであり、全てのstepに基本的な利用用途が定義されています。
カラースケールを追加すればそのままセマンティックカラーに適用できる柔軟性があるのがRadixの思想の魅力です。
Slide 37
Slide 37 text
出典：https://www.radix-ui.com/
カラーシステムの方向性の探索
1 Radixの特徴：役割を持つカラースケール
例えば、Step7はBorderのカラー、Step8がHoverなど
Slide 38
Slide 38 text
出典：https://design.gs.com/foundation/color-system/creating-the-system
カラーシステムの方向性の探索
2
Goldman Sachs
プライマリ/ブランドカラーを持たず、単一のカラースケールでライトモード / ダークモードの実現が可能
Slide 39
Slide 39 text
出典：https://www.radix-ui.com/
カラーシステムの方向性の探索
2 Goldman SachsとRadixの違い：Step間の明度差
Radix UIは12のStepに明確な用途が定義されているため、Step間の明度差分が意図して急な増減をするため、
ダークテーマ用のカラースケールが別に設けられている。
Slide 40
Slide 40 text
出典：https://design.gs.com/foundation/color-system/creating-the-system
カラーシステムの方向性の探索
2
GoldmanSachsの特徴：明度の一貫性
コントラスト比を担保したカラースケールの一貫性を重要視しており、
色相間の視覚的な差分が生まれないように明度を調整し、見た目上の差分を減らしています。
Slide 41
Slide 41 text
出典：https://uxplanet.org/designing-systematic-colors-b5d2605b15c
カラーシステムの方向性の探索
3 MineralUI：カラースケールの調査
IBM: アクセシビリティの問題を気にせずに色を使用できる、一貫したルールがある。
Material Design, : 様々な配色を可能にするが、全体としてパレットに一貫性がない。
ダークテーマ対応
コントラスト比を
担保
Slide 42
Slide 42 text
出典：https://uxplanet.org/designing-systematic-colors-b5d2605b15c
カラーシステムの方向性の探索
3 MineralUI：カラースケールの調査
IBM: アクセシビリティの問題を気にせずに色を使用できる、一貫したルールがある。
Material Design, : 様々な配色を可能にするが、全体としてパレットに一貫性がない。
ダークテーマ
未対応
コントラスト比を
担保していない
Slide 43
Slide 43 text
カラーシステムの方向性の探索
公共性の高さ プロダクトの特性
と に
合わせて、最適なラインを見極める
どれだけ厳格に
コントラスト比を
満たすべきか？
Slide 44
Slide 44 text
探索の結果
目指すべき方向性
Slide 45
Slide 45 text
開発者は基本的に
Semantic Colorを利用するだけ
ブランドカラーに加えて、
に選択可能
themeが自由
Slide 46
Slide 46 text
将来的な状況に対応可能
ロジックを元に
Global Colorを追加し、
新しいテーマが追加可能
Slide 47
Slide 47 text
カラースケールの構築
3
Slide 48
Slide 48 text
カラースケールの構築プロセス
1 - ステップとセマンティックのスキーマ定義
2 - グレースケールの構築
3 - カラーパレットへの展開
4 - 色の役割定義と実用化
Slide 49
Slide 49 text
ステップとセマンティックのスキーマ定義
Stepとセマンティックの関係
Global Color Paletteの各ステップには「ターゲットコントラスト」と「対応するSemantic Color」が定義されており、
それに準じたGlobal Color Paletteをスケールとして追加すれば柔軟な色追加が行えるということです。
Slide 50
Slide 50 text
#FAFAFA
25
#F5F5F5
50
#E8E8E8
100
#D1D1D1
200
#B3B3B3
300
#949494
400
#737373
500
#5C5C5C
600
#474747
700
#363636
800
#1B1B1B
900
#141414
950
グレースケールの構築
Slide 51
Slide 51 text
一般的なスケール展開の
問題点
Slide 52
Slide 52 text
グレースケールの構築
一般的なグレースケールの展開
両端を決めて均一に増減させる
Slide 53
Slide 53 text
グレースケールの構築
1 コントラスト比の
担保が不可
step-60（ライトテーマのベースカ
ラー）で、コントラスト比を担保でき
てない。
4.5:1未満
60
3.94
#808080
B:50
Slide 54
Slide 54 text
グレースケールの構築
2 状態変化の明度差分
が激しい
直線的な明度変化ではState間の色差
分が激しくなってしまい、状態変化が
滑らかに表現しづらい。
BUTTON
BUTTON
BUTTON
Slide 55
Slide 55 text
グレースケールを基準に
ターゲットコントラストを設定
Slide 56
Slide 56 text
グレースケールの構築
コントラストターゲットを
基準として展開する
グレースケールは
スケール展開における”見本”
Slide 57
Slide 57 text
#FAFAFA
25
16.67
#F5F5F5
50
15.96
#E8E8E8
100
14.2
#D1D1D1
200
11.39
#B3B3B3
300
8.3
#949494
400
5.73
#737373
500
#5C5C5C
600
6.68 9.29
#474747
700
12.08
#363636
800
17.4
#1B1B1B
900
#141414
18.4
4.74
950
EndPoint
Light-Base
Dark-Base
EndPoint
グレースケールの構築
1. ベースポイントとエンドポイントの決定
まずLight/DarkモードのベースカラーになるStep-400, 500はコントラスト比4.5:1以上を担保するように設定します。
次にスケールの両極端である最も明るい値と最も暗い値（エンドポイント）を決定します。
Slide 58
Slide 58 text
#FAFAFA
25
16.67
#F5F5F5
50
15.96
#E8E8E8
100
14.2
#D1D1D1
200
11.39
#B3B3B3
300
8.3
#949494
400
5.73
#737373
500
#5C5C5C
600
6.68 9.29
#474747
700
12.08
#363636
800
17.4
#1B1B1B
900
#141414
18.4
4.74
950
グレースケールの構築
TX 明度の増減パターンを探る
最初のアプローチはRadixやGoldman Sachsなどいくつかのカラースケールを抽出し、
各ステップの明度変化度の増減を共通のパターンとして利用しました。
+N
+N
+N
+N
+N
+N
-N
-N
-N
-N
-N
Slide 59
Slide 59 text
グレースケールの構築
明度の増減パターン
直線的な増減ではなく、ベースポイントに近いステップほど変化幅が大きいパターンを採用しました。
Slide 60
Slide 60 text
グレースケールの構築
2. 明度の増減パターンを適用
何パターンもの検証を通して、先ほどの増減パターンをv1では適用しました
#FAFAFA
25
16.67
#F5F5F5
50
15.96
#E8E8E8
100
14.2
#D1D1D1
200
11.39
#B3B3B3
300
8.3
#949494
400
5.73
#737373
500
#5C5C5C
600
6.68 9.29
#474747
700
12.08
#363636
800
17.4
#1B1B1B
900
#141414
18.4
4.74
950
EndPoint
Light-Base
Dark-Base
EndPoint
グレースケールの構築
Slide 61
Slide 61 text
グレースケールの構築
) 基本構造を決め、背景色と文字色に適用する
Semantic Colorに適用する概念定義はAmebaのテックブログ（https://developers.cyberagent.co.jp/blog/archives/26754/#chapter03）で
紹介されている整理を参考にしました。基本的なレイヤー構造はBackground, Surface, Textの3つで表現します。
Slide 62
Slide 62 text
グレースケールの構築
( 基本構造に基づいて、背景色と文字色を決定
Background, Surface, Textを何種類用意するか決め、グレースケールのどのステップを適用するか決めます。
Slide 63
Slide 63 text
グレースケールの構築
" 背景色と文字色のコントラスト比の検証
可読性を担保するTertiaryまでの文字色と、頻繁に利用される基本的な背景色とのコントラスト比をテストします。
Slide 64
Slide 64 text
グレースケールの構築
カラースケールの
“見本”が完成！
Slide 65
Slide 65 text
カラースケールに展開
Slide 66
Slide 66 text
カラースケールの構築
ターゲットコントラストを元に色相の調整
展開する色相がを決めたら、明度と彩度を調整してベースポイントのターゲットコントラストになるように調整します。
4.74
500
#737373
4.67
500
#D7352C
4.74
500
#DF0582
4.74
500
#AA3CDF
4.72
500
#5D5EED
4.73
500
#126BEC
4.73
500
#0F8422
Slide 67
Slide 67 text
カラースケールの構築
アナログな調整
ステップを展開する
Slide 68
Slide 68 text
カラースケールの構築
モックアップテストの反復
各ブランドカラーごとの見え方をテストし修正ポイントを洗い出し、
反復して調整します。
Slide 69
Slide 69 text
カラースケールの構築
0
--
#FFFFFF
B:100
25
17.81
#FFFAFA
B:97.5
50
15.99
#FDEBE9
B95
100
14.34
#FFDBD6
B:87
200
11.73
#FFBFB5
B:78
300
9.12
#FF9C8E
B:68
400
6.02
#F66455
B:56
500
4.73
#D7352C
B:88
600
6.7
#AF271D
B:69
700
9.26
#8A1D14
B:54
800
12.16
#681810
B:41
900
17.16
#360E08
B:21
950
18.47
#240D09
B:14
0
--
#FFFFFF
B:100
25
17.33
#FEF6F9
B:97.5
50
16.33
#FEEDF3
B99
100
13.56
#FFD1E1
B:99
200
10.84
#FDB1CE
B:99
300
8.63
#FF8EBB
B:68
400
6.13
#F360A1
B:100
500
4.68
#DF0582
B:95(-)
600
6.61
#B50367
B:84(-11)
700
9.12
#8F0450
B:72(-12)
800
12.13
#6E013B
B:59(-13)
900
17.25
#3D001E
B:20
950
18.41
#2D0416
B:20
0
--
#FFFFFF
B:100
25
16.48
#FCF7FF
B:97.5
50
15.4
#F9EDFF
B99
100
13.12
#F0D7FC
B:99
200
10.45
#E4B9FA
B:99
300
8.31
#D79DF5
B:68
400
5.99
#C46EF0
B:100
500
4.74
#AA3CDF
B:95(-)
600
6.72
#901EBE
B:84(-11)
700
9.46
#731099
B:72(-12)
800
12.48
#55176E
B:59(-13)
900
17.4
#2D0642
B:20
950
17.4
#210730
B:20
0
--
#FFFFFF
B:100
25
16.72
#F5F9FF
B:97.5
50
16.06
#E8F2FF
B99
100
14.1
#DCE1FE
B:99
200
11.33
#C3CCFE
B:99
300
8.3
#A3AFFF
B:68
400
6.01
#7F89FA
B:100
500
4.72
#5D5EED
B:95(-)
600
6.79
#4E44D7
B:84(-11)
700
9.34
#3E2FB5
B:72(-12)
800
12.14
#311E96
B:59(-13)
900
17.41
#180758
B:20
950
17.41
#100C37
B:20
0
--
#FFFFFF
B:100
25
1.05(16.53)
#F5F9FF
B:97.5
50
1.12(15.3)
#E8F2FF
B99
100
1.34(13.07)
#C9E1FF
B:99
200
1.69(10.35)
#A3CBFF
B:99
300
2.09(8.27)
#7DB5FF
B:68
400
5.72
#4294FF
B:100
500
4.73
#126BEC
B:95(-)
600
6.78
#0454C7
B:84(-11)
700
9.34
#0240A1
B:72(-12)
800
12.2
#04317A
B:59(-13)
900
17.42
#031842
B:20
950
17.42
#05132F
B:20
0
--
#FFFFFF
B:100
25
1.05(16.53)
#F2FBF2
B:97.5
50
1.12(15.3)
#E2F9E2
B99
100
1.34(13.07)
#C7E7C7
B:99
200
10.33
#9DD59F
B:99
300
8.35
#7CC280
B:68
400
5.72
#42A64D
B:100
500
4.73
#0F8422
B:95(-)
600
6.72
#056D21
B:84(-11)
700
9.46
#015519
B:72(-12)
800
12.42
#0D3F18
B:59(-13)
900
17.42
#06200B
B:20
950
17.42
#0A170C
B:20
Slide 70
Slide 70 text
色の役割
Slide 71
Slide 71 text
色の役割
色の役割を定義する
ようやく出揃ったカラースケールを用いて、より実用的な色の役割＝Semantic Color（特定の役割を持つ色）を定義していきます。
Slide 72
Slide 72 text
色の役割
Slide 73
Slide 73 text
色の役割を定義する
カラーシステムを効率的に
活用するための命名規則
Slide 74
Slide 74 text
色の役割を定義する
コード上での表現
役割や機能に基づいて命名し、デザインツールと開発ツールの両方で一貫性が保たれる
Slide 75
Slide 75 text
Figmaで実用化する
Slide 76
Slide 76 text
Variables is Magic
Variables is Magic
Variables is Magic
Variables is Magic
Variables is Magic
Variables is Magic
Variables is Magic
Variables is Magic
Slide 77
Slide 77 text
Figmaで実用化する
Variables以後の世界
modeの切り替えのみで変更可能
Slide 78
Slide 78 text
Change
Slide 79
Slide 79 text
Figmaで実用化する
カラーパレット v1
Release
Slide 80
Slide 80 text
取り残された問題
!!
Slide 81
Slide 81 text
Bright Colorどうしよう？
Slide 82
Slide 82 text
Bright Colorって？
前傾色が白文字の場合に
コントラスト比を
満たすことが難しい色相
Slide 83
Slide 83 text
Dark Yellow Problem
濃い黄色問題
Slide 84
Slide 84 text
Dark Yellow Problem： 濃い黄色問題
黄色が白文字に対して
コントラスト比を満そうとすると、
濁ってしまい黄色に見えない
Slide 85
Slide 85 text
出典：https://uxdesign.cc/the-dark-yellow-problem-in-design-system-color-palettes-a0db1eedc99d
Slide 86
Slide 86 text
Dark Yellow Problem： 濃い黄色問題
他のカラーシステムでは、
ブライトカラーは
どう扱われているか？
Slide 87
Slide 87 text
Dark Yellow Problem： 濃い黄色問題
コントラストを無視して定義
システムから除外
or
Slide 88
Slide 88 text
ブライトカラーはどう扱われているか？
IBM: 一貫性を重視し除外
Material Design: 様々な配色を可能にすることを優先
Slide 89
Slide 89 text
Dark Yellow Problem： 濃い黄色問題
プログラムやロジックで
制御することも出来るが、
ロジックが複雑に
Slide 90
Slide 90 text
「そのカラーは選べません！」
とは言えない
Slide 91
Slide 91 text
「濁った色にすれば大丈夫」
大丈夫じゃない
Slide 92
Slide 92 text
解決策！
前景色を変えてしまおう
Slide 93
Slide 93 text
ブライトカラーの場合、
Step500~700の前景色が
黒文字になるようにルールを変える
ブライトカラーの場合、
前景色が黒文字になるように
ルールを変える
Slide 94
Slide 94 text
カラーシステムに応用する
実際に利用されるUI上ではOnAccent、つまり背景色がaccentである場合に
利用される前景色はaccentカラーによって変化するように定義しています。
Slide 95
Slide 95 text
text: {
'--text-primary': { _light: grey[950], _dark: grey[0] },
'--text-accent': { _light: { value: 500, _bright: 800 }, _dark: 400 },
'--text-on-accent': { _light: { value: grey[0], _bright: grey[950] }, _dark: grey[950] },
},
Slide 96
Slide 96 text
運用して見えてきた課題
4
Slide 97
Slide 97 text
運用する中で
見えてきた課題
Slide 98
Slide 98 text
)# 例外的な扱いが生まれてい
# 習得難易度が高
Å# 見た目が魅力的じゃない
まだまだ問題が山積み
見えてきた課題
Slide 99
Slide 99 text
まだまだ
完璧どころではない...
Slide 100
Slide 100 text
次の目的地
5
Slide 101
Slide 101 text
Next Step
Slide 102
Slide 102 text
Next Step:
ロジックの再現性を高める
色の魅力度をあげる
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
カラーパレットのコントラスト比や
明度差分をリアルタイムに可視化
Huetone
Slide 105
Slide 105 text
Press B
Slide 106
Slide 106 text
Next Stepに影響を与えた
Huetoneの設計思想
Slide 107
Slide 107 text
慣れ親しんだ色空間RGB、多くのツールにサポートされてるHSL・HSB
RGBの代替表現として考案されたHSL (色相、彩度、明度) モデルとHSV/HSB (色相、彩度、値、明度) モデルの立体図
Slide 108
Slide 108 text
HSLは直感的なアプローチ
色相 * 彩度 * 明度の3つの変数で色の調整が可能
Slide 109
Slide 109 text
!! HSLを色空間に利用する問題点
直感的なプローチだが、HSLが持つ明度の計算方法による数学的な明度は実際に人間の視覚的には同じように見えない
Slide 110
Slide 110 text
!! HSLを色空間に利用する問題点
実際に「知覚的に均一な色空間で同じメイドと再度を持つ色」はこれ
Slide 111
Slide 111 text
!!
アプローチ：CIELAB(またはLab)の採用
HSLやHSB(HSV)との最大の違いは円筒を埋め尽くしていない点です。
CIELAB色空間が示す領域はコンピューターによって表現できないあるいは人の目では区別不可能な色空間を表します。
Slide 112
Slide 112 text
Huetoneのススメ
カラーパレットのコントラスト比や、人間が知覚可能でかつコンピューターが再現可能な色をリアルタイムに可視化
Slide 113
Slide 113 text
Bad Contrast
WCAG 2: 3.3
Good Contrast
WCAG 2: 4.5
Bad Contrast
WCAG 2: 3.3
Good Contrast
WCAG 2: 4.5
出典：Accessible Palette: stop using HSL for color systems
人間は明るい色のコントラストを
暗い色のコントラストよりも
“高い” と認識する
WCAGが持つ
明度計算アルゴリズムの課題
Slide 114
Slide 114 text
WCAGが持つ明度計算アルゴリズムの課題
WCAG2.1のコントラスト比率では左の暗い色ではAAを示すが、右の明るい色では不十分と判定される。
Slide 115
Slide 115 text
Bad Contrast
APCA/WCAG 3 : -66
Good Contrast
APCA/WCAG 3 :39
Bad Contrast
APCA/WCAG 3 : 60
Good Contrast
APCA/WCAG 3 : -30
出典：Accessible Palette: stop using HSL for color systems
人間は知覚を考慮した計算方式
APCAという
新しいアルゴリズム
Slide 116
Slide 116 text
HuetoneはAPCAに対応済み
Slide 117
Slide 117 text
明度計算ロジックと
コントラスト比のアプローチを変えて
を上げる
色の魅力度
Slide 118
Slide 118 text
他にやりたいこと
らしさの表現幅を広げる
Slide 119
Slide 119 text
Grey Scaleの拡張
よりそのコミュニティのブランドカラーにあったグレーを提供可能にすることで、よりファンにとって身近な存在になることを期待しています。
Slide 120
Slide 120 text
出典：https://www.radix-ui.com/
Styleの拡張
もう一つはRadiusやTypographyなどの選択肢の提供です。このレベルでのTheme選択が実現すると、カワイイポップなコミュニティも、クールでカッ
チリしたコミュニティも、どちらの世界観にも合わせたUIを提供可能になるはずです。
Slide 121
Slide 121 text
終わりに
Slide 122
Slide 122 text
カラーシステムの構築のツラみ
0から調べて、手を動かして...
ってやるの超大変
Slide 123
Slide 123 text
カラーシステムの構築のツラみ
出来るだけ楽したいが、
要件に適合するツールが
あるとは限らない
Slide 124
Slide 124 text
今日伝えられた内容が
いつかのショートカットになれば
Slide 125
Slide 125 text
note書きました（明日公開）
20,000字越えの大作になったので、見かけたら呼んでください。明日公開します。（サムネイルが間に合わなかった）
Slide 126
Slide 126 text
@JIROSH1998
ご清聴ありがとうございました
Thank you!