Garmin ウォッチフェイス デザインプレビューツール

このツールは、ブラウザ上でラウンド型の文字盤をプレビューするものです。時刻、日付、歩数、心拍数を配置したビジネス風のレイアウトを描画し、各要素の色を自由に変更できます。プレビューは色を変えるたびに更新され、完成したデザインはPNG画像としてダウンロードできます。

これはデザインを確認するためのプレビュー専用ツールです。実際のウォッチには接続されず、インストール可能な文字盤データを生成するものではありません。

プレビューに表示される内容

この文字盤は、ラウンド型ウォッチの多くが採用しているレイアウトを使っています。

• 上部に日付
• 中央に大きく時刻
• その下に歩数と心拍数を並べて表示
• 外周には時の目盛りが入ったベゼル

サンプルの表示内容は変更できるため、実際に近い数値でデザインを確認できます。4桁の歩数は2桁の歩数より広いスペースを必要とし、12時間表示にすると午前・午後を示す表記が加わります。

ダークカラーの配色を使う理由

Garminのラウンド型ウォッチの多くは、メモリー・イン・ピクセル方式またはOLEDディスプレイを採用しています。OLEDディスプレイでは、黒いピクセルは単純に消灯するため、背景を暗くすると消費電力を抑えられます。また、暗い文字盤は明るい日差しの下でも読みやすく、明るい背景は反射で見えにくくなりがちです。

このような理由から、ここに用意されているプリセットはすべてダークカラーです。明るい背景を選ぶこともできますが、その場合ツールは通常の設計とは異なることを知らせます。

コントラストと読みやすさ

ウォッチの表示は一目で読み取ることが多く、しかも暗い場所や体を動かしている最中に見ることも多いため、コントラストはスマートフォンの画面以上に重要です。このツールは、WCAG 2.1の計算式を使って、各要素と背景とのコントラスト比を測定します。

このコントラスト比は、2つの色の相対輝度を比較する数値です。

contrast = (L1 + 0.05) ÷ (L2 + 0.05)

L1は明るい方の輝度、L2は暗い方の輝度です。結果は、同じ色どうしを示す1:1から、白と黒の組み合わせである21:1までの範囲になります。

覚えておくとよい基準が2つあります。

• 大きな文字の最小コントラスト比は3:1
• 通常サイズの文字の最小コントラスト比は4.5:1

時刻は大きく表示されるため、理論上は3:1でも足りますが、屋外ではより高い比率のほうが見やすくなります。小さいラベルには4.5:1以上が望まれます。

例

背景を非常に暗いネイビーの#0b1020にし、文字を白の#ffffffにすると、コントラスト比は約18:1になります。これはどのような明るさの場所でも快適に読める数値です。

歩数の色を、背景に近い青の#2a3a5eに変更すると、比率は約1.6:1まで下がります。この状態では数値は腕を伸ばした距離からはほとんど見えなくなり、ツールが警告を表示します。

デザインのダウンロード

ダウンロードボタンを押すと、表示中のプレビューが320×320ピクセルのPNG画像として書き出されます。画像はブラウザ内で生成され、どこにもアップロードされません。このファイルは、モックアップとして使ったり、フィードバックを得るために共有したり、Garminの Connect IQ ツールで実際の文字盤を作る際の参考として保存したりできます。

よくある質問

このツールでインストールできる文字盤データを作成できますか?

できません。このツールが作るのは、デザインの画像だけです。インストール可能な文字盤を作るには、GarminのConnect IQ SDKまたはGarmin Watch Face Builderが必要です。

ウォッチはラウンド型なのに、なぜプレビューは正方形なのですか?

この画像は、正方形のキャンバスの中にラウンド型の文字盤を描いたものです。これは文字盤のグラフィックを作成する際の一般的な方法です。四隅の部分は、実際のウォッチには表示されません。

実際の文字盤はどのくらいのサイズにすればよいですか?

機種によって異なります。Garminのラウンド型ディスプレイでよく使われるサイズは、240×240、260×260、416×416ピクセルです。このプレビューは、その中間的なサイズである320×320を採用しています。

なぜウォッチ上では色が違って見えるのですか?

ウォッチのディスプレイは明るさや発色の再現性が機種ごとに異なり、メモリー・イン・ピクセル方式の画面では表示できる色数が限られます。プレビューはあくまで目安として扱い、最終的には実機の画面で確認してください。

コントラストの数値は何を意味していますか?

これは、ウェブサイトでも使われているのと同じ、WCAG 2.1アクセシビリティ基準によるコントラスト比です。数値が高いほど読みやすくなります。