KDE BLOG

Webデザインやコーディングについて書いています

【Human Interface Guidelines 翻訳 vol.14】iOS - Visual Design - Color

元ページ
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/

Color(色)

Color is a great way to impart vitality, provide visual continuity, communicate status information, give feedback in response to user actions, and help people visualize data. Look to the system’s color scheme for guidance when picking app tint colors that look great individually and in combination, on both light and dark backgrounds.

色は、活力を与え、視覚的な連続性を提供し、ステータス情報を伝達し、ユーザーのアクションに応じてフィードバックを提供し、人々がデータを視覚化するのに役立つ優れた方法です。
システムの配色を参考にして、明るい背景と暗い背景の両方で、個別にまたは組み合わせて見栄えの良いアプリの色合いを選択してください。

Use color judiciously for communication. The power of color to call attention to important information is heightened when used sparingly. For example, a red triangle that warns people of a critical problem becomes less effective when red is used elsewhere in an app for noncritical reasons.

コミュニケーションには慎重に色を使用してください。
重要な情報に注意を引く色の力は、控えめに使用すると高まります。
たとえば、重大な問題を警告する赤い三角形は、重大でない理由でアプリの他の場所で赤を使用すると効果が低下します。

Use complementary colors throughout your app. The colors in your app should work well together, not conflict or distract. If pastels are essential to your app’s style, for example, use a coordinating set of pastels.

アプリ全体で補色を使用します。
アプリの色は、競合したり気を散らしたりするのではなく、一緒にうまく機能させるべきです。 たとえば、アプリのスタイルにパステルが不可欠な場合は、コーディネートするパステルセットを使用します。

In general, choose a limited color palette that coordinates with your app logo. Subtle use of color is a great way to communicate your brand.

一般に、アプリのロゴと調和する限られたカラーパレットを選択します。
色を微妙に使用することは、ブランドを伝える優れた方法です。

Consider choosing a tint color to indicate interactivity throughout your app. In Notes, interactive elements are yellow. In Calendar, interactive elements are red. If you define a tint color that denotes interactivity, make sure other colors don’t compete with it.

アプリ全体のインタラクティブ性を示すために、色合いを選択することを検討してください。
メモアプリではインタラクティブな要素は黄色です。カレンダーアプリでは、インタラクティブな要素は赤です。
インタラクティブ性を表す色合いを定義する場合は、他の色と競合しないようにしてください。

Provide two versions of your tint color to make sure it looks good in both light and dark modes. When you use a system color for your tint color, you get automatic support for high contrast.

色合いを2つのバージョンを提供して、明るいモードと暗いモードの両方で見栄えがよくなるようにします。
色合いにシステムカラーを使用すると、ハイコントラストが自動的にサポートされます。

Avoid using the same color for interactive and noninteractive elements. If interactive and noninteractive elements have the same color, it’s hard for people to know where to tap.

インタラクティブ要素と非インタラクティブ要素に同じ色を使用しないでください。
インタラクティブ要素と非インタラクティブ要素が同じ色の場合、タップする場所を人々が知るのは困難です。

Consider how artwork and translucency affect nearby colors. Variations in artwork sometimes warrant changes to nearby colors in order to maintain visual continuity and prevent interface elements from becoming overpowering or underwhelming. Maps, for example, displays a light color scheme when using map mode but switches to a dark color scheme when satellite mode is activated. Colors can also appear different when placed behind a translucent element, or when applied to a translucent element, such as a toolbar.

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

f:id:jinseirestart:20200816135205j:plain

Test your app’s color scheme under a variety of lighting conditions. Lighting varies significantly both indoors and outdoors, based on room ambiance, time of day, the weather, and more. Colors you see on your computer won’t always look the same when your app is used in the real world. Always preview your app under multiple lighting conditions, including outdoors on a sunny day, to see how colors appear. If necessary, adjust colors to provide the best possible viewing experience in the majority of use cases.

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

Consider how the True Tone display affects color. The True Tone display uses ambient light sensors to automatically adjust the white point of the display to adapt to the lighting conditions of the current environment. Apps that focus primarily on reading, photos, video, and gaming can strengthen or weaken this effect by specifying a white point adaptivity style. For developer guidance, see UIWhitePointAdaptivityStyle.

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

Consider how your use of color might be perceived in other countries and cultures. In some cultures, for example, red communicates danger. In others, red has positive connotations. Make sure the colors in your app send the appropriate message.

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

Avoid using colors that make it hard for people to perceive content in your app. For example, colorblind people might not be able to distinguish some color combinations, and insufficient contrast can cause icons and text to blend with the background and make content hard to read. For guidance, see Color and Contrast.

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

System Colors(システムカラー)

iOS offers a range of system colors that automatically adapt to vibrancy and changes in accessibility settings like Increase Contrast and Reduce Transparency. The system colors look great individually and in combination, on both light and dark backgrounds, and in both light and dark modes.

iOSは、鮮やかさとコントラストの増加や透明度の減少などのアクセシビリティ設定の変更に自動的に適応するさまざまなシステムカラーを提供しています。 システムカラーは、明るい背景と暗い背景、そして明るいモードと暗いモードではシステムカラーは別々で、組み合わせによって見栄えが良くなります。

Don't hard-code system color values in your app. The color values provided below are intended for reference during your app design process. The actual color values may fluctuate from release to release, based on a variety of environmental variables. Always use the API to apply system colors; for developer guidance, see UIColor.

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

f:id:jinseirestart:20200816141643p:plain

iOS 13 also introduces a range of six opaque gray colors you can use in rare cases where translucency doesn't work well. For example, intersecting or overlapping elements — such as lines or bars in a grid — look better with opacity. In general, use the semantically defined system colors for UI elements.

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

f:id:jinseirestart:20200816220102p:plain

Dynamic System Colors(ダイナミック[動的]システムカラー)

In addition to tint colors, iOS also provides semantically defined system colors that automatically adapt to both light and dark modes. A semantic color conveys its purpose rather than its appearance or color values. For example, iOS defines colors for use in background areas and for foreground content, such as labels, separators, and fill.

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

iOS defines two sets of background colors — system and grouped — each of which contains primary, secondary, and tertiary variants that help you convey a hierarchy of information. In general, use the grouped set of background colors when you have a grouped table view; otherwise, use the system set of background colors. For developer guidance, see UI Element Colors.

iOSはsystemとgroupedの2組の背景色を定義します。
各セットには、情報の階層を伝えるのに役立つプライマリ、セカンダリ、ターシャリのバリアントが含まれています。
一般的に、groupedのテーブルビューがある場合はgroupedの背景色セットを使用します。それ以外の場合はsystemの背景色セットを使用します。
開発者向けガイダンスについては、UI要素の色をご覧ください。

With both sets of background colors, you generally use the variants to indicate hierarchy in the following ways:

  • Primary for the overall view
  • Secondary for grouping content or elements within the overall view
  • Tertiary for grouping content or elements within secondary elements

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

  • 全体ビューは「プライマリ(主要)」
  • Primary内のグループ化されたコンテンツまたは要素は「セカンダリ(二次)」
  • Secondary内のグループ化されたコンテンツまたは要素は「ターシャリ(三次)」

For foreground content, iOS defines the following colors:

最前面のコンテンツの場合、iOSは次の色を定義します。

Color Used for(用途) API
Label(ラベル) A text label that contains primary content.(主要コンテンツを含むテキストラベル。) label
Secondary label(二次リラベル) A text label that contains secondary content.(二次コンテンツを含むテキストラベル) secondaryLabel
Tertiary label(三次ラベル) A text label that contains tertiary content.(三次コンテンツを含むテキストラベル。) tertiaryLabel
Quaternary label(第四級ラベル) A text label that contains quaternary content.(第4のコンテンツを含むテキストラベル。) quaternaryLabel
Placeholder text(プレースホルダーテキスト) Placeholder text in controls or text views.(コントロールまたはテキストビューのプレースホルダーテキスト。) placeholderText
Separator(セパレーター) A separator that allows some underlying content to be visible.(基になるコンテンツを表示できるようにするセパレータ。) separator
Opaque separator(不透明セパレーター) A separator that doesn't allow any underlying content to be visible.(基になるコンテンツが表示されないようにするセパレータ。) opaqueSeparator
Link(リンク) Text that functions as a link.(リンクとして機能するテキスト。) link

Don’t redefine the semantic meanings of dynamic system colors. To give people a consistent experience and ensure that your interface looks great in all contexts, use dynamic system colors as intended.

ダイナミックシステムカラーのセマンティックな意味を再定義しないでください
一貫したエクスペリエンスを人々に提供し、インターフェイスがすべてのコンテキストで見栄えがよくなるようにするには、意図したとおりにダイナミックシステムカラーを使用します。

Don't try to replicate dynamic system colors. Dynamic system colors may fluctuate from release to release, based on a variety of environmental variables. Instead of trying to create custom colors that match the system colors, use the dynamic system colors.

ダイナミックシステムカラーを複製しようとしないでください。
ダイナミックシステムカラーは、さまざまな環境変数に基づいて、リリースごとに変動する可能性があります。
システムカラーと一致するカスタムカラーを作成する代わりに、ダイナミックシステムカラーを使用します。

Color Management(色の管理)

Apply color profiles to your images. The default color space on iOS is Standard RGB (sRGB). To ensure that colors are correctly matched to this color space, make sure your images include embedded color profiles.

画像にカラープロファイルを適用します。
iOSのデフォルトの色空間は、standard RGB(sRGB)です。
色がこの色空間に正しく調和するようにするには、画像に埋め込みカラープロファイルが含まれていることを確認してください。

Use wide color to enhance the visual experience on compatible displays. Wide color displays support a P3 color space, which can produce richer, more saturated colors than sRGB. As a result, photos and videos that use wide color are more lifelike, and visual data and status indicators that use wide color are more impactful. When appropriate, use the Display P3 color profile at 16 bits per pixel (per channel) and export images in PNG format. Note that a wide color display is needed to design wide color images and select P3 colors.

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

f:id:jinseirestart:20200817021123p:plain

Provide color space-specific image and color variations when the experience calls for it. In general, P3 colors and images tend to appear as expected on sRGB devices. Occasionally, however, it may be hard to differentiate between two very similar P3 colors when they're viewed in sRGB. Gradients that use colors in the P3 spectrum can also sometimes appear clipped on sRGB devices. To avoid these issues, you can provide distinct images and colors in the asset catalog of your Xcode project to ensure visual fidelity on both wide color and sRGB devices.

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

Preview your app’s colors on actual sRGB and wide color displays. Make adjustments as needed to ensure an equally great visual experience on both types of displays.

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

TIP
On a Mac with a wide color display, you can use the system color picker to select and preview P3 colors, and compare them with sRGB colors.

ヒント
ワイドカラーディスプレイのMacでは、システムカラーピッカーを使用してP3カラーを選択およびプレビューし、sRGBカラーと比較できます。