Communitygithub.com

garmin-design

Garmin ウォッチ画面のデザインとレビューを行います。ラウンド画面(218~466 px)、AMOLED および 64 色 MIP パレット、ビットマップフォント、スロットに収まるテキスト、円弧、アイコン、白背景に対応します。Connect IQ ウォッチフェイス、データフィールド、アプリ画面の描画時や、一部のウォッチでテキストや色、配置がおかしいと感じたときに使用します。

garmin-design とは?

このスキルは、Garmin のラウンド画面(218 px MIP の Forerunner から 466 px AMOLED の fēnix まで)において、デザインがすべての画面で適切に表示されるように設計・レビューするためのものです。あるウォッチで正しく見えた画面は最初のドラフトに過ぎず、このスキルは 9 種類の画面サイズ(MIP: 218, 240, 260, 280 px、AMOLED: 360, 390, 416, 454, 466 px)それぞれでテストし、ピクセル単位ではなく測定した高さに基づいて配置することを推奨します。さらに、重要な数値にはビットマップフォントを使用し、アクセント記号を含むフォントを中央揃えにしない、各桁が正しく読めるか確認する、すべての言語でラベルがスロットに収まるか検証する、MIP 色は手動で 64 色から選択する、`drawArc` で滑らかな円弧を描く、マーカーが指す対象を覆わないようにする、アイコンは大きなサイズで描画してからリサイズする、といった具体的なベストプラクティスを提供します。開発者はこのスキルに従うことで、多様な Garmin デバイスで一貫した高品質な画面デザインを実現できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jk0bson/garmin-skills/tree/main/skills/garmin-design

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Garmin 画面デザイン

このスキルにより、218 px MIP の Forerunner から 466 px AMOLED の fēnix まで、すべてのラウンド Garmin 画面でデザインが適切に表示されるようになります。あるウォッチで正しく見えた画面は、最初のドラフトに過ぎません。

Monkey C の動作は garmin-app に属します。画面のキャプチャは garmin-simulator に属します。

9 つの画面サイズに対応し、それぞれをテストする

ラウンド Connect IQ 画面には、218、240、260、280 px(MIP、64 色)と 360、390、416、454、466 px(AMOLED)があります。画面が完成したと判断する前に、各サイズについて、表示可能な最長の値で 1 台のウォッチで実行してください(screens.md)。

固定ピクセルではなく、測定した高さから配置する

AMOLED フォントは、同じ名目サイズでも MIP フォントよりも高くなります。スロットの割合と dc.getFontHeight() を使用して配置し、行の高さがグリフに合わせてトリミングされたフォントでは TEXT_JUSTIFY_VCENTER で中央揃えにします。

重要な数値には独自のビットマップフォントを使用する

システムフォントはウォッチごとに異なり、多くの小型画面にはベクターフォントがありません。画面サイズごとに、描画する文字のみを含む BMFont .fnt + .png を生成し、グリフのカバレッジをカラーチャンネルとアルファチャンネルの両方に保存します(そうしないとウォッチ上でアンチエイリアスがかかりません)。また、行の高さをグリフに合わせてトリミングします(fonts.md)。

中央揃えにするフォントにはアクセント記号を含めない

É や À を含むフォントは大文字の上に余白を確保するため、VCENTER を使用すると大文字が低くなりすぎます。あるゾーンピルでは Z、数字、- のみの専用フォントにするまで「Z4」が中央からずれて表示されていました。

すべての桁が正しく読めることを確認する

一部の書体では 1 が単なるストロークで描かれるため、「Z1」が「ZI」に、「101」が一目で「IOI」に見えます。書体を選ぶ前に、1、7、0、O を拡大して確認してください。一つでも問題があれば、別の書体を選ぶか、独自のフォントジェネレーターでそのグリフを書き直してください。

すべての言語でラベルがスロットに収まる

各ラベルのピクセル幅をすべての言語で、それが配置されるスロットに対して測定してください。翻訳されたラベルは長くなることがあります(フランス語ではあふれました)。想定せずに測定してください。単位を削除し、それでも長ければ省略形を使用し、2 つのラベルが決して接触しないようにしてください(screens.md)。

MIP の色は自分で選ぶ

MIP 画面は 64 色で、チャンネル値は 00/55/AA/FF のみです。コンパイラは色を適切に丸めません(茶色がオリーブグリーンになりました)。AMOLED、MIP、白背景用に別々のパレットを用意し、各 MIP 色を 64 色から目視で選択してください(colors.md)。

drawArc で円弧を描く

ポリゴンで構築された円弧は、実際のウォッチでは手描きのように見えます。dc.drawArc は滑らかです。ある角度からそれ自身への円弧は完全な円を描きます。長さがゼロの円弧はガードしてください。

動くマーカーは指す対象を覆ってはいけない

テキストの上に描画された針やビットマップは、そのテキストを消してしまいます。すべての画面サイズで、マーカーのサイズを周囲のテキストに対して調整してください。390 px で読み取れる長さの針が、低ゾーンでは心臓アイコンに触れてしまいました。

アイコンは一度大きく描画する

ランチャーアイコンは 1024 px で描画し、デバイスの compiler.json の各 launcherIcon サイズに LANCZOS で縮小し、resources-round-WxH/drawables/ に 1 つずつ保存します。MIP サイズには 64 色パレットを使用します。

関連スキル