Xcode
WatchKit
AppleWatch
watchOS

Apple Watchのコンプリケーションファミリー

コンプリケーションファミリーとは

Apple Watchのコンプリケーションについてざっくりと紹介で紹介したコンプリケーションには、ファミリーと呼ばれるグループがあります。

たとえば、下のユーティリティ文字盤をご覧ください。

コンプリケーション01.PNG

このユーティリティ文字盤の左上にある温度と、右上にあるハートマークは、 utilitarianSmall というグループです。

コンプリケーション02.png

また、画面下にあるパ・リーグウォークという文字列と画像は utilitarianLarge というグループです。

コンプリケーション03.png

XcodeのメニューのHelp > Developer Documentationを開いてClockKit > CLKComplication > CLKComplicationFamilyを開くと、コンプリケーションファミリーについての詳しい説明を参照できます。
used in the Utility, Mickey, Chronograph, and Simple clock faces のように、どの文字盤で使用されているのかも、ここで調べることができます。

コンプリケーションファミリーの種類

この記事を書いている2018年05月時点では、コンプリケーションファミリーは以下の7つがあります。

  • modularSmall
  • modularLarge
  • utilitarianSmall
  • utilitarianSmallFlat
  • utilitarianLarge
  • circularSmall
  • extraLarge

それぞれのコンプリケーションのサンプルと解説は、XcodeのメニューのHelp > Developer Documentationを開いてClockKit > Templatesで参照できます。

コンプリケーション04.png

コンプリケーション05.png

コンプリケーションの画像サイズ

コンプリケーションごとに、以下のように画像サイズが決まっています。

Family Template 38mm 42mm
Circular small Ring 40px × 40px (20pt × 20pt @2x) 44px × 44px (22pt × 22pt @2x)
Circular small Simple 32px × 32px (16pt × 16pt @2x) 36px × 36px (18pt × 18pt @2x)
Circular small Stack 32px max × 14px (16pt × 7pt @2x) 34px max × 16px (17pt × 8pt @2x)
Extra large Ring 126px × 126px (63pt × 63pt @2x) 133px × 133px (66.5pt × 66.5pt @2x)
Extra large Simple 182px × 182px (91pt × 91pt @2x) 203px × 203px (101.5pt × 101.5pt @2x)
Extra large Stack 156px max × 84px (78pt × 42pt @2x) 174px max × 90px (87pt × 45pt @2x)
Modular large Columns 22-64px × 22px (11-32pt × 11pt @2x) 24-74px × 24px (12-37pt × 12pt @2x)
Modular large Standard body 22-64px × 22px (11-32pt × 11pt @2x) 24-74px × 24px (12-37pt × 12pt @2x)
Modular large Table 22-64px × 22px (11-32pt × 11pt @2x) 24-74px × 24px (12-37pt × 12pt @2x)
Modular small Ring 36px × 36px (18pt × 18pt @2x) 38px × 38px (19pt × 19pt @2x)
Modular small Simple 52px × 52px (26pt × 26pt @2x) 58px × 58px (29pt × 29pt @2x)
Modular small Stack 52px max × 28px (26pt × 14pt @2x) 58px max × 30px (29pt × 15pt @2x)
Utility large Flat 18-42px × 18px (9-21pt × 9pt @2x) 20-44px × 20px (10-22pt × 10pt @2x)
Utility small Flat 18-42px × 18px (9-21pt × 9pt @2x) 20-44px × 20px (10-22pt × 10pt @2x)
Utility small Ring 28px × 28px (14pt × 14pt @2x) 28px × 28px (14pt × 14pt @2x)
Utility small Square 40px × 40px (20pt × 20pt @2x) 44px × 44px (22pt × 22pt @2x)

Complication Images - Icons and Images - watchOS Human Interface Guidelines より引用)

コンプリケーションの画像は、アルファチャンネルだけを使用するので注意してください。

また、ヒューマンインターフェースガイドラインには、線の太さを4ピクセル以上にしてくださいと書かれています。コンプリケーションは小さいので、専用にデザインした画像をつくることがオススメです。