Spacing methods

Spacing methods

間隔の設定メソッド

Spacing methods use baseline grids, keylines, padding, and incremental spacing to affect ratios, containers, and touch targets.

スペーシングメソッドには、ベースラインのグリッド、キーライン、パディング、増分スペーシングを使用して比率、コンテナ、およびタッチターゲットを含みます。

CONTENTS

• Baseline
• Spacing
• Containers and aspect ratios
• Touch and click targets

Baseline 

8dp grid

All components align to an 8dp square baseline grid for mobile, tablet, and desktop.

READ MORE

All components align to an 8dp square baseline grid for mobile, tablet, and desktop.

すべてのコンポーネントは、モバイル、タブレット、およびデスクトップ用の8dp正方形のベースライングリッドに揃えられています。

The app bar and floating action button align to the 8dp grid.

アプリバーとフローティングアクションボタンは8dpのグリッドに揃えられます。

4dp grid

Iconography, typography, and some elements within components can align to a 4dp grid.

READ MORE

Iconography, typography, and some elements within components can align to a 4dp grid.

図形、タイポグラフィ、およびコンポーネント内のいくつかの要素は、4dpグリッドに揃えることができます。

Elements of the bottom navigation bar align to the 4dp grid.

下のナビゲーションバーの要素は4dpのグリッドに揃えられます。

4dp baseline grid

4dpベースライングリッド

Typography can be placed outside of the 4dp grid when it’s centered within a component, such as a button or list item.

READ MORE

Type aligns to the 4dp baseline grid.

タイプは4dpベースライングリッドに揃えられます。

Typography can be placed outside of the 4dp grid when it’s centered within a component, such as a button or list item.

タイポグラフィは、ボタンやリストアイテムなどのコンポーネント内で中央に配置されている場合、4dpグリッドの外側に配置できます。

The text appears vertically aligned in the center of the list item, even though the type isn’t resting on the 4dp grid.

タイプが4dpグリッドに載っていなくても、テキストはリストアイテムの中央に垂直に整列して表示されます。 

Spacing 

スペーシング

Keylines

キーライン

Keylines enable the consistent placement of elements outside of the layout grid. They are vertical lines that show where elements are placed in a design...

READ MORE

Keylines enable the consistent placement of elements outside of the layout grid. They are vertical lines that show where elements are placed in a design that doesn’t align to the grid. Keylines are determined by each element’s distance from the edge of the screen, measured in increments of 8dp.

Keylinesを使用すると、レイアウトグリッド外で要素を一貫して配置することができます。 これらは、グリッドに配置されていないデザインに要素が配置されている場所を示す縦線です。 キーラインは、スクリーンの端からの各要素の距離によって決定され、8dpの単位で測定されます。

Keylines should be used in combination with the responsive layout grid to place elements consistently across a design.

1. Layout Grid
2. Keyline

 

Responsive Layout Grid

The Material Design responsive layout grid adapts to screen size and orientation. This UI guidance includes a flexible grid that ensures consistency across layouts.

Related Articlearrow_downward

Keylines can create more or less space between elements in a layout. They are adjustable per breakpoint range.

Keylinesは、レイアウト内の要素間に多少のスペースを作成することができます。 ブレークポイントの範囲ごとに調整可能です。

Padding

パディング

Padding refers to the space between UI elements. It’s an alternative spacing method to keylines, measured in increments of 8dp or 4dp. Padding should be...

READ MORE

Padding refers to the space between UI elements. It’s an alternative spacing method to keylines, measured in increments of 8dp or 4dp.

パディングは、UI要素間のスペースを指します。 これは、8dpまたは4dpの単位で測定された、キーラインに対する代替のスペーシング方法です。

Padding should be used in combination with the responsive layout grid to place elements consistently across a design.

パディングは、応答レイアウトグリッドと組み合わせて使用し、エレメントをデザイン全体に一貫して配置する必要があります。

1. Layout Grid
2. Padding

Padding can be measured both vertically and horizontally. Unlike keylines, padding does not need to span the whole height of a layout.

パッディングは垂直方向と水平方向の両方で測定できます。 キーラインとは異なり、パディングはレイアウトの高さ全体に及ぶ必要はありません。

Vertical spacing

垂直方向のスペーシング

Vertical spacing refers to the height of a standard element, such as an app bar or list item. The heights of these elements should align...

READ MORE

Vertical spacing refers to the height of a standard element, such as an app bar or list item. The heights of these elements should align to the 8dp grid.

垂直方向の間隔は、アプリバーやリストアイテムなどの標準的な要素の高さを表します。 これらの要素の高さは8dpグリッドに揃う必要があります。

1. Status bar: 24dp
2. App bar: 56dp
3. List item: 88dp

Increment

インクリメント

An increment is a measurement used to measure the size and placement of elements in your app. It has equal height and width. It can...

READ MORE

An increment is a measurement used to measure the size and placement of elements in your app.

インクリメントは、アプリ内の要素のサイズと配置を測定するために使用される物差し（基準サイズ）です。

It has equal height and width. It can be any number, but it’s recommended to use the height of a standard element (such as the app bar) as your increment.

高さと幅で共通で使用します。 任意の数値にすることができますが、標準の要素（アプリバーなど）の高さをインクリメントとして使用することをお勧めします。

This increment is defined using the height of the app bar. If an app bar is 64dp tall, the increment would be 64 x 64dp.

このインクリメントは、アプリバーの高さを使用して定義されます。 アプリバーの高さが64 dpiの場合、インクリメントは64 x 64 dpiになります。

To make a component, like a card, eight increments wide, multiply the number of increments by the size of the increment. If each increment is 56dp, the total width of the card would be:

カードのように、幅が8単位のコンポーネントを作成するには、インクリメントの数にインクリメントのサイズを掛けます。 各インクリメントが56dpの場合、カードの合計幅は次のようになります。

8 increments x 56dp = 512dp

The card would be 512dp wide.

Containers and aspect ratios 

コンテナとアスペクト比

Containers

コンテナ

A container is a shape used to represent an enclosed area. Containers can hold various UI elements such as an image, icon, or surface. Containers...

READ MORE

A container is a shape used to represent an enclosed area. Containers can hold various UI elements such as an image, icon, or surface.

コンテナーは、囲まれた領域を表すために使用される形状です。 コンテナは、画像、アイコン、またはサーフェスなどのさまざまなUI要素を保持できます。

200%

1. Image container
2. Icon container
3. Surface container

Containers can be rigid and restrict the size or cropping of elements within them. Alternatively, they can be flexible and grow to support the size of the content they hold.

コンテナはサイズ不変で、コンテナ内の要素のサイズや切り取りを制限する場合があります。 あるいは、それらは柔軟性があり、それらが保持するコンテンツのサイズをサポートするように伸縮することもできます。

1. Rigid image container that crops original the image size.
   オリジナルの画像サイズをトリミングする硬い画像コンテナ。
2. Flexible image container that scales to hold the original image size.
   元の画像サイズを保持するために拡大縮小する柔軟な画像コンテナ。

Aspect ratios

アスペクト比

An aspect ratio is the proportion of an element’s width to its height. To maintain consistency in your layout, use a consistent aspect ratio on...

READ MORE

An aspect ratio is the proportion of an element’s width to its height.

縦横比は、要素の幅と高さの比率です。

To maintain consistency in your layout, use a consistent aspect ratio on elements like images, surfaces, and screen size. Aspect ratio is written as width:height.

レイアウトの一貫性を維持するために、画像、サーフェス、画面サイズなどの要素には一貫した縦横比を使用してください。 縦横比はwidth：heightとして書かれています。

The following aspect ratios are recommended for use across your UI:
16:9, 3:2, 4:3, 1:1, 3:4, and 2:3

Flexible ratios

柔軟な比率

Flexible ratios sizing is determined by the layout grid: Use a flexible ratio to allow content to dictate the height of the container.

READ MORE

Flexible ratios sizing is determined by the layout grid:

柔軟な比率のサイズ設定は、レイアウトグリッドによって決まります。

• Container width is determined by the screen layout, and grows to fill the maximum space available
  コンテナーの幅は画面レイアウトによって決まり、使用可能な最大スペースに合わせて拡大します。
• Container height is determined by the height of the image in that container
  コンテナの高さは、そのコンテナ内の画像の高さによって決まります。

Use a flexible ratio to allow content to dictate the height of the container.
柔軟な比率を使用して、コンテンツがコンテナの高さを決定できるようにします。

Container widths are determined by the column widths in the layout grid.
コンテナの幅は、レイアウトグリッドの列幅によって決まります。

Responsive cropping

レスポンシブクロッピング

To display images responsively, define how an image will be cropped at different breakpoint ranges. At different breakpoint ranges cropping can: Image sizing can remain...

READ MORE

To display images responsively, define how an image will be cropped at different breakpoint ranges. At different breakpoint ranges cropping can:

それに応じて画像を表示するには、異なるブレークポイント範囲で画像を切り取る方法を定義します。 さまざまなブレークポイント範囲でクロップすると、次のことが可能になります。

• Maintain one fixed ratio
• Adapt to different ratios
• Fix image heights
  
  1つの固定比率を維持
  異なる比率に適応する
  画像の高さを修正

Maintain one ratio

1つの固定比率を維持

Image sizing can remain one fixed ratio across breakpoint ranges.

画像のサイズ変更は、ブレークポイント範囲全体で1つの固定比率のままにすることができます。

50%
Image maintains a 3:2 ratio between breakpoints.

画像はブレークポイント間で3：2の比率を維持します。

Adapt to different ratios

異なる比率に適応する

Image sizing can change to different a ratio per breakpoint range.

画像サイズは、ブレークポイント範囲ごとに異なる比率に変更することができます。

50%

The image ratio changes from 1:1 to 3:2 between breakpoints.

画像の比率は、ブレークポイント間で1：1から3：2に変化します。

Fix image heights

画像の高さを固定

Image sizing can maintain a fixed height and fluid width across and within breakpoint ranges.

画像サイズ設定は、ブレークポイント範囲を横切ってそしてその範囲内で一定の高さおよび流体幅を維持することができる。

50%

The image maintains a fixed height with a fluid width between breakpoints.

イメージは、ブレークポイント間の流動幅で一定の高さを維持します。

Touch and click targets 

タッチとクリックのターゲット

Touch target specs

タッチターゲット仕様

Touch targets apply to any device that receives both touch and non-touch input. To balance information density and usability, touch targets should be at least...

READ MORE

Touch targets apply to any device that receives both touch and non-touch input. To balance information density and usability, touch targets should be at least 48 x 48 dp with at least 8dp of space between them.

タッチターゲットは、タッチ入力と非タッチ入力の両方を受信するすべてのデバイスに適用されます。 情報の密度と使いやすさのバランスをとるために、タッチターゲットは少なくとも48 x 48 dp、それらの間に少なくとも8 dpのスペースが必要です。

Touch target minimum of 48 x 48 dp

 

Device Metrics

A comprehensive resource for sizing, resolution, and more across multiple devices

Related Linkarrow_downward

Click targets

クリックターゲット

On non-touch-UIs, click targets should be at least 24 x 24 dp with at least 8dp of space between them..

READ MORE

On non-touch-UIs, click targets should be at least 24 x 24 dp with at least 8dp of space between them..

非タッチUIでは、クリックターゲットは少なくとも24 x 24 dp、それらの間に少なくとも8 dpのスペースが必要です。

Click target minimum of 24 x 24 dp