Androidアプリ開発に必要な画像まとめ｜フィーチャーグラフィック・スクリーンショット・アイコンの作り方

Androidアプリを作るときに意外と困ったのが「画像って何を用意すればいいの？」ということでした。

iOSアプリを公開した経験があったので、ある程度は分かっているつもりでした。

ところがAndroidでは、

フィーチャーグラフィック
スクリーンショット
Google Play用のアプリアイコン
AndroidのAdaptive Icon
foreground
background
monochrome
通知用のアイコン

など、聞き慣れない名前が出てきます。

しかも、Google Playにアップロードする画像と、Androidアプリそのものに組み込むアイコンでは、必要なものが少し違います。

この記事では、私がAndroidアプリを作る中で実際に迷ったところを中心に、Androidアプリ公開に必要になった画像と、その作り方を自分用のメモとしてまとめておきます。

まず用意した画像はこの3種類
1. 1．フィーチャーグラフィック
2．スクリーンショット
1. スクリーンショットは「実際のアプリ画面」を使う
3．Google Play用のアプリアイコン
Androidのアイコンは少しややこしい
foreground（前景）は背景を透明にする
background（背景）は無地などにする
monochrome（モノクロ）は単色用
Android用アイコンで用意した４枚
セーフゾーンは「中央66%」を意識する
1. 512×512pxで考えると？
Android StudioのImage Asset Studioを使ってみた
1. あまりおすすめしない
2. Android Studio自体はインストールしておいて損はない
Android Studioでのアイコン作成方法
Androidアプリ用の画像をまとめると
iOSアプリをAndroid化するときは画像も作り直す
1. iOS版から流用したもの
2. Android用に作り直したもの
まとめ

まず用意した画像はこの3種類

AndroidアプリをGoogle Playで公開するために、まず考えたのが次の3つです。

1．フィーチャーグラフィック

1024×500px

Google Playのストア掲載などで使用される横長の画像です。

私はFigmaを使って、

アプリ名
キャッチコピー
アプリの雰囲気

などを入れた横長バナーとして新しく作りました。

↓実際に作った画像

簡単に気分の変化を記録することができるアプリです！

ちなみにiOSアプリバージョンのダウンロードはこちら↓（スクリーンショット画像もここから見れます）

iOSのスクリーンショットをそのまま使うのではなく、Android版として新しくデザインする画像と考えると分かりやすいと思います。

Google Playではフィーチャーグラフィックのサイズが1024×500pxと指定されています。

また、アルファ（透明）なしのJPEGまたは24bit PNGが要件です。

2．スクリーンショット

次に必要なのが、実際のアプリ画面を見せるスクリーンショットです。

私はすでにiOS版のスクリーンショットを作っていたので、iOS用の画像をAndroid向けのサイズ・比率に作り直す方法にしました。

AndroidのGoogle Playでは、スクリーンショットを最大8枚まで登録できます。

また、現在のGoogle Playでは、ストア掲載を公開するために最低2枚のスクリーンショットが必要です。

ただし、

スマホ用2枚を用意すれば、タブレット用も必須

という意味ではありません。

タブレットやChromebookなどの大画面向けに最適化して掲載したい場合は、大画面向けのスクリーンショットも別に用意することになります。

私はフィーチャーグラフィック画像を最初に載せて、その後に続くような流れのスクショ画像を作りました。

いろんな人のをみていると画像の大きさは横長の人もいました。

項目	規定
枚数	最低2枚
最大枚数	8枚
ファイル形式	JPEG / 24-bit PNG
透明	❌ 不可
最小サイズ	320px
最大サイズ	3,840px
縦横比	最小辺に対して最大辺が2倍を超えない
推奨	1080 × 1920px（9:16）
推奨枚数	4枚以上

スクリーンショットは「実際のアプリ画面」を使う

スクリーンショットには、実際のアプリの画面を使います。

アプリの機能を説明するために短い文章を追加することはできますが、Googleもスクリーンショットではアプリの実際の体験や主要機能が分かることを重視しています。

私の場合は、iOS版ですでに作っていたスクリーンショットをベースにAndroid版を作りました。

3．Google Play用のアプリアイコン

Google Playに登録するアプリアイコンは、

512×512pxのPNG

を用意します。

現在のGoogle Playの要件では、32bit PNG（アルファ付き）、512×512px、ファイルサイズ1MB以下などが指定されています。

この画像については、iOS用に作ったアプリアイコンを512×512pxにリサイズして流用することもできます。

ただし、ここで注意したいのが、

「Google Playに登録するアイコン」と「Androidスマホのホーム画面などで使われるアイコン」は別の話

ということです。

Androidでは、さらにAdaptive Iconという仕組みがあります。

Androidのアイコンは少しややこしい

Androidのアプリアイコンを調べていて、一番「なんだこれは？」となったのがAdaptive Iconでした。

Adaptive Iconでは、カラーアイコンについて基本的に、

foreground（前景）
background（背景）

という2つのレイヤーを組み合わせてアイコンを作ります。

さらに、ユーザーのテーマに合わせてアイコンを単色表示するための、

monochrome（モノクロ）

というレイヤーも用意できます。

Android公式では、Adaptive Iconの各レイヤーを108×108dpで作り、中央の66×66dpをセーフゾーンとして考えるデザインが案内されています。

foreground（前景）は背景を透明にする

まずforegroundです。

foregroundには、アイコンの絵柄を入れます。

例えば、

スマイルマーク＋カラーリング

というアイコンなら、その絵柄だけをforegroundにします。

ここで重要なのが、

背景を透明にすること

です。

絵柄 → 残す
背景 → 透明

という状態にします。

Adaptive Iconはforegroundとbackgroundを重ねて表示する仕組みなので、レイヤーを分けて作ることが大切です。

background（背景）は無地などにする

次にbackgroundです。

backgroundは、

アイコンの背景になるレイヤー

だからです。

例えば、

#F7F5F1

のようなクリーム色を背景色として使うなら、その色で単色のbackgroundを作ります。

Android公式の例でも、foregroundにはロゴ、backgroundには背景色という分離されたレイヤーになっています。

monochrome（モノクロ）は単色用

そして、もう一つがmonochromeです。

これは名前の通り、単色のアイコンとして使用するためのレイヤーです。

Androidのテーマアイコンでは、ユーザーのテーマなどに合わせてアイコンが単色で表示されることがあります。

そのため、カラーのアイコン画像をそのまま入れるのではなく、

絵柄の形だけが分かる単色レイヤー

を用意します。

背景は透明です。

Android公式でも、テーマ対応のためにmonochrome用の1レイヤーを用意する方法が説明されています。なお、monochromeの色そのものを固定して表示するというより、システム側でテーマに合わせて色付けされる仕組みです。

Android用アイコンで用意した４枚

今回、私が用意したのは次の４枚です。

assets/
├── icon-foreground.png
├── icon-background.png
└── icon-monochrome.png

これにもう一つ、通知用の96px × 96pxの小さいmonochrome.pngも作成しました。

それぞれ、

icon-foreground.png

絵柄を入れる
背景は透明
重要な絵柄は中央に配置（66％）

icon-background.png

背景色を入れる
基本的には単色
foregroundの絵柄は入れない

icon-monochrome.png

単色の絵柄
背景は透明
テーマアイコンなどで使用
重要な絵柄は中央に配置（66％）

通知用のアイコン

96px × 96pxのモノクロ
背景透過
セーフゾーンはいらない

という役割です。

ただし、このassets/という保存場所はAndroidそのものの共通ルールというわけではありません。

私はアプリの構成上、このような場所に元画像を管理しました。

実際にAndroidアプリへ組み込む際のリソース配置は、プロジェクトの構成や使用しているフレームワークによって異なります。

セーフゾーンは「中央66%」を意識する

Adaptive Iconでもう一つ分かりにくかったのが、セーフゾーンです。

Androidのアイコンは、端末やランチャーによって、

円形
角丸
その他の形

など、表示時のマスクが変わることがあります。

そのため、アイコンの端ギリギリまで重要な絵を配置すると、端末によっては切れてしまう可能性があります。

Android公式では、108×108dpのキャンバスの中央66×66dpを、マスクによって切り取られないセーフゾーンとして説明しています。

512×512pxで考えると？

ざっくりした目安として、

中心の約66%

に重要な絵柄を収めると考えると分かりやすいです。

512×512pxで作る場合、

512 × 0.66 ≒ 338px

なので、中心付近の約338×338pxの範囲を重要な絵柄の目安にします。

特に、

四隅には重要なものを置かない

ようにしました。

Android StudioのImage Asset Studioを使ってみた

Adaptive Iconについて調べていると、

Android StudioのImage Asset Studio

という機能を見つけました。

Android Studioには、Adaptive IconやLegacy Iconを作成するためのImage Asset Studioがあります。

Android公式ドキュメントでも、resフォルダから「New → Image Asset」を開き、「Launcher Icons (Adaptive and Legacy)」を選択する方法が案内されています。

Android Studioはこちらからダウンロードできます。

Android Studio｜Android Developers

あまりおすすめしない

実際にやってみると、Android Studioはプロジェクトの表示方法によってフォルダの見え方も違うので、最初はかなり混乱しました。

私はデザイナーではないので、Android Studioでアイコンを作成する機会はありません。だからなのかインストールなどの環境設定がすごく大変でした。

ここに労力をそそがなくてもFigmaやCanvaで十分だと思います。

私はAndroid Studioにチャレンジはしましたが、Figmaで自分で作った方が楽だったので、結局使いませんでした。

セーフゾーンの確認にはちょうどよかったです！

Android Studio自体はインストールしておいて損はない

Androidアプリ開発で、実機がいない時に表示確認としてAndroid Studioのエミュレータが使えます！！

なのでインストールしておくと楽かと思います！

Android Studioでのアイコン作成方法

基本英語なので日本語訳できないか調べたのですが違うプランじゃないとできないみたいな感じでできませんでした・・・

（１）Android Studioをインストール
　3.5GBあるため重いです。

（２）Android Studioを起動 → 「Open」→ android フォルダを選択

（３）Gradle同期が終わるのを待つ

（４）app/res フォルダを右クリック → New → Image Asset👈なかったから違うコマンドで開いた

Image Asset がみつからないとき
　１、Android Studioを一度完全に終了
　２、ターミナルから、以下のコマンドでAndroid Studioを開き直してください
　　　open -a “Android Studio” /Users/user/github/リポジトリ名
　　　→こうするとターミナルのPATH（/opt/homebrew/binを含む）を引き継いだ状態でAndroid Studioが起動するので、Gradleも node を見つけられるようになります
　３、開き直したら再度 File → Sync Project with Gradle Files を実行してみてください👈同期にかなり時間がかかる

（５）Icon Type で Launcher Icons (Adaptive and Legacy) を選択

（６）Foreground / Background / Monochrome それぞれのタブで画像を指定し、プレビューでセーフゾーンや透過を確認しながら調整

（７）「Finish」で生成

Android Studioで開くと、プロジェクトビューの表示モードによって階層の見え方が変わります。

「Android」ビュー（デフォルトでよく使われる表示）の場合: 左側のツリーで app フォルダを展開すると、その中に直接 res フォルダが見えます（src/main の部分はAndroid Studioが自動でまとめて表示するため省略されて見えます）
「Project」ビューの場合: app → src → main → res という実際のフォルダ構造どおりに表示されます

「resフォルダがない？」と思ったとき

Android Studioでは、左側のプロジェクト表示が、

Android

になっている場合があります。

この場合は、

app
 └ res

のように見えることがあります。

一方で、実際のフォルダ構造は、

android
└ app
   └ src
      └ main
         └ res

となっています。

つまり実際のパスは、

android/app/src/main/res

です。

プロジェクトビューを「Project」に変更すると、実際のフォルダ構造に近い表示になります。

このあたりも、Android Studioを初めて触った私にはかなり分かりにくいところでした。

Android Studioをターミナルから開き直した

さらに私の場合、Android Studioを普通に開いた状態ではうまくいかなかったので、いったんAndroid Studioを完全に終了して、ターミナルからプロジェクトを開き直しました。

例えば、プロジェクトの場所が次のようになっている場合、

open -a "Android Studio" /Users/user/github/プロジェクト名/android

のようにしてAndroid Studioを起動しました。

その後、

File → Sync Project with Gradle Files

からGradleの同期を行いました。

ただし、この同期は環境によってはかなり時間がかかります。

「止まったのかな？」と思っても、しばらく待つ必要がありました。

Image Asset Studioでアイコンを作る場合

Image Asset Studioを使える状態になった場合は、

Android StudioでAndroidプロジェクトを開く
resフォルダを開く
「New → Image Asset」を選択
Icon Typeで「Launcher Icons (Adaptive and Legacy)」を選択
Foregroundを指定
Backgroundを指定
Monochromeを指定
プレビューを確認
Finish

という流れで作成できます。

Android公式でも「Launcher Icons (Adaptive and Legacy)」を選択する手順が案内されています。

私はImage Asset Studioを、主に

「セーフゾーンや表示イメージを確認するためのもの」

として使いました。

問題

Image Asset Studioを試してみたものの、

画質が荒くなる
自分が思った通りの見た目にならない
自動的に理想的なmonochrome画像を作ってくれるわけではない

という問題がありました。

そのため、最終的には自分で画像を作り直しました。

Figmaなどで、

foreground
→ 絵柄だけ・背景透明

background
→ 背景色だけ

monochrome
→ 単色の絵柄・背景透明

という3枚を自分で用意しました。

Image Asset Studioは便利な機能ですが、必ずそこで完成画像を作らなければいけないわけではありません。

自分で作った画像を使って、Androidの表示ルールに合わせる方法でも考えられます。

Androidアプリ用の画像をまとめると

今回の経験をまとめると、AndroidアプリをGoogle Playに公開するときに準備する画像は、次のように考えると分かりやすいです。

画像	サイズ・内容	用途
フィーチャーグラフィック	1024×500px	Google Play掲載
スクリーンショット	アプリ画面	Google Play掲載
Google Play用アイコン	512×512px PNG	ストア掲載
foreground	Adaptive Icon用	Androidアイコン
background	Adaptive Icon用	Androidアイコン
monochrome	Adaptive Icon用	単色テーマ対応
通知用アイコン	96px × 96px	通知アイコン