課題
AIで良い画像を作れても、アプリやWeb画面へ置いた瞬間に「文字と重なる」「端末によって崩れる」「透明部分から古い背景が見える」といった問題が起きることがある。
解決できるようにすること
AI生成画像をUIへ組み込むとき、画像単体の見栄えだけで完成扱いにせず、本文領域・画面サイズ・透明部分・読み込み失敗時の表示まで確認できるようにする。
先に結論
AI生成画像は、きれいに生成できた時点ではまだ素材にすぎない。実際のUIへ組み込み、文字やボタンを重ね、複数の画面サイズと実機で確認して、ようやく完成になる。
今回、個人開発している色分けパズル「月灯り調合所」で、羊皮紙と封蝋をAI生成画像へ変更した。画像自体は採用できる品質だったが、組み込んだ後に3つの問題が順番に見つかった。
- 羊皮紙の装飾枠と本文が重なった
- 固定した余白が端末サイズに追従しなかった
- 透明な四隅から古い背景が透けていた
「画像生成が成功した」と「UIとして正しく使える」は別の話だった。
文字まで画像にしなかった理由
最初に決めたのは、羊皮紙へ日本語の文字を焼き込まないことだった。
ゲーム内の文章は長さが変わる。端末の幅も変わる。文字まで1枚の画像にすると、文章を直すたびに画像を作り直す必要があり、小さい画面では読みにくくなる。
そこで、AIには無地の羊皮紙と透明背景の封蝋だけを作ってもらい、文字とLayoutはアプリ側で重ねる設計にした。「これなら画像を差し替えるだけで済む」と考えていたが、実際には画像とCodeの境界に確認事項が残っていた。
落とし穴1：装飾枠と本文が重なった
生成した羊皮紙には、月章、枝、薬瓶、金色の枠が描かれていた。その上へ従来と近い余白で本文を置くと、文字が装飾へ乗ってしまった。
画像だけを見ていると、装飾はきれいに収まっている。けれども、UIでは中央に文字やボタンを置く。「画像の余白」と「文字を安全に置ける領域」は同じではなかった。
最初の修正では、用途ごとに余白を広げた。依頼書、一覧カード、詳細画面では縦横比が違うため、同じ余白を使い回さず別々に調整した。
「これで重なりは直った」と言いたいところだったが、確認はもう一段必要だった。
落とし穴2：固定pxでは端末サイズに追従しなかった
余白を広げた後、「端末サイズが変わっても問題ない設計か」と確認した。ここで、まだ直し切れていないことが分かった。
背景画像は画面に合わせて伸縮する。一方、本文の余白を固定pxにすると、画面が大きくなるほど装飾に対する余白の比率が小さくなる。固定した数値そのものを確認するTestも、複数端末で安全かどうかまでは保証していなかった。
そこで固定pxをやめ、表示領域に対する割合で本文の安全領域を決める方式へ変更した。小さい画面から大きい画面まで複数サイズをTestし、文字が装飾枠へ入らないことを確認した。
「Testがあるから大丈夫」ではなく、「そのTestは何を保証しているのか」まで見る必要があった。
落とし穴3：透明部分から古い背景が見えた
さらにビルド前の確認で、「古い羊皮紙風の表示枠の上に、新しい画像を載せていないか」という疑問が出た。
Codeを確認すると、その通りだった。読み込みに失敗した場合へ備えた古いデザインが常に下へ描画され、その上に新しい羊皮紙画像を重ねていた。
「画像は正常に読み込めているのに、なぜ古い色が残るんだろう」。原因は新しい画像ではなく、その下の表示構造にあった。
新しい画像の四隅は透明だったため、画像の読み込みに成功していても、透明部分から古い枠や色が見えてしまう。
Fallback、つまり画像を読み込めなかったときの代替表示を残すこと自体は必要になる。問題は、成功時にも常に表示していたことだった。古いデザインを通常の下地から外し、画像の読み込みErrorが起きた場合だけ表示するように直した。
最後は実機で確認した
修正後は、複数サイズの画面を想定したWidget Testと通常Testを通した。それでも、羊皮紙の細部が読めるか、封蝋が小さすぎないか、透明な四隅がそれぞれの背景になじむかは、数値だけでは判断しにくい。
最終的にはTestFlightの実機で確認した。文字やボタンと装飾枠の重なりは問題ない範囲で、羊皮紙と封蝋の細部も見て楽しめる状態だった。透明部分から各画面の背景色が見える点も不自然ではなかった。
「お、今度は素材だけでなく画面として成立している」と確認できたところで、作業を完了にした。
AI生成画像をUIへ入れる前の確認リスト
- 画像へ可変の文章を焼き込まず、文字をCode側で管理できるか
- 装飾を避けて文字やボタンを置ける安全領域があるか
- 固定pxではなく、画面サイズに追従する設計になっているか
- 小さい画面と大きい画面の両方で確認したか
- PNGなどの透明部分に、意図しない下地が見えていないか
- Fallbackは通常時ではなく、読み込み失敗時だけ表示されるか
- 自動Testだけでなく、実機で細部と読みやすさを確認したか
まとめ
AI生成画像をUIへ取り入れると、短時間で世界観を大きく変えられる。ただし、画像がきれいにできたことと、実際の画面で使えることは同じではない。
今回の3つの問題は、どれも画像単体のReviewだけでは見つけにくかった。文字を重ね、画面を伸縮させ、透明部分の下まで確認して初めて分かった。
AIへ画像を作ってもらった後こそ、Codeと実機の仕事が始まる。素材、Layout、Fallbackを別々に確認すると、「画像は良いのに画面が惜しい」という状態を避けやすくなる。
この記事は、筆者が実際に個人開発しているモバイルゲームの開発記録（2026年8月25日〜26日）を基に、独自調整したAIが下書きを作成し、筆者が事実確認・編集を行った上で公開しています。
追記（2026-09-07）: この羊皮紙・封蝋のUIを使った「月灯り調合所」は、その後App Storeで一般公開された。実際の画面は月灯り調合所の紹介ページで見られる。
