課題
AIと一緒に、スマホのパズルアプリやタイマーアプリを個人で作っている。
7月の終わり、5本のアプリのアイコンがまだ開発ツールの初期アイコンのままだったので、まとめてブランドを揃えることにした。AIに方向性を比べるための画像を3案作ってもらい、その中の1案を選んだ。
方向性はこれで決まった。あとは各アプリに入れていくだけ、のはずだった。
ところが、アプリのアイコンは1か所に表示されるわけじゃない。ホーム画面のアイコン、起動したときの画面（スプラッシュ）、ストアに載せる画像。表示先ごとに、OSやストアが画像を丸く切り抜いたり、角を付け足したりする。
その結果、ストアに出す前の確認をした7月30日の1日で、ずれが5種類見つかった。
解決できるようにすること
AIで作った画像を1枚決めたあと、アプリのアイコンとして各表示先に展開するときに、何を確かめれば「完成」と言えるかを判断できるようにする。
具体的には、表示先ごとに画像がどう扱われるかを知り、数値と実際の画面で確かめる手順を持ち帰れるようにする。
先に結論
画像が良くできていることと、アイコンとして各表示先で正しく見えることは別の話だった。
見つかったずれは次の5つ。
- 起動画面で、アイコンが円で切り抜かれて右側が欠けた
- 元の画像を見ながら描き直したアイコンが、元の絵と少しずつ違っていた
- 起動画面の水滴が、縦長に見えた（縦横比0.49）
- ホーム画面のアイコンが、円形の型抜きで上下左右とも欠けた
- ストアに出す画像に自分で角丸を描いていて、四隅が透明だった
直し方の軸は3つだった。
- 描き直さずに、元の画像から直接切り出す
- 大事な部分を、型抜きされても残る範囲（安全領域）に収める
- 「見た目が近い」ではなく、数値と端末の画面で確かめる
この記事でわかること
- 1枚のアイコン画像が、ホーム画面・起動画面・ストアでそれぞれどう扱われるか
- 生成した画像を「描き直す」と何がずれるか
- ストア用の画像の四隅が透明かどうかを、どう確かめるか
- 完成前に確かめる項目のチェックリスト
こう思う人もいるかもしれない。
「良い画像ができたなら、あとはサイズを変えて入れるだけじゃないの？」
実際にやってみると、そうはいかなかった。表示先ごとに画像の外側が削られたり、角が足されたりする。サイズを合わせただけでは、どこが削られるかまでは分からなかった。
最初は「生成した画像は下書き、正式なアイコンは描き直す」方針だった
AIに作ってもらった3案は、5本のアプリのアイコンを横に並べた比較用の画像だった。ディープネイビーの背景に、アプリごとの色のシンプルな記号を置く案を選んだ。
このとき決めたのが、「比較用の画像は方向性を決めるためのもので、そのままアイコンには使わない」という扱い。正式なアイコンは、拡大縮小しても崩れないよう、AIが単純な図形で描き直して作ることにした。
AIは5本分の記号を図形として描き、ホーム画面のアイコン、Android 8以降のアイコン（Adaptive Icon）、ストア用の512×512の画像まで、1つのスクリプトでまとめて作れるようにした。5本ともアプリのビルドは通った。
ここまでは順調に見えていた。ずれが出てきたのは、翌日、ストアに出す前の確認として、5本を1本ずつAndroidのエミュレータ（パソコン上で動かす仮想のスマホ）で起動していったときだった。
ずれ1: 起動画面で、アイコンの右側が欠けた
色分けパズルのアプリを起動すると、最初の一瞬に出る画面でアイコンの右側のチューブが欠けていた。
Android 12以降は、アプリを起動したときにOSが「スプラッシュ画面」を出す。何も設定していないとホーム画面のアイコンが使われて、円で切り抜かれる。描いた記号が、この円の内側に収まっていなかった。
AIがスプラッシュ用には記号を18%内側に縮めて表示するよう生成スクリプトを直し、アプリを完全に終了してから起動し直した画面で、記号の全体が円に収まることを確かめた。
スプラッシュのずれは、ここで直った。
ずれ2: 描き直したアイコンが、元の絵と違っていた
ところが、もう一度見直すと、欠けは直っていたものの、そもそもアイコンの絵が、選んだ案と違っていた。
ずれ1の修正では、切り抜かれる範囲だけを直していて、表示している絵そのものが正しいかは照らし合わせていなかった。
自分が選んだ絵をもう一度示すと、AIは水滴と2本のチューブという構成に合わせて記号を描き直した。でも、まだ違う。
そこで、自分から、比較用の画像の左端のタイルこそが正しいアイコンだと伝え直した。並べてみると、AIが小さな画像を見ながら手で描き直したアイコンは、チューブの口の縁、波打つ液面、細い輪郭線、背景のグラデーションが元の絵と一致していなかった。
ここで方針を変えた。比較用の画像のそのタイルを正式な元画像（正本）に格上げして、AIが元のPNGの座標から直接切り出す方式に切り替えた。ストア用の画像も、ホーム画面のアイコンも、同じ1枚から作る。
もう一つ、地味にハマったのがホーム画面の表示。アプリを上書きで入れ直しても、アプリ一覧には開発ツールの初期アイコンが残っていた。ランチャー（ホーム画面のアプリ）側に古い表示が残ることがあるので、ランチャーを読み込み直してから、アプリ一覧で新しいアイコンになったことを確かめた。
ずれ3: 起動画面の水滴が、縦長だった
ずれ2のときに、スプラッシュには記号全体ではなく、水滴だけを専用に描いて出す形に変えていた。その水滴が、どうも縦に細長く見える。
自分がそう伝えると、AIが数値で調べた。水滴を描いた枠は108×108の正方形だったが、中の図形が実際に占めている範囲（外接矩形）は幅26・高さ53。縦横比は0.49で、枠が正方形でも、中身が細長ければ細長く見える。
AIが図形を幅52・高さ70（縦横比0.74）に直し、起動画面の画像で、自然な形で中央にあり、欠けもないことを確かめた。
この時点で、ここまでの指摘をまとめて、AIが再発防止の手順書を書いた。正本を先に決める、承認した画像を目で見て描き直さない、ホーム画面と起動画面の素材を分ける、形を数値で確かめる、端末の3つの画面で確かめる、という内容だった。
なお、スプラッシュはこのあと別の作り方に変えている。その話はこの記事では扱わない。
ずれ4: ホーム画面のアイコンが、円形の型抜きで欠けた
次は、アプリ一覧のアイコン。元画像から切り出したタイルの上下左右が、丸く削られていた。
Android 8以降のアイコン（Adaptive Icon）は、前景と背景の2枚の画像を重ねて、端末やランチャーごとの形で型抜きする。同じアイコンが、ある端末では円、別の端末では角丸の四角になる。自分のエミュレータのランチャーは円だった。
切り出したタイルを前景いっぱいに置いていたので、円の外にはみ出た部分が削られていた。
AIは、Adaptive Iconの前景だけを、透明なキャンバスの中央66%まで縮めた。外側は背景の画像（ネイビー一色）で埋まる。ストア用とAndroid 7以前向けの四角いアイコンは変えていない。アプリ一覧の円形表示で、水滴、両方のチューブの縁、底、液面がすべて円の中に収まったことを画像で確かめて、自分も「問題なし」と確認した。
ここで1つ、この記事の下書きのためにAIが公式ドキュメントを読み直して、気づいたことがある。Androidの公式ドキュメントでは、Adaptive Iconの画像は108dpで、型抜きされても必ず残る安全領域は中央の66dp。割合にすると約61%になる。当時の記録の「中央66%」は、この66dpとは別の数字だった。
自分のアイコンはタイルの内側に余白があったので、円形の表示では収まって見えた。ただ、ほかの形の型抜きでどう見えるかまでは確かめていない。これからやるなら、公式の66dpを基準に考えたほうが安全そう。
ずれ5: ストアに出す画像の四隅が透明だった
5つ目は、画面ではなくストアに出す画像の話。
ブランドまわりの最初の調査は、別のAIにやってもらっていた。ストアに出す前に、自分から今のAIにも同じ調査をやり直してもらった。結果によってはアイコンを変えることもある、という前提で。最初の調査には、Google Playの今の要件は「公開作業時に再確認する」と保留していた点があった。
やり直した調査で、AIはGoogle Playの公式ページから、ストア掲載アイコン（512×512）は「角丸を描かない正方形」で出し、角丸はGoogle Play側が付ける、という仕様を確認した。
ところが、それまでの生成スクリプトは、ストア用の画像に自分で角丸（半径104px、約20%）を描いていて、角の外側は透明になっていた。このままだと、Google Playの角丸と自分の角丸が二重になるおそれがある。
自分が「作り直しましょう」と返して、修正に入った。
直している途中で、四隅だけが半透明になった
修正の途中で、AIが自分で不具合を見つけた。
角丸をやめて背景を全面塗りつぶしたつもりが、四隅のピクセルだけ完全に不透明にならず、不透明度（アルファ値、A）が64くらいの半透明になっていた。縁をなめらかにする処理（アンチエイリアス）が、四隅にもかかっていたのが原因だった。
このままだと、Google Playが角丸を付けたときに、薄い透明の縁として出るおそれがある。
AIが塗りつぶしの方法を変えて、5本すべてのストア用画像の四隅が完全に不透明（A=255）になったことを、ピクセルを読んで確かめた。さらに、Google Playと同じ30%の角丸を手元でかけてみて、角丸が二重になったり、透明な部分がにじんだりしないことも画像で確かめた。
自分からは、色分けパズルのタイル部分が修正前後で変わっていないかも確かめてもらった。ピクセル単位で一致していて、元画像からの切り出しは変わっていなかった。
この記事を書くにあたって、コミットに残っている修正前後のストア用画像を、AIがもう一度読み直した。修正前は5本とも四隅のAが0（完全に透明）、修正後は5本とも四隅が255で、透明なピクセルは1つも無かった。途中のA=64の画像はコミットされていないので、こちらは当時の記録だけが根拠になる。
残り4本も、手で描き直した近似だった
ずれ5の修正が終わって、作業時間を計るタイマーアプリの確認に進んだときのこと。
エミュレータに入れたアイコンと、元の比較用の画像を見比べていて、自分が気づいた。元の絵は時計と葉っぱなのに、アプリのアイコンには葉っぱが無い。
AIが元画像をピクセルで解析して、背景の色からタイルの境界を探し、各アプリのタイルの座標を割り出した。すると、タイマーだけでなく、反応速度を測るアプリ、ブロックパズル、数字を合体させるパズルの4本とも、最初に描き直した近似のままだった。色分けパズルで起きたずれ2と、原因は同じ。
手順書には「描き直さない」と書いたのに、それより前に作った残り4本は、自分が見比べるまでそのままになっていた。
AIから、直す範囲（4本ともすぐ直すか、タイマーだけにするか）の選択肢と推奨が出て、自分は推奨どおり4本ともすぐ直すほうを選んだ。AIは、色分けパズル専用だった切り出しの処理を、どのアプリでも使える形に作り直し、手で描いていた処理は削除した。
4本のストア用画像の四隅がA=255であること、元の絵と一致していること、色分けパズルの出力が変わっていないことを確かめた。そのあと、残りのアプリを1本ずつエミュレータに入れ、新しいアイコンを自分が確認して、5本ともストアに出す前の確認を終えた。
5つのずれに共通していたこと
振り返ると、ずれは2種類に分けられる。
| 種類 | ずれ | 何が足りなかったか |
|---|---|---|
| 表示先が画像を加工する | 1（起動画面の円）、4（ホーム画面の型抜き）、5（ストアの角丸） | 表示先ごとに、どこが削られ、何が足されるかを知らなかった |
| 元の絵から離れていく | 2・残り4本（描き直し）、3（水滴の比率） | 「見た目が近い」で作り、元の絵や数値と照らし合わせていなかった |
どれも、画像単体を見ているだけでは気づけなかった。ビルドが通っても、アイコンのファイルがそろっていても、分からない。
手順書にも、部品があるかを確かめるだけのテストや、ビルドが通ったことだけでは、位置・比率・欠け・古い表示の残りは保証できない、と書いてある。
表示先ごとに、公式ドキュメントで確かめたこと
当時の記録にあった仕様を、2026年10月14日に公式ドキュメントで読み直した。自分のアプリで試したのはAndroidとGoogle Playの範囲で、iPhone向けは当時まだ作っていなかった。
| 表示先 | 公式ドキュメントの内容 | 確かめ方 |
|---|---|---|
| Adaptive Icon（Android 8以降） | 画像は108×108dp。端末ごとに円や角丸四角などの形で型抜きされ、中央の66×66dpは型抜きされない安全領域 | 大事な部分が中央66dp（約61%）に収まるか |
| スプラッシュ（Android 12以降） | アイコンの背景ありなら240×240dpで、直径160dpの円に収める。背景なしなら288×288dpで、直径192dpの円。円の外は見えなくなる | アプリを完全に終了して起動し、欠けないか |
| Google Playのストア掲載アイコン | 512×512の32ビットPNG。形は正方形で、角丸（サイズの30%）はGoogle Playが付ける。「最終的な画像の角を丸めない」（原文は英語、訳は筆者）。透明な部分にはGoogle Playの画面の背景色が見える | 四隅4ピクセルのAが255か |
| iPhoneなど（Appleのガイドライン） | 正方形のレイヤーを用意すれば、システムが角丸を付ける。あらかじめ形を切り抜いたレイヤーは縁がギザギザに見える原因になる。背景のレイヤーは端まで不透明に | 角丸を描かずに正方形で用意しているか |
2つ補足がある。
1つ目。当時の記録には「2026年3月31日以降、Google Playが30%の角丸を自動で付ける」とあった。でも、今回読み直した公式ページ（最終更新2026年6月15日）には、その日付は見当たらなかった。ページにあるのは2019年の切り替えの記述で、日付の出どころは分からない。仕様の内容自体は合っていたが、日付まで書くなら公式ページで確かめたほうがいい。
2つ目。Google Playの透明についての書き方は「できれば透明を含まない背景色を選ぶ」というお願いの形で、透明だと提出できない、とは書かれていない。自分が四隅をA=255にそろえたのは、Google Playの角丸と二重にならないようにするためだった。
完成前に確かめる手順
手順書と今回の経験から、生成した画像をアプリのアイコンにするときの確認をまとめるとこうなる。
作る前に
- 正本を1枚に決める。どのファイルのどの範囲が正式なアイコンかを書き残す
- 承認した画像は、目で見て描き直さない。元画像から座標を決めて切り出し、何度作っても同じ結果になるようにする
- ホーム画面、起動画面、ストアで素材を分ける。1つの画像をそのまま全部に使い回さない
数値で確かめる
- 記号の実際の範囲（外接矩形）と縦横比。枠ではなく中身を測る
- Adaptive Iconは、大事な部分が中央66dpの安全領域に入っているか
- ストア用の画像は、角丸を描かない正方形で、四隅4ピクセルのAがすべて255か
画面で確かめる（Androidの場合）
- ホーム画面・アプリ一覧のアイコン
- 設定の「アプリ情報」のアイコン（端末が今読み込んでいるアイコン）
- アプリを強制終了してから起動したときの起動画面
7と8を分けるのは、アプリ情報では新しいアイコンになっているのに、アプリ一覧だけ古いまま、ということがあるから。アプリ情報だけ見て「直った」としないようにしている。
四隅のAを読むのは、画像を扱えるプログラムなら数行で済む。この記事の数字も、AIに数行のプログラムを書いてもらって読み直したもの。
こんな人に向いている
- AIで作ったロゴやイラストを、アプリのアイコンにしようとしている人
- Androidのアイコンが、端末によって欠けて見えると言われた人
- Google Playのストア用アイコンに、自分で角丸を描いている人
まとめ
AIに作ってもらった画像のおかげで、方向性は3案を見比べて選ぶだけで決められた。でも、アイコンとして5本のアプリに展開する段階では、表示先ごとの加工と、元の絵とのずれが続けて出てきた。
直す手がかりになったのは、「似ているか」ではなく「同じか」を確かめることだった。元画像から切り出す。数値で測る。表示先の画面で見る。この3つを済ませて、やっと「完成」と言えるようになった。
| 項目 | 内容 |
|---|---|
| 結論 | 生成した画像は、描き直さずに元画像から切り出し、表示先ごとの型抜き・角丸・透明を数値と端末の画面で確かめて初めて完成する |
| 教訓 | 「見た目が近い」「ビルドが通った」は完成の根拠にならない。表示先ごとに何が削られ、何が足されるかを先に知る |
| 対象読者 | AIで作った画像を、アプリのアイコンやストア画像に使おうとしている人 |
同じ状況に陥ったときの回避策
- 承認した画像を正本と決め、描き直さずに座標を決めて切り出す
- Adaptive Iconは、大事な部分を中央66dp（108dpのうち）に収める
- Android 12以降の起動画面は、円で切り抜かれる前提で、起動画面専用の素材を用意する
- ストア用の画像は角丸を描かない正方形にして、四隅のAが255かを読む
- ホーム画面、アプリ情報、強制終了後の起動画面を、それぞれ別に確かめる
- 仕様の日付や数値は、記録やAIの説明だけで済ませず、公式ページで読み直す
次に読むなら
アイコンができたら、次はアプリの中の画面に生成画像を入れる場面が来るかもしれない。そこにはまた別の落とし穴がある。
- AI生成画像を置くだけでは完成しない。UI統合で見つかった3つの落とし穴 — 文字との重なり、画面サイズ、透明な四隅から古い背景が見える問題と、その確かめ方
公式情報
- Adaptive icons（Android Developers）
- Splash screens（Android Developers）
- Google Play icon design specifications（Android Developers）
- App icons（Apple Human Interface Guidelines）
この記事は、筆者が実際に個人開発しているモバイルアプリの開発記録（2026年7月29日〜30日）を基に、独自調整したAIが下書きを作成し、筆者が事実確認・編集を行った上で公開しています。
