UI配色を3回全面刷新しても破綻しなかった理由 〜デザイントークンの単一情報源と「上げ赤・下げ緑」の死守〜

画面の配色を、まるごと全部ひっくり返すこと3回。それでも、一度も変えなかった色が2つだけあります。

日本株のAI銘柄スクリーニング＆継続学習端末「ALPHA FORGE（アルファフォージ）」を、Claude Code と二人三脚で個人開発しています。今回は【事件簿】回。といってもバグ障害ではなく、UIの配色を短期間に何度も全面的に作り変えたドタバタ劇と、それを手戻りなく爆速で回せたCSS設計のお話です🎨

【要約：この記事で伝えたいこと】

1. 黒と青の無骨な端末風で始まったUIは、焦げ茶と橙、明るいクリーム色、モックの全面適用と、わずか1週間で3回ひっくり返った🔄
2. すべての色を1枚のCSSファイル（デザイントークン）に集約していたため、全画面の配色替えはCSS変数の書き換えだけで一瞬で完了した✨
3. 持ち帰り：ブランドのテーマ色を何度変えても、「上げは赤、下げは緑」という業界標準ルールだけは別の柱として絶対に動かさない

※本記事はnote連載［ALPHA FORGE 開発秘話 #17］の技術的な部分を、フロントエンドエンジニア向けに再構成したものです。

🖤 最初は、黒と青の「プロ端末」だった

ALPHA FORGE の画面開発当初、配色は「ほぼ黒に近いダークグレーの背景に、鮮やかな青のアクセント」という、海外の金融トレーディング端末風の無骨なデザインでした💻

初期の仕様書にそう書いてあったからです。数千銘柄の数字やチャートが並ぶため、「暗い背景のほうが目に優しくてプロっぽいだろう」という、よくある思い込みもありました。

ところが開発3日目の9月13日、「もう少し親しみやすく、日常的に眺めたくなる色にできないか…」と思い立ち、AIデザインツールの Claude Design で「モデルラボ」画面のモックを作ってみました。
出来上がったのは、温かみのある焦げ茶の背景に、オレンジとオリーブグリーンが映えるカフェのような配色です☕

これを Claude Code に見せると、AIはまずモデルラボだけに反映してくれました。実画面を見た瞬間、「こっちのほうが断然いい！」と一目惚れした私は、「このスタイルを全画面で踏襲してください！」と依頼。ここで1回目の「全面ひっくり返し」が発動しました💪

わずか1週間のあいだに、全画面の配色を3回ひっくり返した

🔄 参考デザインどうしが、まさかの真っ向対立

勢いに乗った私は、ダッシュボードや銘柄一覧のモックも作成し、Claude Code へ渡しました。「これも全部反映して！」と頼んだのですが、AIがファイルを解析した直後、ピタッと手が止まりました🤖

暗い焦げ茶と明るいクリーム色。どちらの参考デザインに合わせるのか、決めるのは人間だった

「お待ちください。先ほどのモックは背景が焦げ茶色（ダーク系）でしたが、今回渡された3枚は、すべて明るいクリーム色（#f5ead8）のライトテーマです。どちらの系統を採用しますか？」

なんと、自分で作った参考デザイン同士が、ダーク系とライト系で完全に真っ向対立していたのです😱

AIに言われるまで無意識でした。ここでAIが勝手に倒さず、「どっちにしますか？」と立ち止まってくれたのはファインプレーでした。

「明るいクリーム色でいきます！」と即答し、早くも2回目のひっくり返しが決定しました🍦

📏 「なんとなく読める」を許さないコントラスト計算

しかし、背景をクリーム色に変える作業は、背景色を塗り替えて終わり…とはいきません。
暗い背景でクッキリ見えていた赤や緑の数字が、明るい背景では薄くなり、絶望的に読みにくくなってしまったのです😨

AIが1色ずつ明度を計算し、基準を満たすまで調整した

ここでAI（Claude Code）が真価を発揮しました。
人間なら「なんとなく濃くしたから読めるかな？」と感覚で済ませがちなところ、AIはアクセシビリティ規格（WCAG 2.2 AA）を持ち出しました。

「本文文字や重要インジケータとして使うには、背景とのコントラスト比が 4.5:1 以上必要です」

AIは全文字色について背景色とのコントラスト比を計算し、基準に届かない色を一段深いトーンへと再調整していきました📐

/* クリーム背景（#f5ead8）に対するコントラスト比 4.5:1 をクリアする調整 */
--color-term-green: #1f6b3a;  /* 明るい緑だと背景に溶けるため、深いフォレストグリーンへ */
--color-term-red:   #b32424;  /* 背景とのコントラストを確保した濃いレッド */
--color-accent:     #8c491a;  /* テキストとして読める濃さのアンバーオレンジ */

数字の裏付けをもって美しさと視認性を両立させる。まさに頼れる相棒でした✨
そして9月20日、フォントやカード部品を刷新した最終モックを適用し、3回目のひっくり返しが完了しました🎉

🎨 1枚のファイルに色を集めておく（デザイントークンの威力）

1週間で全画面の配色を3回もひっくり返したのに破綻しなかった理由。それは、初日に交わした**「デザイントークンの単一情報源」**という約束にありました📜

色は1枚のトークンファイルに集める。ブランドの色を入れ替えても、上げ赤・下げ緑のルールは別の柱として残る

ALPHA FORGE では、色や余白、フォントを frontend/src/app/tokens.css という1枚の CSS ファイルに変数として集約しています。各コンポーネントでのカラーコード生書きは一切禁止し、必ず var(--color-bg-primary) のようにトークン経由で参照させていました。

/* tokens.css: トークン定義の例 */
:root {
  /* ベーステーマ */
  --color-bg-primary: #f5ead8;
  --color-bg-card:    #ffffff;
  --color-text-main:  #2b231a;
  --color-text-muted: #6e6459;
  --color-border:     #e2d5c3;

  /* アクセント */
  --color-brand:      #c67139;
  --color-sub:        #7a8a5e;
}

そのため、テーマをガラリと変えたいときも各コンポーネントを直して回る必要はありません。tokens.css を書き換えるだけで、アプリ全体が一瞬で新しいテーマに染まります✨
実際、焦げ茶からクリーム色へ変えた2回目の差分は、ファイル2つ、わずか50行足らずでした。

🇯🇵 「上げ赤・下げ緑」だけは、何があっても絶対に変えない

そして、3回配色をひっくり返しても、最初から最後まで1ミリも変えなかった「聖域」があります。
それが、株価の騰落を表す**「上げは赤、下げは緑」**です📈📉

日本の証券会社では株価の上昇を「赤」、下落を「緑」で表すのが標準です。しかし海外では逆（上げが緑、下げが赤）が多く、海外製ライブラリをそのまま使うと高確率で海外仕様に汚染されます。

そこで ALPHA FORGE では、ブランド配色とは完全に切り離した独立のドメイン規約として騰落色をトークン化していました。

/* ドメイン固有のセマンティックカラー定義（tokens.css より） */
--color-term-green: #1f6b3a;
--color-term-red:   #b32424;

/* 方向セマンティック（国内証券標準：上げ＝赤／下げ＝緑） */
--color-gain: var(--color-term-red);
--color-loss: var(--color-term-green);
--color-flat: var(--color-text-muted);

画面内のどこであっても、上昇には --color-gain、下落には --color-loss を通す。
実は3回目のモックで、デザイナーAIが気を利かせてローソク足にブランドのオレンジとオリーブを当てていました😅
しかし Claude Code は「上げ赤・下げ緑はドメイン規約のため変更不可」として赤と緑を死守しました。

「ブランドとして自由に変えていい色」と、「ドメインの常識として変えてはいけない色」。
この2つの境界線を事前に明文化していたからこそ、デザインの遊び心と金融端末としての実用性を両立できたのです🛡️

🧰 プロンプト術：デザインは言葉でなく、モックで渡す

「温かみのある感じで」「プロっぽく」。言葉だけでデザインを伝えようとすると、人間とAIの解釈はほぼ100%ズレます🙈
今回スムーズに進んだのは、言葉で語るのをやめ、目に見えるファイルで会話したからでした。

言葉の「温かみ」より、1枚のモックファイル

• 言葉で抽象的に指示せず、HTMLやデザインツールのモックファイルをそのまま渡す: AIがCSS構造を直に抽出できる
• 「このスタイルを全画面で踏襲して」と適用範囲を明示する: 部分適用で止まらないようスコープを指示
• モック同士に矛盾が出たら、AIに勝手に判断させず人間が選ぶ: 立ち止まって質問させる関係を作る
• 「上げ赤・下げ緑」など絶対に崩せないドメインルールは事前に固定しておく: ブランドカラーと混ぜない
• カラーコードの生書きを禁止し、デザイントークンを単一情報源にしておく: 変更の爆発半径を1ファイルに封じ込める

人間がモックを作り、AIがデザイントークンとアクセシビリティ計算に落とし込んで全画面へ適用する。「人間がセンスで作り、AIが構造で守る」分担は、個人開発で最高の武器になります💪

🤝 まとめ：今回の役割分担

人間がモックを作り、AIが全画面へ精密に当てる✨

• 作ったのは人間🎨: モック作成と、相反するデザイン案から「クリーム色」を選び取る意思決定
• 当てたのはAI🛠️: トークン抽出、WCAG 2.2 AA コントラスト比の計算、全画面への適用
• 守ったのはルール📜: 「上げ赤・下げ緑」の国内証券ルール。事前に決めた憲法がデザインの暴走を防いだ

次回は【事件簿】回。「台帳を汚さない『試し打ち』モード ― 確度38%で却下された銘柄」。気になる銘柄でAIの思考プロセスをライブ観察したい！でも、その1回が継続学習の記録を汚してはならない…という二律背反を解いたお話です🧪

☕ note.comで開発秘話と毎朝の検証ログを連載中

note.comでは、「ALPHA FORGE」の開発秘話と、毎朝のアルゴリズム検証ログを公開しています。

👉 元記事（note連載第17話）:

---

免責事項
本記事は個人開発およびAIエージェントを活用したシステム開発の技術記録です。特定の銘柄の売買推奨や投資助言を行うものではありません。本ツールは証券会社等への発注機能を持ちません。記事中の日付・発言・計測時間は開発時の記録にもとづくもので、実行環境やネットワーク状況により異なります。紹介したコードやルールは要旨であり、実際の設定ファイルそのものではありません。

⚠️ 【システム検証記録に関する免責事項・注意事項】

• 本記事は、独自開発アルゴリズム「ALPHA FORGE」の動作検証およびデータ分析過程を公開する技術・運用の個人的な記録ログです。
• 掲載されているすべてのデータ（各スコア、基準観測値、統計的変動上限、シナリオ無効化水準など）は、過去の市場データに基づき数式（ATR等）により機械的に算出されたバックテスト・シミュレーション用のパラメータであり、特定の有価証券の売買勧誘、取引の推奨、投資助言・代理行為を目的としたものではありません。
• また、将来の株価変動や運用成果を保証するものではありません。実際の投資判断および最終決定は、必ずご自身の責任と判断において行っていただけますようお願いいたします。