アプリアイコンの修正

Last updated
Save as PDF

モバイルアプリケーションを作成すると、アプリ生成ウィザードによりアプリのアイコンが自動的に生成されます。このアイコンは、デバイス内のアプリを認識するのに使用されます。その際、デバイス画面の密度や画面サイズ、またはアイコンが表示される場所のサイズといった点で、デバイスやコンテキストのすべての側面に合うよう自動的に補正されます。

アプリのカスタムアイコンの定義

デフォルトのアイコンを変更して好きなアイコン画像を使用するには、アイコンのコンテキスト、デバイスの画面サイズおよび密度ごとに複数のバージョンを用意して、以下の手順を実行します。

未作成の場合、ZIPファイルを作成し、すべてのAndroid/iOSアイコン（.png画像形式）を追加します。
主アプリケーションモジュールを開き、新規または更新済みの:ファイルをリソースフォルダにインポートします。
アプリケーションモジュールを選択してプロパティに移動し、Extensibility Configurationsプロパティを開きます。
未作成の場合、Extensibility Configurations値のウィンドウで、使用するアイコンに関するすべての情報を指定するためのJSONオブジェクトを作成します。未指定の場合、まずアイコンを格納しているリソースファイルを指定します。
アプリケーションに独自のアイコンを使用する意思を示すために、JSONに「icons」タグを追加します。
各モバイルプラットフォームについて、サイズ（iOS）や密度（Android）、および対応するアイコンのzipフォルダ内での位置を指定します。使用される可能性のあるすべてのサイズおよび密度についてアイコンを確実に定義します。そうしない場合、エラーが発生します（下記はあくまで参考です）。アイコンのJSONテンプレートを確認すると、間違いを防げます。
この変更をユーザーが利用できるようにするために、新しいモバイルアプリケーションをパブリッシュ・生成し、配布します。

アイコンのサイズおよび密度{ #icon-sizes-and-densities }

iOS用

幅	高さ	表示場所
20	20	iPad通知（iOS 7～11）
29	29	iPhone Spotlight検索（iOS 5、6） iPhone設定（iOS 5～11） iPad設定（iOS 5～11）
40	40	iPhone通知（iOS 7～11） iPad通知（iOS 7～11） iPad Spotlight検索（iOS 7～11）
48	48	Apple Watch通知センター
50	50	iPad Spotlight検索（iOS 5、6）
55	55	Apple Watch通知センター
57	57	iPhoneアプリ（iOS 5、6）
58	58	iPhone Spotlight検索（iOS 5、6） iPhone設定（iOS 5～11） iPad設定（iOS 5～11）
60	60	iPhone通知（iOS 7～11）
72	72	iPadアプリ（iOS 5、6）
76	76	iPadアプリ（iOS 7～11）
80	80	iPhone Spotlight検索（iOS 7～11） iPad Spotlight検索（iOS 7～11）
87	87	iPhone Spotlight検索（iOS 5、6） iPhone設定（iOS 5～11）
88	88	Apple Watch Long Look
100	100	iPad Spotlight検索（iOS 5、6）
114	114	iPhoneアプリ（iOS 5、6）
120	120	iPhone Spotlight検索（iOS 7～11） iPhoneアプリ（iOS 7～11）
144	144	iPadアプリ（iOS 5、6）
152	152	iPadアプリ（iOS 7～11）
167	167	iPad Proアプリ（iOS 9～11）
172	172	Apple Watch Short Look
180	180	iPhoneアプリ（iOS 7～11）
196	196	Apple Watch Short Look
1024	1024	アプリストアiOS

Android用

幅	高さ	密度	表示場所
36	36	ldpi	通知アイコン
48	48	mdpi	ランチャーアイコンアクションバー、ダイアログおよびタブアイコン小さいコンテキストアイコン
72	72	hdpi	ランチャーアイコン通知アイコン
96	96	xhdpi	ランチャーアイコンアクションバー、ダイアログおよびタブアイコン通知アイコン
144	144	xxhdpi	ランチャーアイコン
192	192	xxxhdpi	ランチャーアイコン

アイコンのJSONテンプレート{ #icons-json-template }

{
    "resource": "<path_to_resource_file>",
    "icons": {
        "android": [{
            "resource": "<path_to_icon_image>",
            "density": "ldpi"
        },
        {
            "resource": "<path_to_icon_image>",
            "density": "mdpi"
        },
        {
            "resource": "<path_to_icon_image>",
            "density": "hdpi"
        },
        {
            "resource": "<path_to_icon_image>",
            "density": "xhdpi"
        },
        {
            "resource": "<path_to_icon_image>",
            "density": "xxhdpi"
        },
        {
            "resource": "<path_to_icon_image>",
            "density": "xxxhdpi"
        }],
        "ios": [{
            "resource": "<path_to_icon_image>",
            "width": "20",
            "height": "20"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "29",
            "height": "29"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "40",
            "height": "40"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "48",
            "height": "48"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "50",
            "height": "50"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "55",
            "height": "55"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "57",
            "height": "57"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "58",
            "height": "58"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "60",
            "height": "60"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "72",
            "height": "72"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "76",
            "height": "76"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "80",
            "height": "80"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "87",
            "height": "87"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "88",
            "height": "88"
        },        
        {
            "resource": "<path_to_icon_image>",
            "width": "100",
            "height": "100"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "114",
            "height": "114"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "120",
            "height": "120"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "144",
            "height": "144"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "152",
            "height": "152"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "167",
            "height": "167"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "172",
            "height": "172"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "180",
            "height": "180"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "196",
            "height": "196"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "1024",
            "height": "1024"
        }]
    }
}

Training

Documentation