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

Watch Face Designer の高度な使用方法

このページでは、サブダイヤル、コンプリケーション、カラーテーマのサポートを追加する方法など、ウォッチフェイスデザイナーのより高度なユースケースについて説明します。スタートガイドの詳細については、基本ガイドをご覧ください。

サブダイヤル

実際の腕時計のサブダイヤルのように、ウォッチフェイスのサブセクション内で回転するアナログ時計の針を作成できます。

そのための手順は次のとおりです。

デザインでサブダイヤルを配置した領域を覆う空のフレームを作成します。

図 1: サブダイヤルスロットを覆う空のフレーム
このフレーム内に秒針をデザインします。

図 2: 包含フレーム内に配置された秒針のデザイン
秒針を含むサブダイヤルフレームを選択します。次に、ウォッチフェイスデザイナーで、[Rotate around] を [Layer center:] に設定します。

図 3: 包含フレーム（左）を選択した後、秒針の回転動作（右）を選択する

ウォッチフェイスの追加機能

追加機能スロットを追加するには、ウォッチフェイスにフレームを追加します。このフレーム内で、コンプリケーションスロットが空の場合の表示をデザインします。これは、アイコンやテキストなど、他のタイプのウォッチフェイスの追加機能の基本設計となります。

コンプリケーションにはさまざまな種類があります。ウォッチフェイスは各タイプのテンプレートを提供し、ユーザーのスマートウォッチのアプリは、どのテンプレートを使用し、どのデータを自身で提供するかを決定します。ユーザーは、どのアプリをどのウォッチフェイスの追加機能スロットに配置するかを選択します。

コンプリケーションスロットのデザインを含むフレームを選択します。次に、ウォッチフェイスデザイナーで、[動作] を [コンプリケーションスロット] に変更します。このプロセスでは、1 つのバリアント（空のデザイン）を持つコンポーネントが作成されます。

[動作] プルダウンがウィンドウの左上隅付近に表示される — **図 4**: 包含フレーム（左）を選択した後、「コンプリケーションスロット」の動作（右）を選択する

ウォッチフェイスの追加機能用スロットタイプを適用する

「empty」タイプのみをサポートするコンプリケーションスロットを含めてもあまり役に立たないため、別のタイプを追加します。Watch Face Designer ウィンドウで、[+ Support a new type] を押して [Short text] を選択します。短いテキストは、ほとんどのアプリでサポートされている追加機能のタイプで、アイコンの横に 2 つの小さなラベルが表示されます。

サポートされている追加機能タイプがウィンドウの中央上部に表示されます。 — **図 5**: 「短いテキスト」コンプリケーションタイプへのサポートを追加

このステップでは、このコンプリケーションタイプのデザインを表す別のバリエーションを作成します。[短いテキスト] 行を選択して、その行に移動します。

コンプリケーションテンプレート内のレイヤを編集すると、[動作] オプションが表示されます。このオプションはウォッチフェイスのオプションと似ていますが、ここでは編集するウォッチフェイスの追加機能のタイプに固有の動作を選択できます。

この例では、短いテキストコンプリケーション内のレイヤは、アプリのタイトル、テキスト、単色アイコンのいずれかになります。単色とは、アイコンが Figma で設定した色を継承することを意味します。

ウォッチフェイスにアプリアイコンを表示する長方形を作成したら、[Watch Face Designer] ウィンドウに移動し、[Behavior] を [Single-color icon:] に設定します。

図 6: 単色アイコンを表示するようにコンプリケーションスロットの外観を変更する

次に、2 つのテキストレイヤを作成します。これらのレイヤは、タイトル用とテキスト用の 2 つの「短いテキスト」スロットを表します。

**図 7**: コンプリケーションスロットのレイアウトに表示された 2 つのテキストレイヤ

プレビューには、コンプリケーションがどのように表示されるかが示されます。この例は、カレンダーアプリがこのスロットに割り当てられた場合にコンプリケーションがどのように表示されるかを示しています。

次の画像のように、テキストをすべて大文字で表示するには、Figma の [Typography] メニューのテキストケース機能を使用します。

中央付近に [Case] が表示されます。左から 2 番目のオプションは「大文字」です。 — **図 8**: Figma の [**Typography**] パネル（[Uppercase] が選択されている状態）

デジタル時間とは異なり、コンプリケーションテキストの任意のフォントの書き出しはありません。コンプリケーションは常に Wear OS デバイスのシステムフォントを使用して描画されます。システムフォントはデバイスによって異なりますが、通常は Roboto です。

追加の種類の追加機能のサポートを追加したり、デフォルトのアプリや、スマートウォッチがアンビエントモードのときにスロットを表示するかどうかなどの関連設定をカスタマイズしたりするには、ウォッチフェイス内の追加機能スロットを選択します。

[デフォルトのアプリ] と [常にオン] が左下付近に表示されている — **図 9**: ウォッチフェイスデザイナーでは、コンプリケーションスロットのカスタマイズがさらにサポートされています。たとえば、**デフォルトのアプリ**を設定したり、**常時表示**（システムのアンビエント）モードでコンプリケーションを表示するかどうかを切り替えたりできます。

カラーテーマ

ウォッチフェイス内に、カラーテーマの複数のオプションを含めることができます。ユーザーは、スマートウォッチのウォッチフェイス選択ツールを使用して、希望のテーマを選択できます。

ウォッチフェイスデザイナーは、Figma スタイルを使用したカラーテーマをサポートしています。

次のウォッチフェイスで、ユーザーが時計の針と文字盤の色をカスタマイズできるようにしたいとします。

**図 10**: 時計の針と文字盤の色を変更できる「Bauhaus」サンプルウォッチフェイス

最初のスタイルを作成する

スマートウォッチでカスタマイズ可能な色スタイルを作成するには、新しいスタイルを作成します。

キャンバス上のすべての選択を解除します。
右側のサイドバーで、[スタイル] の横にある [+] ボタンを選択します。

名前は特定の方法で付ける必要があります。

Watch Face Name/Element Family Name/Descriptive Color Name/Specific Element Name

この場合、サンプルウォッチフェイスの名前は Bauhaus なので、色は Bauhaus で始まり、その後にユーザーがカスタマイズできる要素である Hands が続きます。次に、Charcoal などのわかりやすい色名を指定し、どの特定の要素（時針）の色を変更するかを指定します。

これらをすべてまとめると、最終的な名前は Bauhaus/Hands/Charcoal/Hours になります。

ダイアログの中央付近に [名前] が表示される — **図 11**: [**Create new color style**] ダイアログ。ユーザーがカスタマイズ可能なカラースタイルを文字盤に追加できます

同様の手順で、分針のカスタムカラーテーマを作成します。

[分] 要素が [時間] 要素の下に表示される — **図 12**: 文字盤内の別の要素に **Charcoal** スタイルを適用する

最後に、これらの色をウォッチフェイスに表示される実際の針に割り当てます。

**図 13**: 文字盤の分針に `Bauhaus/Hands/Charcoal/Minutes` テーマを割り当てる

別のスタイルを追加する

スタイルの Theme Name 部分を変更して、新しいスタイルを作成します。次の例では、Rust（Bauhaus/Hands/Rust/Hours）という新しいスタイルを追加します。

新しいカラーテーマが最初のカラーテーマの下に表示される — **図 14**: **Rust** と呼ばれる、文字盤の針の新しいカラーテーマ

ユーザーはデバイスで [チャコール] と [ラスト] のカラーテーマを切り替えることができ、ウォッチフェイスの時針と分針の色がそれに応じて変更されます。

各カラーテーマはリストの項目として表示されます。要素名が画面のタイトルに表示されます — **図 15**: ウォッチフェイスの針の色テーマを選択するためのユーザー向け設定画面（左）。このリストから [**Rust**] を選択した場合の効果（右）。

**図 15**: ウォッチフェイスの針の色テーマを選択するためのユーザー向け設定画面（左）。このリストから [**Rust**] を選択した場合の効果（右）。

他の要素に適用する

同様の手順で、ウォッチフェイスの他の要素をテーマ設定可能にします。これらのテーマは組み合わせることができ、任意の数のカラースタイルを使用して、複雑な切り替え可能なテーマを作成できます。

スタイルは、要素ファミリー、カラーテーマ名、特定の要素の順に整理されています。 — **図 16**: スタイルのより完全なリスト

上記のスタイルセットでは、針に Rust と Charcoal の 2 つのオプション、文字盤に Light、Dark、Duotone の 3 つのオプションを指定しています。