Glanceに望むもの
Apple Watchを手に入れ、お気に入りのGlanceを設定。でもなかなかお気に入りのものって無かったりする。
必要な情報なのか?
というのももちろんなんですが、綺麗なものでないと置きたくない。
Glanceは、表示専用画面を一つ作るようなものなので、とても手軽に作れるわけですが、デザイン的な重要さはWatchAppアプリよりも高いのではないだろうか。
デザイン的には、全然 気軽じゃないものだ。
Glanceはテンプレートベース
ご存知の方も多いと思うが、Apple WatchのGlanceはテンプレートベースでレイアウトする。![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4HOj8EEkaQ2x6MOzeW5HqaONAM4Q2RsmqNsRCcOGR-NaookKsAXdWc6WzdZjyV4loG3t3XUGsiD1daFxkXIEoRF1AfnPMx0WzEbnma1Yi7-pVwIdoa9A9nAdsPAgrDVPE0JESu8RHepQ/s320/Screen+Shot+2015-05-07+at+18.22.20.png)
UpperとLowerに分かれていて、それぞれにテンプレートを適用して実装していく。
UpperとLowerのサイズは決められていて変更することはできない。
どんなテンプレートがあって、それらはどんなサイズになるのか?は、
Apple WatchkitのDesign Guides and Templatesにある
Apple Watch Design Resourcesのファイル見るのが一番早い。
なぜなら、XCode上ではフォントサイズが分からないから。(=サイズの修正は不可)
このリソースにはpsdとsketchのファイルが入っているので、そこからフォントサイズが分かる。
マッチするテンプレートがあれば幸せですが、無い方が多いのではないかと思う。
その場合は、自由に設定ができるGroupで囲まれたテンプレートがあるのでそれが使える。
だが、文字を表示する場合はできるだけそれを避けて、テンプレートのLabelを使えないか検討するのをオススメしたい。
(その理由は後述)
言い換えると、Glanceのデザインを考える際、
「画面デザインを考えてから、合ったテンプレートを探す」のではなく、
「テンプレートから合うものを考える」という方がよいかもしれない。
テンプレートを使うメリット
整ったレイアウトになるというのは言わずもがなと思うが、他にもある。
1. 端末によってフォントサイズを変えてくれる
Apple Watchには38mmと42mmの端末がある。端末によって、フォントサイズを変えた方が整うことが多い。
Watchは画面サイズが小さいので、iPhoneよりもそういう場面が増える。
テンプレートで用意されたラベルは、自動的にサイズを変えてくれる。
例えば、
42mmの時は、San Francisco Display/Regular 45pt のものは、
38mmの時は、San Francisco Display/Light 40pt になる。
2. フォントの上下マージン
Apple Watch標準フォントのSan Franciscoには、上下にマージンがある。![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC-BhR4JXG_GPVAYDbfgeWVMeqU2fub-Js5-l6cpSKiesP5QBmlCs2TCCAav2zCAR9S47JOnxXaQJe2ZUMVPLuPgjbhYEhGaxI2zsrT8DempU9ViDH0IuCSs-1HbY_eG3Tb6PTOCCgLMc/s320/Screen+Shot+2015-05-07+at+18.54.03.png)
テンプレートのLabelは、このフォントの上下マージンが無い状態でレイアウトしてくれる。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPpbcZiqjjXNfinswFjgF8NFJ7Ai_aJayvW5ixqIO87z6q2hWo6i7LNdG-GUgobf6V06w95pBlyCsPlfNVA86aG6fg-ttMx3SCudmM6UNs4uvvo0MRI8CyHO7mGwFBvqk6nElmyeBBSZs/s320/Screen+Shot+2015-05-07+at+19.34.09.png)
左はテンプレートのラベル表示。
右はLowerをGroupにして、自分でラベルを追加した時の表示。(もちろん項目間のスペースは0に設定済み)
テンプレートのように詰めてラベルをレイアウトするのは、頑張ればできなくないが結構大変だと思う。
WatchでのレイアウトではX,Yの絶対座標での位置指定はできないし、(Groupを除いて)要素を重ねて置くことはできないから。
この"詰めれない"というのが、整ったレイアウトにするハードルをかなり上げてしまう。
3. 他アプリとの統一感
Glanceではページをめくって他アプリのGlanceも見る。その際に、フォントサイズが各アプリでバラバラよりは、統一されていたほうが見やすいに違いない。
テンプレートは色々あるが、使われているフォントサイズはほぼ決まっていて、全体でも5つぐらいしかない。
また、大きい文字(=重要な文字)がある位置も、ある程度決まる。
テンプレート全体を見渡してみても、一番大きい文字が、一番下にレイアウトされることは無い。
提供されているテンプレートを使うとよい という締めくくりになるのだが、
この数日、私は、まさにGlanceのレイアウトで悩んでいた。
数が決まっているテンプレートではあるが、選択するのはとても難しい。
でも、自分でラベルを置いてレイアウトするよりは、よっぽど楽 という結論に今は落ち着いている。