納品前には、対象のSafari環境で実際のページを開き、レイアウト、操作、アクセシビリティを確認してください。他のブラウザーのプレビューだけではSafari上の表示や挙動を判断できません。Macが手元にない場合はリモートMacを検討できますが、表示があらゆる端末と完全に一致する保証にはなりません。
UI・ウェブデザイナー：文字の折り返し、画面幅ごとの配置、操作部品の状態を確かめたい方。 動きや3Dを扱うデザイナー：アニメーションやメディアが使えない場合の代替表示も確認したい方。 Windows中心のフリーランスや小規模チーム：引き渡し前にmacOS上のSafariで実物を確認したい方。
※最終更新日：2026年9月26日。macOS 27の提供開始日はAppleの発表で、Safariの機能情報はWebKitのSafari 27.0解説およびSafari公式リリースノートで確認しています。
SECTION 01 検収環境をそろえる
Appleの発表によると、macOS 27は2026年9月14日に提供が始まりました。ただし、OS名だけを記録しても検収条件としては不十分です。Safariのバージョン、使用したページ、表示幅、入力方法も一緒に残してください。
デザインカンプやWindows上のプレビューは、意図したレイアウトを共有するための資料です。一方、Safariの実画面は、対象環境でページを読み込んだときの描画と操作を確かめるものです。両者の差を見つけたら、まず再現条件を記録し、デザイン上の意図と実際の挙動を切り分けます。
| 確認方法 | わかること | 判断の限界 |
|---|---|---|
| デザインカンプ | 余白、階層、画像の配置などの意図 | ブラウザー上の折り返しや操作感は確認できません |
| Windows上のブラウザー | Windows環境での表示と操作 | Safari固有の描画や挙動の確認にはなりません |
| macOS上のSafari実画面 | 対象ページの表示、操作、問題の再現条件 | ほかのOS、実機、画面設定すべての再現ではありません |
UI・ウェブデザイナーのレイアウト確認
ナビゲーション、見出し、本文、画像が意図した優先順位で見えるかを、代表的なページで確認します。特に、長い見出しや日本語と英数字が混在する箇所、ボタン内のラベルは、折り返しで高さや位置が変わることがあります。
画面幅を変えて確認する場合、Safariのレスポンシブデザインモードは表示領域を切り替える補助になります。ただし、その表示だけで実機のすべての挙動を再現できるわけではありません。幅を変えた状態で気づいた問題は、必要に応じて対象端末でも確認してください。
不具合の記録には、ページのURL、OSとSafariのバージョン、表示幅、再現手順、スクリーンショットを含めます。「文字がずれる」だけでは修正後の再確認が難しいため、どの見出しがどの状態で折り返したかまで書き添えます。
交互作用設計者の操作経路
メニュー、ダイアログ、フォーム、ページ内スクロールを、同じ順序でたどれる確認経路にします。クリックだけで終わらせず、キーボードでの移動、フォーカス表示、閉じる操作、入力エラー後の状態もチェック対象にします。
Web Inspectorの公式説明では、ページの構造や動作を調べるための開発ツールとして案内されています。表示崩れの要素を調べる助けになりますが、ツール上で原因を見つけたことと、利用者の操作が一通り問題なく完了することは別の確認です。再現手順を最初から最後まで実行し、画面上の状態も記録してください。
Safariで開発者向け機能を使う準備が必要な場合は、Appleの有効化手順を参照します。開発者ツールを使った一度の成功だけで、別の入力方法や端末でも正常だと結論づけないようにします。
動きや3Dコンテンツを扱う担当者
アニメーションの開始と停止、動画などのメディア、3D表示を、ページ内の実際の導線に沿って確認します。読み込みが完了しない、操作できない、動きが止まるといった場合に、代替画像や説明文などが用意されているかも見てください。
Safari 27の新しいウェブ機能を採用する場合は、WebKitの公式機能説明で正式に記載された範囲を確認したうえで、プロジェクトが対象とする環境で検証します。Safari Technology Previewやテスト版での動作を、正式版での対応として扱うことはできません。公式資料に機能が載っていても、制作ページの実装や対象環境での動作確認は別途必要です。
| 見る対象 | 検収時の確認 | 代替・追加確認 |
|---|---|---|
| アニメーション | 表示開始、終了後の状態、操作への影響 | 動きが使えない場合にも内容が伝わるか |
| メディア | 再生操作、停止後の表示、周辺レイアウト | 再生できない場合の説明や代替表示 |
| 3Dコンテンツ | 読み込み、視点操作、操作後の表示 | 画像や説明など、機能に頼らない伝達方法 |
ブランド・ビジュアル担当者の素材確認
画像のトリミング、透過素材の縁、アイコンの位置、文字と背景のコントラストを、意図した用途に沿って見直します。素材そのものの書き出しミス、ブラウザーでの描画、ディスプレイ設定や色管理による見え方は、同じ原因とは限りません。
色の見え方に差があっても、Safariだけの問題とすぐに決めつけないでください。使用した素材と、表示した端末・画面の条件も記録し、別の画面でも同じ差が再現するか確認します。ブラウザー検収だけで絶対的な色の一致を保証することはできません。
アクセシビリティを確認する担当者
キーボードだけで主要な操作ができるか、フォーカスが論理的な順序で移動するか、見出しや操作部品の意味が伝わるかを確認します。W3Cのフォーカス順序の解説は、順序が利用者の意味や操作に影響する場合の考え方を示しています。
確認対象は、代表的なページと主要な操作経路に絞って記録します。W3Cの初期アクセシビリティ確認ガイドも参考になりますが、手作業での確認を一度行っただけで、ページ全体のアクセシビリティ適合や認証を証明できるわけではありません。必要に応じて支援技術を用いた確認や、専門的な評価を追加してください。
SECTION 02 Windows中心のチームが進める検収の流れ
作業の抜けを防ぐには、ツール名よりも再現できる手順を先に決めます。
- 対象を選ぶ： トップページだけでなく、ナビゲーション、フォーム、画像や動きを含む代表的なページを選定します。
- 環境を記録する： macOSとSafariのバージョン、使用端末、表示幅、接続方法を記入します。
- 確認経路を定める： ページを開くところから、メニュー、入力、スクロール、キーボード操作までの順序を決めます。
- 問題を切り分ける： スクリーンショットと再現手順を添え、表示、操作、素材、環境のどこに関係する問題かを整理します。
- 修正後に再確認する： 同じ条件と手順で再現するかを確かめ、結果と未確認の範囲を記録します。
WebDriverを使った自動確認を行う場合も、Appleが説明するSafari WebDriverセッションの制約を確認してください。自動操作の結果だけでは、見た目やキーボードでの使いやすさまで判断できません。
遠隔Macを使うかどうかの判断
Safari 27の確認方法は、チームの手持ち環境と納品条件で選びます。次の条件分岐で、必要な検証範囲を先に決めてください。
- Safariが納品条件に含まれ、手元にmacOS環境がない場合は、リモートMacで実ページを開いて確認します。
- 表示差が疑われる箇所や、Safari固有の操作が重要なページがある場合は、カンプや他ブラウザーの確認だけで完了とせず、実画面で再現を確かめます。
- 対象がWindows上の表示に限られ、Safari対応が要件に含まれない場合は、現行の環境での検収を基本とし、Safari確認を必須にしません。
- モバイル端末の実機操作や画面ごとの色の確認が要件の場合は、リモートMacだけで完了とせず、対象端末や適切な画面環境で追加確認します。
Windowsのプレビューは制作中の確認に、macOS上のSafariは納品条件に沿ったブラウザー確認に向いています。リモートMacは、Mac本体を用意できないときに実ページを開いて検収する選択肢ですが、実機やすべての表示環境の代替ではありません。接続方式や利用条件は、VPSNIXの利用案内とプラン情報で確認し、手元の代表的なページと操作経路で適合性を判断してください。
SECTION 03 納品前に選ぶべき検証範囲
他のブラウザーだけで済ませると、Safari上のレイアウト差、操作経路の不具合、アクセシビリティ上の問題を見落とす可能性があります。一方で、リモートMacでの確認にも、実機やすべてのディスプレイ条件を網羅できない制約があります。まず要件と代表ページを定め、Safari 27の実画面で必要な箇所を再確認してください。
手元にMacがなく、納品条件にSafariが含まれるなら、遠隔環境を使った検収が候補になります。現行のブラウザー確認だけで十分な案件か、追加のmacOS検証が必要かをページごとに切り分け、必要であればVPSNIXの案内から利用条件を確認して、実際の作業手順に合うかを判断してください。