同じボタンでも、背景が暗くなるだけで別物に見える。同じUIコンポーネントでも、ライトとダークでは視線の流れと情報の優先度がまるで変わる。Makafushigi のデザインシステムを設計しながら、「色と情報の重力」の関係を検証した。
この研究を一言でいうと──明るさが情報の浮き沈みを決めるという見方で、ライトとダークの階層を同時に揃える研究。
出発点：同じ部品が、別の意味を持つ
ダークモード対応は、しばしば「色を反転させる作業」として扱われる。実装すると、まったく違う。同じボタン、同じカード、同じ余白でも、背景が明るいか暗いかで、目が最初にどこへ行くかが変わる。明るい面では濃い要素が沈み込み、暗い面では明るい要素が浮き上がる。部品は同じでも、意味の重みが入れ替わってしまうのだ。
「情報の重力」という見方
そこで画面を「重力のある場」として扱う。明るい要素は浮き、暗い要素は沈む。ユーザーの視線は、その浮き沈みに引っぱられて移動していく。デザインシステムの仕事は、この重力を制御すること——どの情報を浮かせ、どの情報を背景へ沈めるかを、ライト・ダークの両方で意図通りに揃えることである。
画面は、重力のある場だ。
——明るさが、情報の浮き沈みを決めている。
検証：コントラストではなく、階層を合わせる
要になるのは、ライトで成立した階層をダークでもそのまま再現することだ。単純にコントラストを同じ比率に保っても、人間の目はダーク背景でより敏感に明るさを拾うため、優先度が崩れてしまう。数値より、見たときの「重さの順番」を基準に色を調整する——その地道な検証をコンポーネント単位で積み重ねた。
結論：ダークは「もうひとつの真実」
ダークモードは、ライトの劣化コピーでも単なるオプションでもない。それは同じ情報をもうひとつの重力で語り直す、別の真実だ。だからデザインシステムは、片方を作ってから移植せず、最初から二つの場を同時に育てる必要がある。色は、情報の重さを決める設計変数である。
あなたが毎日見ている画面、ダークに切り替えたとき、最初に目が行く場所は変わりますか。