【Human Interface Guidelines 翻訳 vol.17】iOS - Visual Design - Materials

Materials
- System-Defined Materials and Vibrancy（システム定義のマテリアルと鮮やかさ）

Materials

iOS provides materials (or blur effects) that create a translucent effect you can use to evoke a sense of depth. The effect of a material lets views and controls hint at background content without distracting from foreground content. To produce this effect, materials allow background color information to pass through foreground views, while also blurring the background context to maintain legibility.

iOSは、奥行き感を呼び起こすために使用できる半透明の効果を作成するマテリアル（またはぼかし効果）を提供します。
マテリアルの効果により、前景のコンテンツを邪魔することなく、背景のコンテンツを表示および制御できます。
この効果を生み出すために、マテリアルは背景の色情報が前景のビューを通過することを許可する一方で、読みやすさを維持するために背景コンテキストをぼかします。

When you use the system-defined materials, your elements look great in every context, because these effects automatically adapt to the system’s light and dark modes.

システム定義のマテリアルを使用すると、これらの効果がシステムのライトモードとダークモードに自動的に適応するため、要素はあらゆるコンテキストで見栄えがよくなります。

TIP Materials require the presence of a visual effect view in your view hierarchy. For developer guidance, see UIVisualEffectView.

ヒント
マテリアルには、ビュー階層に視覚効果ビューが存在する必要があります。
開発者向けガイダンスについては、UIVisualEffectViewを参照してください。

Be guided by the materials the system uses. Whenever possible, compare your custom views to system-provided views that enable similar functionality and use the same materials.

システムが使用するマテリアルによってガイドされてください。
可能な限りカスタムビューと同様の機能を有効にし、同じマテリアルを使用するシステム提供のビューを比較してください。

Take advantage of the system-provided colors for text, fills, glyphs, and separators. The system-provided colors automatically make these items look great on translucent backgrounds. For guidance, see Dynamic System Colors.

テキスト、塗りつぶし、グリフ、およびセパレーターにシステム提供のカラーを利用します。
システムが提供するカラーにより、これらのアイテムは半透明の背景で見栄えがよくなります。
ガイダンスについては、ダイナミックシステムカラーを参照してください。

When possible, use SF Symbols. When you use dynamic system colors to color a symbol, or apply a vibrancy effect to it, the symbol looks great in any context. In contrast, full-color images may not have sufficient contrast with the background and may seem out of place when used in a view with a translucent background. For related guidance, see SF Symbols.

可能な限り、SFシンボルを使用してください。
ダイナミックシステムカラーを使用してシンボルに色を付けたり、鮮やかな効果を適用したりすると、そのシンボルはどのような状況でも見栄えがよくなります。
対照的に、フルカラー画像は、背景とのコントラストが十分ではなく、半透明の背景のビューで使用すると、場違いに見える場合があります。
関連するガイダンスについては、SFシンボルを参照してください。

System-Defined Materials and Vibrancy（システム定義のマテリアルと鮮やかさ）

iOS defines materials you can use in specific areas to control the visual separation between the foreground content and the background appearance. The system-provided materials include both light and dark variants that work well against most backgrounds.

iOSでは、特定の領域で使用できるマテリアルを定義して、前景のコンテンツと背景の外観の視覚的な分離を制御します。
システムが提供するマテリアルには、ほとんどの背景に対して適切に機能するライトバリアントとダークバリアントの両方が含まれています。

For use in content containers, iOS 13 defines four materials that have different levels of translucency (each material also includes a dark variant):

コンテンツコンテナーで使用するために、iOS 13は異なるレベルの半透明度を持つ4つのマテリアルを定義します（各マテリアルにはダークバリアントも含まれます）：

Consider contrast and visual separation when choosing a material. There’s no absolute rule for choosing a material to combine with vibrancy effects. As you’re making this choice, consider that:

Thicker materials can provide better contrast for text and other elements with fine features

ranslucency can help people retain their context by providing a visible reminder of the content that’s in the background

マテリアルを選択するときは、コントラストと視覚的な分離を考慮してください。
振動効果と組み合わせるマテリアルを選択するための絶対的なルールはありません。
この選択を行う際には、次の点を考慮してください。

マテリアルが厚いほど、テキストやその他の細かい要素のコントラストが向上します
半透明性は、背景にあるコンテンツの視覚的な合図を提供することで、人々がコンテキストを維持するのに役立ちます

iOS 13 also defines vibrancy values for labels, fills, and separators that are specifically designed to work with each material. Vibrancy brightens or darkens UI elements by sampling background colors and modifying saturation and value. Vibrant UI elements integrate better with materials and enhance the translucent effect.

iOS 13では、各マテリアルで機能するように特別に設計されたラベル、塗りつぶし、セパレーターの鮮やかさの値も定義されています。
鮮やかさは、背景色をサンプリングし、彩度と値を変更することにより、UI要素を明るくまたは暗くします。鮮やかなUI要素は、マテリアルとよりよく統合され、半透明の効果を高めます。

Labels and fills each provide several levels of vibrancy; separators have one level. The names of the levels indicate the relative amount of contrast between an element and the background: the default level has the highest contrast, whereas quaternary (when it exists) has the lowest contrast.

ラベルと塗りつぶしはそれぞれ、いくつかのレベルの活気を提供します。セパレータには1つのレベルがあります。
レベルの名前は、要素と背景の間のコントラストの相対的な量を示します。
デフォルトのレベルが最もコントラストが高く、quaternary = 第4レベル（存在する場合）は最もコントラストが低くなります。

Except for quaternary, you can use the following vibrancy values for labels on any material. It's not recommended to use quaternary on thin and ultra thin materials, because the contrast is too low.

quaternary を除き、任意のマテリアルのラベルに次の鮮やかさの値を使用できます。
コントラストが低すぎるため、薄いマテリアルやとても薄い材料で quaternary を使用することはお勧めしません。