HELMLAB: An Analytical, Data-Driven Color Space for Perceptual Distance in UI Design Systems

本論文は、UI デザインシステムにおける知覚的距離をより正確に評価するために、CIEDE2000 よりも 20.2% 低い STRESS 値を達成する 72 パラメータの解析的色空間「HELMLAB」を提案し、その可逆性や実用的なユーティリティ機能も併せて紹介しています。

要約

HELMLAB：デザインのための「新しい色のものさし」

こんにちは！今日は、デジタル画面（スマホや PC）のデザインをする人たちのために作られた、とても面白い新しい研究についてお話しします。

この研究の名前は**「HELMLAB（ヘルムラボ）」**です。

想像してみてください。あなたが画家で、キャンバスに絵を描いているとします。でも、使っている「色のものさし」が少し壊れていると想像してください。
「赤と青の中間」を混ぜようとしても、予想と違う色が出たり、グレーの色を混ぜると、なぜか少しだけ青っぽく見えたり……。そんな困ったことが、今のデジタルデザインの「色の基準」には起こっていたのです。

HELMLAB は、その「壊れたものさし」を、AI（人工知能）の力を借りて作り直した、完璧な新しい色のものさしです。

---

1. なぜ新しいものが必要だったの？

これまで、デザイナーたちは「CIEDE2000」という古いものさしを使っていました。これはとても有名ですが、少し古く、「人間の目がどう感じているか」を完全に捉えきれていませんでした。

• 問題点： グレー（無彩色）を混ぜるつもりが、少しだけ色が混じってしまったり、青いグラデーションを作ろうとすると、色がムラになって見えてしまったりしました。
• 結果： デザインのボタンや背景色を調整するときに、「もっと明るくしたいのに、なぜか色が変になる」といったイライラが生まれていました。

HELMLAB は、**「人間の目が実際にどう色を見ているか」**というデータを 3,800 組以上も使って、AI に「一番しっくりくる色のルール」を学習させました。

2. HELMLAB のすごいところ（3 つの魔法）

HELMLAB は、72 個の「調整ネジ」を AI が自動で回して、完璧なバランスを見つけました。その中でも特にすごいのは 3 つの魔法です。

🪄 魔法①：「グレーは絶対にグレー」にする（中性補正）

これまでのものさしでは、真っ白な紙に少しだけ色がついて見えることがありました。HELMLAB は、**「グレーは 100% グレーでなければならない」**というルールを厳格に守ります。

• 例え話： 料理で「塩味」を出そうとしたら、なぜか少しだけ「レモンの酸味」が混じっていたら嫌ですよね？HELMLAB は、その「余計な酸味（色）」を完全にゼロにします。これにより、グラデーションが非常に滑らかになります。

🪄 魔法②：「青い空」のムラを直す（青帯の修正）

これまでのルールでは、空のような「青から水色」へのグラデーションを作ると、色が飛び飛びになって見えてしまうことがありました。

• 例え話： 階段を登るつもりが、3 段目だけが突然 10 段分高くできていて、つまずいてしまうようなものです。HELMLAB は、この「青い空の階段」を、一歩ずつ均等になるように直しました。

🪄 魔法③：「色」と「明るさ」の関係を正す（ヘルムホルツ・コールラウシュ効果）

人間は、同じ明るさでも「鮮やかな色」は「白っぽい色」よりも明るく感じます。

• 例え話： 真っ赤なリンゴと、白っぽいリンゴが同じ重さ（明るさ）でも、赤いリンゴの方が「重そう（明るそう）」に見えますよね？HELMLAB はこの「人間の目の錯覚」を計算に組み込んでおり、より自然な色合いを実現します。

3. どれくらいすごいのか？

研究者たちは、この新しいものさしをテストしました。

• 結果： 古いものさし（CIEDE2000）に比べて、色の違いを予測する精度が 20% 以上向上しました。
• 逆算も完璧： 「色を数値に変換」して、「また色に戻す」作業をしても、元の色と 100 兆分の 1 以下の誤差しか出ません。つまり、データとして壊れることがありません。

4. 私たちの生活にどう役立つの？

これは単なる研究論文ではなく、実際に使われるツールとして作られています。

• アプリや Web サイトのデザイン： 開発者が「ダークモード（暗い画面）」と「ライトモード（明るい画面）」に切り替えるとき、色が不自然にならないように自動調整できます。
• アクセシビリティ： 文字と背景のコントラスト（見やすさ）をチェックするツールが、より正確に「見やすいか」を判断できるようになります。
• デザイナーの負担軽減： 「この青、ちょっと違う気がするな…」と悩む時間が減り、直感的に美しい色を作れるようになります。

まとめ

HELMLAB は、**「人間の目と脳の仕組み」を AI に学ばせて作られた、デジタルデザインのための新しい「色の言語」**です。

これまでの「不器用なものさし」を捨てて、より自然で、滑らかで、美しい色体験を世界中のアプリや Web サイトにもたらすための、素晴らしい一歩です。

今後は、この技術がスマホのアプリや Web サイトのデザインに組み込まれ、私たちが毎日見ている画面が、より心地よいものになっていくことを期待しましょう！

技術概要

HELMLAB: UI デザインシステム向けデータ駆動型解析的色空間

論文の技術的サマリー（日本語）

1. 背景と課題

UI デザインシステムにおいて、色空間には以下の 3 つの要件が同時に満たされる必要がありますが、既存の手法ではこれをすべて同時に達成できていませんでした。

1. コントラストチェックなどのための高精度な知覚的距離予測（CIEDE2000 などの標準）。
2. グラデーション補間やデザイントークン生成のための「無彩色軸の完全な整合性」（グレーが完全に $a=b=0$ となり、彩度が 0 になること）。
3. プログラムによる色操作のための適切な色相アライメント（RGB 原色などが期待される色相角に位置すること）。

既存の主要な色空間（CIE Lab, CIEDE2000, Oklab, CAM16-UCS, IPT など）は、いずれもこの 3 つの要件のバランスが崩れており、特に CIEDE2000 は距離予測は優れているものの計算が複雑で、Oklab は単純だが距離予測精度が低いなどの課題がありました。

2. 提案手法：HELMLAB

著者は、CIE XYZ から色空間への変換プロセス全体を「72 個の学習可能パラメータを持つ単一のシステム」として捉え、最大の色差データセット（COMBVD）に対してエンドツーエンドで最適化する新しい色空間「HELMLAB」を提案しました。

2.1 変換パイプライン（11 ステージ）

HELMLAB の前方変換は、以下の 11 ステージで構成され、すべてがデータから学習されます。

1. コニャ応答（9 パラメータ）: 学習された $3\times3$ 行列 $M_1$ により XYZ をコニャ応答信号へ変換。
2. 冪圧縮（3 パラメータ）: 各チャネルに符号付き冪圧縮を適用（CIE Lab の立方根 $\gamma=1/3$ を一般化し、最適化された値は約 0.4）。
3. Lab 投影（9 パラメータ）: 圧縮信号を対抗チャネルへ投影する行列 $M_2$。
4. 色相補正（8 パラメータ）: 4 調和項のフーリエ回転を用いて、系統的な色相歪みを修正。
5. ヘルムホルツ・コールラウシュ埋め込み（6 パラメータ）: 彩度が高い色は同じ輝度でも明るく見える現象（H-K 効果）を、彩度に依存する重み付き項として明度チャネルに直接埋め込む。
6. 明度洗練（8 パラメータ）: 3 次多項式と暗部での指数圧縮、色相依存の加算項により、明度と色相の相互作用を修正。
7. 彩度処理（18 パラメータ）: 色相依存スケーリング、非線形彩度冪、明度依存スケーリング、明度×色相相互作用の 4 段階で構成される複雑な処理。
8. 色相依存明度（4 パラメータ）: 残りの明度 - 色相相互作用を捕捉。
9. 無彩色補正（Neutral Correction）: 独立した冪指数により無彩色軸がずれる問題を解決。256 段階のグレーを通じた誤差を PCHIP 補間で記録し、変換後に誤差を減算することで、グレーを厳密に $a=b=0$ に強制する。
10. 剛体回転（$\phi$）: 色相角の整合性を改善するため、$(a, b)$ 平面を $-28.2^\circ$ 回転させる。これは等長変換（isometry）であるため、距離メトリックには影響を与えない。

2.2 距離メトリック

HELMLAB は、CIEDE2000 の考え方を踏襲しつつ、データから学習されたペア依存の重み付け（明度・彩度）、ミンコフスキー指数、単調圧縮を含む独自の距離メトリック（7 パラメータ）を採用しています。これにより、色空間変換と距離計算の両方が最適化されます。

3. 主要な貢献

1. 高精度な色差予測: COMBVD データセット（3,813 色のペア）において、STRESS 値が 23.30 となり、CIEDE2000（29.18）より 20.2% 改善。
2. 無彩色の完全な整合性: 無彩色補正により、すべてのグレーに対して彩度 $C < 10^{-6}$ を保証し、グラデーション生成時の色味混入を排除。
3. 色相アライメントの改善: 剛体回転により、RGB 原色などの色相誤差を RMS 18.1°まで低減（距離メトリックを損なわずに達成）。
4. H-K 効果の埋め込み: 明度が彩度に依存する構造を学習により実装。
5. 青帯（Blue-band）の最適化: 青 - シアン領域の勾配非一様性を 8.9 倍 改善するサブデータセットペナルティを導入（STRESS 増加はわずか +0.08）。
6. 実用ツール: ガマットマッピング、WCAG 準拠のコントラスト調整、CSS/Android/iOS 用トークンエクスポート機能を提供。

4. 評価結果

• 色差精度: COMBVD における STRESS は 23.30。CIEDE2000（29.18）や Oklab（47.46）を大幅に上回る。
• クロスバリデーション:
  • He et al. 2022 データセット: STRESS 30.3（CIEDE2000 の 32.6 より良好）。
  • MacAdam 1974 データセット: STRESS 20.3（CAM16-UCS の 18.7 に次ぐ 2 位）。
• 生成品質: 無彩色補正により、グレーの彩度漏れが完全に解消され、デザイントークン生成に利用可能。
• 逆変換精度: 丸め誤差を含めた往復変換誤差は $10^{-14}$ 以下。
• アブレーション研究: 色相補正（+15.5 の STRESS 悪化）と H-K 埋め込み（+4.0 の悪化）が特に重要であることが示された。

5. 意義と結論

HELMLAB は、UI デザインシステムの実務ニーズ（sRGB/P3 ガマット、スクリーン表示、ダークモード対応）に特化しつつ、心理物理データに基づいて色空間変換と距離メトリックを同時に最適化した画期的なアプローチです。

特に、「測定（距離予測）」と「生成（グラデーション・トークン）」の両立を実現した点が最大の特徴です。従来の手法では、距離精度を追求すると無彩色軸が歪み、逆に無彩色を厳密にすると距離精度が落ちるというトレードオフが存在しましたが、HELMLAB は「無彩色補正」というポスト処理ステップを導入することで、このジレンマを解決しました。

この研究は、Web やモバイルのデザインシステムにおいて、より知覚的に均一で、かつプログラム的に扱いやすい色空間の標準となり得る可能性を示唆しています。オープンソースとして実装が公開されており、実際のデザインワークフローへの導入が期待されます。