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

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

基本要素

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

アプリアイコン アプリアイコンは、アプリ デベロッパーが提供するものであり、画面に一時的に表示されます。	デザインエリア 各タイル テンプレートには、プライマリ コンテンツ エリアに関する独自のルールがあります。必ずレイアウト ガイダンスを参照してください。	下部ボタン ボタンは、タイルでのセカンダリ アクションを可能にする重要な要素です。ボタンは画面の最下部から 6.3% 上方に配置します。

アプリアイコン

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

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

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

ボタン

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

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

テンプレート

タイル テンプレートは 4 種類用意されています。タイル デザインキット（Figma）をダウンロードして例を確認し、このテンプレートの使用に関するフィードバックをお送りください。

テキスト中心

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

ボタン中心

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

情報中心

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

データ中心

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

色

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

タイポグラフィ

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

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

コンポーネント

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

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

コンポーネント	バリアント	例
ボタン	標準ボタン	使用できるサイズ: 標準、大、特大
ボタン	標準テキストボタン	使用できるサイズ: 標準、大、特大
チップ	プライマリ標準チップ
チップ	セカンダリ標準チップ
チップ	小型アバターチップ
チップ	大型アバターチップ
チップ	コンパクト（下部）チップ
進行状況インジケーター	標準進行状況インジケーター
進行状況インジケーター	空白のある進行状況インジケーター

参考資料

詳細については、タイルのデザインに関するガイドラインをご覧ください。