メインコンテンツへスキップ
プッシュ通知アイコンは、通知と一緒に表示される小さな画像です。これらは、ユーザーがブランドをすばやく認識し、コンテキストを理解し、メッセージを他のメッセージと区別するのに役立ちます。各プラットフォームはアイコンを異なる方法で処理するため、プラットフォーム固有の標準に従うことが、通知が正しく表示されるために重要です。 このガイドでは、プッシュ通知アイコンについて説明します。大きな画像をお探しの場合は、画像とリッチメディアを参照してください。

プッシュ通知アイコンのベストプラクティス

  • 可能な限り透明度のあるPNG画像を使用してください。
  • 非常に小さいサイズでもシンプルで認識可能なアイコンを保ちます。
  • 読めなくなる可能性のあるテキストや細かいディテールは避けてください。
  • サイズ、色、透明度についてプラットフォーム固有のルールに従ってください。
  • プラットフォームとOSバージョンをまたいで実際のデバイスで通知をテストしてください。

Web通知アイコン

Webプッシュ通知は、送信時に提供されるアイコン、またはサイト設定でデフォルトとして定義されたアイコンを表示します。
  • サポートされる形式:PNG、JPG、GIF(アニメーションなし)
  • アイコンは正方形である必要があります。推奨サイズは256x256ピクセルです。
ブラウザ(Chrome、Edge、Safari、Firefox)によって、デバイスとOSに応じてアイコンのトリミングやスケーリングが異なる場合があります。すべてのブラウザで一貫した表示を確保するために、正方形の256x256アイコンが推奨されます。
デフォルトアイコンはダッシュボード設定 > プッシュとアプリ内 > Web設定で設定します。 また、ダッシュボードまたはREST APIを使用して、通知ごとにアイコンを上書きすることもできます。詳細については、デフォルト以外のアイコンで通知を送信するを参照してください。

Android Webプッシュバッジアイコン

Androidデバイスでは、Webプッシュ通知がWeb App Manifestのbadgeプロパティで定義された小さなバッジアイコンを表示する場合があります。バッジアイコンは限定されたUIコンテキスト(Androidステータスバーなど)で使用され、すべてのAndroidデバイスで表示されるわけではありません。 バッジアイコンは、Androidアプリの小さな通知アイコンと同じ厳格なアルファのみのルールの対象ではありませんが、システム制御のUIでレンダリングされます。 ベストプラクティス:
  • 透明な背景正方形のPNGを使用します
  • デザインをシンプルで高コントラストに保ちます
  • テキストや細かいディテールは避けてください
  • 最も一貫性を保つために、モノクロまたは最小限の色を使用します
最小サイズは72×72ピクセルが推奨されます。より大きな画像も受け入れられ、必要に応じて縮小されます。
Androidアプリの小さな通知アイコンとは異なり、Webプッシュバッジアイコンは一部のデバイスで色を保持する場合があります。ただし、フルカラーまたは複雑なアイコンは、Androidバージョン、ブラウザ、デバイスメーカーによって一貫性なくレンダリングされる場合があります。
詳細については、デフォルト以外のアイコンで通知を送信するを参照してください。

iOS通知アイコン

iOSの通知は常にアプリアイコンを使用します。
  • 通知アイコンは、アプリのアイコンアセットから自動的に派生されます
  • メッセージごとに通知アイコンを変更することはできません
  • アイコンを変更するには、アプリアイコンを更新して新しいアプリバージョンを配信する必要があります
iOSでカスタム通知アイコンを指定できるAPNsペイロードフィールドはありません。この動作はiOSによって強制され、標準プッシュ通知、重要なアラート、ライブアクティビティに適用されます。

コミュニケーション通知

iOS 15以降、Appleはコミュニケーション通知をサポートしています。 適切に実装すると、コミュニケーションスタイルの通知(メッセージングアプリや通話アプリなど)は、サポートされているシステムビューでアプリアイコンの代わりに連絡先または送信者の画像を表示する場合があります。
コミュニケーション通知は特定のユースケースに限定されており、Appleのコミュニケーション通知APIの明示的な採用が必要です。汎用通知には使用できません。

Android通知アイコン

Android(AmazonおよびHuaweiデバイスを含む)は、の通知アイコンをサポートしています。 Androidは、ユーザーのプロフィール画像にアイコンを変更できる会話通知もサポートしています。
Android 8.0+(API 26+)では、通知の外観はシステムUI、通知チャンネル、およびデバイスメーカーのカスタマイズに大きく影響されます。
Android notification icon placement

小さな通知アイコン

小さな通知アイコンは、ステータスバーと通知の左上に表示されます。カスタムの小さなアイコンが提供されていない場合、OneSignalはデフォルトのベルアイコンを表示します。 Androidは、色データではなくアイコンのアルファチャンネルを使用して小さな通知アイコンをレンダリングします。システムは、アイコンを表示する際に独自の色合い(または設定されたアクセントカラー)を適用します。 要件とベストプラクティス:
  • 透明な背景モノクロのシルエットアイコンを使用します
  • 形状が透明度で定義されるようにアイコンを設計し、色では定義しません
  • グラデーション、影、またはマルチカラーアートワークは避けてください
  • 非常に小さいサイズでもデザインをシンプルで認識可能に保ちます
一般的で推奨されるアプローチは、透明な背景に白いアートワークとしてアイコンを設計することですが、技術的にはAndroidは白い色自体ではなくアルファマスクを使用します。
単色の背景またはフルカラーアートワークを持つアイコンは、デバイスメーカーとAndroidバージョンによって正しくレンダリングされない場合があり、多くの場合、白い四角、クリップされた形状、または予期しないシルエットとして表示されます。Androidは小さな通知アイコンの色情報を無視することが多く、アルファチャンネルとシステムまたはアプリ定義の色合いから最終的な外観を導き出します。

小さなアイコンのアクセントカラー

通知の小さなアイコンの周りに表示される色を変更できます。
デフォルトの色を設定するには、プロジェクトのres/values/strings.xmlファイルに次の行を追加します。 ダークモード用に異なる色が必要な場合は、res/values-night/strings.xmlにもキーを追加します。 HEX値を使用します。補助としてAndroid Asset Studioのカラースキームを使用してください。
<resources>
    <string name="onesignal_notification_accent_color">FF00FF00</string>
</resources>
通知ごとに色を設定するには、通知の作成 API呼び出しでandroid_accent_colorを設定するか、メッセージ > 新規プッシュ > プラットフォーム設定 > Google Androidオプションのアクセントカラーフィールドに値を入力します。
アプリにアイコンリソースを追加したばかりの場合は、そのアイコンを使用して通知を送信する前に数日待つことをお勧めします。これは、大多数のユーザーが新しいアイコンを含む最新バージョンにアプリを更新するまでに数日から数週間かかる可能性があるためです。

カスタム非アルファチャンネル小アイコン画像

一部のデバイスメーカーは、画像をそのまま表示します(アルファチャンネルルールを無視)。すべてのデバイスで非アルファチャンネル画像を使用したい場合は、Androidのドキュメントに基づくカスタム通知レイアウトを設定できます。 すべてのデバイスでアイコンが一貫して見えない可能性があるため、アルファルールに従うことを強くお勧めします。Googleはこのように設計しました。アイコンは小さすぎて意味のある詳細を見ることができないため、単色を強制することで一目で認識しやすいアイコンを強制するのに役立ちます。

大きな通知アイコン

大きなアイコンは、Android通知の右側に表示されます。
  • 推奨サイズ:256×256ピクセル
  • 形式:PNGまたはJPG
  • 設定されていない場合、Androidは小さなアイコンを再利用する場合があります

Androidデフォルトアイコンの追加方法

すべてのAndroidベースのアプリ(Google Play、Amazon、Huawei)に対してデフォルトの通知アイコンを設定することを強くお勧めします。アイコンが欠落しているか正しく設定されていないことが、通知レンダリングが壊れる最も一般的な原因です。 Androidは2つのデフォルトアイコンをサポートしています:
  • 小さな通知アイコン(必須)
  • 大きな通知アイコン(オプションですが推奨)
1

小さな通知アイコンの生成

小さな通知アイコンは、ステータスバーと通知ヘッダーに表示されます。要件:
  • モノクロのシルエットアイコン
  • 透明な背景(アルファチャンネル必須)
  • 色、グラデーション、または影なし
一般的で推奨されるアプローチは、透明な背景に白いアイコンですが、Androidは白い色自体ではなくアルファチャンネルを使用します。
準拠した小さなアイコンを生成する最も速く安全な方法は、Android Asset Studio – 通知アイコンを使用することです。
アイコンに名前を付ける: ic_stat_onesignal_default
2

必要な小さなアイコンのサイズを作成

必須:小さなアイコンのすべての密度バリアントを含める必要があります。サイズが欠落していると、Androidがシステムのデフォルトアイコンにフォールバックする可能性があります。
アイコン名密度(dp)サイズ(px)
ic_stat_onesignal_defaultMDPI24x24
ic_stat_onesignal_defaultHDPI36x36
ic_stat_onesignal_defaultXHDPI48x48
ic_stat_onesignal_defaultXXHDPI72x72
ic_stat_onesignal_defaultXXXHDPI96x96
3

大きな通知アイコンの生成(オプション)

ベストプラクティス:
  • 正方形の画像
  • PNGまたはJPG
  • 透明な背景を推奨
  • 推奨サイズ:256×256 px
小さなアイコンとは異なり:
  • 色が許可されています
  • アルファのみは必須ではありません
  • 1つのサイズのみが必要です
必須のファイル名: ic_onesignal_large_icon_default.png
4

正しいプロジェクトパスにアイコンを配置

各アイコンは、フレームワークの正しいリソースディレクトリに配置する必要があります。次のパスが存在することを確認してください。欠落しているフォルダーは作成してください。必須:各画像は次のパスに存在する必要があります:
  • res/drawable-mdpi/ (24x24)
  • res/drawable-hdpi/ (36x36)
  • res/drawable-xhdpi/ (48x48)
  • res/drawable-xxhdpi/ (72x72)
  • res/drawable-xxxhdpi/ (96x96)
  • res/drawable-xxxhdpi/ (256x256) (大きなアイコン)
プロジェクトは次のようになるはずです(SDKによって異なります):
アイコンの代わりに単色の四角が表示される場合、画像に適切な透明度がありません。
OneSignalのベルアイコンが表示される場合、1つ以上の必要な小さなアイコンサイズが欠落しているか、間違ったディレクトリに配置されています。
Androidアプリがデフォルトの通知アイコンで正しく設定されました。

デフォルト以外のアイコンで通知を送信する

OneSignalダッシュボードまたはREST APIからプッシュ通知を送信する際、Android、Amazon、Huawei、およびWebプッシュ通知のデフォルトアイコンをカスタムアイコンで上書きできます。iOS通知のアイコンは上書きできません。

REST APIパラメータ

Android、Amazon、およびHuawei REST APIパラメータ:
small_icon
string
Amazon: adm_small_icon Huawei: huawei_small_icon小さなアイコンの場合、画像はデフォルトの小さなアイコンと同じプロジェクトパス内に存在する必要があります。リモートURLは使用できません。カスタムアイコンを追加する場所の詳細については、Androidデフォルトアイコンの追加方法を参照してください。REST APIパラメータでは、ファイル拡張子なしでアイコン名を設定します。例:"small_icon": "my_custom_icon_name_without_extension"
large_icon
string
Amazon: adm_large_icon Huawei: huawei_large_icon大きなアイコンの場合、画像はデフォルトの大きなアイコンと同じプロジェクトパス内に存在するか、リモートURLとして存在できます。カスタムアイコンを追加する場所の詳細については、Androidデフォルトアイコンの追加方法を参照してください。REST APIパラメータでは、ファイル拡張子なしでアイコン名を設定します。例:"large_icon": "my_custom_icon_name_without_extension"
WebプッシュREST APIパラメータ:
chrome_web_icon
string
Firefox: firefox_icon画像リソースへのURL。画像リソースへの直接URLである必要があります。例:"chrome_web_icon": "https://example.com/my_custom_icon.png"
chrome_web_badge
string
画像リソースへのURL。画像リソースへの直接URLである必要があります。例:"chrome_web_badge": "https://example.com/my_custom_icon.png"

ダッシュボード

OneSignalダッシュボードで、メッセージ > プッシュ > 新規プッシュフォームまたはテンプレートを使用して、プラットフォーム固有のオプションに移動します。 Android、Amazon、およびHuaweiの場合、ファイルがデフォルトアイコンと同じプロジェクトパス内に存在する場合は、ファイル拡張子なしでアイコン名を設定します。大きな通知アイコンの場合、アイコンが表示される直接URLを指定することもできます。