🚸

クソアプリ用の画像素材を作るのに苦労した件

2025/12/05に公開

この記事はクソアプリ Advent Calendar 2025の6日目の記事です。

 はじめにクソアプリ Advent Calendar 2025に参加したくて、時事的なネタを扱うクソアプリを作りました。

しかし、アプリに使う画像素材を用意するのに非常に苦労したので、その過程を共有します。
最近は、生成AIで思いつきをすぐに形にできるので、非常に便利です。

普段はコードを書くことに集中しているのですが、今回は画像素材が欲しくて、同じようなツールの感覚で生成AIを使ったら、あまりの融通の効かなさに苦労したので、その過程を記事にして、スッキリして年越ししたいなと思います。

 作ったものクソアプリ「例のリストチェッカー」の画像素材

 使用したツールClaude Code: アプリのコード作成
Gemini: アプリの画像作成

 試行錯誤の過程
 最初のアプローチコードはVS CoderにClaude Codeを組み込んでプランを計画し、内容を確認してから実装→デプロイまで行いました。

ただ、Claude Codeは画像の生成はできないというので、「Geminiで生成するので、プロンプトを考えて」として、考えてもらいました。
cartoon style spokesperson character in formal suit,

standing behind microphone podium, serious but slightly

comical expression, flat design illustration, simple background,

mascot character for joke web app, friendly atmosphere
作成された画像: 青いクマ
いい感じです。

 色調の変更とキャラの変更ただ、例のリストのイメージを醸すために色調を変更します。
くまの色を黄色、背景の青を赤くできますか？
作成された画像: 黄色いクマ
おほおほ、いい感じです。
ただ、クマが可愛い感じすぎるので、もう少しイメージを醸す感じにして欲しいです。
顔をアジア人ぽくできますか？
作成された画像: 報道官に変更
あれ？顔でなく頭丸ごと変わってしまいました。

まあ、これはこれでアリです。

 キャラの位置を調整して、吹き出しを追加ここまではいい感じでした。アプリに使うために、キャラを移動し、吹き出しを追加して欲しいです。ただの吹き出しにすると、喋ってる感じになるので、思考の文章を入れる吹き出しにしてほしいです。

このアプリは、報道官はリストの内容に関して明言はすることはなく、この名前が出るのはn回目だなと、心の中で思っているという趣旨ですので。

なので、以下のようなプロンプトをだしました。
キャラクタを左に寄せて、思考の文章を入れる吹き出しを空いたスペースにつけてください
作成された画像: キャラの位置を調整して、吹き出しを追加
そういうことではないんだけど、こっちの指示が悪いのかもしれない。

でも、ちょっとは空気読んで欲しい。

 どうやってもうまくいかない吹き出しの中の文字は不要です

マイクと台もキャラと一緒に左に寄せてください
作成された画像: 吹き出しの中の文字は不要
最初の一行の指示のみ効いたみたいです。
マイクと台もキャラと一緒に左に寄せてください
作成された画像: 一緒に左に寄せて
むぅ、なんかうまく伝わらなくなってきた。
画像で指定して、いい感じになったみたいな記事をみたことがあります。アレをやればあるいは…

ということで、絵で指定してみました。
作成した画像: 指示画像
吹き出しは、右側に移動して大きく、キャラとマイクと台は左に寄せて位置を合わせて下さい
ちょっと不機嫌になってます？

ここはちょっとフレンドリーに接して、空気を柔らかくしよう。
マイクと台。キャラがズレていますよね？
もとに戻ってしまいました。文字でコミュニケーションするのってむずかしいですね。
どうやってもダメそうです。そこで、最初からやり直そうと思い、再度、最初のプロンプトを実行。
作成された画像: おまえは誰だ？
さっきのは奇跡の一枚だったのか…

 画像を元にプロンプトを生成うまくいっていた、あの時に戻りたい。

仕方ないので、あの画像を元にプロンプトを生成してもらい、再度実行してみることにしました。
漫画スタイルのイラストレーション。

自信に満ちた、少し皮肉っぽい笑顔を浮かべたアジア人男性が、マイクが設置された演説台の後ろに立っている。

位置は画面の左側によっている。

彼は濃紺のスーツ、青いシャツ、紺色のネクタイを着用し、髪は短く整えられている。

演説台の前面には、「JOKE WEB APP」という文字が黒字で書かれた黄色いリボン状のバナーがある。

背景はシンプルで、赤い壁の前に、少し傾いた大きな黄色の長方形が配置されている。

思考の吹き出しが中央と右側のスペース全体に空の状態で配置されている。

全体的にフラットでクリーンなベクターアートスタイル。
作成された画像: おお、いい感じ

 慎重にプロンプトを実行①背景の白い部分は不要です。赤と黄色のみの背景にしてください。

②吹き出しは一つでお願いします。
作成された画像: おお、いい感じ
あと少しです。
吹き出しは右のスペースいっぱいの大きさにしてください
作成された画像: これこれ

 最終的に妥協当初の想定よりは、コミカルさが不足しているのですが、まあ、いいかと妥協しました。

 学んだこと「ちょっと違うけど、あとでなおせばいいや…」は命取り

 まとめなんかバズって、誹謗中傷で炎上するのが怖いので、いろいろ機能を盛った計画をした上であきらめていたのですが、

クソアプリ Advent Calendar 2025というのを知り、我慢できずに作ってしまいました。

なので、怖くなったら閉鎖します。