Color｜HIG Foundations 日本語訳まとめvol.5
色の賢明な使用は、コミュニケーションを強化し、ブランドを呼び起こし、視覚的な継続性を提供し、ステータスとフィードバックを伝達し、人々が情報を理解するのを助けることができます。
■ 本noteの見方
2022年6月7日、Appleのイベント「WWDC22」に合わせHIGが改訂されていたので、その概要となる「Foundations（基礎）」のところだけザックGoogle翻訳したものをインデックスとしてまとめておきました。
■ Color (色)
システムは、さまざまな背景や外観モードで見栄えのする色を定義し、鮮やかさとアクセシビリティの設定に自動的に適応できます。人々はシステムの色に精通しており、それらを使用することは、デバイスで自宅にいるように感じるための便利な方法です。
また、カスタムカラーを使用して、アプリやゲームの視覚的エクスペリエンスを向上させ、その独自の個性を表現することもできます。次のガイドラインは、システム定義の色を使用するかカスタムの色を使用するかに関係なく、人々が理解できる方法で色を使用するのに役立ちます。
ベストプラクティス
ゲーム以外のアプリでは、色を控えめに使用してください。ゲーム以外のアプリでは、色を使いすぎるとコミュニケーションが不明瞭になり、気が散る可能性があります。重要な情報に注意を喚起したり、インターフェースのパーツ間の関係を示したりするために、色のタッチを使用することをお勧めします。
異なる意味で同じ色を使用することは避けてください。特にステータスや双方向性などの情報を伝達するために色を使用する場合は、インターフェイス全体で一貫して色を使用してください。たとえば、アプリで青を使用して、ユーザーがテキストをタップして詳細を表示できることを示す場合があります。アプリが色に依存しない視覚的なインジケーター（山形記号や矢印アイコンなど）を使用してインタラクティブ機能を伝達する場合でも、インタラクティブテキストに青以外の色を使用すると混乱を招きます。
アプリの色が明るい外観モードと暗い外観モードの両方で適切に機能することを確認してください。常に純粋な黒の背景を使用するwatchOSを除いて、プラットフォームはデフォルトの明るい外観の代わりに暗い代替手段を提供します。ダークモードは、すべての画面、ビュー、メニュー、およびコントロールに暗いカラーパレットを使用し、鮮やかさ（前景色と背景色を動的にブレンドする微妙な効果）を高めて、前景コンテンツを暗い背景に対して際立たせることができます。システムカラーは自動的に両方の外観をサポートします。カスタムカラーを使用する場合は、明るいバリエーションと暗いバリエーションの両方を提供する必要があります。ガイダンスについては、ダークモードを参照してください。
さまざまな照明条件でアプリの配色をテストします。晴れた日や薄暗い場所でアプリを屋外で実行すると、色が異なって見える場合があります。ほとんどのユースケースで最適な表示エクスペリエンスを提供するように色を調整します。
さまざまなディスプレイを備えたデバイスでアプリをテストします。たとえば、True Toneディスプレイ（特定のiPhone、iPad、およびMacモデルで使用可能）は、周囲光センサーを使用して、現在の環境の照明条件に適応するようにディスプレイの白色点を自動的に調整します。主に読書、写真、ビデオ、およびゲームに焦点を当てたアプリは、白色点適応スタイルを指定することにより、この効果を強めたり弱めたりすることができます（開発者向けガイダンスについては、UIWhitePointAdaptivityStyleを参照してください）。複数のブランドのHDおよび4KTVで、さまざまなディスプレイ設定を使用してtvOSアプリをテストします。[システム設定]>[ディスプレイ]でプロファイルを選択することにより、Macでさまざまなカラープロファイル（P3や標準RGB（sRGB）など）を使用してアプリの外観をテストすることもできます。ガイダンスについては、カラーマネジメントを参照してください。。
アートワークと半透明性が近くの色にどのように影響するかを検討してください。アートワークのバリエーションは、視覚的な連続性を維持し、インターフェイス要素が圧倒されたり圧倒されたりするのを防ぐために、近くの色を変更する必要がある場合があります。たとえば、マップは、マップモードでは明るい配色を表示しますが、衛星モードでは暗い配色に切り替わります。ツールバーのような半透明の要素の後ろに配置したり、適用したりすると、色が異なって表示されることもあります。
アプリでユーザーが色を選択できる場合は、システムが提供するカラーコントロールを利用できる場合はそれを選択してください。組み込みのカラーピッカーを使用すると、一貫したユーザーエクスペリエンスが提供されるだけでなく、ユーザーは任意のアプリからアクセスできる色のセットを保存できます。開発者向けガイダンスについては、NSColorPanel（macOS）、およびUIColorWellとUIColorPickerViewController（iOS、iPadOS、およびMac Catalyst）を参照してください。
包括的カラー
オブジェクトを区別したり、双方向性を示したり、重要な情報を伝達したりするために、色だけに頼るのは避けてください。色を使って情報を伝えるときは、色覚異常やその他の視覚障害のある人が理解できるように、同じ情報を別の方法で提供するようにしてください。たとえば、ラベルやグリフシェイプを使用して、オブジェクトや状態を識別できます。
アプリのコンテンツを認識しにくくする色の使用は避けてください。たとえば、コントラストが不十分だと、アイコンやテキストが背景に溶け込み、コンテンツが読みにくくなる可能性があります。また、色覚異常の人は、一部の色の組み合わせを区別できない場合があります。ガイダンスについては、色と効果を参照してください。
使用する色が他の国や文化でどのように認識されるかを検討してください。たとえば、赤は一部の文化では危険を伝えますが、他の文化では肯定的な意味合いを持っています。アプリの色が意図したメッセージを送信することを確認してください。
システムカラー
アプリでシステムの色の値をハードコーディングすることは避けてください。文書化された色の値は、アプリの設計プロセス中に参照するためのものです。実際の色の値は、さまざまな環境変数に基づいて、リリースごとに変動する可能性があります。ColorなどのAPIを使用して、システムの色を適用します。
iOSとmacOSは、標準のUIコンポーネントの配色に一致し、明るい外観と暗い外観の両方に自動的に適応する動的なシステムカラーのセットも定義します。各動的色は、外観や色の値ではなく、目的によって意味的に定義されます。たとえば、一部の色は階層のさまざまなレベルでビューの背景を表し、他の色はラベル、リンク、セパレータなどの前景コンテンツを表します。
動的なシステムカラーの複製は避けてください。動的システムの色（一部はパターンである可能性があります）は、さまざまな環境変数に基づいて、リリースごとに変動する可能性があります。
動的システムカラーのセマンティックな意味を再定義することは避けてください。一貫したエクスペリエンスを確保し、将来macOSの外観が変更されたときにインターフェイスの見栄えを良くするために、意図したとおりに動的なシステムカラーを使用してください。
カラーマネジメント
色空間は、 RGBやCMYKなどのカラーモデルの色を表します。一般的な色空間（色域と呼ばれることもあります）は、sRGBとDisplayP3です。
カラープロファイルは、たとえば、色を数値表現にマップする数式やデータのテーブルを使用して、色空間の色を記述します。画像は、デバイスが画像の色を正しく解釈してディスプレイに再現できるように、そのカラープロファイルを埋め込みます。
画像にカラープロファイルを適用します。カラープロファイルは、アプリの色がさまざまなディスプレイで意図したとおりに表示されるようにするのに役立ちます。sRGB色空間は、ほとんどのディスプレイで正確な色を生成します。
ワイドカラーを使用して、互換性のあるディスプレイの視覚体験を向上させます。ワイドカラーディスプレイはP3色空間をサポートしており、sRGBよりも豊かで彩度の高い色を生成できます。その結果、ワイドカラーを使用する写真やビデオはよりリアルになり、ワイドカラーを使用するビジュアルデータやステータスインジケーターはより意味のあるものになります。必要に応じて、ディスプレイP3カラープロファイルを16ビット/ピクセル（チャネルあたり）で使用し、画像をPNG形式でエクスポートします。ワイドカラー画像をデザインしてP3カラーを選択するには、ワイドカラーディスプレイを使用する必要があることに注意してください。
必要に応じて、色空間固有の画像とカラーバリエーションを提供します。一般に、P3の色と画像はsRGBディスプレイで正常に表示されます。場合によっては、sRGBディスプレイで表示するときに、2つの非常に類似したP3色を区別するのが難しい場合があります。P3カラーを使用するグラデーションは、sRGBディスプレイでクリップされて表示されることもあります。これらの問題を回避し、ワイドカラーディスプレイとsRGBディスプレイの両方で視覚的な忠実度を確保するために、Xcodeプロジェクトのアセットカタログを使用して、各色空間に異なるバージョンの画像と色を提供できます。
詳細については、「ディスプレイP3でアセットのデザインを開始する方法」を参照してください。
プラットフォームに関する考慮事項
iOS、iPadOS
iOSは、動的な背景色の2つのセット（システムとグループ化）を定義します。各セットには、情報の階層を伝えるのに役立つ1次、2次、および3次のバリアントが含まれています。一般に、グループ化されたテーブルビューがある場合は、グループ化された背景色（systemGroupedBackground、secondarySystemGroupedBackground、およびthirdSystemGroupedBackground ）を使用します。それ以外の場合は、背景色のシステムセット（systemBackground、secondarySystemBackground、およびthirdSystemBackground）を使用します。
両方の背景色のセットでは、通常、バリアントを使用して次の方法で階層を示します。
全体像のプライマリ
ビュー全体でコンテンツまたは要素をグループ化するためのセカンダリ
二次要素内のコンテンツまたは要素をグループ化するための三次
フォアグラウンドコンテンツの場合、iOSは次の動的な色を定義します。
MacOS
macOSは、次の動的システムカラーを定義します（標準のカラーパネルの開発者パレットでも表示できます）。
アプリのアクセントカラー
macOS 11以降では、アクセントカラーを指定して、アプリのボタン、選択範囲の強調表示、サイドバーアイコンの外観をカスタマイズできます。[一般]>[アクセントカラー設定]の現在の値がマルチカラーの場合、システムはアクセントカラーを適用します。
アクセントカラーの設定をマルチカラー以外の値に設定すると、システムは選択したカラーをアプリ全体の関連アイテムに適用し、アクセントカラーを置き換えます。例外は、指定した固定色を使用するサイドバーアイコンです。固定色のサイドバーアイコンは特定の色を使用して意味を提供するため、アクセントカラー設定の値を変更してもシステムはその色を上書きしません。ガイダンスについては、サイドバーを参照してください。
他のグリフがオレンジを使用している場合でも、iCloudグリフは青緑色のままです。
tvOS
アプリのロゴと調和する限定されたカラーパレットを選択することを検討してください。色を微妙に使用することで、コンテンツを延期しながらブランドを伝えることができます。
焦点を示すために色だけを使用することは避けてください。微妙なスケーリングとレスポンシブアニメーションは、要素に焦点が合っているときのインタラクティブ性を示す主な方法です。
watchOS
アプリの背景色には純黒を使用してください。純粋な黒（つまり、＃000000 hex）は、Apple Watchベゼルとシームレスに調和し、エッジのない画面のような錯覚を生み出します。
人々はフルカラーの代わりに着色モードを使用するためにグラフィックの複雑さを好むかもしれないことを認識してください。システムは、グラフィックコンプリケーションの画像、ゲージ、およびテキストで着用者が選択した色に基づく単一の色を使用できます。ガイダンスについては、合併症を参照してください。
仕様
iOS、iPadOS
システムカラー（iOS）
※Accessibleは元ページでご覧ください
システムグレーカラー（iOS）
※Accessibleは元ページでご覧ください
MacOS
システムカラー（macOS/デフォルト）
※デフォルト以外のVibrant、Accessible、Accessible + Vibrantはそれぞれ元ページでご覧ください
watchOS
システムカラー（watchOS）
リソース
関連している
開発者向けドキュメント
ビデオ
この記事が気に入ったらサポートをしてみませんか？