IPの世界観に寄り添う、マルチブランドなカラーシステム設計

2024年4月23日に行われたFigma Frameworkの登壇資料です。

## セッション概要
Gaudiyでは漫画やゲーム、アイドルといった様々なジャンルのファンコミュニティを提供しています。本セッションではそれぞれのIPが持つ世界観に寄り添い、IPらしさを表現するためのマルチブランドなカラーシステム設計に挑戦してきた過程や現在地、これから目指す先についてお話しします。

Transcript

2. 普段はコミュニティサービスのデザインをしていて、C向け サービスとデザインシステム構築が好きです。 現在はデザイン組織責任者として組織戦略や採用活動も兼任 しています。Gaudiy 6年生。 Digital Product Designer / Head of Design 自己紹介 TORAJIRO Intro
3. 今日のテーマ 0
4. 今日のテーマ ブランドカラーを持たない カラーパレット構築プロセス
5. 今日のテーマ ブランドカラーを持たない カラーパレット構築プロセスのお話
7. マンガやアイドル、ゲームなどのエンタメIPを中心に ファンコミュニティを提供するプラットフォーム
8. IPの持つブランド　＝　コミュニティのブランドカラー User エンタメ IP 公式コミュニティ
9. IPが変われば、提供するブランドカラーも変わる User エンタメ IP 公式コミュニティ
10. Fanlink自体は ブランドカラーを持っていない
11. ブランドカラーを持たない プロダクトの は どうあるべきか? カラーシステム
12. IPの世界観に寄り添う なカラーシステム 変幻自在
13. そんなカラーシステムの 設計プロセスをお話しします
14. はじめに伝えておきたいこと
15. はじめに伝えておきたいこと シチュエーションにおける を選ぼう 最適解
16. はじめに伝えておきたいこと 既存のカラーシステムを利用したり、 ブランドカラーを中心に考えたり、 方法はさまざま
17. はじめに伝えておきたいこと 今日紹介するプロセスは 出来たから取れた選択肢 投資判断
18. はじめに伝えておきたいこと 色の問題に直面した時、 になれば嬉しい 解決のヒント
19. OUTLINE 1 - この取り組みのきっかけ 2 - カラーシステムの方向性の探索 3 - カラースケールの構築 4 - 運用して見えてきた課題 5 - 次の目的地
20. この取り組みのきっかけ 1
21. 当時のカラーパレットが 抱えていた課題
22. カラーパレットが抱えていた課題 1.色の役割が不明瞭で、 使われ方がズレる 2. を 考慮してなく見づらい コントラスト比 3.新しいテーマを 追加する がない ロジック
23. Dark Thema Dark Theme
24. ダークテーマ要望があっても対応できない User Fanlink IP 公式コミュニティ
25. そんなタイミングでダークテーマの要望がやって来た User Fanlink IP 公式コミュニティ
26. さて、どう作ろう？
27. 思い込んでたこと ダークモードは色反転するだけ
28. わかったこと ダークモードは色反転するだけ どうやらそんな単純じゃない
29. 何が大変か 色を反転すればいいだけに 見えることが厄介。 想像よりはるかに複雑。 Caption 耐久年数 イラスト利用 色相定義 濃い黄色問題 Figmaの運用 色相間の明度 状態変化の表現 コントラスト比 命名規則 Variables 実装工数
30. 何が大変か プロセスが進むにつれて、 UIの厄介な課題が表面化する Caption 耐久年数 イラスト利用 色相定義 濃い黄色問題 Figmaの運用 色相間の明度 状態変化の表現 コントラスト比 命名規則 Variables 実装工数
31. 複数のツールを 組み合わせて しなけれ ばならない 試行錯誤 調査 設計 実装
32. カラーシステムの方向性の探索 2
33. 満たすべき要件 1. 意識せず、コントラスト比が担保される 2. 意識せず、ダークモード切り替えが可能
 3. 将来的なカラー拡張が可能
34. 片っ端から事例を調べて いくつか方向性のヒント
35. カラーシステムの方向性の探索 出典：https://www.radix-ui.com/ 1 Radix
36. 出典：https://www.radix-ui.com/ カラーシステムの方向性の探索 1 Radixの特徴：役割を持つカラースケール 各カラースケールは12stepであり、全てのstepに基本的な利用用途が定義されています。 カラースケールを追加すればそのままセマンティックカラーに適用できる柔軟性があるのがRadixの思想の魅力です。
37. 出典：https://www.radix-ui.com/ カラーシステムの方向性の探索 1 Radixの特徴：役割を持つカラースケール 例えば、Step7はBorderのカラー、Step8がHoverなど
38. 出典：https://design.gs.com/foundation/color-system/creating-the-system カラーシステムの方向性の探索 2 Goldman Sachs プライマリ/ブランドカラーを持たず、単一のカラースケールでライトモード / ダークモードの実現が可能
39. 出典：https://www.radix-ui.com/ カラーシステムの方向性の探索 2 Goldman SachsとRadixの違い：Step間の明度差 Radix UIは12のStepに明確な用途が定義されているため、Step間の明度差分が意図して急な増減をするため、 ダークテーマ用のカラースケールが別に設けられている。
40. 出典：https://design.gs.com/foundation/color-system/creating-the-system カラーシステムの方向性の探索 2 GoldmanSachsの特徴：明度の一貫性 コントラスト比を担保したカラースケールの一貫性を重要視しており、 色相間の視覚的な差分が生まれないように明度を調整し、見た目上の差分を減らしています。
41. 出典：https://uxplanet.org/designing-systematic-colors-b5d2605b15c カラーシステムの方向性の探索 3 MineralUI：カラースケールの調査 IBM: アクセシビリティの問題を気にせずに色を使用できる、一貫したルールがある。
 Material Design, : 様々な配色を可能にするが、全体としてパレットに一貫性がない。 ダークテーマ対応 コントラスト比を 担保
42. 出典：https://uxplanet.org/designing-systematic-colors-b5d2605b15c カラーシステムの方向性の探索 3 MineralUI：カラースケールの調査 IBM: アクセシビリティの問題を気にせずに色を使用できる、一貫したルールがある。
 Material Design, : 様々な配色を可能にするが、全体としてパレットに一貫性がない。 ダークテーマ 未対応 コントラスト比を 担保していない
43. カラーシステムの方向性の探索 公共性の高さ プロダクトの特性 と に 合わせて、最適なラインを見極める どれだけ厳格に コントラスト比を 満たすべきか？
44. 探索の結果 目指すべき方向性
45. 開発者は基本的に Semantic Colorを利用するだけ ブランドカラーに加えて、 に選択可能 themeが自由
46. 将来的な状況に対応可能 ロジックを元に Global Colorを追加し、 新しいテーマが追加可能
47. カラースケールの構築 3
48. カラースケールの構築プロセス 1 - ステップとセマンティックのスキーマ定義 2 - グレースケールの構築 3 - カラーパレットへの展開 4 - 色の役割定義と実用化
49. ステップとセマンティックのスキーマ定義 Stepとセマンティックの関係 Global Color Paletteの各ステップには「ターゲットコントラスト」と「対応するSemantic Color」が定義されており、 それに準じたGlobal Color Paletteをスケールとして追加すれば柔軟な色追加が行えるということです。
50. #FAFAFA 25 #F5F5F5 50 #E8E8E8 100 #D1D1D1 200 #B3B3B3 300 #949494 400 #737373 500 #5C5C5C 600 #474747 700 #363636 800 #1B1B1B 900 #141414 950 グレースケールの構築
51. 一般的なスケール展開の 問題点
52. グレースケールの構築 一般的なグレースケールの展開 両端を決めて均一に増減させる
53. グレースケールの構築 1 コントラスト比の 担保が不可 step-60（ライトテーマのベースカ ラー）で、コントラスト比を担保でき てない。 4.5:1未満 60 3.94 #808080 B:50
54. グレースケールの構築 2 状態変化の明度差分 が激しい 直線的な明度変化ではState間の色差 分が激しくなってしまい、状態変化が 滑らかに表現しづらい。 BUTTON BUTTON BUTTON
55. グレースケールを基準に ターゲットコントラストを設定
56. グレースケールの構築 コントラストターゲットを 基準として展開する グレースケールは スケール展開における”見本”
57. #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以上を担保するように設定します。 次にスケールの両極端である最も明るい値と最も暗い値（エンドポイント）を決定します。
58. #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
59. グレースケールの構築 明度の増減パターン 直線的な増減ではなく、ベースポイントに近いステップほど変化幅が大きいパターンを採用しました。
60. グレースケールの構築 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 グレースケールの構築
61. グレースケールの構築 ) 基本構造を決め、背景色と文字色に適用する Semantic Colorに適用する概念定義はAmebaのテックブログ（https://developers.cyberagent.co.jp/blog/archives/26754/#chapter03）で 紹介されている整理を参考にしました。基本的なレイヤー構造はBackground, Surface, Textの3つで表現します。
62. グレースケールの構築 ( 基本構造に基づいて、背景色と文字色を決定 Background, Surface, Textを何種類用意するか決め、グレースケールのどのステップを適用するか決めます。
63. グレースケールの構築 " 背景色と文字色のコントラスト比の検証 可読性を担保するTertiaryまでの文字色と、頻繁に利用される基本的な背景色とのコントラスト比をテストします。
64. グレースケールの構築 カラースケールの “見本”が完成！
65. カラースケールに展開
66. カラースケールの構築 ターゲットコントラストを元に色相の調整 展開する色相がを決めたら、明度と彩度を調整してベースポイントのターゲットコントラストになるように調整します。 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
67. カラースケールの構築 アナログな調整 ステップを展開する
68. カラースケールの構築 モックアップテストの反復 各ブランドカラーごとの見え方をテストし修正ポイントを洗い出し、 反復して調整します。
69. カラースケールの構築 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
70. 色の役割
71. 色の役割 色の役割を定義する ようやく出揃ったカラースケールを用いて、より実用的な色の役割＝Semantic Color（特定の役割を持つ色）を定義していきます。
72. 色の役割
73. 色の役割を定義する カラーシステムを効率的に 活用するための命名規則
74. 色の役割を定義する コード上での表現 役割や機能に基づいて命名し、デザインツールと開発ツールの両方で一貫性が保たれる
75. Figmaで実用化する
76. Variables is Magic Variables is Magic Variables is Magic Variables is Magic Variables is Magic Variables is Magic Variables is Magic Variables is Magic
77. Figmaで実用化する Variables以後の世界 modeの切り替えのみで変更可能
78. Change
79. Figmaで実用化する カラーパレット v1 Release
80. 取り残された問題 !!
81. Bright Colorどうしよう？
82. Bright Colorって？ 前傾色が白文字の場合に コントラスト比を 満たすことが難しい色相
83. Dark Yellow Problem 濃い黄色問題
84. Dark Yellow Problem： 濃い黄色問題 黄色が白文字に対して コントラスト比を満そうとすると、 濁ってしまい黄色に見えない
85. 出典：https://uxdesign.cc/the-dark-yellow-problem-in-design-system-color-palettes-a0db1eedc99d
86. Dark Yellow Problem： 濃い黄色問題 他のカラーシステムでは、 ブライトカラーは どう扱われているか？
87. Dark Yellow Problem： 濃い黄色問題 コントラストを無視して定義 システムから除外 or
88. ブライトカラーはどう扱われているか？ IBM: 一貫性を重視し除外
 Material Design: 様々な配色を可能にすることを優先
89. Dark Yellow Problem： 濃い黄色問題 プログラムやロジックで 制御することも出来るが、 ロジックが複雑に
90. 「そのカラーは選べません！」 とは言えない
91. 「濁った色にすれば大丈夫」 大丈夫じゃない
92. 解決策！ 前景色を変えてしまおう
93. ブライトカラーの場合、 Step500~700の前景色が 黒文字になるようにルールを変える ブライトカラーの場合、 前景色が黒文字になるように ルールを変える
94. カラーシステムに応用する 実際に利用されるUI上ではOnAccent、つまり背景色がaccentである場合に 利用される前景色はaccentカラーによって変化するように定義しています。
95. 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] }, },
96. 運用して見えてきた課題 4
97. 運用する中で 見えてきた課題
98. )# 例外的な扱いが生まれてい # 習得難易度が高 Å# 見た目が魅力的じゃない まだまだ問題が山積み 見えてきた課題
99. まだまだ 完璧どころではない...
100. 次の目的地 5
101. Next Step
102. Next Step: ロジックの再現性を高める 色の魅力度をあげる
104. カラーパレットのコントラスト比や 明度差分をリアルタイムに可視化 Huetone
105. Press B
106. Next Stepに影響を与えた Huetoneの設計思想
107. 慣れ親しんだ色空間RGB、多くのツールにサポートされてるHSL・HSB RGBの代替表現として考案されたHSL (色相、彩度、明度) モデルとHSV/HSB (色相、彩度、値、明度) モデルの立体図
108. HSLは直感的なアプローチ 色相 * 彩度 * 明度の3つの変数で色の調整が可能
109. !! HSLを色空間に利用する問題点 直感的なプローチだが、HSLが持つ明度の計算方法による数学的な明度は実際に人間の視覚的には同じように見えない
110. !! HSLを色空間に利用する問題点 実際に「知覚的に均一な色空間で同じメイドと再度を持つ色」はこれ
111. !! アプローチ：CIELAB(またはLab)の採用 HSLやHSB(HSV)との最大の違いは円筒を埋め尽くしていない点です。 CIELAB色空間が示す領域はコンピューターによって表現できないあるいは人の目では区別不可能な色空間を表します。
112. Huetoneのススメ カラーパレットのコントラスト比や、人間が知覚可能でかつコンピューターが再現可能な色をリアルタイムに可視化
113. 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が持つ 明度計算アルゴリズムの課題
114. WCAGが持つ明度計算アルゴリズムの課題 WCAG2.1のコントラスト比率では左の暗い色ではAAを示すが、右の明るい色では不十分と判定される。
115. 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という 新しいアルゴリズム
116. HuetoneはAPCAに対応⁨⁩済み
117. 明度計算ロジックと コントラスト比のアプローチを変えて を上げる 色の魅力度
118. 他にやりたいこと らしさの表現幅を広げる
119. Grey Scaleの拡張 よりそのコミュニティのブランドカラーにあったグレーを提供可能にすることで、よりファンにとって身近な存在になることを期待しています。
120. 出典：https://www.radix-ui.com/ Styleの拡張 もう一つはRadiusやTypographyなどの選択肢の提供です。このレベルでのTheme選択が実現すると、カワイイポップなコミュニティも、クールでカッ チリしたコミュニティも、どちらの世界観にも合わせたUIを提供可能になるはずです。
121. 終わりに
122. カラーシステムの構築のツラみ 0から調べて、手を動かして... ってやるの超大変
123. カラーシステムの構築のツラみ 出来るだけ楽したいが、 要件に適合するツールが あるとは限らない
124. 今日伝えられた内容が いつかのショートカットになれば
125. note書きました（明日公開） 20,000字越えの大作になったので、見かけたら呼んでください。明日公開します。（サムネイルが間に合わなかった）
126. @JIROSH1998 ご清聴ありがとうございました Thank you!