このページは Cloud Translation API によって翻訳されました。

タイルレイアウト

アプリ用の独自のタイルを設計して作成するための ProtoLayout マテリアルレイアウトテンプレートとサンプルデザインレイアウトについて理解します。

ProtoLayout Material レイアウトテンプレート

用意されているレイアウトテンプレートを使用すると、推奨されるアダプティブレイアウトエクスペリエンスを作成できます。これらのテンプレートは、一般的な設計のユースケースに対応しています。

PrimaryLayout テンプレート

上部セクション:
メインラベルスロット（省略可）

中央のセクション:
メインコンテンツスロット
セカンダリラベルスロット（省略可）

下部:
メインチップスロット（省略可）

EdgeContentLayout テンプレート

上部セクション:
メインラベルスロット（省略可）

中央のセクション:
メインコンテンツスロット
セカンダリラベルスロット（省略可）

下部のセクション:
エッジコンテンツスロット（進行状況インジケーター）

各テンプレートには、特定の密度とレイアウトを実現するためのオプションのスロットがあります。

**図 1**: オプションのスロットがある ProtoLayout マテリアルレイアウトテンプレートの行

これらの高さが固定された ProtoLayout Material レイアウトテンプレートは、すべてのタイルを構築する基盤とスキャフォールディングを提供します。両者の違いは、組み込みのマージンと内部パディングだけです。他のアプリのタイルデザインとの一貫性を保つため、前の画像に示す推奨スロットを使用してください。

これらのレイアウトをカスタマイズし、メインコンテンツスロット内にコンポーネントのさまざまな組み合わせを配置するには、以下の追加のレイアウトコンポーネントを使用します。

マルチボタンスロット: 円形のボタンをグリッドとして表示します。
マルチスロット: 最大 3 つのコンテンツ列（通常はデータポイント）を作成します。
カスタムスロット: すべてのスロットはカスタマイズ可能で、任意のコンポーネントを含めることができます。場合によっては、システム提供のコンポーネントではなく、スロットにイメージやグラフが表示されます。

正規デザインのサンプルレイアウト

アプリのタイルを設計するには、ここで説明するレイアウトテンプレートと、Figma デザインテンプレートで提供されているレイアウトテンプレートを使用します。

タイルのデザインに一貫性を持たせるには、以下の正規デザインレイアウトを使用してください。これらは一般的な UX ユースケースに基づいており、Figma の設計とサンプルは、最初に使用できる事前構築済みのレイアウトを提供するため、タイルをより迅速に作成できます。これらのテンプレートに示されるレイアウトは柔軟であり、スロットには必要なコンテンツを入力できます。

**図 2**: コーディングされた ProtoLayout レイアウトテンプレート上に構築されたデザインレイアウトを示す正規レイアウトのディシジョンツリー

デザインキットを使用すると、これらのレイアウトの柔軟性を最大限に活用できます。すべての ProtoLayout Material レイアウトテンプレートとの整合性を維持しながら、レイアウトをカスタマイズできます。

カスタマイズが推奨されない要素は次のとおりです。

メインラベルのスタイルと位置
進行状況インジケーターのスタイルと位置
下部のコンパクトチップのスタイルと位置

以下の最上位の基準に基づいて、複数のタイプのタイルレイアウトから選択できます。タイルの主な目的と、表示するコンテンツの種類を検討します。

テキスト中心のレイアウト

このレイアウトでは、PrimaryLayout テンプレートを使用しています。

このレイアウトは、大量のテキストと明確な行動を促すフレーズを含むタイルと、空の状態とログアウト状態を表すタイルの両方で最適に機能します。

画面サイズが小さいデバイスで使用可能な高さを最大にするには、セカンダリラベルスロットとプライマリチップスロットを削除します。

ボタン中心のレイアウト

ボタン中心のレイアウトには、チップを使用するレイアウトとボタンを使用するレイアウトがあります。

ボタン中心（チップ）

このレイアウトでは、PrimaryLayout テンプレートを使用しています。

チップコンポーネントがメインのコンテンツスロットに表示されます。2 つの標準チップを使用するレイアウトでは、小さい画面サイズのレイアウトでセカンダリラベルを使用しないでください。

ボタン中心（ボタン）

このレイアウトでは、PrimaryLayout テンプレートを使用しています。

グリッドレイアウトに複数のボタンを表示するには、メインのコンテンツスロットで MultiButtonLayout を使用します。このコンポーネントは、画面サイズの小さいデバイスでは最大 6 つのボタン、画面サイズの大きいデバイスでは最大 6 つのボタンに対応します。

2 行のボタンを含むレイアウトでは、画面サイズが小さいデバイスではセカンダリラベルスロットを使用しないでください。

情報中心のレイアウト

情報中心のレイアウトには、進行状況インジケーターがあるレイアウトとないレイアウトがあります。

進捗インジケーターのない情報中心

このレイアウトでは、PrimaryLayout テンプレートを使用しています。

複数のデータ列を表示するには、メインコンテンツスロットで MultiSlotLayout を使用します。このコンポーネントは、画面サイズの小さいデバイスでは最大 3 つの列、画面サイズの大きいデバイスでは最大 3 つの列に対応します。最後の例の実行統計で示したレイアウトを実現するには、各列でプライマリラベルとセカンダリラベルを使用し、その下の一般的なセカンダリラベルスロットは使用しません。

進捗インジケーターで情報中心

このレイアウトでは、EdgeContentLayout テンプレートを使用しています。

このレイアウトを使用して、進行状況と 1 つの主要指標を表示します。進行状況インジケーターを使用すると、レイアウトの中央のスペースが小さくなります。

プライマリチップスロットを除き、このレイアウトでは進行状況インジケーターのないスロットと同じスロットが保持されます。

最後の例である Weather で示したレイアウトを作成するには、メインコンテンツスロット内で MultiSlotLayout コンポーネントを使用します。

データ中心のレイアウト

このレイアウトでは、PrimaryLayout テンプレートを使用しています。

このレイアウトは、グラフィックやグラフを表示する場合や、画面サイズの大きいデバイスでタイルの視覚的な柔軟性が特に必要な場合に使用します。

使用可能な高さを最大にするには、セカンダリラベルスロットとプライマリチップスロットをオフにします。この構成により、より大きなグラフィックと、画面サイズの大きいデバイスで追加情報を表示できます。

レスポンシブデザイン

次のテンプレートは、画面サイズの大きい Wear OS デバイスにタイルレイアウトがレスポンシブに適応する仕組みを示しています。以下の例は、組み込みの動作を示しています。これにより、ディスプレイサイズを大きくすることで画面の追加領域を最大化できます。アプリデベロッパーは、複数のレイアウトと、表示するレイアウトをシステムに伝えるブレークポイント（「小さい画面」または「大きい画面」）を定義することもできます。

詳しくは、アダプティブレイアウトのデザインをご覧ください。