前提:多色の原因は「意味色チップの使いすぎ」
過去のHTML成果物では、緑系チップ 3,323回・オレンジ系 2,061回・青系 839回・赤系 742回が使われていた。ブランドの強調色より状態色の方が画面を支配している。以下のB・Cは「色に意味を持たせるのをやめ、黒=終わり/コーラル=手を動かす所、の2語だけにする」案。
A 現行のまま(4つの意味色)
ルール:状態ごとに色を持つ(OK=緑 / 修正=オレンジ / NG=赤 / 情報=青)。今のbrand.cssの実態。
結論 s3系は継続、s1系は本日で停止
累計プラスのCPは残し、2日連続で赤字幅が広がった1本だけ止める。
| CR | 判定 | コメント |
|---|---|---|
demo_ko_s3_p12 | OK | 累計プラス。触らない |
demo_ko_m2_p8 | 修正 | 冒頭だけ差し替えて再入稿 |
demo_ko_s1_p4 | NG | 2日連続赤字。本日停止 |
demo_ko_m5_p2 | 様子見 | 配信2日目。判定は明日 |
B 絞り込み(クリーム+黒・グレー+コーラル1色)
推しルール:色は「結論」と「手を動かす所」にだけ使う。OK=グレー枠(素通り)/修正=コーラル印(やること)/NG=黒ベタ(終わり)。背景クリームとコーラルは今のトークンのままなので、web_uiとの統一とtokens.jsonを崩さない。
結論
s3系は継続、s1系は本日で停止
累計プラスのCPは残し、2日連続で赤字幅が広がった1本だけ止める。
| CR | 判定 | コメント |
|---|---|---|
demo_ko_s3_p12 | OK | 累計プラス。触らない |
demo_ko_m2_p8 | 修正 | 冒頭だけ差し替えて再入稿 |
demo_ko_s1_p4 | NG | 2日連続赤字。本日停止 |
demo_ko_m5_p2 | 様子見 | 配信2日目。判定は明日 |
C 白紙(純白+黒・グレー+コーラル1色)
ルール:Bと同じ語法のまま、背景を純白・影なしにして紙のドキュメントに寄せる。一番雑誌っぽいが、クリーム基調のweb_ui・既存成果物とは見た目が分岐する。
結論
s3系は継続、s1系は本日で停止
累計プラスのCPは残し、2日連続で赤字幅が広がった1本だけ止める。
| CR | 判定 | コメント |
|---|---|---|
demo_ko_s3_p12 | OK | 累計プラス。触らない |
demo_ko_m2_p8 | 修正 | 冒頭だけ差し替えて再入稿 |
demo_ko_s1_p4 | NG | 2日連続赤字。本日停止 |
demo_ko_m5_p2 | 様子見 | 配信2日目。判定は明日 |
横並び比較
| 観点 | A 現行 | B 絞り込み | C 白紙 |
|---|---|---|---|
| パッと見の印象 | にぎやか。良くも悪くもツール画面 | 静か。判定だけ浮き上がる | 一番雑誌・紙っぽい |
| 判定の追いやすさ | 色が4つあり視線が散る | 黒=終わり/コーラル=やること の2語で迷わない | Bと同じ |
| AIっぽさの抜け | 抜けない(多色チップが典型) | かなり抜ける | 最も抜ける |
| web_uiとの統一 | そのまま | 保てる(トークン値は不変、使い方だけ絞る) | 分岐する(背景・影の思想が変わる) |
| 移行コスト | ゼロ | 小。brand.cssのチップ・ボタン改訂+カタログ再スタイルのみ | 中。tokens.json分岐かweb_ui側の追随が必要 |
推しと次の一歩
推しは B
「白グレー黒+1色」の狙い(静かで判断が速い)はBで十分達成でき、クリーム背景とコーラルを残すのでweb_ui・既存220件の成果物と地続き。色の値は一切変えず「使い方のルール」を絞るだけで済む。紙感を最優先したい時だけCに振る。
使用ルールの書き直し — DESIGN.mdの色節を「黒=終わり/コーラル=やること・結論。意味色チップは廃止」に改訂(tokens.jsonは触らない)
部品の改訂 — brand.cssのチップ・ボタン・KPIをB仕様へ。32ブロックカタログを再スタイルし、実際に使う1軍だけに絞る
claude designへ同期 — トークン見本・1軍ブロック・型テンプレをカード化して新規プロジェクトへ。以降はそこで磨いてローカル正本に戻す