タイルのデザイン システム
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
タイルの基本要素について理解する。タイルのテンプレート、レイアウト、コンポーネントを使用して、アプリ用の独自のタイルをデザイン、作成できます。
基本要素
パディングの割合（%）
上余白、下余白、余白はすべて、固定の余白量ではなく割合を使用して比例スケーリングを実現します。
領域を設計する
タイル テンプレートのタイプごとに、プライマリ コンテンツ エリア内に独自のルールがあります。詳しくは、レイアウト ガイダンスをご覧ください。
ボトム コンパクト チップ
タイルに対するセカンダリ アクションを有効にするうえで重要。常に下部から 6.3% 上に配置。
下部コンパクト チップ
ボタンには、短くても特定のアクションや目的地に固有な言葉を使用します。この行動を促すフレーズの翻訳は、文字数制限を超えないようにする必要があります。デフォルトまたは代替の値として、カスタムオーディエンスです
配置
- マージン: 下から 2.1%
- 内部パディング: 上下 8 dp
ボタンの仕様
横側の内部パディング/余白
推奨される文字数制限 <225 dp
- 最大行数: 1
- 最大文字数制限: 8
- 推奨される文字数制限: 6 文字
- 切り捨て: なし
推奨される文字数の上限 >225 dp
- 最大行数: 1
- 最大文字数制限: 9
- 推奨される文字数制限: 7 文字
- 切り捨て: なし
色
ブランドのテーマを適用する
いくつかのブランドカラーから選択できます。アプリのデザインに合わせて、カスタマイズや変更を行うこともできます。
マテリアル テーマツールとガイダンスを使用して、プライマリ カラーをソースカラーとして使用し、適切な色のコントラスト レベルの色を生成します。生成されたパレットを使用して、Figma のパレットのプライマリ、プライマリ バリアント、オンプライマリ、サーフェス、サーフェスの色を置き換えて、タイルを正しくテーマ設定します。その他の色はすべて、タイル間の一貫性を保つようにカスタマイズできません。
その他のマテリアル テーマ作成ツール:
カラー適用
背景色は常に黒に設定する。
背景をフルブリードの画像やブロック色に設定しないでください。
タイポグラフィ
Roboto は Wear OS で使用されるメインのフォントです。Body 2 がデフォルトかつ最小のフォントサイズとして推奨され、Display 2 はタイルで使用できる最大の文字スタイルです。
プライマリ ラベル
メインラベルのテキストは、上端から常に 16.64% の間隔で配置され、内部パディングは 6.3% になります。また、色とフォントも全体を通じて統一されます。
内部パディング
上余白: 16.64%
横余白: 6.3%
色
背景にバリエーション（グレー 300）
種類
Tiles3P（Roboto）/ ボタン - 15S 太字
フォント、太さ、サイズについて詳しくは、タイポグラフィをご覧ください。
コンポーネント
アプリのタイルを構築するために利用できるコンポーネントがいくつかあります。これらのコンポーネントはマテリアル デザインに対応しています。
選択肢: ボタンまたは切り替えボタン
サイズ: 標準、XS、S、L
タイプ: 塗りつぶし、色調補正、画像
最大 7 つの選択肢を記載します。
テキストボタン
選択肢: ボタンまたは切り替えボタン
サイズ: Standard、XS、S、L
タイプ: 塗りつぶし、色調補正
最大 7 つの選択肢を記載します。
標準チップ
オプション: アイコン、セカンダリ ラベル、テキストの配置
選択肢を 2 つまで挙げてください。
タイトルチップ（メイン入力のみ）
中央揃えのテキスト
目を引く行動を促すフレーズを 1 つ作成する。
コンパクト チップ
タイプ: 塗りつぶし、色調入力
オプション: アイコンまたはアイコンなし
下部のボタンスロットで使用。
進行状況インジケーター
タイプ: カスタマイズ可能なストローク幅
（デフォルト サイズ: 8 dp と 5 dp）
オプション: 下部または全体のギャップ
進行状況とタスクの完了を示します。
Figma デザインキット
Wear OS のタイルのデザイン キットをダウンロードして、組み込みのコンポーネント、オプション、推奨事項を含むタイルのデザイン レイアウトを使用し、ProtoLayout テンプレートのガイドラインに沿って、ニーズに合ったさまざまなレイアウトを作成します。
このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2025-07-27 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2025-07-27 UTC。"],[],[],null,["# Tiles design system\n\nUnderstand tile fundamental elements. Use tile templates, layouts, and components to design and build unique tiles for your apps.\n\n**Fundamental elements**\n------------------------\n\n**Percentage padding**\n\nTop, bottom, and side margins all use percentages, rather than fixed margin amounts, to achieve proportional scaling. \n\n**Design areas**\n\nEach type of tile template has its own rules within the primary content area. Refer to the [layout guidance](/design/ui/wear/guides/surfaces/tiles-layouts) for more information. \n\n**Bottom compact chip**\n\nImportant for enabling secondary actions on the tile. Consistently placed 6.3% above the bottom.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nBottom compact chip\n-------------------\n\nWithin the button, use a word that's short but specific to a particular action or destination. The translation of this call-to-action text must accommodate the character count limits. As a default or fallback value, you can use \"More\" as the call-to-action text. \n\n**Placement**\n\n- Margin: 2.1% from the bottom\n- Internal padding: 8 dp above and below \n\n**Button spec**\n\n- Internal padding: 12 dp on both sides \n\n**Side internal padding/margins**\n\n- 16.64%\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Recommended character limit \\\u003c 225 dp**\n\n- Max lines: 1\n- Max character limit: 8\n- Recommended character limit: 6\n- Truncation: No \n**Recommended c** **haracter limits \\\u003e 225 dp**\n\n- Max lines: 1\n- Max character limit: 9\n- Recommended character limit: 7\n- Truncation: No\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nColor\n-----\n\n### **Apply your brand's theme**\n\nThere are several brand colors to choose from. They can also be customized and changed to fit your app's look and feel. \n\nUse the [Material theme tools and guidance](https://m3.material.io/styles/color/system/overview) to generate colors that have adequate color contrast levels, using your primary color as a source color Use the generated palette to replace the primary, primary-variant, on-primary, surface, and on-surface colors in your palette in Figma to theme your tile correctly. All other colors are not customizable to create consistency across tiles.\n\n**Other Material theme building tools:**\n\n- [Material Theme Builder Web](https://material-foundation.github.io/material-theme-builder/)\n- [Material Theme Builder Figma plugin](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder)\n\n### **Color application**\n\nAlways set the background color to black. \ncheck_circle\n\n### Do\n\nDon't set the background as a full bleed image or block color. \ncancel\n\n### Don't\n\nTypography\n----------\n\nRoboto is the primary font used in Wear OS. Body 2 is recommended as the default and the smallest font size, while Display 2 is the largest type style that's available for tiles.\n\n### **Primary label**\n\nPrimary label text is always 16.64% from the top edge and have an internal padding of 6.3%. Color and font also remain consistent throughout. \n\n**Internal padding**\n\nTop margins: 16.64% \nSide margin: 6.3% \n\n**Color**\n\nOn-Background-Variant (Gray 300) \n\n**Type**\n\nTiles3P (Roboto) / Button - 15S Bold\n\nFor more information about font, weight, and sizing, see [Typography](/design/ui/wear/guides/styles/typography).\n\n**Components**\n--------------\n\nThere are several components available to build your app's tiles. These components are aligned with Material Design.\n\n### Icon button\n\nOptions: Button or Toggle Button \nSizes: Standard, XS, S, L \nTypes: Filled, tonal-filled, and image\n\nList up to 7 options.\n\n### Text button\n\nOptions: Button or Toggle Button \nSizes: Standard, XS, S, L \nTypes: Filled and tonal-filled\n\nList up to 7 options.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Standard chip\n\nOptions: Icon, secondary label, and text alignment\n\nList up to 2 options.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Title chip (primary-fill only)\n\nCenter-aligned text \n\n\nCreate a single, prominent CTA.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Compact chip\n\nTypes: Filled and tonal-filled \nOptions: Icon or no icon \n\nUse in the bottom button slot.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Progress indicator\n\nTypes: Customizable stroke width \n(Default sizes: 8 dp and 5 dp) \nOptions: Gap at the bottom or full\n\nIndicate progress and task completion.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nFigma design kit\n----------------\n\n[Download the Tiles on Wear OS design kit](/design/ui/wear/guides/foundations/download#tiles-design-kit) to start using the tile design layouts with built-in components, options, and recommendations to create different layouts that suit your needs, while following the guidelines in the ProtoLayout templates."]]
