FIG.1に溶かした時間

一文で終わる作業に、丸ごと時間を溶かした

先に結論を書く。

最終的にFIG.1の画像ができたのは、新しいチャットに写真を貼って**「この画像から猫と毛布以外の部分を切り抜いて」**と一行打ったときだった。一発だった。

その一行に辿り着くまでにやっていたことは、ほぼ全部、無駄だった。

以下はその記録。

主役の画像がしょぼいのは、まずい

前回までで、サイトのファイルの骨格はClaudeとGPTの共同作業でまとまっていた。形にはなった。

なったのだが、目に見えてFIG.1がダサい。ダサいというより、仮の設定のままなのか、可愛くない。

横向きに寝る猫の線画へ毛色から取った配色名とカラーコードの注釈が付いた差し替え前のFIG.1

FIG.1 — 差し替え前のFIG.1。線画に6色の注釈が入っている。

このサイトのコンセプトは、飼い猫ビビンバの毛色からサイトを作る、である。名前もBIBIMBA WORKSである。つまり、主役の画像がしょぼいのはまずい。ここだけは誤魔化しが効かない。

引き継ぎ文を作らせて、画像生成チャットを立てた

毎回お決まりになってしまっている引き継ぎ文作成である。画像生成は別チャットに切り出すことにした。

投げた指示はこれ。

FIG.1画像差し替えこれ、他チャットでビビンバの画像上げて、良さげな画像に編集してもらおうかな、君たち画像生成得意だから。カラーコードも、もう一回取り直して修正してもらおうか他チャットで画像生成してくるから引き継ぎ文を生成して

これに対してGPTは「画像専用チャットに切り出した方がやりやすい」と同意したうえで、そのまま貼れる引き継ぎ文を書いてきた。

原文はかなり長いので、骨格が分かるところまで削って載せる。

BIBIMBA WORKS という個人サイトを作っています。このサイトの監督役の猫が「ビビンバ」です。今回は、トップページに使う FIG.1用のビジュアル画像を作りたいです。

前提：サイト名 BIBIMBA WORKS／タグライン「家庭内製造業 — 猫と暮らしながら、生活と仕事をすこしずつ自作しています。」／雰囲気は温かい・落ち着いている・少し遊び心がある・工房や作業部屋っぽい。企業サイトっぽくしない。安っぽい雑記ブログっぽくもしない。

やってほしいこと

アップロードした写真の中から、FIG.1に向いているものを選ぶ（表情、キジトラの毛色の分かりやすさ、背景処理のしやすさ）

背景を整理する。住所特定や家族特定につながる要素をなくす。郵便物、表札、窓外の風景、PC画面、書類が写っていたら除去する

実写ベースで、温かく、上品に。後から注釈やSVGオーバーレイを重ねられるよう、周囲に余白を残す

完成画像から配色6色を抽出する（しま＝本文／背中＝見出し・罫線／おなか＝アクセント／むね＝背景ベース／はな＝リンク・ボタン／め＝補助色）。どの毛色から取ったかも書く

altテキスト案、OGP流用の可否も出す

制約：企業広告っぽくしない。猫をキャラクター化しすぎない。実写の良さを残す。事実と違う模様や毛色にしない。不自然な別猫っぽさを出さない

※上の引用は、長さの都合で項目を間引いて再構成している。文言そのものは当時のまま。

さらに「別チャットの冒頭にこれも足すと精度が上がる」として、FIG.1は「監督兼カラーパレット」のような象徴的な位置づけであって単なる猫写真ではない、という補足文まで付けてきた。

やっぱり持つべきものは友だね。

ここまでは良かった。問題はこの後、この完璧な指示文をどこに投げたかである。

やってる感が欲しくて、Codexに投げた

私の悪い癖で、チャットでやればいいものを、なんとなくCodexを使ったほうがやってる感がある。

だから参考の写真をフォルダに入れて、さっきの指示文をそのままCodexに投げ込んだ。

これが、結局のところ時間を無駄にするだけだった。

おしゃれな工房のポートレートになって返ってきた

出てきた画像を見て、まず思ったのは「誰だこれ」だった。

写真の選定自体はちゃんとやってくれている。そこは良い。ただ、背景がとってもおしゃれな工房になっていて、ポートレートみたいになっていた。

これはこれで、きっと指示通りに編集されているんだろうと思う。「工房・作業部屋っぽく」と書いたのはこちらである。

だが、私の思っているビビンバではなかった。

他の候補写真からも生成させてみた。これもなんだか知らない場所の背景が追加されている。ボツ。

うちの猫が、行ったことのない部屋に座っている。

雑に指示したら、雑なまま切り抜かれた

次に、こんな感じでトリミングしてほしいという範囲を、ペイントで雑に塗って指示してみた。

結果は、雑なまま切り抜かれた。塗った通りの、雑な形で。

正直、これはGeminiのnano bananaならこの指示で通った気がしている。ただし試していないので、これは完全に勘である。当時そう思った、という以上のことは書けない。

一文で切り抜けた

ここでCodexを諦めた。

新しいチャットを立てて、写真を貼って、こう打った。GPTの、普通のチャットである。

この画像から猫と毛布以外の部分を切り抜いて

一発で切り抜けた。

Codexとの押し問答は、まるごと無駄な時間だった。やはり適材適所なのかもしれない。

なお念のため書いておくと、指示文を書いたのもGPTで、Codexが駄目だったあとに一発で切り抜いたのもGPTである。**別の会社のAIに乗り換えて解決したわけではない。**同じところに、違う入口から入り直しただけだった。

背景を「作らせよう」としていたのが間違いで、やりたかったのは背景を消すことだった。指示文が丁寧で長いほど、AIは丁寧で長い仕事をしようとする。こちらが欲しかったのは、そういう仕事ではなかった。

それでもCodexが役に立ったところ

とはいえCodexくんにも良いところはあって、切り抜いた画像からのカラーパレットの抽出と、WebPの生成はやってもらえた。

画像そのものの「見た目を判断する」作業は駄目で、画像を「機械的に処理する」作業は得意だった。今回に関してはそういう分かれ方をした。

抽出された6色が、今のサイトの配色になっている。

ラベル	HEX	由来・用途
しま	`#2A2520`	額・背中の最暗部。本文文字
背中	`#5B5044`	背中の茶灰色。見出し・罫線
おなか	`#C89452`	おなかの暖かな黄土色。アクセント面
むね	`#F2E6CF`	胸元と毛布の生成り色。背景ベース
はな	`#8F503F`	鼻の赤茶を少し濃く調整。リンク・ボタン
め	`#68632E`	別写真の目のオリーブ色を継承。ステータス表示

一点だけ補足がいる。「め」だけ、別写真から取られている。

理由は単純で、採用した画像のビビンバは寝ているからである。目が写っていない。監督が目を閉じているせいで、目の色だけ他所から持ってくることになった。

ちなみに前回、Inkscapeで8色から16色に上げたのも目の色を出すためだった。この猫の目の色は、毎回どこかで問題になっている。

GPTから合格をもらった

画像ができたので、いざ実装である。が、自分にはどうやったらよいのか分からない。そこはレビュー・指示役担当のGPTにお願いした。

見せてみたところ、こう返ってきた。

これはかなり良いです。BIBIMBA WORKSのFIG.1としてかなり強いと思います。

眠っているビビンバ、肉球、生成りの毛布、横長構図が全部サイトの空気に合っています。「監督だけど寝てる」という世界観も自然に出ています。

「監督だけど寝てる」。これは自分では言語化していなかったところで、言われて確かにと思った。

ファイルについても確認が入った。

cut.webp：1836 × 744 / RGBA / 約321KB
cut.png：2048 × 829 / RGBA / 約3.0MB

表示用はWebP、PNGは元データ・保管用。カラーパレットも採用でよい、とのことだった。

なお、このファイルサイズはGPTが確認して報告してきた数値であって、自分で測り直したわけではない。ここは鵜呑みにしないでほしい。

実装は、また別のAIに渡した

実装指示書も書いてもらって、それをClaudeに渡して実装を依頼した。

無事に、今のFIG.1が誕生した。

まとめ：適材適所を、時間で払って覚えた

今回やったことを並べると、こうなる。

GPTに完璧な引き継ぎ文を書かせた
それを、やってる感のためだけにCodexへ投げた
知らない工房のビビンバが出てきた
雑に指示して、雑に切り抜かれた
別チャットで一文打ったら、一発で終わった
パレット抽出とWebP変換だけCodexに戻した
GPTにレビューさせ、Claudeに実装させた

道具の性能の話ではなくて、どの道具に何を頼むかの話だった。それを、指示文の精度を上げることで解決しようとしていた。指示文はすでに十分良かった。宛先が違っただけだった。

半日は言いすぎかもしれないが、数時間は溶かした。一行で済んだ作業に、数時間である。

そして今、サイトのトップには、毛布の上で寝ている監督がいる。