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