プッシュ通知アイコンのベストプラクティス
- 可能な限り透明度のあるPNG画像を使用してください。
- 非常に小さいサイズでもシンプルで認識可能なアイコンを保ちます。
- 読めなくなる可能性のあるテキストや細かいディテールは避けてください。
- サイズ、色、透明度についてプラットフォーム固有のルールに従ってください。
- プラットフォームとOSバージョンをまたいで実際のデバイスで通知をテストしてください。
Web通知アイコン
Webプッシュ通知は、送信時に提供されるアイコン、またはサイト設定でデフォルトとして定義されたアイコンを表示します。- サポートされる形式:PNG、JPG、GIF(アニメーションなし)
- アイコンは正方形である必要があります。推奨サイズは
256x256ピクセルです。
ブラウザ(Chrome、Edge、Safari、Firefox)によって、デバイスとOSに応じてアイコンのトリミングやスケーリングが異なる場合があります。すべてのブラウザで一貫した表示を確保するために、正方形の
256x256アイコンが推奨されます。Android Webプッシュバッジアイコン
Androidデバイスでは、Webプッシュ通知がWeb App Manifestのbadgeプロパティで定義された小さなバッジアイコンを表示する場合があります。バッジアイコンは限定されたUIコンテキスト(Androidステータスバーなど)で使用され、すべてのAndroidデバイスで表示されるわけではありません。
バッジアイコンは、Androidアプリの小さな通知アイコンと同じ厳格なアルファのみのルールの対象ではありませんが、システム制御のUIでレンダリングされます。
ベストプラクティス:
- 透明な背景の正方形のPNGを使用します
- デザインをシンプルで高コントラストに保ちます
- テキストや細かいディテールは避けてください
- 最も一貫性を保つために、モノクロまたは最小限の色を使用します
Androidアプリの小さな通知アイコンとは異なり、Webプッシュバッジアイコンは一部のデバイスで色を保持する場合があります。ただし、フルカラーまたは複雑なアイコンは、Androidバージョン、ブラウザ、デバイスメーカーによって一貫性なくレンダリングされる場合があります。
iOS通知アイコン
iOSの通知は常にアプリアイコンを使用します。- 通知アイコンは、アプリのアイコンアセットから自動的に派生されます
- メッセージごとに通知アイコンを変更することはできません
- アイコンを変更するには、アプリアイコンを更新して新しいアプリバージョンを配信する必要があります
iOSでカスタム通知アイコンを指定できるAPNsペイロードフィールドはありません。この動作はiOSによって強制され、標準プッシュ通知、重要なアラート、ライブアクティビティに適用されます。
コミュニケーション通知
iOS 15以降、Appleはコミュニケーション通知をサポートしています。 適切に実装すると、コミュニケーションスタイルの通知(メッセージングアプリや通話アプリなど)は、サポートされているシステムビューでアプリアイコンの代わりに連絡先または送信者の画像を表示する場合があります。コミュニケーション通知は特定のユースケースに限定されており、Appleのコミュニケーション通知APIの明示的な採用が必要です。汎用通知には使用できません。
Android通知アイコン
Android(AmazonおよびHuaweiデバイスを含む)は、小と大の通知アイコンをサポートしています。 Androidは、ユーザーのプロフィール画像にアイコンを変更できる会話通知もサポートしています。Android 8.0+(API 26+)では、通知の外観はシステムUI、通知チャンネル、およびデバイスメーカーのカスタマイズに大きく影響されます。

小さな通知アイコン
小さな通知アイコンは、ステータスバーと通知の左上に表示されます。カスタムの小さなアイコンが提供されていない場合、OneSignalはデフォルトのベルアイコンを表示します。 Androidは、色データではなくアイコンのアルファチャンネルを使用して小さな通知アイコンをレンダリングします。システムは、アイコンを表示する際に独自の色合い(または設定されたアクセントカラー)を適用します。 要件とベストプラクティス:- 透明な背景にモノクロのシルエットアイコンを使用します
- 形状が透明度で定義されるようにアイコンを設計し、色では定義しません
- グラデーション、影、またはマルチカラーアートワークは避けてください
- 非常に小さいサイズでもデザインをシンプルで認識可能に保ちます
小さなアイコンのアクセントカラー
通知の小さなアイコンの周りに表示される色を変更できます。
res/values/strings.xmlファイルに次の行を追加します。
ダークモード用に異なる色が必要な場合は、res/values-night/strings.xmlにもキーを追加します。
HEX値を使用します。補助としてAndroid Asset Studioのカラースキームを使用してください。
android_accent_colorを設定するか、メッセージ > 新規プッシュ > プラットフォーム設定 > Google Androidオプションのアクセントカラーフィールドに値を入力します。
カスタム非アルファチャンネル小アイコン画像
一部のデバイスメーカーは、画像をそのまま表示します(アルファチャンネルルールを無視)。すべてのデバイスで非アルファチャンネル画像を使用したい場合は、Androidのドキュメントに基づくカスタム通知レイアウトを設定できます。 すべてのデバイスでアイコンが一貫して見えない可能性があるため、アルファルールに従うことを強くお勧めします。Googleはこのように設計しました。アイコンは小さすぎて意味のある詳細を見ることができないため、単色を強制することで一目で認識しやすいアイコンを強制するのに役立ちます。大きな通知アイコン
大きなアイコンは、Android通知の右側に表示されます。- 推奨サイズ:256×256ピクセル
- 形式:PNGまたはJPG
- 設定されていない場合、Androidは小さなアイコンを再利用する場合があります
Androidデフォルトアイコンの追加方法
すべてのAndroidベースのアプリ(Google Play、Amazon、Huawei)に対してデフォルトの通知アイコンを設定することを強くお勧めします。アイコンが欠落しているか正しく設定されていないことが、通知レンダリングが壊れる最も一般的な原因です。 Androidは2つのデフォルトアイコンをサポートしています:- 小さな通知アイコン(必須)
- 大きな通知アイコン(オプションですが推奨)
1
小さな通知アイコンの生成
小さな通知アイコンは、ステータスバーと通知ヘッダーに表示されます。要件:アイコンに名前を付ける:
- モノクロのシルエットアイコン
- 透明な背景(アルファチャンネル必須)
- 色、グラデーション、または影なし
準拠した小さなアイコンを生成する最も速く安全な方法は、Android Asset Studio – 通知アイコンを使用することです。
ic_stat_onesignal_default2
必要な小さなアイコンのサイズを作成
必須:小さなアイコンのすべての密度バリアントを含める必要があります。サイズが欠落していると、Androidがシステムのデフォルトアイコンにフォールバックする可能性があります。
| アイコン名 | 密度(dp) | サイズ(px) |
|---|---|---|
ic_stat_onesignal_default | MDPI | 24x24 |
ic_stat_onesignal_default | HDPI | 36x36 |
ic_stat_onesignal_default | XHDPI | 48x48 |
ic_stat_onesignal_default | XXHDPI | 72x72 |
ic_stat_onesignal_default | XXXHDPI | 96x96 |
3
大きな通知アイコンの生成(オプション)
ベストプラクティス:
- 正方形の画像
- PNGまたはJPG
- 透明な背景を推奨
- 推奨サイズ:256×256 px
- 色が許可されています
- アルファのみは必須ではありません
- 1つのサイズのみが必要です
ic_onesignal_large_icon_default.png4
正しいプロジェクトパスにアイコンを配置
各アイコンは、フレームワークの正しいリソースディレクトリに配置する必要があります。次のパスが存在することを確認してください。欠落しているフォルダーは作成してください。必須:各画像は次のパスに存在する必要があります:
- Android Native
- Unity
- Cordova/Ionic
- React Native
- .NET Maui
- Flutter
res/drawable-mdpi/(24x24)res/drawable-hdpi/(36x36)res/drawable-xhdpi/(48x48)res/drawable-xxhdpi/(72x72)res/drawable-xxxhdpi/(96x96)res/drawable-xxxhdpi/(256x256) (大きなアイコン)

Androidアプリがデフォルトの通知アイコンで正しく設定されました。
デフォルト以外のアイコンで通知を送信する
OneSignalダッシュボードまたはREST APIからプッシュ通知を送信する際、Android、Amazon、Huawei、およびWebプッシュ通知のデフォルトアイコンをカスタムアイコンで上書きできます。iOS通知のアイコンは上書きできません。REST APIパラメータ
Android、Amazon、およびHuawei REST APIパラメータ:Amazon:
adm_small_icon Huawei: huawei_small_icon小さなアイコンの場合、画像はデフォルトの小さなアイコンと同じプロジェクトパス内に存在する必要があります。リモートURLは使用できません。カスタムアイコンを追加する場所の詳細については、Androidデフォルトアイコンの追加方法を参照してください。REST APIパラメータでは、ファイル拡張子なしでアイコン名を設定します。例:"small_icon": "my_custom_icon_name_without_extension"Amazon:
adm_large_icon Huawei: huawei_large_icon大きなアイコンの場合、画像はデフォルトの大きなアイコンと同じプロジェクトパス内に存在するか、リモートURLとして存在できます。カスタムアイコンを追加する場所の詳細については、Androidデフォルトアイコンの追加方法を参照してください。REST APIパラメータでは、ファイル拡張子なしでアイコン名を設定します。例:"large_icon": "my_custom_icon_name_without_extension"Firefox:
firefox_icon画像リソースへのURL。画像リソースへの直接URLである必要があります。例:"chrome_web_icon": "https://example.com/my_custom_icon.png"画像リソースへのURL。画像リソースへの直接URLである必要があります。例:
"chrome_web_badge": "https://example.com/my_custom_icon.png"ダッシュボード
OneSignalダッシュボードで、メッセージ > プッシュ > 新規プッシュフォームまたはテンプレートを使用して、プラットフォーム固有のオプションに移動します。 Android、Amazon、およびHuaweiの場合、ファイルがデフォルトアイコンと同じプロジェクトパス内に存在する場合は、ファイル拡張子なしでアイコン名を設定します。大きな通知アイコンの場合、アイコンが表示される直接URLを指定することもできます。