テーマだけ茶色くなって、アイコンは青いまま — 152個の配色を一括で変えた

全部終わってから、色が気になった

やることが一段落した日に、気になったのは見た目だった。

NGW には表示スタイルという着せ替えがある（ひとりのワガママは、みんなの設定で書いた個人設定のひとつだ）。dark、light、cerulean。そこへ新しく Cacao を足した。ヘッダーが #5c3a2c の、濃い茶色のやつだ。

名前の由来は屋号から取った。そのまた由来は最後に書く。

ところが、ヘッダーを茶色にして画面を開くと、アプリ一覧のアイコンだけが青かった。 152個ぜんぶ、#1976d2 の Material Design 配色のまま。PNGからSVGへで全点をベクターに置き換えたときに決めた、青×橙の色だ。

茶色の額縁に、青い絵が並んでいる。気になり出したら止まらなくなって、「アイコンを全部 Cacao 配色に寄せよう」と言った。ここから半日ぶんの記録になる。

152個のうち132個は、同じ絵だった

まず1枚読んだ。冒頭にこう書いてあった。

<!-- 共通カレンダー基盤（改変禁止・全アイコン同一） -->
<rect ... fill="#ffffff" stroke="#1976d2" stroke-width="4.2"/>
<path ... fill="#1976d2"/>

152個のうち132個が、このカレンダーの外枠・ヘッダー・ドットをそのまま使い回していた。アイコンごとに違うのは右下の小さなバッジだけ。

つまり、色の対応表を1つ作れば132ファイルへ機械的に展開できる構造だった。SVG にした狙いがここで効いた。

役割	旧（青）	新（カカオ）
主線・ヘッダー・シンボル	`#1976d2`	`#843c0c`
濃色（タブ・鋲）	`#135ba1`	`#5c3a2c`
淡色ドット	`#a9cbe8`	`#e0c3a3`
淡色面（日付マスなど）	`#d7e4f3`	`#ead9c2`
クリーム地	`#eaf1f8` ほか3種	`#f7ecdf`

残る20個はロゴ・国旗・職員イラストで、元から個別配色だから対象外。先に grep で色の出現回数を数えて、「変えるべき色」と「触ってはいけない色」を分けてから置換した。置換する前に分類する。順番を逆にすると、国旗の青まで茶色になる。

直したのは「出力」だけで、「元」を直していなかった

132ファイルの見た目が揃った。報告しかけて、手が止まった。このアイコン群には再生成の仕組みがある。

ngw/icon/*.svg … アプリが実際に読む最終ファイル
ngw/tools/iconBase/*.svg … 内製ツール NGWIconMaker が保存のたびに読み直す元テンプレート
ngw/tools/iconBase/params.json … 1個ずつの拡大率・オフセット・ハローなどの調整値

私が直したのは最初の1つだけだった。誰かが NGWIconMaker で1個でも「保存」を押せば、青いままの iconBase から再生成されて、その場で Cacao 化が巻き戻る。

「出力を直した」と「元を直した」は別の作業だ。再生成の仕組みを持つ相手では、どちらが本物かを先に決めてから触る。 設定ファイルでも、キャッシュでも、ビルド成果物でも同じことが起きる。iconBase にも同じ対応表を当てて、こちらもバックアップを取ってから置換した。

内製ツールが、4日前に塞がれていた

NGWIconMaker を開こうとしたら Apache が 403 を返した。ログはこう出ていた。

AH01630: client denied by server configuration: /var/www/html/ngw/tools/NGWIconMaker.php

設定を追うと、4日前（2026-08-23）に意図して塞いだものだった。理由はコードを読めばすぐ分かる。

$ok = @file_put_contents($iconPath, $svg);
...
else { @chmod($iconPath, 0666); ... } // 次回以降どのユーザーからも上書き可に

認証なしの POST 一発で SVG を書き換え、chmod 0666 までする。外から直接叩ければ、webroot に「誰でも書けるファイル」を量産する踏み台になる。開発用に作った道具の、開発用のままの手加減だ。

対応は全開放ではなく、開発機だけに限定して再開放。Require ip で開発サーバ自身と MacStudio に絞った。

状態	誰が読めるか
修正前（〜2026-08-23）	誰でも（意図せず公開）
修正直後（2026-08-23）	誰も読めない（HTTP 全遮断）
今回（2026-08-27）	開発サーバ自身 + MacStudio のみ
配布先（未着手）	ツール自体を dist から除外する予定

ここで別の宿題が浮かんだ。配布先のデモ機・現地機には、この穴がそのまま乗る。 dist を作る手順に ngw/tools を落とす仕組みが、まだどこにも無かった。塞いだ理由を読んだから、配る前提でも読み直すことになった。

AIが道具に機能を足して、私がそれで遊ぶ

今回いちばん書きたいのはここだ。「AIが色を変えました」で終わらなかった。

AIが152枚を一括で Cacao 化する。機械的で、人がやると退屈で時間がかかる作業。
私が NGWIconMaker を開いて、「配色をもっと自由に試したい」と言う。
AIがツールに配色パレット編集機能を足す。6つの色役割をカラーピッカーで持ち、選択中の1個だけでなく一覧のサムネイル全部にリアルタイムで反映する。
私がゴールド系の配色を実際に試して、「全アイコンを再ビルド」ボタン（これもAIが足した）で129ファイルに反映する。

ここまで数分だった。AIが一括変換の担当で、人間が微調整の担当という分担ではなく、AIが微調整の道具そのものを太らせて、私がその道具で遊ぶ形になった。手を動かす場所が、アイコンからツールへ一段上がった感じがある。

ついでに1つ直した。プレビュー画面には背景の見本が4色あったが、これは実テーマと微妙にズレた「それっぽい色」だった。実テーマの CSS 変数を数えたらちょうど5つあったので、見本を実物の色に差し替えた。皮肉なことに、元の4色に Cacao は入っていなかった。 アイコンが取り残されていたのと、同じ取り残され方をしていた。

AIの動作確認と、私のブラウザ操作が同じサーバでぶつかった

機能を足した直後、AIは curl でエンドポイントの動作確認をしていた。その裏で、私はブラウザでゴールド配色を試していた。同じ URL に向かって、同時に。

気づいたきっかけは、私が投げたこの一言だった。

緑は、全アイコンを再ビルドで合ってますか

ボタンの挙動を「全件」だと思っていたが、実際は「変更分だけ」だった。この確認がなければ誤解したまま使い続けていたし、会話がここで止まったおかげで、直後の事故にも気づけた。

ファイルの更新時刻を並べて再構成すると、こうなっていた。

時刻	誰が	何をした
11:4x	AI	curl でパレット保存をテスト（検証用の仮色）
11:43:39	私	ブラウザでゴールド配色を選び、全アイコン再ビルド
11:48:05	AI	curl で個別アイコンの再ビルドをテスト（その時点の永続パレット＝私のゴールドを巻き込んだ）

AIのテストが私の操作に割り込んで、1個だけ拡大率とハローが初期値に戻っていた。

犯人が分かったのは stat だった。git diff は「何が変わったか」は教えてくれるが、「誰の操作が先だったか」は教えてくれない。 ファイルの更新時刻を時系列に並べて、初めて割り込みの形が見えた。

直し方は「私の実験（ゴールド配色）は消さず、AIの事故（1個だけ違う値）だけ戻す」。どちらを残すかを取り違えると、良いほうの作業を消す。

残っているのは、取説の中の青いアイコン

アプリのアイコンは茶色くなった。表示スタイルも揃った。それでも青が残っている場所が1つある。取説だ。

操作マニュアルの画面写真は、Cacao 化する前に撮ったものだ。本文は茶色い画面を説明しているのに、貼ってある図版の中だけがまだ青い。読む人にとっては、これが一番わかりにくいズレになる。

残った仕事は、その差し替えだけ。これも AI に任せる。 152個のときと同じで、私がやると退屈で、機械がやると速い。

これが片付けば、暑い夏をまるごと使った Linux 化が、ようやく完了する。

そして、ついでに公式サイトまで作り直した。テーマの色は、迷わずカカオにした。いま読んでいるこの画面の罫の色 #843c0c は、さっきの対応表でアイコンの「主線」に指定したのと同じ値だ。 業務システムの中の152個のアイコンと、それを説明するこのブログが、同じ1つの色を共有している。

そこまで揃えてから振り返ると、はじまりが「テーマだけ茶色くなって、アイコンは青いまま」という気持ち悪さだったのは、たぶん正しかった。色が揃っていないことは、揃っていない場所がどこかを教えてくれる。

AIとの協働作業での学び

分担がうまくいくほど、AIと私が同時に本番を触る機会が増える。 これが今回の一番の実感だ。AIが速く仕事をするから、私は待たずに次を試す。並行するから、ぶつかる。「AIに任せて、私は別のことをする」は効率の話に見えて、実は同時編集の話だった。

読むだけの検証は安全だが、書き込みを伴う検証は本番と状態を共有する。ローカルの開発機であっても、「いま、人間が同じ画面を触っているかもしれない」を前提にする。 これは AI 側の作法であると同時に、私の側が「いま何を触っているか」を言う作法でもある。今回それを言わなかったのは私だ。

もう1つ。AIは「132個が共通ベースを使い回している」構造を、1枚読んだ時点で見つけた。私は3年この絵を見てきて、grep で数えたことは一度もなかった。見慣れた対象ほど、構造を数えていない。 152という数を怖がって手を付けなかった作業が、対応表1枚で終わったのは、そこを疑わない私と、まず数える相手の差だと思う。

そして事故に気づいたのは、AIの検証ではなく私の素朴な質問だった。「このボタン、全件で合ってますか」——手が速い側は、手を止める理由を自分では持ちにくい。 止める役は、まだこちらの仕事だ。

余談 — なぜ Cacao なのか

ヨークシャーテリアのカカオ。木目の壁を背に、ベージュのクッションへ前足を揃えて伏せ、こちらをまっすぐ見ている。背中はスチールグレー、顔まわりと前足は淡い金茶で、耳の内側と鼻先は濃い焦げ茶色

ICTCacao の「カカオ」は、可愛がっていたヨーキーの名前だ。 カカオ豆から取ったわけではない。屋号がその子の名前なのだから、いちばん自分の色に近いテーマにその名前を付けたのは、たぶん考えるより先に決まっていた。

ヘッダーに選んだ #5c3a2c は、この子の耳の内側の色に近い。淡い面に使った #ead9c2 は、顔まわりの毛の色だ。色見本を並べて決めたつもりでいたが、並べる前から手元に基準があった。

そして、よく「ココア」と呼ばれる。 惜しいが、違う。ココアは製品で、カカオは種子だ。

この違いが、屋号としては気に入っている。ICTCacao が出すのは種子のほうだ。 そこから何を作るかは、渡した先が決める。チョコレートかもしれないし、ケーキかもしれない。

今回のパレット編集機能が、まさにそれだった。私が決めたのは6つの色役割という枠だけで、その中に何色を入れるかは触る人が決める。青でもカカオでもゴールドでも、押せば152個が一斉に染まる。そういうアプリを作るのが好きだ。