Android WatchFaceのデザインあれこれ
こんにちは、ドラクエ１０がオンラインなのにソロで十分に遊べると聞いて今更やっている内藤です。
確かにソロで面白い！
さてAndroidのWatchFaceはAppleWatchと違って単体で時計デザインができるのが売りですね。
※AppleWatchは時計だけのアプリは配信できないそうで残念。
社内でWatchFaceを開発されるとのことでデザインを担当するチャンスがやってきたので作ってみました。
Google Playで公開中です！
https://play.google.com/store/apps/details?id=jp.co.yumemi.speedometer
車が好きなのでメーター風なものを！
車メーターのデザインは かなり多いのでデザイン的にはとがってないですが、個人的にアナログ表示とデジタル表示、そして日付が表示している物が欲しかったのでまとめてみました。
さらに電池表示もガソリンに見立てて入れてみました。
実はアナログ表示とデジタル表示の両方が入った時計って少ないみたいです。
個人的にはパッとみて何時かを把握できるアナログは好きですし、電車に乗る時は分を細かく知りたいのでデジタルがあるとより嬉しいです。
さらにスマートウォッチは電池が減るのも早いので電池メーターと個人的に曜日はわかるけど日付は気にしないタイプなので日付もあって嬉しいということで自分の希望通りになりました。
さてここからWatchFace デザインのお話です。
作ってみるとWatchFaceには色々なお作法があります。
情報が英語のもので会社の方に教えてもらえなければ気付かなかったことが多かったです。
■WATCH FACE DESIGN GUIDELINES
http://wear.ustwo.com/stories/2015/2/25/watch-face-design-guidelines
日本語に翻訳をしている方もいらっしゃってとても参考になりました。
http://www.andoh.org/2015/03/watch-face-design-guidelines-by-ustwo.html
１）丸型と四角型
AndroidWatchはAppleWatchと違って端末の種類がたくさんあるのはご存知かと思いますが、大きく分けて丸型と四角型がありますね。
デザインもそれらに合わせて作る必要があります。
丸型の代表がMoto360ですね。カッコイイ。
四角型はかなり多いのですがここでは僕がもっているZenWatchの貼り付けてみました。
丸型は見たまんま丸型ですがMoto360のみアゴと呼ばれる部分があります。なので正確な丸ではありません。
これが特殊なタイプなため少し気を使ってデザインをする必要があります。
権利系の話で正確な丸ではないということで仕方ないですがどうせなら丸が良かったですね。
ということでこんな感じになります。
・他の丸型はそのまま丸なので気にせずデザインでOKです。
・四角型は丸型の角がそのまま使える感じです。一番表示領域が広いですが丸型のことも考えると隅っこがデッドゾーンになります。
重要な要素は角には置かないようにしましょう。
このように表示できる領域が違うのでそれを踏まえてデザインをすればOKです。
端末毎に表示を切り分けることは可能ですが、面倒な場合はMoto360で見れるようにしておけば安心です。
四角の隅々まで使いたい場合は複数パターン用意しましょう！
２）解像度の違い
スマホ同様Watchも端末ごとに解像度が違います。
Moto360は上記図のように 320 x 290。
四角型は 320 x 320 だったり 280 x 280 だったり、最新機種では400 x 400とか。
しかし、ここは多くの機種でよく使われている320 x 320がよいでしょう。
320 x 320 を基準に丸型、四角型ともに作ると良いと思います。
ということでmoto360用に320 x 290に収まるようにデザインすると良いと思います。
余裕があれば四角用 丸用と分けるとなお良いという感じでしょうか。
ただ四角い端末が多いので四角い専用のデザインもやっぱり捨てがたいですね。
３）アンビエントモード（白黒画面）
WatchFace作る上で重要なアンビエンスモードです。
消費電力を押さえるために画面が白黒になっているのですが、このモードが非常に重要です。
基本的にカラーで表示しているよりもこちらの白黒で表示されている時間が長いので丁寧に作る必要があります。
デザイン画像を作成する上での注意点として、ただ白く塗ればいいということではなく格子状に塗りつぶす必要があるということです。
こんな感じ
３倍に拡大
格子状にする理由として消費電力を下げるということもありますが、実は画面の焼きつきを防止するという役目があります。
AndroidWatchFaceをよく見ると表示位置は固定ではなく、ランダムで盤面が少しだけ動いています。
これが先ほどの格子状と相まって常に光る場所をなくすということになり画面の焼きつきを防止しているようです。
よく考えられてる！
ただし注意点として格子状にしていても針などの回転体の真ん中は格子状にしていても常に発光する可能性があるため、中心点になる部分は黒抜きにします。
例えば針の軸部分ですね。
また白い部分が少ないほど電池の消費は抑えられるため白い部分は極力減らします。
上記のような所を注意して画像を作成します。
カラーと白黒を作成しなければならないため、おのずと作成画像は倍になります。
もし丸と四角でデザインが少し変わるのなら変わる部分の画像作成も増えますね。
作成する画像の目安
- カラー
- デジタル時計の数字画像（０〜９）
- 長針
- 短針
- 秒針
- 電池
- 月日
- 背景などのデザイン
- 白黒
- 上記の白黒版
その他表示したい要素によっては画像は増えます。
またその他にもアプリとして登録する際に必要な
・宣伝用画像
・スクリーンショット ２枚
・アプリアイコン
が最低限必要です。
そのような形で作成すればオリジナルのWatchFaceが作成できます。
初回ということで簡単に作れるデザインで作成してみましたが個人的には楽しかったです。
次回作も着手中ですのでご期待ください！
