試作中 つくる

ブサイクな猫アイコンを、ビビンバ本人に差し替えるまで

サイトのfaviconとフッターのアイコンを自作SVGに置き換えた記録。InkscapeのトレースでAIの指示が二回外れ、色数を8から16に上げたのは自分だった。

公開: 監修:ビビンバ(寝てた)

AIは「できますよ」と言う。だいたい、途中までしかできない

最近のAIとのやり取りには、お決まりのパターンがある。

はじめはAIが「何でもできますよ！」と言うので、じゃあやってみてと投げる。ところが不得意な分野はまだ多いらしく、結局はやり方をAIに聞きながら、自分で覚えてやるしかないという結論に落ち着く。

今回もそれだった。サイトのアイコンを差し替えるだけのつもりが、まる一日かかった。以下はその記録。

発端：味はあるけど、ブサイク

BIBIMBA WORKSのタブに表示されるアイコンと、フッターのあたりにいるアイコン。どちらもサイトを作った当初からある猫のイラストで、味はあって嫌いではなかったのだが、ブサイクだった。

丸い輪郭に眠った猫の顔が描かれた差し替え前のタブ用アイコン

FIG.1 — 差し替え前のタブ用アイコン。

差し替え前の猫アイコンと監督紹介が表示されたサイト下部

FIG.2 — 差し替え前のフッターのアイコン。

うちには実物がいる。キジトラのビビンバ。せっかくなら本人の画像から作り直したい、と思った。

きっかけは別チャットで所信表明の記事を直し終えたタイミング。そのチャットはもうコンテキストが溜まっていたので、お決まりの引き継ぎ文を作らせて、新しいチャットにアイコンのスクショを貼り、「これなんとかしたいんだけど」から始まった。

そもそもSVGが何か知らなかった

まず、あのアイコンがSVGというファイルでできていることを知らなかった。

聞いてみると、SVGは画像ファイルではなく線でできたファイルで、だから拡大しても粗くならないし、軽い。サイトに置くアイコンでは軽量化が効いてくる、という話だった。

次の問題は、自分のサイトなのに元ファイルがどこにあるのか分からなかったこと。在処を探してもらうところから始まった。

聞き出して見てみたら、片方は.svg、もう片方は.astroだった。

このサイトがAstroなるもので出来ているのは知っていたが、アイコンまでその拡張子であることには驚いた。同じようなアイコンで、中身はSVGのくせに、なぜ拡張子が違うのか。

そこでやり取りしていくうちに腑に落ちたのが、Astroは編集者兼出版社みたいな役割だということ。SVGという素材そのものを置いてある場合と、Astroが素材を抱えて出力を組み立てている場合がある。同じものに見えて、置かれ方が違っていた。

「GPTに描いてもらえばいい」は通らなかった

SVGなら画像生成で作らせればいいや、と簡単に考えて頼んでみた。

ところがGPTから出てくるのはPNGだった。それをSVGに変換してと頼むと、化物みたいなSVGファイルが出てくるだけ。使い物にならない。結局、自分で変換する必要があることが分かった。

正直ちょっと面倒くさくなったが、ここで折れると終わらない。やり方を聞いて、なんとかやってみることにした。

Inkscapeでトレースする

PNGからSVGにするには、Inkscapeというソフトを使ってトレースすればいいとのことだった。

やり方を聞いてやってみたが、まあ、わからん。

いつものごとくスクショを貼り付けては「どうしたらよい」を聞き、やってみる。この繰り返しでなんとか形になった。

やっていることは、PNGを読み込んでビットマップをトレースし、ベクターに起こす作業。そしてこのトレース時の設定が肝だった。

以下、最終的に通った手順をそのまま残しておく。

取り込みとトレース

  1. ファイル → インポート → PNGを選択 → 何も変更せずOK
  2. メニューの パス → ビットマップのトレース
  3. 画面右のタブからマルチカラーのタブを開く
  4. 検出モードを色にする
  5. スキャン数を、出したい色が反映されるまで上げる（ここが最重要）
  6. 平滑化・積み重ね・背景を削除にチェック
  7. プレビューを更新して、よければ適用

注意： この操作は全部、インポートしたPNGを選択した状態でないとプレビューに表示されない。ここで一度ハマった。

トレース後の後始末

適用すると、トレース結果は元のPNGの上に重なって生成される。パッと見では何も起きていないように見える。

元の画像のところをクリックしてドラッグすると、下からトレースされたものが出てくるので、被らないようにずらす。そのうえで元のPNGを削除する。

8色では、ビビンバの目が出ない

AIに言われたとおり、スキャンする色数を8色に設定してトレースした。

すると、ビビンバの目の色までは反映されず、顔まわりと同じくすんだ色になってしまった。キジトラの猫にとって、目の色は結構な情報量である。

Inkscapeのビットマップトレース画面でスキャン数8の猫のプレビューが表示されている

FIG.3 — スキャン数8でのトレース。マルチカラー、検出モードは色。

そこでまたAIに聞くと、「とりあえずトレースしたあとに目だけ色を変えればよい」と簡単に言われた。

言われたとおりグループ化を解除して変更しようとしたら、あらビックリ。とんでもない数のパーツに分割されていた。目の部分だけを選択して色を変えるなど、とてもじゃないが無理だった。

グループ解除後の猫の顔が多数の細かなパーツに分割され選択枠で覆われている

FIG.4 — グループ化を解除した結果。目だけを選ぶのは無理だった。

はじめから言っとけ。

16色にしたら、目が出た

そこでAIを一旦無視して、自分でトレース時の色数を目の色が変わるまで増やしてみた。

16色の段階で、目の色が出た。

このことをAIに相談したら「それでいい」と言われた。最初から言えよとは思いながら、なんとかトレースできた。

なお、スキャン数を増やすとファイルも重くなるらしい。今回は16でも問題ない、というのもAIの言。ただし自分では検証していないので、ここは鵜呑みにしないでほしい。SVGは軽さが売りのはずなので、本来は書き出したファイルサイズを比べるべきところ。次にやるときの宿題にする。

ここが今回いちばんの学びかもしれない。AIの指示どおりにやって詰まったとき、AIに聞き返すより自分でパラメータを動かしたほうが早かった。8と16のあいだに正解があることは、たぶん現物を見ながら動かした人間にしか分からない。

保存でもう一回つまずく

トレースはできた。次は、これをどうSVGとして保存するかという問題だった。

AIは「ファイルから保存すればSVGになるよ」と簡単に言ったが、実際やってみるとInkscapeのプロジェクトファイルとして保存されてしまい、アイコンにはなっていなかった。おまけに余白の背景の白色も残っている。全然あかんやないかい、という感じ。

それも聞いて、分かったのが次の手順。

書き出し

  1. ファイル → ドキュメントのプロパティ → ページサイズをコンテンツに合わせて変更（これで余白の白背景が落ちる）
  2. ファイル → コピーを保存
  3. ファイルの種類を、Inkscape SVG ではなく プレーンSVG にして保存（ここ重要）

「保存」ではなく「コピーを保存」、そして「Inkscape SVG」ではなく「プレーンSVG」。この2箇所を外すと、アイコンにならないファイルが出てくる。

はじめから言っとけ。

一回できれば、こっちのもん

なんやかんやで完成した。

一回できればこっちのもので、タブ用のSVGも一気に作った。あとはCodexに変更させる用の指示文を書かせて、実行。実装ではgitの警告が出たりなんなりしたが、なんとかなった。

まとめ：AIに聞きながら、自分でやる

今回の一日を振り返ると、AIは知識の索引としては優秀だった。SVGが何か、Inkscapeで何を使えばいいか、保存手順はどうか。知らないことの名前を教えてくれるのは速い。

一方で、現物を見ながら詰める作業は肩代わりしてくれなかった。8色では目が出ないことも、グループ化を解除すると破片だらけになることも、保存がプロジェクトファイルになることも、実際にやるまで教えてくれなかった。全部やってから聞くと「それでいい」と返ってくる。

だから結論は冒頭のとおり。AIは何でもできますよと言うが、やり方をAIに聞きながら、自分で覚えてやるしかない。今のところは。

そして、ブサイクだったアイコンは、ビビンバ本人になった。