JSON ペイロード 開発者に渡す形
Notification API の showNotification(title, options) に渡す形です。配信サービスの管理画面に貼る場合は、タイトル・本文・URL を対応する欄に入れてください。
使い方
- 1タイトルと本文を入力（アイコン・画像・サイト名・リンク先は任意）
- 2右側の 5 環境で切れる位置を確認。「開いたとき」で展開後も確認
- 3文面をコピーして配信ツールへ。JSON は開発者に
入力も画像もブラウザの中だけで処理し、サーバーには送信しません。
環境ごとの表示の違い
2026年11月時点の一般的な表示。OS のバージョンや通知設定で前後します
| 環境 | タイトル | 本文 | アイコン | 画像 | 備考 |
|---|---|---|---|---|---|
| Windows 11 ・ Chrome / Edge | 2 行 | 4 行 | 指定した画像 | ○（横長） | 5 秒で通知センターへ。ボタンも出せる |
| macOS ・ Chrome | 1 行 | 1 行（通知センター 2 行） | 指定した画像 | × | バナーは数秒で消える |
| macOS ・ Safari | 1 行 | 2 行 | サイトのアイコン固定 | × | ボタンも出ない |
| Android ・ Chrome | 1 行 | 折りたたみ 1 行、展開で全文 | 指定した画像＋単色バッジ | ○（展開時） | 画像があると本文は 1 行扱いになりやすい |
| iPhone ・ Safari（ホーム画面に追加） | 1 行 | 4 行程度 | ホーム画面のアイコン固定 | × | iOS 16.4 以降。ホーム画面に追加したサイトのみ |
行数は各社の配信ツールのドキュメントと実機の観察に基づく目安で、フォントや通知設定により前後します。このツールの描画は、各環境の幅と書体に近い設定で折り返しを再現しています。
よくある質問
文字数と環境の違い
Webプッシュ通知のタイトルと本文は何文字まで？
決まった上限はなく、OS とブラウザごとに表示できる行数が違います。目安は、Windows はタイトル 2 行・本文 4 行、macOS の Chrome はタイトル 1 行・本文 1 行（通知センターで 2 行）、Android の Chrome は折りたたみ時 1 行ずつ、iPhone はタイトル 1 行・本文 4 行程度です。全角文字は半角より幅を取るため、文字数ではなく実際の折り返しで確認する必要があります。迷ったら、タイトルは全角 15 字、本文の結論は最初の 20 字に収めると、どの環境でも伝わります。
iPhone でも Webプッシュ通知は届きますか？
iOS 16.4 以降で、ユーザーがサイトをホーム画面に追加した場合だけ届きます。アイコンはホーム画面のアイコンが使われ、通知の画像とボタンは表示されません。Safari を普通に開いているだけでは購読できないので、導線の設計が必要です。
画像はどの環境で表示されますか？
Windows の Chrome・Edge と Android の Chrome です。macOS（Chrome・Safari）と iPhone では表示されません。画像に伝えたいことを載せると、それらの環境では伝わらないので、本文に書いてください。画像は横長（2:1、720×360 以上）を用意すると、Windows・Android の両方で切れにくくなります。
本文を長く書いても意味がない？
Android と iPhone では、通知を開くと長い本文も読めます（Android は 6 行程度、iPhone は 4 行程度）。ただし届いた直後に見えるのは 1 行なので、最初の 20 字で用件が伝わる書き方にしてください。「開いたとき」に切り替えると、展開後の見え方を確認できます。
入力した内容や画像は送信されますか？
されません。描画はすべてブラウザの中で行い、文面はお使いのブラウザの中に残るだけです。画像もアップロードしません。
このツールについて
- 判定の基準
- 各環境の幅・書体・行数は、主要な配信サービスの公開ドキュメント（OneSignal・Customer.io・Braze など）と実機の観察に基づく目安です（2026年11月時点）。Windows はタイトル 2 行・本文 4 行、macOS の Chrome は 1 行・1 行（通知センター 2 行）、Safari は 1 行・2 行、Android は折りたたみ時 1 行ずつ、iPhone は 1 行・4 行として描画します。OS のバージョンや通知設定で前後します。
- データの扱い
- 入力した内容はブラウザの中だけで処理し、サーバーに送信・保存しません。
- 運営
- 株式会社ACOSTECH（COCORO Sync.）。運営会社 ・ 不具合・要望を伝える
- 最終更新
ほかのお役立ちツール
SEO・AI検索・SNSの作業を、その場で確かめる。登録不要・無料
URLを入れるだけで、AI検索に引用される準備ができているかを30項目で採点。直すべき順に提示します。
使ってみる → llms.txt ジェネレーターサイトマップから主要ページを選ぶだけで、AI向けのサイト案内ファイル llms.txt を生成します。
使ってみる → AIクローラー向け robots.txt学習用・AI検索用・ユーザー操作時に分けて、23種のAIクローラーの許可・拒否を設定します。
使ってみる → AIクローラー アクセスログ解析アクセスログをブラウザ内で集計し、AIクローラーがいつ・どのページに来たかを可視化します。
使ってみる → AIクローラー ブロック確認GPTBot・ClaudeBot・PerplexityBot など 24 種の AI クローラーが robots.txt で許可か拒否かを根拠の行番号つきで一覧。意図とのずれと修正案も。
使ってみる → 記事一覧CSV・更新ペース分析競合サイトの全ページをサイトマップから棚卸しし、更新ペースとディレクトリ構成を把握。CSV出力。
使ってみる → 見出し構成の比較自社と競合の記事を横並びにして、H1〜H3の構成・文字数・自社に無い話題を抽出します。
使ってみる → SNS投稿テキストチェッカーX・Instagram・TikTok・Threads の文字数と見え方を同時に確認。Instagramの改行保持、Xの分割、ハッシュタグ整理も。
使ってみる → 構造化データ ジェネレーターFAQ・記事・会社情報・店舗・パンくず・手順の JSON-LD をフォーム入力で生成。コピーして貼るだけ。
使ってみる → SNS画像サイズ・安全領域プレビュー1枚の画像が X・Instagram・リール・TikTok・YouTube でどう切れるかを一度に確認。各サイズに切り出してダウンロード。
使ってみる → 画像 alt 一括チェックページ内の画像を一覧にして、alt が無い・空・弱い画像を抽出。リンク内の画像も判定。CSV出力。
使ってみる → 画像圧縮・WebP変換JPEG・PNG・WebP をまとめて圧縮・WebP変換・リサイズ。「200KB以下」の容量指定とプリセット付き。画像はサーバーに送らず、ブラウザの中だけで処理。
使ってみる → UTMパラメータ作成ツールURLと媒体を選ぶだけでUTM付きURLを作成。表記を自動で整え、GA4のチャネルを判定。QRコードも同じ画面で。
使ってみる → タイトル・ディスクリプション プレビューtitle と description が Google の検索結果でどう見えるかを PC・スマホで再現。フォント幅で切れる位置を判定し、書き換えリスクも指摘。
使ってみる → OGP・シェアカード プレビューURLを入れると、X・Facebook・LINE・Slack・Discord でシェアしたときのカード表示を再現。画像サイズや不足タグも指摘。
使ってみる → Instagram グリッド プレビューこれから投稿する画像を 3 列グリッドに並べて、3:4 での切れ方と並び順を確認。公開済み・固定投稿も再現。ログイン不要。
使ってみる →