見えない層を設計する力: CSS変数と企業の有価証券が教える、表面の下に秩序を作る方法

Jun 12, 2026

1 min read

2 views

67%

なぜ「見えないもの」を先に決めると、全体がうまく回るのか

一見すると、Webデザインのダークモードと企業の有価証券管理は、まったく別世界の話に見える。片方はフロントエンドの実装、もう片方は会計や資本政策の話だ。だが、両者を並べると、ひとつの不思議な真実が浮かび上がる。複雑さを減らす秘訣は、細部を直接いじることではなく、先に「見えないルール」を置くことだ。

ダークモードをきれいに運用するには、色を各コンポーネントにベタ書きしない。まず globals.css で配色の CSS 変数を定義し、次に Tailwind のカスタムカラーへそれを紐づけ、最後に実装ではその抽象化された色を使う。すると、ボタン、背景、文字色がバラバラに見えても、裏側では同じ仕組みで統制される。

企業の保有する有価証券も、表向きは「余った資金の置き場」に見えるかもしれない。しかし、Trading Security なのか、Available for Sale Security なのか、あるいは持ち合い株式なのかで、意味はまったく変わる。そこにあるのは単なる保有ではなく、どう振る舞わせるかを先に決める分類の設計である。

重要なのは、目に見える変化そのものではない。変化が起きたときに、全体がどのルールに従って再解釈されるかである。

この視点を持つと、UI設計と資本政策の間に、驚くほど深い共通点が見えてくる。

表面を直接触ると、システムはすぐ壊れる

多くの失敗は、要素ごとに個別最適を積み上げるところから始まる。Webでは、あるページの背景を少し暗くしたい、ここだけ文字色を変えたい、あのカードだけ境界線を調整したい、といった小さな修正が積み重なる。最初は速い。しかし、色が直書きされていると、後から全体をダークモードにしようとした瞬間に破綻する。変更箇所が多すぎて、どこが本当の基準なのか分からなくなるからだ。

これは企業でも同じだ。資産を「何となく持っている」状態では、景気が変わったとき、株価が動いたとき、資金が必要になったときに、会計上も戦略上も判断が難しくなる。Trading Security は短期売買の対象であり、Available for Sale Security はまた別の意図を持つ。さらに、日本企業に見られる持ち合い株式は、単なる投資ではなく、関係維持や取引の滑らかさを目的にしていることがある。つまり、同じ株式でも、保有の意味づけが違う。

この違いをあいまいにしたままでは、見た目だけ整っていても内部は不安定になる。表面の見栄えや当面の処理にだけ集中すると、システムは局所的には動いても、全体としてはルールが破綻する。ここに共通するのは、「単品の正しさ」と「体系の正しさ」は別物だということだ。

たとえば、デザインで10個のコンポーネントをそれぞれ直接修正したとする。今日の要件には合うだろう。しかし明日、ブランドカラーが変わったらどうなるか。全箇所を再修正するはめになる。会計でも、資産を都度その場しのぎで分類していると、いざ説明責任が求められたときに「なぜそれを持っているのか」を一貫して語れない。偶然の保有は、偶然のデザインと同じくらい脆い。

真に大事なのは、オブジェクトではなく「層」を設計すること

ここで役立つのが、層の発想だ。色そのものを決めるのではなく、まず「色の意味」を決める。現金、利益、投資、関係維持、短期売買、ブランド、アクセント、危険信号。これらはすべて、実体ではなく解釈の層である。層があるから、状況が変わっても再利用できる。

CSS変数はまさにこの考え方を体現している。--color-bg や --color-text のような変数は、具体的な色値ではない。意味を担う。ライトモードでは白と黒に割り当て、ダークモードでは逆転させることもできる。コードの各所は、色の実値を知らなくてよい。各部品が知るべきなのは、値ではなく役割だからだ。

企業の有価証券管理も、実は同じ構造を持つ。ある資産を「短期で利益を取りに行くもの」と見るか、「売る可能性はあるが当面は保有するもの」と見るか、「関係を固定するためのもの」と見るかで、その資産の意味は変わる。重要なのは、保有そのものより、それが組織のどのレイヤーで機能しているかである。

この発想は、あらゆる複雑なシステムに通じる。例えば家でも、家具を部屋ごとに気分で並べるのではなく、照明、収納、導線、視線、温度という層で考えると、模様替えが容易になる。部屋の見た目は変わっても、設計の骨格は保たれる。組織も同じで、目先の案件ではなく、ルール、分類、責任、更新の仕組みを先に決めると強い。

優れた設計とは、すべてを固定することではない。変化しても意味が崩れないように、意味の置き場を分離することだ。

この「意味の置き場」がないと、人は毎回ゼロから判断することになる。ゼロからの判断は自由に見えて、実際には疲弊を生む。逆に、意味の層が整っていれば、判断は速くなる。なぜなら、毎回「これは何か」を考え直す必要がないからだ。

持ち合い株式が示す、システムの本当の目的

ここで少し踏み込もう。持ち合い株式の話は、単なる過去の慣習として片づけるには惜しい。そこには、システムが何のためにあるのかという根本的な問いが隠れている。理想化された資本主義では、資本は効率的に配分されるべきで、保有はリターン最大化のために説明される。しかし現実には、企業は利益だけで動いていない。取引を円滑にする、関係を安定させる、相手の行動を予測可能にする、という目的もある。

これは、ダークモード実装にもよく似ている。純粋に機能だけを見れば、色を都度指定すれば済む場合もある。だが、実際には保守性、テーマ変更、ブランド統一、コンポーネント再利用、アクセシビリティといった複数の目的がある。最適化すべき対象は一つではない。むしろ、短期の見やすさと長期の変更耐性をどう両立するかが問われる。

持ち合い株式が気持ち悪く見える人は少なくないだろう。市場原理から見ると、相互保有はぬるま湯に感じられる。だが、そこにあるのは単なる非合理ではなく、別の合理性だ。相手との摩擦を減らし、関係を安定させ、予測可能性を高める合理性である。問題は、その合理性が明示されないまま続くと、外部からは不透明に見えることだ。

この点で、CSS変数は非常に健全だ。なぜなら、意味の層を明示的に表現するからである。--color-primary が何を意味するかを定義し、その値がライトモードでどうなるか、ダークモードでどう変わるかを明らかにする。つまり、暗黙の持ち合いではなく、明示された契約になる。

企業も本来こうあるべきだ。資産を持つ理由、関係を維持する理由、短期売買する理由が明示されていれば、外部から見ても内部から見ても理解しやすい。見えない層を作ることは、隠すことではない。むしろ、見えないからこそ誤解されやすい前提を、説明可能な形にすることだ。

あなたの仕事や組織に応用するなら何を変えるべきか

この考え方を実務に落とすと、問いはシンプルになる。直接触るべきなのか、先に意味の層を作るべきなのかだ。コード、組織、資産、文章、どれでも同じだ。表面の問題に見えても、根っこには分類の不備や命名の不備、責任境界の不備があることが多い。

たとえばチームでデザインシステムを整えるなら、色を「青」「グレー」と呼ぶだけでは足りない。background, surface, text-muted, danger, success のように、役割で命名する。そうすると、将来ブランドカラーが変わっても壊れにくい。経営で言えば、資産も「なんとなくの保有」ではなく、「流動性確保」「事業提携」「短期収益」「長期安定」など、目的で棚卸しする必要がある。

ここで使える実践的な視点は、次の3つだ。

値ではなく役割で名づける
色、資産、プロセス、人員配置。すべてを具体値ではなく役割で定義すると、変更に強くなる。
変更の影響範囲を一段上で止める
1箇所の変化が全体に波及しすぎるなら、層がない証拠。CSS変数や分類ルールは、波及を制御するためにある。
保有の理由を言語化する
何を持つかより、なぜ持つかを先に説明できる状態にする。説明できないものは、だいたい後で負債になる。

たとえば、あるスタートアップが資金を調達した直後に、余剰資金で個別株を少し買ったとしよう。短期のトレーディング目的なのか、余剰資金の一時保管なのか、戦略的提携の一環なのかで、その判断の良し悪しは大きく変わる。同じように、UIでボタンの色を変えるときも、ただ「こっちの方が見栄えが良い」ではなく、「この状態は警告なのか、主導導線なのか、補助なのか」を決めなければ、後から必ず混乱する。