Safari互換性テスト 2026では、Chromeのウィンドウ幅を変えるだけで済ませず、まず実Macの正式版Safariで商品選択から決済完了までを確認してください。レスポンシブデザインモードとシミュレーターで対象範囲を広げ、重要なページだけ最後にiPhone実機で抜き取り確認する方法が現実的です。
この記事は、Shopifyまたは自社構築の越境ECサイトを公開前に検収する担当者向けです。普段はWindowsを使っている運用担当者、Safariでの表示崩れや決済中断を開発チームと切り分けたい責任者、再現可能な回帰確認の手順を作りたいチームに適しています。
[ SECTION_01 ] Safari互換性テスト 2026で最初に決める検収範囲
Chromeでは購入ボタンを押せるのに、Safariではポップアップが開かない、入力内容が消える、決済画面から戻れないという問題があります。トップページの見た目が似ていても、公開判定には不十分です。
まず、次の4層を分けて記録します。
| 確認層 | 主な用途 | 判定の強さ |
|---|---|---|
| Macの正式版Safari | デスクトップ利用者の購入導線 | 高 |
| レスポンシブデザインモード | 画面幅、縦横比、画素密度の確認 | 中 |
| iOSシミュレーター | iPhone・iPad特有の表示や入力の確認 | 中〜高 |
| iPhone実機 | キーボード、アドレスバー、タッチ操作の確認 | 最高 |
Safariのレスポンシブデザインモードは、幅や高さ、画素密度を変えた表示確認に向いています。ただし、実機のアドレスバー、ソフトウェアキーボード、フォーム入力などを完全には再現しません。Appleの公式資料でも、プリセットは実機のレイアウト、描画、挙動を正確に表すものではないと説明されています。重要な挙動はシミュレーターまたは実機で確認してください。(Appleのレスポンシブデザインモード公式資料)
公開を止める問題と、後回しにできる差異
判断を曖昧にしないため、問題を3段階に分けます。
| 判定 | 具体例 | 公開判断 |
|---|---|---|
| Blocker | 注文確定、決済回帰、ログイン、在庫確認が完了しない | 修正まで公開しない |
| Conversion risk | クーポン入力、配送地域選択、固定購入ボタンが使いにくい | 原則修正。責任者承認が必要 |
| Visual difference | 文字幅、余白、画像の見え方に軽微な差がある | 記録して期限付きで対応 |
「Safariで使えない」とだけ書くと、開発者は再現できません。ページURL、訪問者の状態、操作手順、期待結果、実際の結果、画面録画を1件ずつ残します。
[ SECTION_02 ] 第一歩：画面表示を幅ではなく利用状態で確認する
デスクトップでは、ヘッダーの折り返し、商品画像の比率、販促ポップアップ、固定購入ボタン、横方向のはみ出しを確認します。モバイルでは、縦向きと横向きの両方で、ナビゲーション、画像カルーセル、数量変更、画面下部の購入ボタンを見ます。
画素密度を変えると、画像の読み込み元や細い境界線の見え方が変わる場合があります。単純なスクリーンショット比較だけでなく、商品画像の鮮明さ、ボタン境界、文字の切れ方も確認対象にします。
推奨する操作は次の順番です。
- Safariの設定から開発者向け機能を表示し、開発メニューを有効にします。(Safariの開発者向け機能を有効にする手順)
- 対象ページを開き、開発メニューからレスポンシブデザインモードを起動します。
- デスクトップ相当、モバイル縦向き、モバイル横向きの表示を切り替えます。
- ヘッダー、商品画像、ポップアップ、固定ボタン、横スクロールを同じ順番で確認します。
- 表示崩れがあったら、画面幅、画素密度、ログイン状態、Cookieの有無を記録します。
環境設定や視点の切り替えは、担当者向けのスクリーンショットを添えると引き継ぎが容易です。特に開発メニューの有効化、レスポンシブデザインモードの起動、縦横切り替えの3場面は画像で残す価値があります。
[ SECTION_03 ] 第二歩：登録から決済完了までを1本の導線で確認する
越境ECサイトの検収では、ページ単位ではなく利用者の行動単位で確認します。次の導線を途中で分断しないでください。
- 広告または地域別ランディングページへ訪問
- 商品詳細を開く
- バリエーションと数量を選ぶ
- 新規登録またはログインする
- 配送先住所を入力する
- クーポンや割引を適用する
- 配送方法を選ぶ
- 決済画面へ移動する
- 決済後に注文結果へ戻る
Safariでは、入力欄、日付選択、オートフィル、確認コード、ファイル添付、許可ダイアログ、戻る操作後の状態を確認します。特に決済サービスへ移動した後、Safariへ戻った時点でカートや住所が消えていないかを見落としやすい項目です。
| 検収項目 | 正常とする条件 | 記録する証拠 |
|---|---|---|
| 入力欄 | 文字入力、削除、再編集ができる | 操作録画、入力状態 |
| クーポン | 適用結果と金額表示が一致する | 適用前後の画面 |
| 決済遷移 | 決済画面へ移動し、結果ページへ戻る | URL、時刻、画面録画 |
| 戻る操作 | カート、住所、選択商品が保持される | 操作順序、再現条件 |
| 許可表示 | 必要な許可を出した後も操作を続けられる | ダイアログの表示状態 |
ShopifyのサイトがSafariで開けない場合は、どこから調べますか。
最初に、サイト全体が開けないのか、特定ページだけが失敗するのかを分けます。次に、広告リンク、独自ドメイン、決済回帰先、Cookie同意後の状態を個別に開き、Safariのコンソールと通信記録を確認します。
全ページで失敗するなら証明書、リダイレクト、地域判定を疑います。特定の購入導線だけなら、テーマ、アプリ連携、決済回帰処理を優先して調べます。
[ SECTION_04 ] 第三歩：地域別ページと訪問者状態を切り分ける
言語、通貨、税金表示、配送範囲、在庫、地域別のキャンペーンは、IPアドレスだけで決まるとは限りません。サイトの選択状態、アカウント情報、Cookie、ブラウザーの保存データ、ネットワーク出口などが組み合わさるためです。
新規訪問者、再訪問者、ログイン済み利用者の3状態を作り、同じURLで表示を比較します。プライベートブラウズだけで確認すると、通常訪問者の保存状態を見落とすことがあります。
| 状態 | 主な確認内容 | よくある混同 |
|---|---|---|
| 新規訪問者 | 初期言語、通貨、地域選択 | 保存済みCookieを新規状態と誤認 |
| 再訪問者 | 前回の選択、同意状態、表示地域 | 古いキャンペーンが残る |
| ログイン済み | 顧客住所、価格、配送範囲 | アカウント情報をIP判定と誤認 |
自宅にMacがなくてもSafariを確認できますか。
可能です。ただし、Windows上のChromeで画面幅を変える方法はSafariの描画や入力挙動を証明しません。継続的に確認するなら、実Macへ接続できる環境を用意し、Safariの正式版、Web Inspector、必要に応じてシミュレーターを同じ手順で使える状態にします。
日本や米国向けの確認を分けたい場合は、NOVAKVMの海外Mac環境や、米国東部のMac環境のように、地域を明示した接続先を検討できます。ただし、海外の接続先を使っても、すべての利用者の表示、審査、アカウント状態が同じになるわけではありません。
[ SECTION_05 ] Web Inspectorで通信と保存状態を確認する
SafariのWeb Inspectorでは、HTML、CSS、JavaScriptに加え、通信要求、コンソール、Cookie、ローカルストレージなどを確認できます。Networkタブでは、API、XHR、fetch、WebSocketなどの要求も一覧化できます。(WebKitのNetworkタブ公式資料) また、AppleのSafari開発者向け資料では、ページの検査やデバッグに使う各種機能が整理されています。(Safari Developer Toolsの公式概要)
運用担当者が確認する範囲は、複雑なコード解析まで広げる必要はありません。エラー発生時刻、ページURL、操作録画、失敗した要求の名前、状態コード、Cookie同意後かどうかを開発者へ渡せれば、調査の入口になります。
通信確認の手順
- SafariでWeb Inspectorを開きます。
- Networkタブを選び、必要ならログ保持を有効にします。
- 商品ページからカート、決済、結果ページまで操作します。
- 失敗した要求を選び、状態、URL、応答ヘッダー、Cookieを確認します。
- 画面録画と要求情報を同じ検収番号で保存します。
WebKitの資料では、要求の状態、種類、転送量、時間、開始元、Cookie、応答ヘッダーなどを確認でき、HAR形式で書き出す方法も案内されています。画面上の問題だけで判断せず、失敗した要求と操作時刻を組み合わせると、外部決済や販促アプリとの境界も説明しやすくなります。
SafariのレスポンシブデザインモードだけでiPhone実機を代用できますか。
代用できません。画面幅、縦横比、画素密度の一次確認には有効ですが、アドレスバー、ソフトウェアキーボード、タッチ操作、端末固有の入力挙動は別に確認する必要があります。
iPhoneやiPadをMacへ接続すると、Safariの開発メニューからページを選び、Web Inspectorで確認できます。iOSやiPadOSのシミュレーターは、起動中であれば接続済み端末と同じように検査対象として扱えます。(AppleのiOS検査方法)
[ SECTION_06 ] 公開前に使える判断分岐と回帰記録
次の条件分岐で、確認範囲を決めます。
- 決済、ログイン、在庫、配送先のいずれかがSafariで完了しない場合は、実Macで再現するまで公開を止めます。
- 表示幅だけの問題で、購入操作に影響しない場合は、レスポンシブデザインモードで範囲を広げ、修正期限を登録します。
- ソフトウェアキーボード、固定ボタン、画面回転で状態が変わる場合は、シミュレーターへ進みます。
- シミュレーターでは再現せず、重要な売上ページで発生する場合は、iPhone実機で抜き取り確認します。
- 地域表示だけが異なる場合は、IPだけで結論を出さず、Cookie、アカウント、言語、通貨の状態を分けて再確認します。
| 記録欄 | 記入例 |
|---|---|
| ページ | 商品詳細、カート、決済回帰 |
| 環境 | MacのSafari、シミュレーター、iPhone実機 |
| 利用者状態 | 新規、再訪問、ログイン済み |
| 操作 | 商品選択から注文結果まで |
| 期待結果 | 注文番号と金額が表示される |
| 実際の結果 | 決済後にカートへ戻り、住所が消える |
| 重大度 | Blocker、Conversion risk、Visual difference |
| 証拠 | 録画、画像、URL、通信記録 |
| 再確認 | 修正後の結果と担当者 |
回帰確認では、広告ランディングページ、商品詳細、カート、決済、注文結果を毎回同じ順序で確認します。問題が一度だけ起きた場合も、キャッシュ無視、通常ウィンドウ、プライベートブラウズを分け、偶発か安定再現かを記録してください。
[ SECTION_07 ] 現在の方法と実Macを使う方法の違い
WindowsのChromeだけで検収する方法は、準備が軽い一方で、Safari固有の表示、入力、Cookie、決済回帰を証明できません。担当者の個人端末に依存し、同じ状態を開発者や外部制作会社が再現しにくい点も問題です。
一時的な確認であれば手元のiPhoneを使う方法もありますが、空き時間、端末の状態、地域表示、ログイン情報の管理がばらつきます。継続的な公開前検収や複数担当者での再現が必要なら、実Macを共有できる環境の方が記録と引き継ぎを整えやすくなります。
| 方法 | 初期負担 | 再現性 | Safari固有の確認 | 向いている用途 |
|---|---|---|---|---|
| WindowsのChrome | 低 | 低 | 不十分 | 事前の一般表示確認 |
| レスポンシブ表示 | 低 | 中 | 一部のみ | 幅、向き、画素密度 |
| 手元のiPhone | 中 | 端末依存 | 高 | 最終的な抜き取り |
| 遠隔の実Mac | 条件による | 高 | 高 | 継続的な公開前検収 |
Macレンタル環境の選び方を確認する場合も、まず必要なSafariの確認範囲、接続担当者、利用期間、地域別ページの有無を整理してください。長期的な高負荷処理や物理端末への接続が必要な場合は、自社でMacを購入する方が適することもあります。
Safari互換性テスト 2026の要点は、Chromeの画面幅確認を合格証にしないことです。実Macの正式版Safariで取引導線を確認し、表示確認をレスポンシブデザインモード、挙動確認をシミュレーターと実機、原因調査をWeb Inspectorに分担させると、公開可否を説明できる記録が残ります。
継続して使えるmacOS環境がなく、運用担当者と開発担当者が同じSafari障害を再現する必要があるなら、NOVAKVMの遠隔Macを短期間の検収環境として試す価値があります。Windowsだけの確認に残るSafari固有の見落とし、個人端末への依存、地域別状態の再現不足を減らし、まずは核心となる決済導線から検収できます。