AIイラストのスカートをめくりたい。…めくりたくない？

昔からどうして出来ないのか真剣に悩んでいることがあるのだけれど、ちょっとお時間があれば聞いていってもらえないだろうか？

アニメでも漫画でもエロゲでも良いのだけれど、かわいい女の子がすぐそこに立っているじゃないですか。立ち絵って言うんですかね。

これをこんな風に傾けてもさ。

こ～～～んな風に傾けてもさ。

どうしてパンツが見えないの…？

パソコンの画面を揺らしても、息をふぅ～！ふぅ～！吹きかけても、決してめくれてくれません。どうして？なんで？　だからぼくはラブドールをお迎えしたんだよ！！

ということで、

女の子のほうでぴょんぴょんしてもらうことにした

またひとつ夢が叶ってしまったな…

オマケ

横方向の揺れだとパンツが見えづらいことを知った。

無念…。

技術解説

最初の語りの部分で、立ち絵を台形にしていますが、これはスタイルシートの transform:perspectiveプロパティの効果です。このプロパティを使うことで、プログラミングなぞ不要でいとも簡単に画像の遠近加工ができます。

元々、スカートだけを切り取って雑に角度を付けたアニメーションをしようと思っていました。「AIイラストの尻をふりふりしたい。…したくない？」でやったのと同じ手法ですね。

コスパ厨のぼくは、このアニメーションがとてもコスパ良いと思うンですよ。Live2Dとか使えばもっとクオリティの高いアニメーションは可能ですが、あれ作るのめっちゃ大変です。絵が描ける人なら、パーツ作成→Live2Dへぶちこむって流れでしょうけど、AI任せのぼくがやろうとしたら、AIイラストを切り抜き、パーツ化し、かつ足りない（髪の毛の裏側とか）部分を泣きながら書いて、ようやくLive2Dへぶちこむって流れになります。

せっかくAIイラストで楽して絵が出力されるのに、別の部分で普通に絵描くより労力使ってたら本末転倒なんじゃないかなって。そんなわけでチープアニメーション万歳！

実際、先ほどのぴょんぴょんジャンプしてスカートがめくれるアニメーションはたったこれだけのスタイルシートで実現できます。

.img_wrapper1 img:nth-of-type(1) {
	animation:0.5s anime_char1 0s infinite alternate ease-in-out;
}
.img_wrapper1 img:nth-of-type(2) {
	transform-origin:top;
	animation:0.5s anime_skirt1 0s infinite alternate ease-in-out;
}
@keyframes anime_char1 {
	100% { transform:translateY(-5%); }
}
@keyframes anime_skirt1 {
	0% { transform: perspective(200px) rotateX(10deg) scaleY(0.9); }
	100% { transform:translateY(-25%); }
}

パンツいっちょのキャラ絵を一番下に置いて、上下に5%移動するだけ。ふわっと持ち上がって、早く落ちてくる動作はease-in-outの指定だけで事足ります。

欲を言えば、着地とスカートのめくれあがりに時間差を持たせたかったですが、キーフレームが複雑になるのでまずは実験用ということにして妥協しました。

1メクレル～4メクレルの指定についてだけはJavaScriptを使っていますが、本題ではないのでここでは解説しません。CSS変数を変更してるだけだしね。

オマケの、頭をふりふりしながら、スカートもふりふり揺れるCSSアニメのほうは下記のとおり。

@keyframes anime_char2 {
	0% { transform:translateX(-2%) rotate(-2deg); }
	50% { transform:translateX(0) rotate(0deg); }
	100% { transform:translateX(2%) rotate(2deg); }
}
@keyframes anime_skirt2 {
	0% { transform:translateX(-2%) skew(12deg, 0deg) scaleY(0.9); }
	50% { transform:translateX(0%) skew(0deg, 0deg) scaleY(1); }
	100% { transform:translateX(2%) skew(-12deg, 0deg) scaleY(0.9); }
}

rotateで角度をつける際、回転の基準点が絵の中央なので、普通に回転すると腰が動きすぎるんですよね。そのため、角度をつけると同時にX座標の修正もしています。transform-originプロパティで回転の基準点を変更できるので、そっちで調整しても良いと思う。

スカート側は単にskewで台形の形にしているだけ。例えば、こんな四角形の画像があったとして、

これにskew(12deg)を指定して、12度ズラすと、こうなります。

これを左右繰り返して、お尻ふりふりスカートを実現。少しでもパンツ見たいので、ついでにscaleY(0.9)指定でスカートの長さを途中で90％にして、チラッと見えるようにするのも忘れない。

えーと、こんなものかな。

最初はJavaScriptでゴリゴリ書くつもりだったのだけど、perspectiveプロパティのおかげで10分の1くらいの労力で済んじゃった。やったね！

ベース絵

前回の「AIイラストの衣装を脱がしたい。…脱がしたくない？」で、衣装差分を作ることに大変変態苦労したので、その反省を踏まえ、このパンツいっちょを先に作ってから、スカートを履かせたのだけれど、これもちょっと失敗でした。理由は後述。

スカートの切り抜きはGIMPのファジー選択ツールでちょちょいのちょい。

衣装差分を作るときは「ヌード」からが良いかも

StableDiffusionのimg2img Inpaintツールでは、下記のように黒塗りしたところだけを再生成することができます。

表情差分を作る際には本当に優秀でありがたいのだけれど、img2imgは基本的に元の色を引き継ぎます。

つまり、パンツいっちょの1枚絵を作った後に、パンツだけマスクして、「(black pleated skirt:1.2)」とか強調指定しても「白いスカート」が登場します。たぶんほぼ100％black指定は無視される。（パンツが黒なら黒いスカートを出すのは余裕）

どうにも黒いスカートが出せなかったので、仕方なく、sketchツールのほうで白いプリーツスカートを雑に黒く塗って、img2imgを何度か繰り返して、ようやく衣装差分が出来ました。

たぶんこれ、先にヌード作っておいたほうが楽です。

それだとノーパンになっちゃう？　………ノーパンおおいにけっこう！！

………ではなく、

1. ヌードの立ち絵を作る
2. 1)からパンツだけ履いた絵を作る
3. 1)からスカートだけ履いた絵を作る

たぶんこれがもっとも成功確率高いと思う。

なんとなく、パンツ履かせてから上にスカート、みたいに考えちゃったけど、無駄に苦労するだけです。

…などとエラそうなこと言ってるけど、StableDiffusion触り始めたばかりの初心者だから、もっと良い方法あったら教えろください。

Prompt

(black fril skirt:1.2)
,1girl,loli,flat chest,short hair,nekomimi,big red eyes,white camisole
,(white panty:0), <lora:jyojipan_ver2_NP:0>
,:o,standing,thigh up
,from bellow
,simple background

• :o … open mouth (開口)
• thigh up … 太ももから上を収めた絵が出やすくなる
• jyojipan_ver2_NP … ロリコンご用達の女児パンツLoRA

まとめ

スカートめくれたときにパンツと一緒にシャツの裾も見えるの最高だと思うンだけど、どうっすか？