XCode 13.2 日本語化計画 : Human Interface Guidelines

色

色は、活力を与え、視覚的な連続性を提供し、ステータス情報を伝達し、ユーザのアクションに応じてフィードバックを提供し、人々がデータを視覚化するのに役立つ優れた方法です。個別に、また組み合わせて見栄えがよく、アクセシビリティと外観モードにうまく適応するアプリのアクセントカラーを選択する際のガイダンスとして、システムの配色を確認してください。

オブジェクト間で区別したり、重要な情報を伝えたりするためには、色だけに頼らないでください。 あなたのアプリで情報を伝えるために色を使用する場合は、色覚異常やその他の視覚障害を持つユーザが理解できるように、必ずテキストラベルまたは象形文字の形状を提供してください。

意思疎通には慎重に色を使用してください。 控えめに使用すると、重要な情報に注意を喚起する色の力が高まります。たとえば、重大な問題を警告する赤い三角形は、重大でない理由でアプリ内の他の場所で赤を使用すると効果が低下します。

あなたのアプリのロゴと調和する限定カラーパレットの選択を検討してください。 色の微妙な使用は、ブランドを伝えるための優れた方法です。

アプリ全体を通した双方向性を示す色の選択を検討してください。 Notes(メモ) では、対話の要素は黄色です。カレンダー では、対話の要素は赤です。対話性を示すアクセントカラーを定義する場合は、アプリ内の他の色がそれと競合しないようにしてください。

アクセントカラーの 2 つのバージョンを提供して、ライトモードとダークモードの両方で見栄えがいいようにします。 アクセントカラーに システムカラー を使用すると、両方の外観モードが自動的にサポートされます。

対話要素と非対話要素に同じ色を使用することは避けてください。 対話要素と非対話要素の色が同じである場合、どこをタップするべきか人々が知るのは困難です。

アートワークと半透明性が近くの色にどのように影響するかを検討してください。 アートワーク内のバリエーションは、視覚的な連続性を維持し、インターフェイス要素が圧倒したり圧倒されたりするのを防ぐために、近くの色を変更する保証をする場合があります。たとえば、マップ は、マップモードでは明るい配色を表示しますが、衛星モードでは暗い配色に切り替わります。ツールバーのような半透明の要素の後ろに配置したり、適用したりすると、色が異なって表示されることもあります。

さまざまな照明条件下でアプリの配色をテストして下さい。 照明は、部屋の雰囲気、時間帯、天気などに基づいて、屋内と屋外の両方で大きく異なります。あなたのアプリを実際に使用した場合、パソコンに表示される 色 が常に同じになるとは限りません。晴れた日の屋外など、複数の照明条件下でアプリを常にプレビューして、色がどのように表示されるかを確認してください。必要に応じて、ほとんどの使用条件で可能な限り最高の表示体験を提供するように色を調整して下さい。

True Tone ディスプレイが色にどのように影響するかを検討してください。 True Tone ディスプレイは、周囲光センサーを使用して、現在の環境の照明条件に適応するようにディスプレイの白色点を自動的に調整します。主に読書、写真、ビデオ、およびゲームに焦点を当てたアプリは、白色点適応スタイルを指定することにより、この効果を強めたり弱めたりできます。開発者向けガイダンスについては、UIWhitePointAdaptivityStyle (UIWhitePointAdaptivityStyle) を参照してください。

他の国や文化で色の使用がどのように受け取られるかを検討してください。 たとえば、一部の文化では、赤は危険を伝えます。他の文化では、赤は肯定的な意味合いを持っています。あなたのアプリの色が適切なメッセージを与えることを確認してください。

人々があなたのアプリのコンテンツを認識しにくくする可能性のある色の使用は避けてください。 たとえば、色覚障害のユーザは一部の色の組み合わせを区別できない場合があり、コントラストが不十分な場合、アイコンやテキストが背景と混ざり合い、視覚障害のあるユーザにとってコンテンツが読みにくくなる可能性があります。ガイダンスについては、色とコントラスト を参照してください。

システムカラー

iOS は、コントラスト の増加や 透明度の低下 など、鮮やかさやアクセシビリティ設定の変更に自動的に適応するさまざまなシステムカラーを提供します。システムカラーは、明るい背景と暗い背景の両方、および明るい外観と暗い外観の両方で、個別にまたは組み合わせて非常に見栄えがします。

あなたのアプリでシステムカラーの値をハードコーディングしないでください。 以下に示す色の値は、あなたのアプリのデザインプロセスで参照するためのものです。実際の色の値は、さまざまな環境変数に基づいて、リリースごとに変動する可能性があります。システムカラーを適用するには、常に API を使用してください。開発者向けガイダンスについては、UIColor (UIColor) (UIKit) および Color (SwiftUI) を参照してください。

ライト	ダーク	名前	SwiftUI API
		Red	systemRed
		Orange	systemOrange
		Yellow	systemYellow
		Green	systemGreen
		Mint	systemMint
		Teal	systemTeal
		Cyan	systemCyan
		Blue	systemBlue
		Indigo	systemIndigo
		Purple	systemPurple
		Pink	systemPink
		Brown	systemBrown

ライト	ダーク	名前	SwiftUI API
		Red	systemRed
		Orange	systemOrange
		Yellow	systemYellow
		Green	systemGreen
		Mint	systemMint
		Teal	systemTeal
		Cyan	systemCyan
		Blue	systemBlue
		Indigo	systemIndigo
		Purple	systemPurple
		Pink	systemPink
		Brown	systemBrown

iOS 13 には、半透明がうまく機能しない、まれなケースで使用できる 6 つの不透明な灰色の範囲も導入されています。たとえば、グリッド内の線やバーなど、交差または重なり合う要素は、不透明で見栄えが良くなります。一般に、UI 要素には意味的に定義された システムカラー を使用します。

ライト	ダーク	名前	UIKit API
		Gray	systemGray
		Gray(2)	systemGray2
		Gray(3)	systemgray3
		Gray(4)	systemGray4
		Gray(5)	systemGray5
		Gray(6)	systemGray6

ライト	ダーク	名前	SwiftUI API
		Gray	systemGray
		Gray(2)	systemGray2
		Gray(3)	systemGray3
		Gray(4)	systemGray4
		Gray(5)	systemGray5
		Gray(6)	systemGray6

動的システムカラー

tint (色合い) の色に加えて、iOS は、ライトモードとダークモードの両方に自動的に適応する意味的に定義されたシステムの色も提供します。セマンティックカラー は、外観や色の値ではなく、その目的を伝えます。たとえば、iOS は、背景領域と、ラベル、セパレータ、塗りつぶしなどの前景コンテンツで使用する色を定義します。

iOS は、システム と グループ化された 2 セットの背景色を定義しています。各セットには、情報の階層を伝えるのに役立つ 1 次、2 次、および 3 次のバリアントが含まれています。一般に、グループ化されたテーブルビューがある場合は、グループ化された背景色のセットを使用します。それ以外の場合は、背景色のシステムセットを使用します。開発者向けガイダンスについては、UI 要素の色 (UI Element Colors) を参照してください。

両方の背景色のセットでは、通常、バリアントを使用して以下の方法で階層を示します。

前景コンテンツの場合、iOS は以下の色を定義しています。

動的システムカラーの意味を再定義しないでください。 人々に一貫した体験を提供し、インターフェイスがすべてのコンテキストで見栄えがするようにするには、意図したとおりに動的なシステムカラーを使用しましょう。

動的なシステムカラーを複製しようとしないでください。 動的なシステムカラーは、さまざまな環境変数に基づいて、リリースごとに変動します。システムカラーに一致するカスタムカラーを作成する代わりに、動的システムカラーを使用して下さい。

色の管理

イメージにカラープロファイルを適用します。 iOS のデフォルトの色空間は標準 RGB (sRGB) です。色がこの色空間に正しく一致するようにするには、イメージにカラープロファイルが埋め込まれていることを確認してください。

ワイドカラーを使用して、互換性のあるディスプレイの視覚体験を向上させます。 ワイドカラーディスプレイは P3 色空間をサポートしており、これは sRGB よりも豊かで彩度の高い色を生成できます。その結果、ワイドカラーを使用する写真やビデオはよりリアルになり、ワイドカラーを使用するビジュアルデータとステータスインジケータはよりインパクトがあります。必要に応じて、ディスプレイ P3 カラープロファイルを 16 ビット/ピクセル (チャネルあたり) で使用し、イメージを PNG 形式でエクスポートします。ワイドカラーイメージをデザインして P3 カラーを選択するには、ワイドカラーディスプレイが必要であることに注意してください。

体験で必要な場合は、色空間固有のイメージとカラーバリエーションを提供して下さい。 一般に、P3 の色とイメージは、sRGB デバイスで期待どおりに表示される傾向があります。ただし、sRGB で表示した場合、非常によく似た 2 つの P3 の色を区別するのが難しい場合があります。P3 スペクトルの色を使用するグラデーションは、sRGB デバイスでクリップされて表示されることもあります。これらの問題を回避するために、Xcode プロジェクトのアセットカタログ内に個別のイメージと色を指定して、ワイドカラーデバイスと sRGB デバイスの両方で視覚的な忠実度を確保できます。

実際の sRGB およびワイドカラーのディスプレイでアプリの色をプレビューします。 必要に応じて調整を行い、両方の型のディスプレイで同等の優れた視覚体験を確保します。

前：ブランド化 次：ダークモード