---
title: iOSでWEBプッシュを使用する手順
description: iOSでWEBプッシュを使用する手順について説明します。
---

[コンテンツまでスキップ](https://support.materialdigital.jp/manual/webpush-ios#main-content)

日本語

翻訳のサブメニューを表示

[お問い合わせ](https://support.materialdigital.jp/manual/kb-tickets/new?hsLang=ja)

![typeA-1.png\]](https://support.materialdigital.jp/hs-fs/hubfs/typeA-1.png?height=40&name=typeA-1.png)

メインナビゲーションを開く

メインナビゲーションを閉じる

- 日本語
  
  翻訳のサブメニューを表示
- [お問い合わせ](https://support.materialdigital.jp/manual/kb-tickets/new)
- [サービスサイトへ](https://materialdigital.jp/)

[サービスサイトへ](https://materialdigital.jp/)

 お困りのことは何でしょうか？

- 検索フィールドが空なので、候補はありません。

1. [Flipdeskサポートセンター](https://support.materialdigital.jp/manual?hsLang=ja)
2. [Flipdeskオプション](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja)
3. [WEBプッシュ](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#web%E3%83%97%E3%83%83%E3%82%B7%E3%83%A5)

# iOSでWEBプッシュを使用する手順

## iOSでWEBプッシュを使用する手順について説明します。

- iOS16.4より、iPhone safariへのプッシュ通知が送信可能となりました。
- これにより、国内でシェア率の高いiPhoneユーザーへの訴求が出来るようになりました。

### 事前準備

すでにWEBプッシュをご契約のお客様は、新たに専用ファイルの設置とサイトへのタグ設置が必要です。

#### 設置方法

- **josnファイルのダウンロードと設置**  
  WEBプッシュの設定ページにiOS専用のjsonファイルをご用意しておりますので、ダウンロードしてサーバーに保存してください。  
  ※「serviceworker.js」 と同じ場所に格納することを推奨しております。
  
  ![](https://support.materialdigital.jp/hs-fs/hubfs/image-png-Jul-17-2024-03-27-13-7494-AM.png?width=688&height=124&name=image-png-Jul-17-2024-03-27-13-7494-AM.png)
- **`<link>`タグの設置**  
  サイト全体に以下のlinkタグをhead内に追記してください。
  
  ```
  <link rel="manifest" href="/manifest.json">
  ```
  
  ※`href="/manifest.json"`部分は、ルート直下に設置した場合で記載しております  
  ※実際はjsonファイルを設定した箇所までのパスをご記載ください。

### iPhone端末でプッシュ通知を受け取る手順

iOSでプッシュ通知を受け取る場合、サイトをiPhoneのホーム画面へ追加する必要があります。

1. カスタマイズポップアップを用意  
   「WEBプッシュ ＞ 設定」より、「ポップアップ方式」でiOSを選択します。  
   カスタマイズポップアップ、またはカスタマイズボタンのどちらかを選択して設定します。  
   ※この例ではカスタマイズポップアップを選択します。
   
   ![iOSの設定](https://support.materialdigital.jp/hs-fs/hubfs/webpush16.png?width=655&height=321&name=webpush16.png)
2. 通知を受けたいサイトをホーム画面にアイコンとして追加  
     - ブラウザ下部にある共有ボタンをタップ
       
       ![共有ボタンをタップ](https://support.materialdigital.jp/hs-fs/hubfs/image-png-Apr-13-2023-04-57-04-4242-AM.png?width=331&height=92&name=image-png-Apr-13-2023-04-57-04-4242-AM.png)
     - 「ホーム画面に追加」を選択
       
       ![ホーム画面に追加ボタンをタップ](https://support.materialdigital.jp/hubfs/image-png-Apr-13-2023-04-57-50-6671-AM.png)
3. 「追加」をタップ  
   任意で名前を変更することも可能です。
   
   ![ホーム画面にアイコンを追加](https://support.materialdigital.jp/hs-fs/hubfs/image-png-Apr-13-2023-06-03-27-6400-AM.png?width=339&height=194&name=image-png-Apr-13-2023-06-03-27-6400-AM.png)
4. ホーム画面にアイコンが表示されたら準備完了
   
   ![ホームにアイコンを追加完了](https://support.materialdigital.jp/hs-fs/hubfs/image-png-Apr-13-2023-06-04-11-6589-AM.png?width=328&height=637&name=image-png-Apr-13-2023-06-04-11-6589-AM.png)
5. 追加されたホーム画面からサイトへアクセス  
   オプトインするかどうかのポップアップが表示されます。
   
   ![iOSのオプトインダイアログ](https://support.materialdigital.jp/hs-fs/hubfs/webpush17.png?width=363&height=169&name=webpush17.png)

以上でオプトインは完了です。

配信設定は[WEBプッシュの配信設定](https://support.materialdigital.jp/manual/webpush-about?hsLang=ja)のマニュアルをご確認ください。

### 実際の表示イメージ

iPhoneに通知が届いた際のイメージです。  
iOSでWEBプッシュを使用する場合、ホームに追加した際のアイコンが画像として表示されます。

![](https://support.materialdigital.jp/hs-fs/hubfs/image-png-Apr-13-2023-05-45-34-5354-AM.png?width=481&height=114&name=image-png-Apr-13-2023-05-45-34-5354-AM.png)

- [Flipdeskスタートガイド](https://support.materialdigital.jp/manual/flipdesk%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89?hsLang=ja#main-content)

    - [初めての方はこちら](https://support.materialdigital.jp/manual/flipdesk%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89?hsLang=ja#%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AE%E6%96%B9%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89)
    - [初期設定（タグ設置）](https://support.materialdigital.jp/manual/flipdesk%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89?hsLang=ja#%E5%88%9D%E6%9C%9F%E8%A8%AD%E5%AE%9A%E3%82%BF%E3%82%B0%E8%A8%AD%E7%BD%AE)
- [Flipdeskマニュアル](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#main-content)

    - [シナリオ](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E3%82%B7%E3%83%8A%E3%83%AA%E3%82%AA)
    - [配信ターゲットの設定](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E9%85%8D%E4%BF%A1%E3%82%BF%E3%83%BC%E3%82%B2%E3%83%83%E3%83%88%E3%81%AE%E8%A8%AD%E5%AE%9A)
    - [各種タグの仕様](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E5%90%84%E7%A8%AE%E3%82%BF%E3%82%B0%E3%81%AE%E4%BB%95%E6%A7%98)
    - [レポート管理](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E3%83%AC%E3%83%9D%E3%83%BC%E3%83%88%E7%AE%A1%E7%90%86)
    - [各種設定](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E5%90%84%E7%A8%AE%E8%A8%AD%E5%AE%9A)
    - [アラート機能](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E6%A9%9F%E8%83%BD)
    - [AI機能](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#ai%E6%A9%9F%E8%83%BD)
- [Flipdeskオプション](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#main-content)

    - [有人チャット](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#%E6%9C%89%E4%BA%BA%E3%83%81%E3%83%A3%E3%83%83%E3%83%88)
    - [WEBプッシュ](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#web%E3%83%97%E3%83%83%E3%82%B7%E3%83%A5)
    - [会員情報連携](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#%E4%BC%9A%E5%93%A1%E6%83%85%E5%A0%B1%E9%80%A3%E6%90%BA)
    - [ヒートマップ](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#%E3%83%92%E3%83%BC%E3%83%88%E3%83%9E%E3%83%83%E3%83%97)
- [Cross Talk](https://support.materialdigital.jp/manual/cross-talk?hsLang=ja#main-content)

    - [スタートガイド](https://support.materialdigital.jp/manual/cross-talk?hsLang=ja#%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89)
- [技術的なマニュアル](https://support.materialdigital.jp/manual/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja)
- [よくある質問](https://support.materialdigital.jp/manual/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F?hsLang=ja#main-content)

    - [技術的な情報](https://support.materialdigital.jp/manual/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F?hsLang=ja#%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E6%83%85%E5%A0%B1)
    - [契約・請求関連](https://support.materialdigital.jp/manual/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F?hsLang=ja#%E5%A5%91%E7%B4%84-%E8%AB%8B%E6%B1%82%E9%96%A2%E9%80%A3)

[![Chill listening crop-3](https://support.materialdigital.jp/hs-fs/hubfs/typeA-1.png?width=99&height=31&name=typeA-1.png "Chill listening crop-3")](https://materialdigital.jp/)

Copyright © Flipdesk Inc.

Copyright © 2026, 株式会社マテリアルデジタル