iOS の ダークモード の ガイドライン
以下の記事を参考に書いてます。
・Dark Mode - iOS - Human Interface Guidelines
1. ダークモード
「iOS 13.0以降」では、ダークモード と呼ばれる「暗い外観」に切り替えるシステムが採用されていますした。すべての画面、ビュー、メニュー、コントロールに暗いカラーパレットを使用し、より鮮やかな色を使用して、暗い背景に対して前景のコンテンツを際立たせます。
ユーザーはデフォルトで ダークモード を選択します。ユーザーは、この選択をシステム全体レベルで行うため、全てのアプリがユーザーの好みを尊重することを期待します。
◎ 設定で選択した外観モードに準拠
アプリ独自の外観モードのオプションを提供すると、ユーザーは複数の設定を調整する必要があるため、より多くの作業が必要になります。さらに悪いことに、システム全体の外観の選択に応答しないため、ユーザーはアプリが壊れていると感じるかもしれません。
◎ ライトモードとダークモードの両方でデザインを確認
ライトモードとダークモードの両方でデザインを確認し、それぞれに対応するように調整します。1つの外観でうまく機能するデザインが、他の外観でうまく機能するとは限りません。
◎ コントラストと透明度の調整時は、ダークモードでもテキストが読めることを確認
ダークモードでデザインを確認する時は、「コントラストを上げる」と「透明度を下げる」を別々、または一緒に試してください。暗い背景上にある場合、暗いテキストが読みにくい場所を見つけることができます。良い視力を持つ人々は低コントラストのテキストを読むことができるかもしれませんが、視覚障害を持つ人々は読めないかもしれません。詳しくは、「色とコントラスト」を参照してください。
2. ダークモードカラー
ダークモードのカラーパレットには、「暗い背景色」と「明るい前景色」が含まれています。モード間およびアプリ間で一貫した雰囲気を維持しながらコントラストを確保するため、慎重に選択されています。
ダークモードでは、2つの背景色セット（base と elevated）を使用して、1つのインターフェイスが別のインターフェイスの上に重ねられている時、奥行きを知覚しやすくしています。 baseカラー はより暗く、背景のインターフェイスが後退しているように見えます。elevatedカラー はより明るく、前景のインターフェイスが進んでいるように見えます。
◎ システムの背景色を優先
ダークモードは動的です。つまり、ポップオーバーやモーダルシートなど、インターフェイスがフォアグラウンドにあるときに、背景色が自動的に base から elevated 変わります。 また、システムは昇格された背景色を使用して、マルチタスク環境でのアプリ間の視覚的な分離と、マルチウィンドウコンテキストでのウィンドウ間の視覚的な分離を提供します。 カスタムの背景色を使用すると、システムが提供するこれらの視覚的な違いを、人々が認識し難くなる場合があります。
◎ 現在の外観に適応する動的な色を使用
セパレータなどの意味のある色は、現在の外観に自動的に適応します。詳しくは、「ダイナミックシステムカラー」を参照してください。
カスタムカラーが必要な場合は、アプリのアセットカタログに「カラーセットアセット」を追加し、現在の外観モードに適応できるように、明るい色と暗い色のバリエーションを指定してください。 色のハードコードや順応しない色の使用は避けてください。
◎ すべての外観で十分な色のコントラストを確保
システム定義の色を使用すると、前景コンテンツと背景コンテンツの適切なコントラスト比が保証されます。 カスタムカラーの場合、特に小さいテキストの場合は、7：1 のコントラスト比を目指します。 詳しくは、「ダイナミックシステムカラー」を参照してください。
◎ 白い背景の色を柔らかくする
ダークモードのコンテンツに白い背景が必要な場合は、背景が周囲の暗いコンテンツに対して光らないように、少し暗い白を選択します。詳しくは、「色」を参照してください。
◎ 画像、アイコン、シンボルの色
システムは、自動的にダークモードで見栄えのよいSFシンボルと、明るい外観と暗い外観の両方に最適化されたフルカラー画像を使用します。
◎ 可能な限り SFシンボル を使用
「ダイナミックシステムカラー」を使用して色を付けたり、磨りガラス効果を加えたりすると、両方の外観モードで記号が見栄えが良くなります。
◎ 必要に応じて、明るい外観と暗い外観の個々のグリフをデザイン
ライトモードで「白抜きの輪郭」を使用するグリフは、ダークモードでは塗りつぶされた塗りつぶされた形状としてよく見えるかもしれません。
◎ フルカラーの画像とアイコンがきれいに見えることを確認
画像やアイコンが明るい外観と暗い外観の両方で見栄えが良い場合は、同じアセットを使用します。そうでない場合は、アセットを変更するか、明るいアセットと暗いアセットを個別に作成します。アセットカタログを使用して、アセットを1つの名前付きイメージに結合します。
3. マテリアル
磨りガラス効果は、暗い背景のテキストのコントラストを維持するのに役立ちます。
◎ ラベルにシステム提供のラベル色を使用
1次、2次、3次、4次のラベルの色は、明るい外観と暗い外観に自動的に適応します。詳しくは、「タイポグラフィ」を参照してください。
◎ システムビューを使用して、テキストフィールドとテキストビューを描画
システムビューとコントロールにより、アプリのテキストがすべての背景で見栄えよくなり、活気の有無に応じて自動的に調整されます。可能であれば、テキストを自分で描画するのではなく、システム提供のビューを使用してテキストを表示してください。詳しくは、UITextFieldおよびUITextViewを参照してください。
磨りガラス効果とマテリアルの相互作用の詳細については、「マテリアル」を参照してください。
4. ダイナミックシステムカラー
ダイナミックカラーは、意味的に定義されたシステムカラーで、ライトモードとダークモードの両方に自動的に適応します。
背景色の定義には、情報の階層を伝えるのに役立つ1次、2次、3次のバリアントが含まれています。一般に、グループ化されたテーブルビューには、「グループ化されたコンテンツの背景色」を使用します。それ以外の場合は、「標準コンテンツの背景色」を使用します。詳しくは、「UI要素カラー」を参照してください。
背景色セットでは、通常、バリアントを使用して階層を示します。
・1次 : 全体ビュー自身。
・2次 : 全体ビュー内のコンテンツまたはグループ。
・3次 : 2次要素内のコンテンツまたはグループ。
【注意】 ダイナミックシステムカラーの意味を再定義しないでください
一貫したエクスペリエンスを人々に提供し、インターフェイスがすべてのコンテキストで見栄えよく見えるようにするには、意図したとおりにダイナミックシステムカラーを使用します。
【注意】ダイナミックシステムカラーを複製しようとしないでください
ダイナミックシステムカラーは、さまざまな環境変数に基づいて、リリースごとに変動する可能性があります。 システムカラーと一致するカスタムカラーを作成する代わりに、ダイナミックシステムカラーを使用します。
5. UI要素カラー
UI要素カラーは、前景色と背景色で利用するカラーオブジェクトを提供します。 これらのカラーオブジェクトの名前は、特定の色値ではなく、使用目的を反映しています。
特に明記されていない限り、提供されたUIColorオブジェクトを使用すると、ダークモードの変更に自動的に適応します。直接またはCGColorなどの別のタイプを使用してカラー値を取得する場合は、ダークモードの変更を自分で処理する必要があります。ダークモードのサポートの詳細については、「インターフェイスでのダークモードのサポート」を参照してください。
◎ ラベル色
・label : 1次コンテンツを含むテキストラベルの色。
・secondaryLabel : 2次コンテンツを含むテキストラベルの色。
・tertiaryLabel : 3次コンテンツを含むテキストラベルの色。
・quaternaryLabel : 4次コンテンツを含むテキストラベルの色。
◎ 塗りつぶし色
・systemFill : 小さい形状のオーバーレイの塗りつぶし色。
・secondarySystemFill : 中くらいの形状のオーバーレイの塗りつぶし色。
・tertiarySystemFill : 大きな形状のオーバーレイの塗りつぶし色。
・quaternarySystemFill : 複雑なコンテンツを含む広い領域のオーバーレイの塗りつぶし色。
◎ テキスト色
・placeholderText : コントロールまたはテキストビューのプレースホルダーテキスト色。
◎ 標準コンテンツの背景色
明るい環境で白の主要な背景を持つ標準のテーブルビューとデザインに使用。
・systemBackground : インターフェースの主な背景色。
・secondarySystemBackground : メインの背景の上に重ねられたコンテンツの色。
・tertiarySystemBackground : セカンダリバックグラウンドの上に重ねられたコンテンツの色。
◎ グループ化されたコンテンツの背景色
テーブルビューやパレットベースデザインなど、グループ化されたコンテンツに使用。
・systemGroupedBackground : グループ化されたインターフェースの主な背景色。
・secondarySystemGroupedBackground : グループ化されたインターフェースのメインの背景の上に重ねられたコンテンツの色。
・tertiarySystemGroupedBackground : グループ化されたインターフェースの2次の背景の上に重ねられたコンテンツの色。
◎ セパレータ色
・separator : コンテンツを表示できるようにする細い境界線または分割線の色。
・opaqueSeparator : コンテンツを非表示にする境界線または分割線の色。
◎ リンク色
・link : リンクの色。
◎ 非対応システム色
・darkText : 明るい背景のテキストの非適応システム色。
・lightText : 暗い背景のテキストの非適応システム色。
6. SFシンボル
SFシンボルは、アプリで使用できる1,500以上の一貫性のある高度に設定可能なシンボルです。
シンボルの完全なセットを閲覧するには、SFシンボルアプリをダウンロードしてください（macOS 10.14.4以降が必要）。
SFシンボルは、さまざまなウェイトとスケールで提供されており、適応可能なデザインを作成するのに役立ちます。
【重要】すべてのSFシンボルは、XcodeおよびApple SDKのライセンス契約で定義されているシステム提供のイメージと見なされ、そこに記載されている契約条件の対象となります。 アプリのアイコン、ロゴ、またはその他の商標関連の使用において、SFシンボル（または実質的または混乱を招く類似のグリフ）を使用することはできません。 Appleは、独自の裁量により、前述の制限に違反して使用されたシンボルの使用を変更または中止する権利を留保し、お客様はかかる要求に迅速に応じることに同意します。
SFシンボルには、Ultralight から Black まで9つのウェイトがあります。サンフランシスコのシステムフォントのウェイトに対応しています。これにより、さまざまなサイズとコンテキストに対応できる柔軟性をサポートしながら、シンボルと隣接するテキスト間の正確なウェイトマッチングを実現できます。
SFシンボルには、Small・Medium・Learge の3つのスケールがあります。サンフランシスコのシステムフォントのキャップの高さを基準にして定義されます。スケールを指定することにより、同じポイントサイズを使用するテキストとのウェイトマッチングを中断することなく、隣接するテキストと比較してシンボルの強調を調整できます。
SFシンボルを使用して、ナビゲーションバー、ツールバー、タブバー、コンテキストメニュー、ホーム画面のクイックアクションなど、さまざまな特定の場所でタスクとコンテンツのタイプを表すことができます。画像を使用できるあらゆる場所でシンボルを使用できます。
7. カスタムシンボルの作成
SFシンボルで提供されていないシンボルが必要な場合は、独自に作成できます。SF Symbolsアプリ を使用すると、シンボルをテンプレートとして再利用可能なベクターベースのファイル形式でエクスポートできます。カスタムシンボルを作成するには、目的のデザインに似たSFシンボルをエクスポートし、スケッチやイラストレーターなどのベクター編集ツールを使用してテンプレートを変更します。元のテンプレートファイルを使用するのと同じように、結果をアプリで使用します。カスタマイズ不可な記号のリストについては、「そのまま使用する記号」を参照してください。開発者向けガイダンスについては、「アプリのカスタムシンボル画像の作成」を参照してください。
◎ テンプレートガイド
詳細レベル、光学的重み、配置、位置、および遠近法に関して、システムが提供するものと一致するカスタムシンボルを作成します。 次のような記号の設計に努めます。
・シンプル
・認識できる
・不快ではない
・アクションまたはそれが表すコンテンツに直接関連
◎ 幅広いテキスト設定をサポートするには、アプリに必要なだけのウェイトとスケールでカスタムシンボルを作成
太字のテキスト設定を有効にしてダイナミックタイプをサポートするには、すべての縮尺で通常、中、半太、太字の記号を作成します。 アプリで追加のフォントの太さとスケールを使用する場合は、これらの太さとスケールでシンボルも作成します。
◎ Apple製品のレプリカを使用しない
Apple製品は著作権で保護されており、カスタムシンボルで複製することはできません。
◎ カスタムシンボルの代替テキストラベルを提供
代替テキストラベルは表示されませんが、VoiceOverによって画面上の内容を音声で説明できるため、視覚に障害がある方でも簡単にナビゲーションできます。
この記事が気に入ったらサポートをしてみませんか？