Summary

2024年に行われたFigmaによるFrameworkというイベントに登壇した際に発表した、Gaudiyで構築したマルチブランドなカラーシステム設計のプロセスについてご紹介しています。

詳しくはこちらのnoteに記載しています。
https://note.com/jirosh1998/n/n22d7c7cadc70

Background

Gaudiy のファンコミュニティプラットフォーム "Fanlink" は、漫画・アイドル・ゲームなど多様なエンタメ IP にホワイトラベルで提供される SaaS です。IP ごとに世界観が異なるため、コミュニティ単位でプライマリーカラーやテーマを自由に切り替えられる柔軟なカラーシステムが不可欠でした。さらに新規 IP 追加に伴い、ダークモード対応が必須となったことが今回のプロジェクトの発端です。

Issue & Goal

既存システムの課題

1. 彩度・明度が低く、Shade が暗すぎて視認性が低下

2. コミュニティカラーが Hover／Pressed などの状態に適応しきれていない

3. WCAG2.1 を満たすコントラスト比が担保されていない

4. ダークモード未対応（Elevation レイヤー設計も未整備）

5. Tailwind 命名規則と噛み合わず、デザイナーとエンジニアの共通言語になっていない

6. カラースケール追加時の拡張ロジックがなく、運用負荷が高い

ゴール／仮説

• IP の世界観に自然にフィットしつつ、Light／Dark 双方で AA 以上のアクセシビリティを確保

• 10+ 色相スケールをベースに、コミュニティごとにプライマリカラーを瞬時に差し替え可能

• デザインと実装の命名規則を統一し、開発スピードを向上

• 3 か月で MVP をリリースし、次期大型 IP への導入を間に合わせる

Solution

リサーチ & ベンチマーク

• Radix UI・Mineral UI・Ameba Spindle など 15 以上の事例を比較分析

• WCAG2.1・Stripe／Shopify Polaris のガイドラインを参照

要件定義

• 5 つの必須要件: <ダークモード・コントラスト確保・柔軟性・拡張性・共通言語化> を合意

グレースケール設計

• HSB 空間で BasePoint(400/500) を CR 4.5:1 に固定

• EndPoint を 10%/90% Brightness に設定し、非線形（山なり）増減パターンで 12 step スケールを生成

Global → Semantic Color パイプライン

• Global 色相 ×12step → Semantic Role (Background / Surface / Text / Object / Border / Overlay…) にマッピング

• コントラスト自動検証スクリプトで全 240 色をチェック

10 色相スケール展開

• 既存ブランドカラーを基準に対照色相を抽出し、Light／Dark を同一ロジックで展開

命名規則 & Token 化

• ui-element / role / state の 3 階層を Figma Variables & Tailwind CSS 変数で同期

• 例: --object-primary-hover

実装 & テスト

• Figma Component Library と StorybookAtomic を同時更新

• 主要 8 画面で A/B モックを作成し、社内レビューと Color Contrast Audit を実施

Result

• アクセシビリティ: 全 UI 要素が WCAG2.1 AA (一部 AAA) を達成

• 運用効率: 新 IP のカラーテーマ追加工数を 90% 削減（1.5 日 → 0.5 日）

• デザイン／開発速度: Tailwind クラス統一により PR 修正回数を 35% 削減

• 導入実績: リリース初月で 5 つのコミュニティに適用、月間アクティブユーザの平均セッション時間が +8.2% 向上

• 社外評価: Framework by Figma 2024 登壇資料として採択され、業界 400+ 名が視聴