Safari互換性テスト 2026：越境ECの独立サイトで先に確認するページは？

商品ページの選択肢がSafariで動かない、ホームのメニューがずれて見える。
まずホーム、商品ページ、市場別ページ、カートの順に実際の購入導線を確認し、画面幅のプレビューと実際のmacOS Safariでの再確認、注文テストを別々に扱ってください。

改修や商品追加を控えた越境ECの運営担当者、Safariでの表示不具合を調べている担当者向けです。
テーマの修正を依頼する協力者にも、問題を切り分けて引き継ぐための確認手順をまとめます。

SECTION 01Safari互換性テスト 2026では、どのページから確認しますか？

すべてのページを同じ深さで見るのではなく、購入判断や次の操作に影響するページを優先します。ホームから商品を選び、カートを経てチェックアウトへ進む流れをたどれば、見た目だけでなく操作上の問題も見つけやすくなります。

改修前に、対象URL、対象市場と言語、変更内容、確認担当者、使用したテーマの状態を記録してください。Shopifyでは公開前のテーマをプレビューできますが、未公開テーマの表示確認と公開済みページの確認は別の検証対象です。テーマのプレビューについては、Shopifyのテーマ追加とプレビューの説明を参照してください。

Shopify独立サイトのSafari表示は、どう確認すればよいですか？
対象ページをSafariで開き、通常の表示に加えて、主要なリンクやボタンを操作します。画面幅を変えたプレビューだけで完了とせず、実際のmacOS Safariでページを開ける環境がある場合は、同じURLと操作を再確認します。

ホーム：入口から商品へ進めるか

ホームでは、最初に買い手が使う入口を追います。ナビゲーション、検索、キャンペーンバナー、商品画像、主要リンクを見て、文字や画像が隠れていないか、ボタンを選べるか、リンク先が想定どおりかを確認してください。

たとえば、キャンペーン画像の上にメニューが重なっているときは、スクリーンショットだけでブラウザーの問題と決めつけないでください。URL、テーマの公開・プレビュー状態、Safariの環境、再現する操作を一緒に残すと、テーマ担当者が同じ条件を確かめられます。

商品ページ：バリエーション選択からカート追加まで

実際に販売中の商品を選び、画像の切り替え、サイズや色などの選択肢、在庫切れの表示、カート追加後の通知を順に試します。ページをスクロールした後も購入ボタンが使えるか、選択内容がカートへ正しく引き継がれるかも見てください。

Safariで商品バリエーションを選べない場合、どこを確認しますか？
最初に別の商品や別の選択肢でも再現するかを試し、商品情報、在庫状態、アプリが追加する機能、テーマの表示を分けて確認します。プレビューでの見え方だけでは原因を特定できないため、対象商品と選択内容、操作順、期待した結果と実際の結果を記録してください。

SafariのWeb Inspectorは、ウェブページの調査に使える開発者ツールです。画面上の現象だけでは判断できない場合は、担当者にSafariのWeb Inspectorと開発者ツールを使った確認が必要か相談します。運営担当者が設定やコードを変更する前に、再現条件をそろえることが重要です。

市場別ページ：国と言語の条件を固定する

市場ごとに通貨、言語、商品表示などが異なる場合は、今回確かめたい国と言語を先に決めます。Shopifyの市場設定はShopify Marketsの案内で確認でき、言語などのローカライズについては市場のローカライズ手順を参照できます。

テーマのプレビューが対象の国や言語に合っているか、どう確かめますか？
プレビュー時に選んだ市場や言語、使用したプレビューURL、ページの状態を記録し、その条件で表示される内容を照合します。ひとつのプレビュー結果から、すべての購入者、アカウント、接続環境に同じ表示が出るとは判断できません。

カートとチェックアウト：ページ確認と注文確認を分ける

カートでは、商品名、選択したバリエーション、数量変更、割引表示、チェックアウトへ進む操作を確認します。ここでページが開いたことは、決済手段や注文処理が検証できたことを意味しません。

注文処理を調べる場合は、通常の購入と混同しないよう、ストアで利用できる適切なテスト方法を確認してください。Shopifyのテスト注文の処理手順と決済のテストモードに関する説明は、画面の表示確認とは別の注文・決済検証に関する資料です。

SafariのResponsive Design Modeは、異なる画面幅を確認する手掛かりになります。ただし、Appleはプリセットによるプレビューが実際の端末でのレイアウト、描画、動作を完全には表さないと説明しています。実機確認や決済検証の代わりにはしないでください。

Responsive Design Modeの用途と制限を踏まえ、次のように検証手段を選びます。

問題を再現できないときは、記録を整えて引き継ぐ

買い手から「表示が崩れる」「選択肢を操作できない」と報告されたら、原因を決めつける前に、次の情報をそろえます。

1. 問題が出たページのURLと、公開ページかテーマプレビューかを記録します。
2. 対象の市場、言語、商品、選択したバリエーションを記します。
3. Safariを使ったことが分かる環境情報と、確認した画面幅を残します。
4. 再現する操作を順番に書き、期待した表示と実際の表示を分けて記します。
5. 必要に応じて画面画像を添えます。顧客情報や注文情報が写る場合は、共有前に伏せてください。
6. 同じ条件で再現するかを再確認し、テーマの協力者、Shopifyのサポート、決済関連の担当者のうち、次に確認すべき相手を判断します。

確認手段は、何を確かめたいかで選びます。チームに使えるmacOS Safari環境がなく、実際のSafariでのページ確認が必要になった場合に限り、遠隔Macを検討してください。すべての買い手端末や市場を再現できるわけではなく、プラットフォーム上の資格やアカウント状態、取引結果を変えるものでもありません。米国などの環境を含む遠隔Macが必要か確認する場合は、MACNOXの米国向けMac環境の接続条件と利用目的を照らし合わせます。

自社のMacですでに必要なSafari確認ができるなら、新たな環境を借りる必要はありません。一方、短期間の改修や買い手からの報告対応で実機確認が必要になった場合、Macの購入には端末費用や保守が伴い、手元の環境をチームで共用すると確認時間の調整も必要です。そうした条件なら、利用期間と必要な接続方法を確かめたうえで、MACNOXのレンタル料金を比較対象に加えると判断しやすくなります。長期にわたる常時利用や物理接続が必要な作業では、自社のMacを使うほうが適する場合があります。

SECTION 02関連記事

• 公開前に確認したいSafariの互換性テスト項目
• 画面プレビューと実際のSafariテスト、どう使い分ける？