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

ウォッチフェイスデザイナーの使用の基本

このガイドでは、ウォッチフェイスの作成方法、時間ベースの要素の追加方法、ユーザーが選択した写真（複数写真のギャラリーを含む）のサポートを含める方法について説明します。その他の機能については、高度なガイドをご覧ください。

ウォッチフェイスを作成する

ウォッチフェイスを作成するには、Figma でフレームを描画し、次のように構成します。

サイズを幅 450 単位、高さ 450 単位に設定します。

図 1: Figma のフレームレイアウトパネル。450x450 の文字盤が表示されている

他のサイズも使用できますが、Wear OS ウォッチフェイスには 450x450 が推奨され、ウォッチフェイススタジオにエクスポートする場合は必須です。
バッテリー効率の高いウォッチフェイスにするには、フレームの塗りつぶし色を黒に設定します。

図 2: 黒色の塗りつぶし色が表示されたフレーム塗りつぶしパネル
フレームの名前を、ウォッチフェイスの名前として使用する名前に設定します。これはユーザーのスマートウォッチに表示されます。

フレームを作成して構成したら、Watch Face Designer プラグインを開き、作成したフレームを選択します。ウォッチフェイスデザイナーウィンドウにライブプレビューが表示されます。

ウォッチフェイスに要素を追加する

ユーザーが時刻を確認できるように、ウォッチフェイスに要素を追加します。

アナログ時間

長方形を描画します。これはスマートウォッチの秒針として機能します。

新しい分が始まったときに、長方形が水平方向に中央に配置され、その下端が実際の時計の針のように文字盤の中央に配置されていることを確認します。デフォルトでは、Figma の [Snap to Geometry] が有効になっています。このオプションを有効にすると、赤いガイドラインが表示され、長方形の配置に役立ちます。

**図 3**: Figma の Snap to Geometry 機能を使用してフレームを配置する

次に、このレイヤが単なる装飾用ではないことを Watch Face Designer に伝えます。前の手順で描画した長方形を選択し、[Watch Face Designer] ウィンドウに移動して、[Behavior] を [Static] から [Second hand] に変更します。

[中古品] オプションはリストの中央付近にあります。 — **図 4**: 「秒針」機能にレイヤを割り当てる

針が 1 秒ごとに動き始め、時計の針の動きをシミュレートしていることに注目してください。必要に応じて回転方法を調整できます。また、この針と同様の方法で、分針と時針を作成することもできます。

サブダイヤルに関するアドバイスについては、高度な使用方法ガイドをご覧ください。

デジタル（時刻）

時刻をデジタル形式で表示することもできます。そのためには、Figma でテキストレイヤを作成します。ここでは、レイヤのテキストコンテンツとして Hh:Mm:Ss を入力します。

[ウォッチフェイスデザイナー] ウィンドウで、テキストの [動作] を [静的] から [デジタル時刻] に変更します。プレビューでは、実際のデバイスでどのように表示されるかを確認できます。

使用できる文字セットについては、[ウォッチフェイスデザイナー] ウィンドウのサイドバーに表示されるテンプレートガイドをご覧ください。たとえば、a は現在の時刻が「午前」か「午後」かを表します。これは「時刻の形式」とともに使用して、12 時間形式の時刻を表示できます。

Wear OS で使用できないフォントを含め、Figma で任意のフォントを選択できます。選択したフォントは自動的にエクスポートされ、ウォッチフェイスにバンドルされます。フォントごとに再配布に関するライセンス条項が異なることにご注意ください。

さまざまな時間帯のプレビュー

時間帯ごとにウォッチフェイスを確認するには、[ウォッチフェイスデザイナー] ウィンドウの下部にあるスライダーをドラッグして、プレビューに表示する時間を調整します。

**図 6**: [**Watch Face Designer**] ウィンドウの下部にあるタイムスクラブバー。左下の要素には、24 時間形式の時/分/秒でプレビュー中の現在の時刻が表示されます。

さまざまな時間のプレビューが完了したら、左下の [リセット] ボタンを選択して、時間を現在時刻にリセットできます。

**図 7**: [**Watch Face Designer**] ウィンドウの左下隅を使用して現在時刻にリセットする。

ユーザー提供の写真を含める

ウォッチフェイスには、カスタム写真用のスロットを含めることができます。これにより、ユーザーは個人的な写真を背景として追加しながら、時間やデザインに含めた他の要素を表示できます。

カスタム写真をサポートするには、ウォッチフェイスにレイヤを追加し、その Behavior を「User-provided photo」に設定します。この例では、このレイヤのデフォルト画像として花のサンプル写真を使用します。この画像は、ユーザーが自分の写真を割り当てる前、またはユーザーが自分の写真を使用しないことを選択した場合のフォールバックとして使用されます。

写真の複数選択をサポート

ウォッチフェイスで複数の写真を選択できます。Watch Face Designer では、これをギャラリーと呼びます。

[写真の選択] が [ギャラリー] に設定されている場合、ユーザーはこのスロットに複数の写真を選択できます。また、[写真の変更:] で選択した内容に応じて、スマートウォッチが異なるタイミングで写真を切り替えます。

[タップ時] を選択すると、ユーザーがレイヤをタップしたときに写真が切り替わります。
[手首を上げたとき] を選択すると、ユーザーが手首を 3 回上げるたびに変更されます。現時点では、ウォッチフェイスデザイナーを使用して調整することはできません。changeAfterEvery 属性を使用して Watch Face Format がより高度なサポートを提供する方法について学習します。

詳細

実機でウォッチフェイスをプレビューするには、エクスポートのガイドをご覧ください。

その他のオプションと機能については、高度な使用方法のガイドをご覧ください。