Safari 27.3 ベータ版：新機能「適応型ダークモード」を公開

Safari 27.3 のベータ版で、**「適応型ダークモード」**が新たに導入されました。有効に設定すると、明るい色調のウェブサイトを読み込みながら、システム設定に合わせて暗い色調で表示できるようになります。

背景と課題

• 現状の問題: ダークモード対応サイトは増加していますが、すべてのサイトで対応されています。
  • ページ読み込みの約 40% がダークモード環境下からのアクセスです。
  • そのうち、実際にダークモードに対応しているのはわずか 10% に過ぎません。
• 目的: これらの課題を解消し、ユーザーがウェブ全体で一貫性のある暗い体験を楽しめるようにすることです。

使用方法と動作概要

今日から Safari 27.3 のベータ版でお試しください。

有効化手順

1. システムのアピアランス設定を**「暗い」**にしていますかを確認します。
2. ブラウザ内の明るい背景を持つウェブサイトを開きます。
3. Safari が適応型ダークモードのプレビューを表示する場合は、**「Try（試す）」**をタップしてください。

アドプティブ動作の仕組み

• 対応サイトへの影響:
  • HTML 内に

    <meta name="color-scheme" content="light dark">

    または CSS 内の

    color-scheme: light dark

    でサポートを明示しているサイトについては、適応型ダークモードは一切の変更を加えません。
• 未対応サイトへの自動変換:
  • サポート宣言がないサイトでは、ページの色を高速で分析し、主に明るい色か暗い色かを推定します。
  • 背景が暗く文字が明るい一般的なレイアウトの場合は何も変化しません。
  • 明確に明るい外観を持つページについては、自動的に暗い表現へと変換されます。

「適応型ダークモード」の詳細技術仕様

色のトランスフォーメーション

• カラーマトリクス: 開発過程で、色を反転しつつ彩度を保持する独自のアルゴリズムを開発しました。
  • 明るい背景を暗くし、文字を明瞭に見せる処理を行います。
  • 文字色の変換は、WCAG の4.5:1というコントラスト比に準拠しています。
  • 明るい CSS グラデーションも自動的に暗い表現へ変換されます。
• 使いやすさの確保:
  • 背景に対してボタンがコントラストを持って見えるよう調整します。
  • 画像上での文字の可読性を確保し、ホバーメニューの明瞭化を図ります。

画像とエフェクトへの対応

• SVG 画像: アイコンやロゴなど、背景色の反転でコントラストが失われるものを検出し、自動的に色を変換します。
• ビットマップ画像: ピクセルヒストグラムを分析し、単純な白黒のロゴのみを反転させます。
• エフェクトとキャンバス:
  • マスキングやミックスブレンドモードなど、変換後に望ましくない結果を生む可能性のあるエフェクトは無効化されます。

  • <canvas>

    コンテンツは変更せず、予測困難な多様なコンテンツへの干渉を防ぎます。

プライバシー保護

• 検知の防止: Apple はユーザーのプライバシーを尊重しており、ウェブサイトが「適応型ダークモードが有効化されていること」を検知できないよう設計されています。
  • JavaScript で CSS 色をクエリしても、変換前の元々の色は取得できません。

  • <canvas>

    に描画された画像も常に元の形式でレンダリングされます。

ウェブサイトの最適化とカスタマイズ

サイトの改善ガイドライン

古い手法を採用している場合でも、以下の点で小さな更新により改善が可能です：

• 画像フォーマット: ロゴやアイコンをビットマップからSVG に置き換える。
• 背景: CSS でタイル背景ではなく、固い色またはグラデーションカラーを使用する。
• UI コンポーネント: 角丸やしんずれ、ボタンの状態などは画像スプライトから現代的な CSS を採用する。
• コンテンツ画像: 透明背景で作成し、ページ背景色を埋め込まない。
• レイアウト: コンテナにパディングを追加し、密集を防ぐ。

独自ダークモードの構築

サイトを完全にカスタマイズしたい場合は、標準的な Web 技術を活用してください。

推奨する実装方法（ベストプラクティス）

HTML の

<head>

<!-- HTML: head セクション内 -->
<meta name="color-scheme" content="light dark">

/* CSS: :root または body に設定 */
:root { 
  color-scheme: light dark; 
}

追加の機能とテクニック

• @media (prefers-color-scheme: dark) { ... }

• <picture><source media="(prefers-color-scheme: dark)">...</picture>

• 新しい CSS 関数：

  light-dark()

  、

  color-mix()

  、

  contrast-color()

  など。

「ライト専用」カラースキーム

適応型ダークモードによる変換を避けたい場合は、以下のように宣言できます。

• HTML:

  <meta name="color-scheme" content="light only">

• CSS:

  color-scheme: light only

  • ※注記: 「only」キーワードは Safari 27.3 ベータ版 1 ではサポートされておりません。今後の対応状況を请关注してください。

フィードバックのお願い

ウェブサイト管理者向け

適応型ダークモードがプロジェクトに与える影響について議論をご希望の方は、Apple の Evangelist からご連絡ください。

• お問い合わせ先: web-evangelist@apple.com

ユーザー向け

試してみて問題のあるサイト（変換後が見にくくなるなど）に出会った場合は、報告をお願いします。

• 報告手段: Feedback Assistant を使用してください。
• 詳細: フィードバックの提出方法についての詳細（別窓参照）