タイルのデザインシステム

タイルはいくつかの基本的なデザイン要素を共有しています。タイルのテンプレートとコンポーネントを使用して、アプリ固有のタイルを作成します。

基本要素

次の表に、タイルの基本的なデザイン要素を示します。

アプリアイコンは、アプリデベロッパーが提供するものであり、画面に一時的に表示されます。

各タイルテンプレートには、プライマリコンテンツエリアに関する独自のルールがあります。必ずレイアウトガイダンスを参照してください。

ボタンは、タイルでのセカンダリアクションを可能にする重要な要素です。ボタンは画面の最下部から 6.3% 上方に配置します。

Wear では、ユーザーがタイルカルーセルをスクロールするとアプリアイコンが自動的に表示されます。アプリアイコンはフェードアウトするため、タイル内には実装しないでください。アプリアイコンの作成について詳しくは、プロダクトアイコンをご覧ください。

alt_text

図 1. アプリアイコンの例

Wear ではアプリアイコンが自動的に表示される

Wear OS によってアプリアイコンが自動的に表示されることを前提とする。

アプリアイコンをタイルデザインに配置する（2 回表示されてしまいます）。

ボタンには短いテキストを選んでください。行動喚起のアクションやリンク先に特有のテキストを使用します。ボタンテキストの翻訳が文字数に対応していることを確認します。翻訳したボタンテキストが長すぎる場合は、代わりに「詳細」と表示します。


配置	ボタンの仕様	タイプ
ボタンはウォッチフェイスの最下部から 6.3% 上方に配置します。	両側から 12 dp のパディングを確保します。	フォントサイズは拡張できません。最小フォントサイズを 9 に設定します。ラテン文字以外の言語では、最小フォントサイズを 7 に設定します。

タイルテンプレートは 4 種類用意されています。タイルデザインキット（Figma）をダウンロードして例をご確認ください。

テキスト中心のタイルテンプレートは、最新ニュース、今後のイベント、リマインダーなど、タイルにテキストを表示するように設計されています。このテンプレートは通常、ログイン、エラー、セットアップの各ステータスをユーザーに伝えて、明確な行動を促すフレーズを提示するために使用されます。

テキスト中心

ボタン中心のタイルテンプレートは、最大 5 つのプライマリアクションを設定するタイル用に設計されています。このテンプレートを使用すると、特定のタスクをすばやく開始できます。

情報中心のタイルテンプレートには、指標の概要や進捗状況が表示されます。特に健康やフィットネスに関連するタイルに活用できます。コンテンツの表示に関する柔軟なオプションが用意されています。ひと目でわかるように重要なデータを優先し、テンプレートが煩雑にならないようにします。

情報中心

データ中心のタイルテンプレートは、定期的な情報をまとめたチャートやグラフィック要素を表示するための汎用テンプレートです。データを柔軟に可視化できます。また、何も表示しない状態を作成する場合に活用できます。タイルをひと目でわかるようにするには、グラフィック要素をシンプルにすることが重要です。

データ中心

タイルをひと目でわかるようにするには、色は 3 色までにします。

背景色を黒に設定する。

背景を余白なしの画像またはブロックの色として設定する。

Wear OS のメインのフォントには Roboto を使用します。デフォルトと最小のフォントサイズには Body 2 を使用し、最大のフォントサイズには Display 2 を使用します。

文字サイズ

フォント、太さ、サイズについて詳しくは、タイポグラフィをご覧ください。

コンポーネントを使用してタイルを作成します。Wear マテリアルテーマ設定ガイドラインに沿って、コンポーネントの色をカスタマイズしてブランドを表現します。

タイルデザインキット（Figma）をダウンロードしてコンポーネントの例をご確認ください。