AI サービスらしい配色のつくり方

AI のサービスのサイトを続けて開くと、どれも似た青と紫に見えることがあります。新しさを伝えたかった色が、いつのまにか「よく見る色」になっている。では、AI らしさは、どこから来ているのでしょう。

COLOR JOURNEY の AI シリーズの10のパレットをつくりながら、大事にしたのは色の名前よりも、「暗さ」と「光」の関係でした。

土台は、真っ黒にしない

夜の画面のような暗い土台は、AI らしさのいちばんの下地です。ただ、#000000 の黒は、画面の上で穴が空いたように重く見えがちです。Quiet Circuit の #0A0F1E のように、ほんの少し青を含ませた黒にすると、奥行きのある静けさになります。土台に色の気配があると、上にのせる光の色ともなじみます。

光の色は、ひとつだけ

暗がりの中に小さな光がひとつ灯っていると、画面が静かに考えごとをしているように見えます。Quiet Circuit なら #4C86C6。いちばん暗い #0A0F1E にのせると、コントラスト比は 5.03:1 で、本文の文字に使える基準（4.5:1）を満たします。

ところが、ひとつ明るい面の #14264A にのせると 3.94:1 に下がり、本文には足りません。この組み合わせは、見出しのような大きな文字（3:1 以上）に使うと安心です。光の色は、どの面にのせるかで役割が変わります。

青のほかにも、AI らしい光はある

Midnight Server は、紺の暗がりに琥珀色の #E0A458 を灯しました。#080B12 の上で 9.02:1。冷たい画面の中に、手のぬくもりのような色がひとつ入ると、印象がやわらぎます。

Signal Dawn は夜明けの珊瑚色 #D07A6A（#1A1420 の上で 5.73:1）、Algorithm Garden は葉の緑 #6FA06E（#0E1A12 の上で 5.90:1）。どちらも暗い土台の上で本文の基準を満たしながら、青とは違う物語を持たせられます。

分量は、暗く広く、光は少し

はじめの目安として、いちばん暗い色を土台に6割、その次の2色を面や区切りに3割、明るい色を文字に1割ほど。光の色は、ボタンや状態の表示に、ほんの少しだけ使います。光を広げすぎると、灯りではなく照明になってしまうからです。

よくあるつまずきと、直し方

明るい背景のページで、光の色をそのまま文字にしてしまうこと。Quiet Circuit の #4C86C6 を #EEF4FA の上に置くと 3.43:1 で、本文には足りません。ひとつ暗い #24508A に替えると 7.32:1 になり、ぐっと読みやすくなります。

Neural Bloom でも同じことが起きます。紫の面 #2E2257 の上に #8A72D1 の文字を置くと 3.65:1。明るい #C6B8F0 に替えると 7.77:1 です。

光の色はそのまま文字にせず、文字には同じ色みで明るさの違う色を選ぶ。それだけで、雰囲気を保ったまま読みやすさが変わります。

AI らしさは、特定の色ではなく、暗がりと光の距離から生まれます。AI シリーズの10のパレットは、それぞれ違う光の色を持っています。気になるものがあれば、パレットのページで CSS やトークンを開いてみてください。