okayurisotto.net

私が好きでやったことが他の人のためにもなったらお得かも!

AIをフル活用してうちの子を錬成し、SNSアイコンを作った話

公開日:
最終更新日:

※この記事に掲載された画像はどれも縮小版・圧縮版です。

はじめに:AIを使ったアイコン生成について

私がSNSで使うアイコン画像は、AIによる画像生成技術の進歩の歴史と共に少しずつ進化してきました。

初代と言える画像は、2020年5月にWaifuLabsで生成したもの。黒いミディアムヘアーと青い瞳が特徴的な子です。

黒いミディアムヘアーと青眼が特徴的な女の子のイラスト

WaifuLabsはどうしても服装の破綻が酷いですが、それでも結構かわいいのでお気に入りです。しかしアイコンとして小さいサイズで表示した際に、暗く潰れて見づらいという難点もありました。

そこで次に使ったのは、同じくWaifuLabsで2021年1月に作ったもの。視認性を重視して思い切って髪色と瞳を金〜オレンジ系に変更しました。

オレンジ色のボブヘアーと瞳が特徴的な女の子のイラスト

結果的にこの色味が現在の私のアイデンティティになっています。琥珀色の瞳がとても綺麗ですね。

そしてつい先日まで使っていたアイコンは、2023年5月にStable Diffusionで生成したものです。どのモデルを使ったのかはもう忘れてしまいましたが。

オレンジ色のボブヘアーと瞳が特徴的な女の子の横顔のイラスト

Stable Diffusionで生成したアイコンは、こちらを向いていない横顔の構図を採用しました。WaifuLabsでは横顔を生成できなかったため、AIならではの自由度を試したかったのです。しかし服装が少し不自然で、セーラー服なのにワイシャツのような襟がありますね。過去の私がプロンプトの指定をミスったのだと思われます。

それでもキャラの表情や雰囲気はとても気に入っているため、今回、これをベースにアイコンを作り直すことにしました。

最新AI「Nano Banana Pro」について

最近話題の画像生成AIといえば、Nano Banana Proでしょう。Google製で、Geminiシリーズに属していますが、みんな通称で呼んでいるようです。正式なモデル名はGemini 3 Pro Image。

画像の雰囲気を一変させます。晴れた日をムーディーな夜に変えたり、カメラアングルを調整して完璧な景色を見つけたり、フォーカスを調整して被写体を際立たせたりできます。

Stable Diffusionなどのそれまでの一般的な画像生成AIでは、プロンプトとして画像の要素をテキストで指定して、ひたすら何度も生成してみて良い生成を得る形でした。Text-to-Imageと呼ばれるやつですね。何度も生成してみる工程は、「ガチャを回す」なんて表現されることもあります。

しかしNano Banana Proの場合、設定資料を渡すと、その資料に基づいて画像を生成してくれるようです。既存の絵をフィギュア化したような画像を高品質に生成できるとしても話題になっているようでした。

推論能力を持つAIらしく、実際、「思考プロセスを表示」から、Nano Banana Proが推論(Reasoning)している様子を見ることができます。プロンプト調整の手間も少なく抑えられたこの画像生成は、「顧客が本当に求めていたもの」といった感じがします。

つい先日から無料枠でも使えるようになりました。レートリミットはかなり厳しめですが。

しかしレートリミットが厳しくとも触ってみる価値は十分あると感じたため、Nano Banana Proでのアイコン生成を試してみます。

ちなみにProではないNano Bananaもあります。が、当然Proの方が高品質です。とはいえProではない方はレートリミットが緩い(もしくは存在しない?)ので、うまく使い分けられるとよいのでしょう。しかし私には、どういうときならProでなくても大丈夫なのか使い分ける感覚はいまいちわかりません……。

三面図作成チャレンジ

Nano Banana Proでの画像生成では、設定資料の質が重要になってくると予想されます。よって、せっかくなら三面図のような資料を用意してから挑戦することにしました。

オレンジの髪と瞳はアイデンティティなのでもちろん踏襲します。しかし問題は服装をどうするか。セーラー服はお腹のところの構造がとってもかわいいです。しかしアイコンでは首元から上しか映らないため、残念ながらあまり関係がありません。むしろワイシャツの襟の見栄えが良いブレザーの方がよいでしょう。しばらく悩んで、ブレザーを採用することに決めました。

AIにはまず、もともとのアイコンをもとに、(多少服装がおかしかったとしても目をつむって)三面図を描き起こしてもらうことにします。小手調べに、Proではない方のNano Bananaに依頼してみました。

添付画像に描かれたキャラクターの三面図を生成してください。できる限り添付画像のスタイルを尊重してください。

オレンジ色のボブヘアーと瞳が特徴的な女の子の横顔のイラスト

元々のアイコンとほとんど変わりませんでした。それまで映っていなかったごく一部が描き足されただけ。元々の画像のスタイルを最大限尊重してくれているのはよいですし、描き足された部分はとても自然ですが、これではダメです。

同様のプロンプトで、Nano Banana Proで再挑戦してみます。

オレンジ色のボブヘアーと瞳が特徴的な女の子が、横から描かれたものが3つ並べられたイラスト

改善はされましたが、今度も三面図にはなりませんでした。アイコンの子が横から描かれた絵が3つ横に並べられただけです。横からの見た目としては悪くない資料になり得ますが……。

とりあえず生成されたこれをベースに、まずは服装をブレザー化することにします。得られた画像をGIMPで編集し、横から描写した1人分の姿の画像を作ります。GIMPを使ったレタッチ作業には慣れていないものの、画像を切り抜いて配置する程度であれば簡単です。

オレンジ色のボブヘアーと瞳が特徴的な女の子が、横から描かれたイラスト。ワイシャツとセーラー服という不思議な組み合わせの服を着ている

というわけで生成すると……。

オレンジ色のボブヘアーと瞳が特徴的な女の子が、横から描かれたイラスト。ブレザーとセーラー服のリボンという不思議な組み合わせの服を着ている

今度は元画像に残っていたセーラー服のリボンが悪さをしたのか、ブレザー+セーラー服のリボンという不思議なコーデになってしまいました。セーラー服のリボン部分はあらかじめ消しておくべきだったのでしょう。あと、余白を大きくしすぎたのか、画質が悪くてガビガビです。

というわけで、Windowsのフォトアプリの生成塗り潰し機能を使って、リボン部分だけ消してそれっぽくした画像を作ります。生成塗り潰し機能とは、Androidの消しゴムマジックのようなものです。精度は正直悪いですが、最低限邪魔にならない程度に消えていたらNano Banana Proがうまくやってくれるだろうと予想しました。

オレンジ色のボブヘアーと瞳が特徴的な女の子が、横から描かれたイラスト。ワイシャツとセーラー服という不思議な組み合わせの服を着ているが、セーラー服のリボンの部分が雑に消されている

そしてその状態で再度生成を依頼すると……無事ブレザー化に成功しました!

オレンジ色のボブヘアーと瞳が特徴的なブレザー姿の女の子が、横から描かれたイラスト

(服のボタンのあたりの重なり方が少しおかしいのはご愛嬌。頭の先が少し切れてしまっていますが、この程度であれば画像編集でどうとでもなります。)

とはいえ三面図作りはここからです。

ブレザー化した画像を元に三面図を作るよう指示するも、なんだか思っていたものとは違う画像が生成されてしまいました。

オレンジ色のボブヘアーと瞳が特徴的なブレザー姿の女の子が、正面、横、後ろから描かれたイラスト。ただし横から描かれた女の子のみ足先までは描かれておらず、また、不自然な文字も含まれている

ここで発想を変え、「この横から見た立ち姿を正面から見たように描いて」と指示しました。

添付画像に描かれたキャラクターを正面から見た絵を新たに生成してください。

注意点:

  • できる限り添付画像のスタイルを尊重してください。
  • 頭から足まで全身を含めてください。
  • 添付画像には描かれていませんが、靴下は白のハイソックス、靴は焦げ茶色のローファーです。

すると、うまく正面からの立ち姿が得られました。

オレンジ色のボブヘアーと瞳が特徴的なブレザー姿の女の子が、正面から描かれたイラスト。足先までは描かれている

かわいいっ!

設定を固める

しかしここでNano Banana Proのレートリミットがかかってしまいました。レートリミットが解除されるまでの数時間、Nano Banana Proでの生成を試すことはできません。仕方がないので、これまで生成してもらった画像をもとに、三面図ではないもののある程度整った設定資料を作ることにしました。

生成された画像の縦横比をGIMPで調整したり、Real ESRGANで拡大したり。Geminiに「オリキャラの設定って何を考えておけばいい?」と聞いて妄想を整理して、画像に文字で説明を入れたりしました。画像に入りきらなかった設定も大量にあります。

オレンジ色のボブヘアーと瞳が特徴的なブレザー姿の女の子(うちのこちゃん)についての設定資料

考え付いた設定をGeminiに見せたところ、「こことここの繋がりがいいね!」と、私自身気付いていなかった良さを指摘され、思ってもみなかった造形の深みが追加されていきました。アイコン生成にはまったく関係のない蛇足ですが、とても楽しかったです。(そして愛着が湧いてきてどうしようもなくなってきました……。ぐへへ……。)

いよいよアイコン生成へ

数時間待ってレートリミットが回復したので、整えた設定資料と旧アイコンを渡し、「このキャラでこのポーズを」と依頼しました。

オレンジ色のボブヘアーと瞳が特徴的な女の子の横顔の、少し地味なイラスト

しかし生成されたものは、視認性も品質も普通に高いものの、少し地味な画像。ライティングの問題かと思い、「この画像をもっと光を浴びたダイナミックな感じに描き直して」とお願いすると……。

オレンジ色のボブヘアーと瞳が特徴的な女の子がドラマチックに光を浴びた横顔のイラスト

ライティングは改善された一方で、背景や装飾が賑やかすぎてアイコン向きではなくなってしまいました。あちらを立てればこちらが立たず、といった感じです。

ここで再びNano Banana Proのレートリミットがかかってしまいました。今度は24時間近く待たないといけないようだったため、この画像をうまく手動で加工することで済ませることにしました。人物への光の当たり方はとてもよいため、工夫次第で整えられそうです。

とっても楽しい手動レタッチの時間

GIMPで頑張ってレタッチしていきます。幸いなことに、Nano Banana Proは元々の画像を最大限に尊重して描き足してくれています。よって、

  1. 地味だった方の画像を使って背景を選択
  2. その選択範囲を使って、ダイナミックな方の画像をキャラと背景に分離

しました。

ダイナミックな画像で直接背景を選択するのは、GIMPの機能では難しかったため、このような手順を踏みました。WindowsのフォトアプリのAI背景削除機能を使っても悪くはなかったのかもしれませんが、あの機能は微調整がしづらいため、今回はGIMP上ですべてを行うことにしました。

とは言っても、GIMPを使ってもキャラと背景の間には少し違和感が残ってしまいました。背景部分を選択した上で、「選択範囲をぼかす」を使ってキャラの背景と近い部分をうまく選択、その後消しゴムを使って削るようにしましたが……それでも違和感は残ってしまいました。結局、手動でピクセル単位で頑張って調整して、とりあえず納得できなくもないレベルまで持っていくことに。

しかし、ライティングの関係でどうしても彩度が低めになってしまった後ろ髪については、どうしようもなさそうでした。後ろ髪だけを自然に高彩度にするのは流石に難しい……。このライティングにも馴染むような背景画像を選定することで、つじつまが合うようにすることにします。最終的なアイコンの品質さえ低くなければよい、と割り切ります。

次は、キャラと被る形で描かれてしまった装飾を消していきます。大きな装飾は、

  1. 装飾された範囲を選択
  2. 選択された範囲をAltドラッグで移動し、近くの似た色の部分を選択
  3. コピー&ペースト
  4. 手に入れた画像をうまく装飾にかぶせてカモフラージュ
  5. 手動でにじませて微調整

というようにして隠します。にじみツールは、あまりにも色味が異なる部分にはあまり効果的なレタッチではないため、こうしてあらかじめ色味を揃えておく必要があるのです。(なんだか、健康なところから組織を取って、不健康なところへ移植して……という、手術でもしているのかといった感じです。)小さな装飾についても、近くの似た色をスポイトして、その色を使って装飾を塗り潰したあとににじませる形で調整しました。

振り返って考えてみると、GIMPでやる作業ではなかったかもしれないなと思います。GIMPはお絵描きツールではありません。CLIP STUDIO PAINTやKritaなど、豊富なブラシを持つお絵描きツールを使うべきだったかもしれません。(まあそれらのソフトは使ったことがないのでよくわかりませんが……。)とはいえ、こういった丁寧なゴリ押しができるのが人間の長所です!

とてもマウスを酷使する作業で、ペン型のデバイスが欲しくなりました。AI絵師と呼ばれる人たちが、AIを使っているというのに絵師のように液タブや板タブを買う理由がわかった気がします。AIを使って外国語の翻訳をしていたときにも感じたものですが、やはり最後に頼れるのは己の腕力です。人間ってすごい。そしてまっさらな状態から絵を描き上げる絵師ってすごい!

さて、背景画像はHTMLとCSSで作成します。アイコンとして使う分にはいい感じのグラデーションさえかかっていればいいので、縦横2048pxな要素を作って、CSSでlinear-gradientをかけたものをスクリーンショットしました。FirefoxはDOM要素単位でスクリーンショットを撮れるため、こういったときとても便利です。

キャラクターのライティングと合う色味を探るのは少し大変でした。光が当たっている部分は明るく暖かめの色味で、反対側は暗く彩度低めにする必要があります。しかしあまりにも色味を変えすぎると非現実的になってしまうため、あくまで色から受ける印象は、少ししか変わっていないようにする必要があります。最終的にlinear-gradient(110deg, #fff0b2, #99a0bf)に落ち着きました。

オレンジ色のボブヘアーと瞳が特徴的な女の子の横顔のかわいらしいイラスト。胸から上が描かれている

アイコンとしての仕上げ

最終仕上げとして、アイコンとして丸く切り抜かれることを想定してトリミングします。Webサービスによっては、アップロード後に切り抜く範囲を選択できないことがあるため、あらかじめ行うことが推奨されます。頭を結構大きくしないと、スマホの小さな画面に表示された角丸アイコンでは視認性が悪くなるため注意です。今回、ワイシャツの襟は絶対に見せたいので位置調整にはこだわりました。

オレンジ色のボブヘアーと瞳が特徴的な女の子の横顔のかわいらしいイラスト。肩から上が描かれている

また、画像そのままだと画像の大きさもファイルとしての大きさも過剰です。リサイズと非可逆圧縮をします。これにはSquooshを使いました。Squooshは、Google Chrome Labsによって開発された、オフラインでも動作する画像圧縮Webアプリです。リアルタイムでプレビューされるため、圧縮前後の変化を確認しやすいという優れ物。

Twitterは縦横400pxが標準的らしいのでそれに合わせます。このくらいのサイズなら多くのWebサービスで基本的に問題なくアイコンとして設定できるでしょう。ファイルフォーマットとしてはJPEGを推奨します。WebPにしたいところではありますが、Webサービスによっては対応していないためです。ファイルサイズはなんとなく32KBを下回るくらいを目指して圧縮レベルを調整しました。Squooshはこのあたりが柔軟にできてとてもよいですね。

おわりに

こうして、AIの力と人力レタッチを総動員し、新しいSNSアイコンが完成しました。作業過程のファイルはいつか必要になったときのためにすべて保存し、HDDにもバックアップ済みです。また、作業の記録としてこうして記事を書くことにしました。

思い返すと、うちの子の再錬成は本当に楽しい体験でした。これからも存分に愛でていきたいと思います。ぐへへ……。