Surfaces
Surfaces
サーフィス
Material Design has three-dimensional qualities that are
reflected in its use of surfaces, depth, and shadows.
マテリアルデザインは3次元的な表現を備えていて、それらは表面、深さ、影の使用に反映されています。
Material environment
マテリアルエンバイロメント
The physical world
物理的な世界
In the physical world, objects can be stacked or attached to one another, but cannot pass through each other. They cast shadows and reflect light....
In the physical world, objects can be stacked or attached to one another, but cannot pass through each other. They cast shadows and reflect light.
物理的な世界では、オブジェクトは積み重ねられたり、互いに結合されたりすることはありますが、互いに通過することはできません。 彼らは影を落とし、光を反射します。
Material Design reflects these qualities in how surfaces are displayed and move across the Material UI. Surfaces, and how they move in three dimensions, are communicated in ways that resemble how they move in the physical world. This spatial model can also be applied consistently across apps.
マテリアルデザインは、サーフェスがどのように表示され、マテリアルUI内を移動するかというこれらの品質に反映されます。 サーフェスと3次元での移動方法は、物理的な世界でどのように動くかに似ています。 この空間モデルは、アプリ全体で一貫して適用することもできます。
Depth
深さ
Material Design UIs are displayed in an environment that expresses three-dimensional (3D) space using light, surfaces, and cast shadows. All elements in the Material environment...
Material Design UIs are displayed in an environment that expresses three-dimensional (3D) space using light, surfaces, and cast shadows. All elements in the Material environment move horizontally, vertically, and at varying depths along the z-axis. Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.
マテリアルデザインUIは、光、サーフェス、影を使用して3次元（3D）スペースを表現する環境に表示されます。 マテリアル環境のすべての要素は、水平方向、垂直方向、およびz軸に沿ったさまざまな深度に移動します。 深さは、観察者に向かって延びる正のz軸に沿った様々な点に要素を配置することによって表現されます。
On the web, the UI expresses 3D space by manipulating the y-axis.
ウェブ上では、UIはy軸を操作して3D空間を表現します。
3D space with x, y, and z axes
Properties
プロパティ
Material surfaces have consistent, unchangeable characteristics and behaviors across Material Design.
マテリアルサーフェスは、マテリアルデザイン全体で一貫性のある変更不可能な特性と動作を持ちます。
Dimensions
次元
Material has varying x & y dimensions (measured in dp) and a uniform thickness (1dp).
Material has varying x & y dimensions (measured in dp) and a uniform thickness (1dp).
マテリアルはx、yの寸法（dpで測定）と均一な厚み（1dp）で変化します。
Do.
The height and width of material can vary.
Don’t.
Material is always 1dp thick.
Shadows
影
Material surfaces at different elevations cast shadows.
Material surfaces at different elevations cast shadows.
異なる標高の材料表面は影を投げかけます。
Do.
Shadows show the elevation of different Material surfaces.
陰影は、異なるMaterialサーフェスの高さを示します。
- Top view
トップビュー - Isometric 3D view showing the shadow cast by light when the material moves upwards
マテリアルが上に移動したときの光の影を示すアイソメトリック3Dビュー
Resolution
解像度
Material has infinite resolution.
Material has infinite resolution.
マテリアルには無限の分解能があります。
Material has infinite resolution.
材料には無限の分解能があります。
Content
コンテンツ
Content is displayed in any shape and color on Material. Content does not add thickness to Material. Content is expressed without being a separate layer.
Content is displayed in any shape and color on Material. Content does not add thickness to Material. Content is expressed without being a separate layer.
コンテンツは、任意の形や色で素材に表示されます。 内容は材料に厚さを加えません。 コンテンツは別の同一レイヤー内で表現されます。
Do.
Material can display any shape and color. Content can behave independent of Material, but is limited within the bounds of Material.
マテリアルは任意の形や色を表示できます。 コンテンツはマテリアルから独立して動作できますが、マテリアルの境界内では制限されます。
Do.
Content behavior can depend on Material behavior.
コンテンツの動作はマテリアルの動作に依存しうる
Physical properties
物理プロパティ
Material is solid. User input and interaction cannot pass through material. Multiple Material elements cannot occupy the same point in space simultaneously. Material cannot pass...
Material is solid. User input and interaction cannot pass through material.
マテリアルは固体です。 ユーザーの入力とインタラクションはマテリアルを通過できません。
Do.
Input events only affect the surface of Material.
入力イベントはマテリアルの表面にのみ影響します。
Don’t.
Input events cannot pass through Material.
入力イベントはマテリアルを通過できません。
Multiple Material elements cannot occupy the same point in space simultaneously.
Do.
Prevent multiple Material elements from simultaneously occupying the same point in space, such as by separating elements with elevation.
エレベーションで要素を区切るなど、複数のマテリアル要素が同時に空間内の同じ点を占めることを防ぎます。
Don’t.
Multiple Material elements cannot occupy the same point in space simultaneously.
複数のマテリアル要素は、同時に空間内の同じ点を占めることはできません。
Material does not behave like a gas.
材料はガスのように振る舞いません。
Don’t.
Material does not behave like a gas.
マテリアルはガスのように振る舞いません。
Do.
Material enters and exits through changes in opacity, size, or position.
不透明度、サイズ、または位置の変更により、マテリアルが登場または退場します。
Material is not fluid like a liquid or gel, though it may display content with these properties.
液体やゲルのように液体ではありませんが、これらの特性を持つコンテンツを表示することがあります。
Don’t.
Material does not behave like a liquid or gel.
マテリアルは液体またはゲルのようには動作しません。
Don’t.
Material does not behave like a liquid.
材料は液体のように振る舞いません。
Transforming Material
マテリアルの変形
Material can change shape. Material can change opacity. Material grows and shrinks only along its plane. Material bends or folds within the depth of the...
Material can change shape.
マテリアルは形状を変えることができます。
Material can change shape.
マテリアルは形状を変えることができます。
Material grows and shrinks only along its plane.
マテリアルはその平面に沿ってのみ成長し、収縮する。
Do.
Material grows and shrinks only along its plane.
マテリアルはその平面に沿ってのみ成長し、収縮する。
Material bends or folds within the depth of the UI.
UIの奥行きの中で素材が曲がったり折れたりする。
Don’t.
Material never bends or folds in ways that exceed the depth of the UI.
UIの奥行きを超えて曲がったり折れたりすることはありません。
Movement
動き
Material can be spontaneously generated or dismissed anywhere in the environment. Material can move along any axis. Material surfaces can coordinate their motion. Material motion...
Material can be spontaneously generated or dismissed anywhere in the environment.
環境中のどこでもマテリアルを自発的に生成または消去することができます。
Material can be spontaneously generated or dismissed.
マテリアルは自発的に生成または消去することができます。
Material can move along any axis.
マテリアルは任意の軸に沿って移動できます。
Material can move along various axes.
マテリアルは任意の軸に沿って移動できます。
Material motion along the z-axis is typically a result of user interaction.
z軸に沿ったマテリアルの動きは、通常、ユーザーのやりとりの結果です。
Material surfaces exhibiting z-axis motion prompted by user interaction.
z軸の動きを示すマテリアルサーフィスは、ユーザとの相互作用によって発生します。
Attributes
属性
Basic Material surface
基本的なマテリアルサーフィス
The basic Material surface is opaque white, with 1dp thickness, and casts a shadow. All UI elements in Material Design result from modifications to this...
The basic Material surface is opaque white, with 1dp thickness, and casts a shadow. All UI elements in Material Design result from modifications to this surface.
基本的なマテリアルサーフェスは、1dpの厚さの不透明な白で、影を投じます。 マテリアルデザインのすべてのUIエレメントは、このサーフェスの変更によって生成されます。
Behavior
ビヘイビア
Material surfaces can behave in certain ways: Surfaces can be divided into areas which display different types of behavior.
Material surfaces can behave in certain ways:
マテリアルサーフェスは、特定の方法で動作できます。
- Rigid surfaces remain the same size through all interactions.
剛体のサーフェスは、すべてのインタラクションを通じて同じサイズのままです。 - Stretchable surfaces can grow or shrink along one or more edges up to a size limit, then behave as rigid surfaces.
伸縮可能なサーフェスは、1つまたは複数のエッジに沿ってサイズ制限限界まで拡大または縮小し、限界に達したら剛体サーフェスとして動作します。 - Pannable surfaces remain the same size throughout interactions. They can display additional content upon scrolling within the area, until reaching a content limit. When this limit is reached, they behave as rigid surfaces in that scroll direction.
パナブルなサーフェスは、相互作用を通じて同じサイズのままです。 コンテンツの制限に達するまで、領域内をスクロールすると追加のコンテンツを表示できます。 この限界に達すると、それらはそのスクロール方向の剛体面として振る舞います。
Material surface dimensions can be fixed with all content initially visible. The surface retains that size through all interactions.
マテリアルのサーフェスディメンションは、最初に表示され多状態でコンテンツを固定することができ サーフェスは、すべてのインタラクションを通じてそのサイズを保持します。
Composite surfaces
複合サーフェス
Surfaces can be divided into areas which display different types of behavior.
サーフェスは、さまざまな種類の動作を表示する領域に分けることができます。
A single surface can contain multiple pannable surfaces, such as an embedded map (1) that pans independently of a scrollable list (2).
一つのサーフェスに対して、スクロール可能なリスト（2）とは独立してパンする埋め込みマップ（1）など、複数のパン可能なサーフェスを含めることができます。
A card can stretch to display a region that scrolls independently of other card content.
カードは、他のカードの内容とは独立してスクロールする領域を表示するために伸縮することができます。
Stretchable surfaces
伸縮性のある表面
A stretchable surface can be stretched before reaching a limit, at which point the entire surface becomes rigid. Surfaces can stretch vertically, horizontally, or in...
A stretchable surface can be stretched before reaching a limit, at which point the entire surface becomes rigid. Surfaces can stretch vertically, horizontally, or in both directions.
伸縮性のあるサーフィスは、サーフィス全体が固定される限界まで。 サーフェスは、縦方向引き伸ばすことができる、横方向、または両方向にストレッチできます。
Typically, user interaction with a surface will stretch it in one direction. For example, tapping “more details” can cause a card to grow vertically and display additional content.
一般に、サーフェスとのユーザーとのインタラクションにおいて、サーフェスは一方向に伸縮します。 たとえば、「詳細」をタップすると、カードが縦に伸びて追加のコンテンツが表示されることがあります。
Material stretch direction can be exclusively vertical.
マテリアルの伸張方向は排他的に垂直にすることができます。
Material stretch direction can be exclusively horizontal.
材料ストレッチ方向は排他的に水平にすることができます。
Material stretch direction can be along both horizontal and vertical axes, either independently or simultaneously.
マテリアルのストレッチ方向は、水平軸および垂直軸の両方に沿って、独立してまたは同時に行うことができる。
Surface positioning and movement (x/y)
サーフィスの位置決めと移動（x / y）
Surfaces can remain in a fixed position on the x- and y-axes, or can be moveable in any direction. Surface movement can be confined to...
Surfaces can remain in a fixed position on the x- and y-axes, or can be moveable in any direction.
サーフェスは、x軸とy軸の固定された位置にとどまるか、任意の方向に移動可能です。
Surface movement can be confined to a single axis, allow movement along a single axis at a time, or allow movement along both axes simultaneously.
面の移動は、単一軸に限定することも、一度に1つの軸に沿って移動させることも、同時に両方の軸に沿って移動させることもできます。
Surfaces can remain in a fixed position. The top app bar (1) remains in a fixed position while the card collection (2) scrolls only vertically behind it.
サーフェスは固定された位置にとどまることができます。 上部のアプリケーションバー（1）は固定された位置のままで、カードコレクション（2）はその背後で垂直方向にのみスクロールします。
Surfaces (1,2) can move in any direction, although movement can be confined to a single axis at a time.
サーフェス（1,2）は任意の方向に移動できますが、移動は一度に1つの軸に限定できます。
Surfaces can move in any direction.
サーフェスは任意の方向に移動できます。
Surfaces can move independently of each other, or their movement can affect or be dependent upon the movement of other surfaces.
サーフェスは互いに独立して動くことができます。または、サーフェスは他のサーフェスの動きに影響を与えることができます。
A dependency can be based on a variety of mechanics, such as nearby surfaces moving when another surface expands, or the proportion of movement between surfaces moving in parallax.
依存関係は、別のサーフェスが拡大すると移動する近くのサーフェスや、視差を移動するサーフェス間の移動の割合など、さまざまなメカニクスに基づいています。
Surfaces can move independently of each other.
サーフェスは互いに独立して動くことができます。
One surface’s movement can depend upon another’s movement.
一方の面の動きは別の面の動きに依存することがあります。
Surface opacity
サーフィスの不透明度
Material surfaces can be transparent, semi-transparent, or opaque.
Material surfaces can be transparent, semi-transparent, or opaque.
マテリアルサーフェスは、透明、半透明、または不透明にすることができます。
Text on transparent and semi-transparent surfaces may require background treatment to preserve legibility.
透明または半透明のテキストのテキストには、判読性を維持するために背景処理が必要な場合があります。
Transparent surfaces lack clear edges, making it difficult to determine where surfaces begin and end, and which surface content belongs to.
透明なサーフェスにはエッジがないため、サーフェスの始点と終点、およびサーフェイスコンテンツの属する場所を特定することが困難です。
Caution.
- Content on transparent or semi-transparent surfaces may need a background treatment to preserve legibility.
透明または半透明のサーフェス上のコンテンツは、判読性を維持するためにバックグラウンド処理が必要な場合があります。 - Isometric view
等角投影図
Don’t.
- Don’t use transparent surfaces, as they have no opacity, making it difficult to identify the surface on which content appears. This top app bar is transparent, making it unclear if the text appears on the app bar or the surface behind it.
透明なサーフェスを使用しないでください。透明なサーフェスは不透明でないため、コンテンツが表示されるサーフェスを特定することが困難です。 このトップアプリバーは透明です。アプリバーやその背後のサーフェスにテキストが表示されているかどうかは不明です。 - Isometric view
等角投影図
Scrim
スクリム
Scrims are temporary treatments that can be applied to Material surfaces for the purpose of making content on a surface less prominent. They help direct...
Scrims are temporary treatments that can be applied to Material surfaces for the purpose of making content on a surface less prominent. They help direct user attention to other parts of the screen, away from the surface receiving a scrim.
スクリムは、サーフェス上のコンテンツをあまり目立たないようにするために、マテリアルサーフェスに適用できる一時的な処理です。 彼らはスクリムを受け取るサーフィスから離れて、画面の他の部分にユーザーの注意を向けるのを助けます。
Scrims can be applied in a variety of ways, including:
スクリムは、以下を含む様々な方法で適用することができます。
- Darkening or lightening the surface and its content
表面とその内容を暗くしたり明るくしたりする - Reducing the opacity of the surface and its content
サーフィスとその内容の不透明度を下げる
Multiple surfaces on a screen at a time can display scrims. Scrims can appear at any elevation, whether in the foreground or background.
一度に画面上の複数のサーフェスにスクリムを表示できます。 スクリムは、フォアグラウンドでもバックグラウンドでも、どの高度でも表示できます。
