アイコン作りで10回近く作り直し。最後は画像生成AIに描いてもらった【96NEKO LAB開発記録 #18】

はじめに

前回までに、Xとnoteのアカウントを作りました。ただ、アイコンとヘッダーの画像がまだ決まっていません。

「アップロードした画像の黒猫をメインに、ギークな感じにしたい」

自分で画像生成AIで作った黒猫の画像を渡して、Claude Codeに頼んでみました。左目が緑、右目が琥珀色という、左右で色の違う目の黒猫です。

写真をもとにした案は、どれも微妙

最初の案は、黒猫の写真にマス目や照準の枠を重ねた、コマンド画面風のデザインでした。サイトの配色に合わせてくれていて、悪くはありません。

別の案も見たかったので、「3パターンくらい並列作業して出して」と頼みました。Claude Codeは、作業を3つの小さなAIに分けて、同時に作らせることができます。

• 文字が雨のように降る中から猫が浮かぶ案
• 猫の輪郭がネオンのように光り、回路の線が走る案
• 昔のパソコン画面のようなドット絵・文字アートの案

数分で3案そろいましたが、感想は「どれも微妙。最初のが一番まし」でした。

ダメ出しのたびに、方向が変わる

そこから、作っては直しての繰り返しです。自分が出したダメ出しを並べると、こうなります。

「画像はイメージだけなので、もっといい感じに作って」
↓ 図形で描いたイラストの猫に
「ギークな感じはなし」
↓ 写真を活かした、飾りのないデザインに
「元画像のイメージもなくして」
↓ 一から描いたイラストに（ベージュの背景）
「背景は黒っぽい方がいい」
↓ 「こんな感じのも作っていた」と別の画像を見せて要素を追加
「もうちょっと猫いい感じにならん？」
「ちょっとチープすぎる。スタイリッシュさが欲しい」
「前のがいい。猫の部分だけが気にくわない」

振り返ると、自分でも何が欲しいのかはっきりしていませんでした。見せてもらって初めて「これは違う」と分かる、という状態です。

AIは文句ひとつ言わずに何度でも作り直してくれます。ただ、ふんわりした頼み方のままでは、なかなか正解に近づきませんでした。

AIが「自分では難しい」と言った

最後に、雰囲気の参考にしたい画像を見せて、こう頼みました。

「雰囲気はこれで。黒猫と、緑と琥珀色の目という要素だけ守って、一から作り直して」

すると、返ってきたのは「この雰囲気の絵を自分で描き起こすのは難しい」という答えでした。

Claude Codeが作れるのは、図形を組み合わせた絵か、写真の加工までです。毛並みや光まで描き込んだ絵画のような絵は、画像生成AIのほうが得意だ、という説明でした。図形で無理に近づけようとすると、どうしても安っぽく見えてしまう。「チープ」と感じた理由も、ここにありました。

代わりに提案されたのが、この分担です。

Claude Code が、画像生成AIに渡す指示文を作る
↓
自分が画像生成AIで絵を作る
↓
Claude Code が、アイコン・ヘッダーなど各サイズに切り分けて仕上げる

1枚の絵から、全部のサイズを作ってもらった

指示文を画像生成AIに渡すと、丸いアイコンと横長のヘッダーが1枚の画像に並んだ絵ができました。ヘッドホンをした黒猫が、光る画面に囲まれて机に寝そべっている絵です。

「1枚の画像になってるから切り分けて」

と頼むと、絵の位置を自動で見つけて、次のサイズに切り分けてくれました。

• Xとnoteのアイコン
• X用・note用のヘッダー
• サイトのタブに出る小さなアイコン（小さいと潰れるので、猫の顔に寄せて切り出し）
• サイト上部のロゴ横の丸いアイコン
• リンクを共有したときに出る画像（サイト名を重ねたもの）

途中、タブのアイコンの形式が合わず、開発用のサーバーでエラーが出ました。AIがエラーの記録を読んで原因を見つけ、すぐに直しています。

やってみて感じたこと

AIにも得意・不得意があります。絵を描くのは画像生成AI、切り分けや仕上げ、サイトへの組み込みはClaude Code。この分担に、最初から気づければよかったと思います。

もう一つの学びは、ダメ出しの言葉です。「微妙」「チープ」だけでは、AIはどこを直せばいいのか分かりません。最後に参考の画像を見せたら、一気に話が進みました。言葉で伝えにくいことは、見本を見せるのが一番です。

アイコンが決まって、ようやくサイトもSNSも顔がそろいました。次は、独自ドメインを取る予定です。