Amazfit文字盤の作り方！WATCHFACE MAKERで好きな文字盤を自作！

具体的なpngの変換手順

まずは以下リンク先のImageToZeppOSをダウンロードします▼
ImageToZeppOSはこちら

ダウンロードした「ImageToZeppOS」データを全て展開します▼

展開した先のフォルダにある「ImageToZeppOS.exe」を実行します▼

「ImageToZeppOS」を実行すると以下のダイアログ(画面)が出てくるので、「Recognize the image from the watch face」を押します▼

上図の「Recognize the image from the watch face」を押すと以下の画面が出てきます。

先ほど展開した、元となる文字盤の「assets」フォルダを選択すると、.pngが沢山あるので全て選択してください。その後、「開く」を押します▼

元となる文字盤の「assets」フォルダ内に、「Png」というフォルダが出来ました▼

これら.pngデータはグレースケールというデータになっているので、RGBデータに変換します。変換しないとデザインするサイトで読み込むことができません。

変換にはWindows標準ソフトのペイントを使用します。具体的には、実際に使用したい.pngを選択しマウスの右クリックを押し「ペイントで編集する」を選択してください。このとき、複数の.pngを同時にペイントで編集することも可能です▼

複数同時編集すると、その分ペイントのウィンドウが出てくるので、多すぎるとPCが固まるかもしれません。10個くらいずつが良いと思います。

次にペイントのウィンドウが表示されたら、キーボードの「Ctrl」+「s」を押し、pngを上書き保存します。上書き保存したらペイントのウィンドウを閉じましょう▼

ペイントで上書き保存するだけでグレースケールからRGBに変換されます。

これでRGBデータの.pngが出来ました。このように、好きな文字盤から.pngを作っていきます。

その他、画像の作り方・集め方

ポイントは背景透過の画像を作ることです。背景透過にしないと、文字盤の背景上に画像を置いたときに画像の周りが背景とマッチしません。

文字盤サイトへで背景画像追加

まずは文字盤をデザインするためのサイトへアクセスします。

Watchface maker（https://watchface.zepp.com/）
※サイトの取扱説明書https://docs.zepp.com/docs/guides/tools/watchface/

すると初めにアカウントの登録を行い、次に文字盤の名前や対象機種を選択する画面に飛びます。必要な情報を入力して「create」を押しましょう▼

初期画面は以下のように真っ黒な文字盤の形が写されています。ここに画像を追加していきます▼

まずは背景から。以下の画像の①~④の順に選択してみてください。すると、背景画像を選択できるので、スマートウォッチの解像度に合う背景画像を選択します▼

はい、背景画像が挿入されました▼

続いて、時計のアナログ針・デジタルや必要な情報を付け足していきます。

アナログ針の追加

アナログ針を追加する際には、位置に注意しながら追加していってください。回転中心が合わないと時計として機能しなくなるからです。

うみ

今回は時針について解説しますが、分針・秒針も設定方法は同じです

基本的に以下画像の①~⑨を選択していきます。①~③は押すだけ、④は用意した画像を読み込むところです。⑤~⑧の設定は、以下を参考にしてください。⑨で時計の針を動かして、中心位置がズレていないか確認できます。

5. 時計の針の位置、画面横方向を設定します。以下画像だと時計の中心は画像のど真ん中なので、解像度390ピクセルの半分である195としました。
6. 時計の針の位置、画面縦方向を設定します。以下画像だと時計の中心は画像のど真ん中なので、解像度450ピクセルの半分である225としました。
7. 時計の針の回転中心、画面横方向を設定します。以下画像だと時計の針の解像度x軸(横軸)方向が40ピクセルなので、その半分の20ピクセルとしました。
8. 時計の針の回転中心、画面縦方向を設定します。以下画像だと195としています。⑤と合わせることで上手くいきましたが、これはどのように設定するのが良いか未解明なので、いろいろと弄ってみてください。⑧を変更すると⑥も変更が必要になると思います。

⑨で時計の針をグルグル回して中心が合っているか確認してくださいね。

デジタル時計の追加

今度はデジタル時計の追加に挑戦してみましょう。

以下の画像を参考に、基本的にはアナログ針と同じように選択していきます。①~③はアナログ針と同じ手順。④は一度に複数のデータを取り込めるため、デジタル時計の数値として使用する画像の0~9までを選択してください。⑤⑥で位置調整をして、⑦で文字の揃える位置(左・右・中央)、⑧で文字間の距離調整、⑨は単位の画像を選択できます（時、分、秒や：(コロン)など。画像を準備しておく必要あり）▼

また、上図の④に取り込む画像は、画像のデータ名称の順番に並びます。そのため、数字の「0(ゼロ)」から「9」まで若い番号順に並べてください▼

最後に⑩の数値を変えてみて、時間がどのように変わるかプレビューでテストします▼

このようにしてデジタル時計を追加していくと、以下のようになりました▼

作成した文字盤例と注意事項

それでは、今回作成してみた文字盤を見てみましょう▼

今回の文字盤は以下の構成で、通常の画面と常時表示（AOD）画面を作成しました。

今回作成した文字盤の構成

このように好きな文字盤を作れるので楽しいですね。

うみ

慣れるとすごく簡単ですよ

注意事項
気付いている方も多いと思いますが、Watchface makerでは、左の列にどんどん項目が追加されていきます。これらの項目が上から順にレイヤー分けされており、上に置いた画像が優先的に見えるようになります。

そのため、例えばBackgroundを一番上のレイヤーに置いてしまうと、アナログ針など必要な情報が見えなくなってしまいます。レイヤーの順番はマウスのドラッグ&ドロップで移動できるので、適宜移動してみてください。

〇良い例

×悪い例

気を付けた方が良いのは、アナログ針のレイヤーです。アナログ針は通常一番上のレイヤーにすることが綺麗な文字盤になると思うので、必ず一番上のレイヤーになっていることを確認しましょう。

文字盤QRコードの発行

文字盤をダウンロードするためにはQRコードを発行する必要があります。

作成した文字盤の画面「Save」の横の「三」を押し、「Run on Device」という項目を選択します▼

すると「action in progress…」と出てきます。これですぐにQRコードが出てくれば良いのですが、何故か一回で出てきたことはありません。そのため、何度かリロードしたり、別タブで開いたりして試してみましょう▼

上手くいくと（何度かやれば必ず上手くいきます）、QRコードが表示されます▼

このQRコードをZeppアプリから読み込みダウンロードします。

Zeppアプリ設定と開発者モード解放

作成した文字盤や有志の文字盤はZeppアプリからQRコードで読み込み、ダウンロードします。

ただ、初期設定ではZeppアプリ側にQRコードを読み込む設定がありません。そのため、開発者モードを解放する必要がありますが、アプリをタップしていくだけで出来ます。

というわけで、Zeppアプリを開き、プロフィールをタップしてください▼

次に設定をタップします▼

今度はバージョン情報をタップしましょう▼

バージョン情報を開いたら、Zeppアプリのアイコンを数回（確か7回…）タップしてください。すると、開発者モードが解放されるポップアップが出てきます▼

設定画面に戻ると、「開発者モード」という項目があるのでオンにしてください▼

これで開発者モードの解放が完了しました。

文字盤ダウンロード

ここまででQRコードの表示と開発者モードの解放が完了しました。最後に文字盤のダウンロードを実行します。

Zeppアプリ内の「デバイス」に移動し、「一般」をタップします▼

「一般」の中に「開発者モード」があるのでタップします▼

「開発者モード」の画面右上の「＋」→「Scan」とタップしましょう▼

先ほどの文字盤のQRコードをスキャンします▼

すると、「開発者モード」の画面に文字盤の名称の項目が追加されています。「Install」をタップすればウォッチ側の文字盤が変更されます▼

お疲れさまでした。これで文字盤に反映されたと思います▼

慣れれば簡単です。また、各項目を編集(選択)可能なデータにしたり、背景画像を変更可能にしたりすることもできます。