🍎HIGざっくりまとめ Foundations編 vol.4 ダークモード

　2022年6月7日、AppleのHuman Interface Guidelinesが改訂されました。これを期にしっかり読み込み、個人的視点からのざっくりなまとめを記していきます。

※私はブラウザで動くWEBアプリーケーションのUIをデザインしています。その視点から大切だと思った点を残してくので、対象外のデバイスや各プラットフォームの細やかな話は端折っています。

---

Darkmode（ダークモード）

ダークモードは、暗い環境に合わせた快適な視聴体験を提供するために、暗い色調を使用するシステム全体の外観設定です。

iOS、iPadOS、macOS、およびtvOSでは、デフォルトのインターフェイススタイルとしてDark Modeを選択する人が多く、一般に、すべてのアプリとゲームがその好みを尊重することを期待します。
ダークモードでは、システムはすべての画面、ビュー、メニュー、およびコントロールに暗いカラーパレットを使用し、暗い背景に対して前景のコンテンツを目立たせるために知覚的コントラストを大きくすることもあります。

Dark Mode - Foundations - Human Interface Guidelines - Design - Apple Developer

要点

• アプリ固有の外観設定を提供しないようにします。
  アプリ固有の外観モードは、ユーザーが望む外観を得るために複数の設定を調整する必要があるため、ユーザーの負担が大きくなります。さらに悪いことに、システム全体で選択した外観に対応しないため、アプリが故障していると思われる可能性もあります。

• アプリが両方の外観モードで美しく見えることを確認します。
  自動表示設定を選択していると、1日を通して状況の変化に応じて明るい表示と暗い表示が切り替わります。なので、どちらか一方だけでなく、LightモードとDarkモード両方使用されるということ。

• コンテンツをテストして、両方の表示モードで快適に読めるかどうかを確認してください。
  例えば、Darkモードで「コントラストを上げる」と「透明度を下げる」を（別々に、または一緒に）オンにした場合、暗い背景の上に暗いテキストがあると、読みにくくなる場所が見つかるかもしれません。

• 稀なケースとして、インターフェースに暗い外観のみを使用することを検討してください。
  たとえば、没入型のメディア視聴を可能にするアプリでは、UIを後退させ、メディアに集中できるように、恒久的に暗い外観を使用することが理にかなっている場合があります。

インクルードカラー

ダークモードのカラーパレットは、背景色が薄くなり、前景色が明るくなります。多くの色が反転している一方で、反転していない色もあります。

• 現在の外観に適応する色を採用する。
  セマンティックカラー（macOSのlabelColorや controlColor、iOSとiPadOSのseparatorなど）は、現在の外観に自動的に適応します。ハードコードされた色値や適応しない色の使用は避けてください。

• すべての外観において、十分なカラーコントラストを目指しましょう。
  最低でも、色間のコントラスト比が4.5:1を下回らないようにしてください。カスタムの前景色と背景色の場合、特に小さなテキストでは7:1のコントラスト比になるように努めます。

• 白い背景の色を和らげる。
  白い背景を含むコンテンツ画像を表示する場合、周囲のダークモードのコンテキストで背景が光らないように、画像を少し暗くすることを検討してください。

アイコンと画像

• 可能な限りSFシンボルを使用する。
  シンボルは、ダイナミックカラーを使用して色合いを変えたり、鮮やかさを加えたりすると、どちらの外観モードでもうまく機能します。

• 必要であれば、明るい場所と暗い場所とで別々のアイコンをデザインしてください。
  例えば、満月を描いたアイコンは、明るい背景ではコントラストをつけるために微妙に暗い輪郭が必要ですが、暗い背景で表示する場合は輪郭が不要になります。

• フルカラーの画像やアイコンは、どちらで表示させても美しく見えるようにしてください

SFシンボル（SF Symbols）
apple公式アイコンフォント的なやつ。Dark Modeに自動対応するようにしてある。

テキスト

鮮やかさとコントラストを高めることで、暗い背景の文字の読みやすさを維持する仕組みです。

• ラベルには、システムで用意されたラベルカラーを使用します。
  一次（primary,）、二次（secondary）、三次（tertiary）、四次（quaternary）のラベルカラーは、見た目の明暗に自動的に適応します。

• テキストフィールドやテキストビューの描画には、システムビューを使用します。
  システムビューとコントロールは、アプリのテキストをあらゆる背景で美しく表示し、鮮やかさの有無も自動的に調整します。

iOS, iPadOS

ダークモードでは、ベースカラーとエレベーティングカラーの2種類の背景色を使用し、暗いインターフェイスを別のインターフェイスの上に重ねたときに、奥行きを感じられるようにします。ベースカラーは暗く、背景が後退して見え、エレベーティングカラーは明るく、前景のインターフェイスが前進して見えるようにします。

システムの背景色を優先する。
Dark Mode は動的で、ポップオーバーやモーダルシートなどのインターフェイスがフォアグラウンドになると、背景色がベースからエレベーテッドに自動的に変更されます。
また、マルチタスク環境ではアプリ間を、マルチウィンドウ環境ではウィンドウ間を視覚的に分離するために、エレベーデッドな背景色を使用します。カスタムの背景色を使用すると、システムが提供するこれらの視覚的区別を認識しにくくなる可能性があります。

---

感想

ただ背景が暗くなって、文字が白になるだけじゃない！（あたりまえですが）なるほどーと思ったのが下記３点。

• Darkモードor Lightモードではない
  自動切り替えのように同じユーザーが１日の中で２つのモードで使う

• 細やかな対応
  背景色によってはアイコンに輪郭が必要だったり、白っぽい画像が浮きすぎないように調整するなどが必要。それぞれのモードに対応する画像（アイコン）を用意する。

• Dark Mode は動的
  黒になるとドロップシャドウで重なりの表現が効かなくなるので、背景色を微妙に明るくして重なりを表現する。
  Baseが真っ黒でElevatedがややダークグレー。上に重ねるときはElevatedな背景色にして、奥行きを演じてくれる。