MENU

ExpoとReact Nativeで必要なicon・adaptive-icon・splash-icon画像サイズは?

何も知らない、コードも書けない初心者がchatgptだけでアプリを開発して、グーグルプレイで出品しようとした結果、最初につまずいた画像サイズ。
chatgptに相談しても、1242×2436だったり、512×512だったり、容量を得ない回答しか得られない。

仕方が無いので、自分で調べてようやく正解が分かりました。

そこで今回は、Google Play出品時にチェックすべき画像とその理由を全部まとめてみました!

目次

はじめに:画像サイズってそんなに大事?…実はめちゃくちゃ大事です

React Native × Expo でアプリを作ったら、「さぁビルドしてリリースだ!」ってテンション上がりますよね?
でもGoogle Playに出すとき、「画像サイズ」と「形式」でめっちゃ足止めくらいます。“画像が小さすぎます”とか“形式が違います”とか、Play Consoleが冷酷にエラーを出してきます。

そのうえ、AdMob入れるなら「見た目」も大事。広告のときにチラッと出るあなたのアプリアイコンが「ボケてる」「謎に切れてる」なんて…悲劇ですよね。

というわけで今回は:

  • アプリアイコン(icon)
  • アダプティブアイコン(adaptive-icon)
  • スプラッシュ画像(splash-icon)

この三種の神器について、サイズ・形式・注意点を全部まとめてます。AdMob使うときの話も込みでいきます。もうPlay Consoleと喧嘩しなくて済むようにしましょう。

まずはこれ!Google Play に必要な画像とサイズ一覧

もう最初に結論テーブル置いときます。これスクショして壁に貼っといてください:

用途ファイル名例推奨サイズ形式備考
アプリアイコンicon.png512×512 pxPNG (32bit)透明でもOK。角丸や影は不要(Googleが自動でやってくれる)
アダプティブアイコン前景adaptive-icon-foreground.png1024×1024 pxPNG透過背景必須。中央のロゴは66x66dpのセーフゾーン内に配置する
アダプティブアイコン背景adaptive-icon-background.png1024×1024 pxPNG不透明画像または単色指定(backgroundColor)でOK
モノクロアイコン(Android13〜)adaptive-icon-monochrome.png1024×1024 pxPNG/SVGテーマアイコン用。色はモノクロ、背景なし
スプラッシュ画像splash.png1024×1024 or 1000×1500 pxPNG背景透明または単色+中央にロゴ。縦長にしたほうが綺麗に見えることも
Feature Graphic(ストア用)feature-graphic.png1024×500 pxPNGPlayストアの上部に表示される横長バナー。ブランディングに超大事
スクリーンショット320px〜3840pxJPG/PNG最低2枚必要。スマホ/タブレット用それぞれ準備しておくとベター

Expoプロジェクトにおけるアイコン設定のキホン

はい、ここからが本題。あなたの脳内に油性ペンで書き込んでおきたいのはこれ:

「すべての画像、まずは1024×1024で作れ」

なぜなら、Expo(とEAS Build)は、この1枚から勝手に全部リサイズしてくれるから。そう、あなたが頭を抱えなくてもいいように、親切設計なんです。Expoだけは。

でも、それってホントに1024×1024じゃないとダメ?

いい質問ですね(と言いつつ、よくある質問です)。

1024×1024がデフォルト&推奨されてる理由は以下の通り:

理由内容
📱 高DPI端末でも綺麗解像度が高いスマホでもボケずに表示される
🔧 自動変換しやすいExpoやEASが自動で必要サイズに調整してくれる
🎨 デザインが崩れにくい拡大縮小してもシャープな見た目を保てる
🛠️ 開発が楽複数サイズ用意しなくて済む。1枚で全部対応できる

なので、基本的には全部1024×1024でOK。たった1枚で世界が変わるってやつです。

アダプティブアイコンとは?普通のアイコンと何が違うの?

一言でいうと、「マスクをかぶせて色んな形に変身できるアイコン」です。Android 8.0(Oreo)以降で導入されました。

普通のアイコンが「そのまま表示」されるのに対して、アダプティブアイコンは、
背景と前景に分かれていて、ユーザーの設定やデバイスによって勝手に形が変わります。

たとえば:

  • Pixel → 丸いアイコン
  • Galaxy → 四角に丸角つき
  • Oppo → 花びらっぽい謎の形

しかも、形だけじゃなく視差効果やアニメーションまで効かせられる。やりすぎ。

Expoでのadaptive-iconの設定方法

さて、React Native + Expo でこのadaptive icon(アダプティブアイコン)を設定したい場合、設定ファイル(app.json または app.config.js)に以下のように記述します:

"android": {
  "adaptiveIcon": {
    "foregroundImage": "./assets/adaptive-icon-foreground.png",
    "backgroundImage": "./assets/adaptive-icon-background.png",
    "monochromeImage": "./assets/adaptive-icon-monochrome.png",
    "backgroundColor": "#FFFFFF"
  }
}

どれも1024×1024 PNGで作ればOK。優しすぎる仕様。

それぞれの画像の役割を簡単にまとめると:

種類必須内容
foregroundImage透過PNG。ロゴを中心に置く。マスクされることを考えて余白を多めに。
backgroundImage❌(背景色でも可)不透明な背景用PNG。背景にパターンを入れたいとき用
backgroundColor✅(背景画像なしなら)単色背景にしたいとき。backgroundImageより優先されます
monochromeImage✅(Android13以降でテーマ対応したいなら)単色ロゴ用。ダークモードや壁紙テーマと融合してくれる未来型アセット。

セーフゾーン問題:なんでロゴが勝手に切れるの?

これは「Androidお得意のトラップ」みたいなもんで、前景画像は中央66×66dp以内にロゴを収めないと勝手に切られるんですよ。

え、dpって何?って顔してる?
簡単に言うと、“見た目の大きさ”の単位です。端末の解像度に左右されないサイズのこと。

で、この66dpってのを1024px換算すると、だいたい中央に660px四方の正方形を想像すればいい。
ロゴがその外にはみ出ると、マスクで見えなくなります。残酷な世界。

モノクロアイコン(Android 13〜)は出しておいたほうがいい?

答え:できれば出しておけ

Android 13以降、ユーザーは「テーマ付きアイコン」を選べます。
そのとき使われるのが、このmonochromeImage
これを設定しておくと、アイコンが壁紙に馴染んだモノトーン仕様になって、ダサさから救われます。

出さないと?
まぁ、古臭い浮いたアイコンとして晒されますね。

スプラッシュスクリーン画像、正しいサイズは?

スプラッシュスクリーン、つまりアプリ起動時に出てくる「なんかロゴだけ出てるやつ」ですね。

こちらもExpoなら app.json で簡単設定できます:

"splash": {
  "image": "./assets/splash.png",
  "resizeMode": "contain",
  "backgroundColor": "#ffffff"
}

よくある設定ミスと対策

問題対策
ロゴが中央でめっちゃ小さいresizeMode"cover" にしてみよう
背景が不自然に見える背景を単色にして、ロゴの背景は透過PNG
ダークモードでロゴが見えない"dark" オプションを使って別の画像と色を設定しよう

Google Play Console に必要な「その他画像」たち

「アイコンとスプラッシュ作ったし、もう終わりでしょ?」って思った人、甘い。メロンくらい甘い。
Googleさんは、「もっとビジュアル出して♡」ってPlay Consoleでせがんできます。

以下、出品時に実質的に求められる画像アセット一覧です:

項目必須推奨サイズ内容
Feature Graphic✅(実質)1024×500 pxストア上部に出てくる横長バナー。超重要。第一印象これで決まる
スクリーンショット幅320px〜3840px(1辺)最低2枚。スマホ/タブレット別に必要。縦長が基本
Promo VideoYouTube URL任意。でもあると映える。ゲーム系は必須レベルで使われてる
TV バナーTVアプリのみ1280×720 pxAndroid TV向けアプリのときだけ必要
Wear OS アセットWear OSのみ指定ありスマートウォッチ対応アプリ用。関係ない人は忘れてよし

Feature Graphic(1024×500)は何のためにあるの?

あなたのアプリがGoogle Playで紹介されるとき、まず目に入るのがこの画像
なのに、“適当にロゴ貼っただけ”みたいな画像をアップしてる人、多すぎて泣けます。

ポイント:

  • アプリの雰囲気がわかる背景や色味にする
  • タイトルやキャッチコピーも入れてOK(ただし短く、スマホ画面で読めるサイズ)
  • 読みやすさ>デザイン性 ← これ重要。小さくなっても見えるように。

開発者視点で見ても、Feature Graphic はマーケティング要素の中で最もROI高い説ある

AdMobとの関係:追加の画像、必要?

ここ、よく誤解されるところ。結論から言うと…

AdMobのために追加で画像を用意する必要はありません。

なぜかというと、AdMobはGoogle Playに登録されたメタデータをそのまま流用して使うからです。
つまり、あなたがPlay Consoleでちゃんとicon.pngやFeature Graphicを設定しておけば、それでOK。

ただし、注意点としては…

シーン影響する画像コメント
ネイティブ広告でアイコンが表示されるicon.png解像度が低いと広告がショボく見えます。高解像度1024×1024を使っておくのが吉
広告経由でストアに来るユーザースクリーンショット・Feature Graphic第一印象が広告→ストアになるので、ビジュアルが一致していることが重要

つまり、AdMobにとっても見た目は命というわけ。
カスみたいなアイコンで広告配信しても、ユーザーは警戒してスワイプしていきます。
…まるでマッチングアプリの世界ですね。

まとめ:画像アセットのチェックリスト【保存版】

じゃあ最後に、Google Play + Expo + AdMob向けに必要な画像を全部表でまとめておきます。
このリストを「うわぁ多いなぁ」と思いながらも、やった人だけがPlay Consoleで勝てます。

用途ファイル名例サイズ必須?備考
アプリアイコンicon.png512×512 px角丸/影は不要。Play Consoleに明示的にアップロード必要
アダプティブアイコン(前景)adaptive-icon-foreground.png1024×1024 px透過PNG。セーフゾーンにロゴ配置
アダプティブアイコン(背景)adaptive-icon-background.png1024×1024 px不透明背景 or backgroundColor
モノクロアイコンadaptive-icon-monochrome.png1024×1024 px or SVGAndroid13+テーマアイコン対応
スプラッシュ画像splash.png1024×1024 px or 1000×1500 pxExpoで背景色+ロゴ配置。resizeModeに注意
Feature Graphicfeature-graphic.png1024×500 px✅(実質)ストアの一等地に表示されるやつ。ブランディング命
スクリーンショット320〜3840 px(1辺)最低2枚。スマホ/タブレット分用意
Promo VideoYouTube URLあれば再生される。特にゲーム系で効果大
TV/Wear OS用画像指定ありTVやスマートウォッチ対応アプリのみ対象
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次