Dark Mode｜HIG Foundations 日本語訳まとめvol.6
ダークモードは、暗いカラーパレットを使用して、暗い環境に合わせた快適な表示エクスペリエンスを提供するシステム全体の外観設定です。
■ 本noteの見方
2022年6月7日、Appleのイベント「WWDC22」に合わせHIGが改訂されていたので、その概要となる「Foundations（基礎）」のところだけザックGoogle翻訳したものをインデックスとしてまとめておきました。
https://note.com/tsutsui_design/n/nd22aa17a53f7
■ Dark Mode (ダークモード)
iOS、iPadOS、macOS、およびtvOSでは、ユーザーはデフォルトのインターフェイススタイルとしてダークモードを選択することが多く、通常、すべてのアプリとゲームが自分の好みを尊重することを期待しています。ダークモードでは、システムはすべての画面、ビュー、メニュー、およびコントロールに暗いカラーパレットを使用します。また、前景のコンテンツを暗い背景に対して目立たせるために、より大きな知覚コントラストを使用する場合もあります。
ベストプラクティス
アプリ固有の外観設定を提供することは避けてください。アプリ固有の外観モードオプションを使用すると、必要な外観を得るには複数の設定を調整する必要があるため、作業量が増えます。さらに悪いことに、システム全体の外観の選択に応答しないため、アプリが壊れていると思われる場合があります。
アプリが両方の外観モードで見栄えがよいことを確認してください。いずれかのモードを使用することに加えて、ユーザーは自動外観設定を選択できます。この設定では、アプリの実行中に、1日を通して状況が変化すると、明るい外観と暗い外観が切り替わります。
コンテンツをテストして、両方の外観モードで快適に判読できることを確認します。たとえば、[コントラストの増加]と[透明度の減少]がオンになっているダークモードでは（別々に、または一緒に）、暗い背景に暗いテキストがあると読みにくくなる場合があります。また、ダークモードでコントラストを上げるをオンにすると、暗いテキストと暗い背景の間の視覚的なコントラストが低下する場合があります。強い視力を持っている人はまだコントラストの低いテキストを読むことができるかもしれませんが、そのようなテキストは多くの人にとって判読できない可能性があります。ガイダンスについては、色と効果を参照してください。
まれに、インターフェイスで暗い外観のみを使用することを検討してください。たとえば、没入型メディアの表示を可能にするアプリで、UIを後退させ、人々がメディアに集中できるようにする、永続的に暗い外観を使用することは理にかなっています。
ダークモードの色
ダークモードのカラーパレットには、暗い背景色と明るい前景色が含まれています。これらの色は必ずしも明るい色の反転ではないことを理解することが重要です。多くの色は反転していますが、そうでない色もあります。詳細については、「色」>「仕様」を参照してください。
現在の外観に適応する色を採用します。セマンティックカラー（macOSのlabelColorやcontrolColor 、iOSやiPadOSのseparatorなど）は、現在の外観に自動的に適応します。カスタムカラーが必要な場合は、Xcodeでアプリのアセットカタログにカラーセットアセットを追加し、色の明るいバリエーションと暗いバリエーションを指定します。ハードコードされた色の値や適応しない色の使用は避けてください。
すべての外観で十分な色のコントラストを目指します。システム定義の色を使用すると、前景と背景のコンテンツのコントラスト比を高くすることができます。少なくとも、色間のコントラスト比が4.5：1以上であることを確認してください。カスタムの前景色と背景色については、特に小さなテキストでは、7：1のコントラスト比を目指してください。この比率により、フォアグラウンドコンテンツがバックグラウンドから目立つようになり、コンテンツが推奨されるアクセシビリティガイドラインを満たすのに役立ちます。
白い背景の色を柔らかくします。白い背景を含むコンテンツ画像を表示する場合は、周囲のダークモードコンテキストで背景が光らないように、画像を少し暗くすることを検討してください。
アイコンと画像
システムは、SFシンボル（自動的にダークモードに適応）と、明るい外観と暗い外観の両方に最適化されたフルカラー画像を使用します。
可能な限りSFシンボルを使用してください。シンボルは、動的な色を使用して色を付ける場合、または鮮やかさを加える場合に、両方の外観モードで適切に機能します。ガイダンスについては、色を参照してください。
必要に応じて、明るい外観と暗い外観の別々のインターフェイスアイコンをデザインします。たとえば、満月を表すアイコンは、明るい背景とのコントラストを良くするために微妙な暗い輪郭が必要な場合がありますが、暗い背景に表示する場合は輪郭は必要ありません。同様に、油の滴を表すアイコンは、暗い背景に対してエッジを表示するためにわずかな境界線が必要な場合があります。
フルカラーの画像とアイコンが両方の外観で見栄えがすることを確認してください。明るい外観と暗い外観の両方で見栄えがよい場合は、同じアセットを使用します。アセットが1つのモードでのみ良好に見える場合は、アセットを変更するか、明るいアセットと暗いアセットを別々に作成します。アセットカタログを使用して、アセットを1つの名前付き画像に結合します。
文章
システムは、鮮やかさとコントラストの向上を使用して、暗い背景のテキストの読みやすさを維持します。
ラベルには、システムが提供するラベルの色を使用してください。一次、二次、三次、および四次のラベルの色は、明るい外観と暗い外観に自動的に適応します。
システムビューを使用して、テキストフィールドとテキストビューを描画します。システムビューとコントロールにより、アプリのテキストはすべての背景で見栄えが良くなり、活気の有無を自動的に調整します。可能であれば、自分でテキストを描画する代わりに、システム提供のビューを使用してテキストを表示します。
プラットフォームに関する考慮事項
tvOSに関する追加の考慮事項はありません。ダークモードはwatchOSではサポートされていません。
iOS、iPadOS
ダークモードでは、システムは2セットの背景色（ベースと高架と呼ばれる）を使用して、1つの暗いインターフェイスが別のインターフェイスの上に重ねられたときの奥行きの知覚を強化します。ベースカラーが暗くなり、背景のインターフェイスが後退しているように見え、高架の色が明るくなり、前景のインターフェイスが進んでいるように見えます。
ベース
高架
光
システムの背景色を優先します。ダークモードは動的です。つまり、ポップオーバーやモーダルシートなどのインターフェイスがフォアグラウンドにある場合、背景色はベースからエレベートに自動的に変化します。また、システムは高架の背景色を使用して、マルチタスク環境のアプリ間およびマルチウィンドウコンテキストのウィンドウ間を視覚的に分離します。カスタムの背景色を使用すると、システムが提供するこれらの視覚的な違いを人々が認識しにくくなる可能性があります。
MacOS
一般設定でグラファイトアクセントカラーを選択すると、macOSによってウィンドウの背景が現在のデスクトップ画像から色を取得します。その結果、デスクトップの色合いと呼ばれ、ウィンドウが周囲のコンテンツとより調和して調和するのに役立つ微妙な効果が得られます。
必要に応じて、カスタムコンポーネントの背景に透明度を含めます。透明度を使用すると、デスクトップの色付けがアクティブなときにコンポーネントがウィンドウの背景から色を取得し、デスクトップの画像が変更されても持続できる視覚的な調和を作成できます。この調和を実現するには、背景またはベゼルが表示されているカスタムコンポーネントにのみ透明度を追加し、コンポーネントが色を使用しない状態など、ニュートラルな状態にある場合にのみ追加します。コンポーネントが色を使用する状態にあるときに透明度を追加しないでください。透明度を追加すると、ウィンドウの背景がデスクトップ上の別の場所に調整されたとき、またはデスクトップの画像が変更されたときにコンポーネントの色が変動する可能性があります。
リソース
関連している
ビデオ
この記事が気に入ったらサポートをしてみませんか？