APPLE WATCHのウオッチフェイスのデザイン

All

※SNS等からこちらのページに直接いらっしゃった方へ。ご訪問ありがとうございます。7ページに渡る当記事の最初のページはこちらになります。Clockologyを使用したフェイスデザインに関しては前のページのこちらからになります。

2024.9.27.追記・・・なんとほぼ1年ぶりの追記です。この記事も7ページ目に突入しましたw
で、先週ついにApple Watch Series10を入手し(こちらでご紹介してます。)、早速Clockologyをインストールし、オリジナルフェイスの作成に取り掛かりました。
私はほぼ1年ぶりのClockologyなんですが、画面デザインのUI自体はほぼ昔のままなので大丈夫でしたが、どうもデータの保存具合とか、有料版は何がどう良いのかなど、まだいろいろと把握しきれていません。しかしフェイスは普通に作れそうなので、昔に作ったフェイスの画面解像度の異なるApple Watch 10対応や新しいデザインのフェイス作りなど徐々にやっていこうと思います。

ということで、最初に作ったのはやはりセイコーの80年代のデジタル時計のデジボーグなフェイスです。これまでのデジボーグなフェイスとは異なりジェットブラック外装に似合う、黒ベースでデザインしてみました。

と言いますか、もはやデジボーグな面影は左上の秒表示のところくらいですがw モノトーン基調でシンプルに仕上げました。また秒のグラフィック部は未点灯のバーの部分もうっすらと見えてる様にしました。

しかし今あらためて良く見てみると曜日の木の上端が欠けてますね。曜日表示はシステムの言語に依存するので日本語の表示になるのですが、Clockologyのアプリ上でデザインしてる時は英語表記のままなので(このあたり修正して欲しいです。)、微妙な調整で抜けることがあります。

腕に巻いた状態。カッコイイ。ちなみに画面はスクショを取った画像をApple Watch上で表示させている状態です。(リアルタイムで動かしている状態での撮影は秒のグラフィックの状態とか良い感じのタイミングでの撮影が面倒なので)

グレーの四角部分のみ有彩色案もありかなと思います。

動画です。

次は少し前にCMFのウオッチフェイスのデザインコンペに応募し(こちらでご紹介)、落選した案をApple Watchで動く様にしてあげたもの。

CMFの時のものにちょっと修正を加えてます。英語表記で入れていた曜日を日本語で大きく入れるのはイマイチなので歩数に変更し(9,520部)、曜日は中央下部に縦で入れました。

またちょっと間が空いていたので時刻の下にバッテリー残量のバーを追加してみました。30は日にちです。

下はCMFのコンペ応募時のデザイン検討中の画像です。脳と脊髄の断面をモチーフにしていますが特にそれに根拠はありません。なんとなくテクノな感じのビジュアルを作りたいと考えていく上でどこかよりどころが欲しく、やってくうちにこうなってきました。

私的にはかなり気に入ってるデザインです。眺めてたらアニメ化して動かしたくなってきましたw

次はオメガスピードマスター ダークサイドオブザ・ムーン アポロ8号モデルのフェイス。外装オールブラックなジェットブラックモデルには良く似合うフェイスです。前に作って保存していたデータを再読み込みしたのですが、特に問題なく動いてくれました。ベルトはmoonswatchのものですが、ベルト幅20mmに対してベルトのアダプターのラグ幅が22mmなので、ラグにスキマがかなりあります。

腕に巻いた状態。かなり頭でっかちな見えですが、四角い黒いスピマス、良い感じです。

オリジナルとツーショット。

次はムーンスウォッチ系を作ろうと思い、このパンダなパチスヌーピームーンスウオッチ(こちらでご紹介)のフェイスを作りました。中華なメーカーがパチる前に腕に巻くことができましたw

これもムーンスウォッチのベルトに交換。しかしどうも画像が粗いので作り直すかも。。

普通に時計として見やすいです。

白いパチスヌさんと。パンダだから白いベルトの方が良かったですかね。

以上、ざっくり作ったフェイスのご紹介でした。しばらくはフェイスデザインにはまってそうなので、新しいのが出来次第またここに追記します。

2024.10.1.追記・・・CMFのコンペに応募した案をちょっと修正したので画像入れ替えました。

2024.10.5.追記・・・またフェイスを作成しましたので追記します。まずはCMFのウォッチフェイスデザインコンペで入賞したものです。入賞し、製品にインストールできる様にしてくれたものの、時刻表示のコロンの位置やその他諸々デザインデータどおりにできていなかったので、修正を何度も依頼するも全く応じてもらえないので、Apple Watchの方できちんとしたデザインデータで再現してあげました。

CMF Watch Proと並べて。色はCMFっぽいオレンジから黄緑色に変更しました。Clockologyでは無料版では曜日表示を画像で表示することができないので、とりあえず時刻表示の下のバーで表示していた曜日表示のバーはただの仕切り線になってます。(後に有料版に切り替えたら差し替えようと思います。)またアナログ表示部で表示していたバッテリー残量はぱっと見の動きがあった方が良いので、秒表示にするなど変更を加えています。・・・しかしほぼ同じ大きさなのにバッテリーの持ちがCMF Watch Proは余裕で10日以上、Apple Watchはたった1日というのはやはりツライですね。多機能さは圧倒的にApple Watchが上ではあるのですが。。

Apple WatchのOSの言語を英語に変更すれば曜日表示も日本語でなく英語でFRIDAYなどできるのですが、やはりOSの基本言語は日本語にしておきたいので、なんとか日本語表記の曜日でデザインしています。(今見ると金っとでかくいれるのではなく、小さめで金曜日としておいた方が良かったかなとも思います。)

次はこれもCMFのコンペ用に作った、今年パブリックドメイン化された蒸気船ウィリーのミッキーのフェイス。これが入賞し、出れば公の企業がⒸDisneyを付けずにパブリックドメインミッキーを使った初の製品となったはずで、CMFにこのフェイスを出す度胸があるかを問うフェイスでした。手が短く、先も丸いので時刻がわかりづらいので、デジタルでも時刻を表示しています。口笛を吹いてる顔にしておいた方が良かったですかね?

・・・ということで、口笛吹いてるバージョンも作りました。

動画です。蒸気船ウィリーの動画から2コマだけ書き出し、ループアニメにしました。

 

以下はApple Watch Series2に入れていたフェイスの移植ですので、それぞれの詳細は前の6ページ目(こちら)をご参照ください。

まずは東京ディズニーランドのスターツアーズの通路壁面にあったモニターグラフィックスなフェイス。これは以前の画像ですが、

これをSeries 10ならではの、表示領域ぎりぎりまでパツパツに入れてみました。

動画です。よく見るとかなり多機能なフェイスです。

 

ディズニーネタでは自分で時刻を指差さない怠慢なミッキーや、

くねっとしてるだけで時刻を指差さないミニーも移植しときました。どちらも上下に微妙に動いています。

次、箱が積み重なっていき時刻表示をするフェイス。最下段の数字が現在時刻で、下の画像で01時09分36秒です。

動画です。12時25分05秒から15秒です。0〜9までのこの箱状の数字のフォントを起こして作成しました。

 

次、エヴァなフェイス。

動画です。オリジナルはgifアニメなので粗いですね。

映画ブレードランナーなフェイスを2つほど。これはスピナー離陸時のモニターグラフィックスを模したものです。

動画です。後半のアニメーションはAdobeのAnimateで作成してます。

前のページにアップした、オリジナルの映像との比較です。

次はセイコーのテレビ時計を模したフェイスで、画面にはレイチェルが登場してます。

動画です。レイチェルはビデオ通話に出るも場所が気に食わんとブッチされる映像です。

以上、毎日の様に移植作業をしているその後の追記でした。

2024.10.12.追記・・・引き続き、Series2からの移植を進めてますので、追記します。

まずは江口寿史さんに描いて頂いた(このフェイスをお褒め頂いたことに関する記事はこちら)、老人Zの晴子さんのフェイス。画面が広いのでのびのび表示できます。

たまごっちなフェイス。元々Pebble用に作ったものなので、背景粗いですね。

動画です。

金田のバイクなフェイス。

動画です。

金田のバイクフェイスの動画を差し替えただけのミヤコ様なフェイス。

動画です。ループのアニメにするのに苦労した覚えがあります。

 

パチアップルウオッチに擬態した風なフェイス。

下は以前のページより。左がパチなアップルウォッチ。液晶でなく、LEDで時刻が点灯するだけのチープな作りです。

わざわざフォント起こして作ってましたw

白ベースのデジボーグもやはり作っておきました。

宇宙戦艦ヤマトの森雪なフェイス。今年ヤマトは50周年なので、ヤマト好きは盛り上がってます。下の状態で8時32分47秒です。

上のフェイスとは別のカットでも作成。やはりセリフは漫画に準じた縦書きが良いですね。あ・・・あっ・・・あーっ、の焦り具合も良いです。

元となった松本零士さんの漫画のカットは下の左の画像です。バラン星の太陽が落ちてくるシーンの森雪さんです。(右は最初に作ったフェイスのオリジナルのカット。フキダシは別のカットから移植。)

2199版だとこんな。これも3時4分33秒。画像は動画なので森雪さんは口をパクパクしてます。

ついでに沖田艦長の懐中時計も作ってみたのですが、どうもぱっとしませんね。ほんとはこの外周にノット単位のタキメーターがあるのですが、どうも面倒で、、、オリジナルはフルアナログな表示と切り替えられるので、同様に切り替えられる様にClockologyでなくSwiftで気合い入れて作るとかしないとダメですかね。

・・・と、アキラとかヤマトとか昔のネタばかりでもなんなので、本日ヒロアカ7期の最終回なので、リアタイに向けて1つフェイスを作りました。まずは動画をどうぞ。

実際はこれの3倍の1分半の長さで416×496の25MBの動画を背景に貼り付けましたが、全然問題なく再生してくれますね。バッテリーは食いそうですが、良い感じです。
下は一応静止画も撮りましたが、テンポ早すぎて良いタイミングで撮るのむずいですw

・・・以上、また作ったフェイスの追記でした。(まだしばらくはフェイス作りに没頭してるかと思われます。)

2024.10.19.追記・・・アナログなフェイスを作りましたので、追記します。画像を一切準備せず、Clockology上での作業だけでどこまでいけるか試してみました。円周状のカラーリングは全てApple Watchで言うところのアクティビティリング(消費カロリー、スタンド、エクササイズ)、歩数、秒表示です。

動画です。秒は1秒毎に増えていき、リングの緑やグレーの領域はその日の動き具合で毎日変化します。

表示のレイヤー数は21もあります。しかし、どのリングが何の表示だったか、既に覚えてませんw。まぁ、見た目良ければよし、ということで。フォトショやイラレ等を使用せずにClockology上だけでちまちまデザインするのも楽しいです。以上、アナログなフェイスのご紹介でした。

2024.10.25. 追記・・・以前にPebbleで作った、宇宙戦艦ヤマトのコスモレーダーなフェイスをApple Watchでも作ってみました。基本デジタル時計ですが、ガミラス艦の位置を示す赤い矢印は時針、分針、秒針です。ので、43秒あたりにいる秒針の赤矢印は常に移動しています。日にちの下の1811は歩数、3時位置の50%はバッテリー残量です。

で、これもPebbleの時と同様に、リング状に走査線が広がっていきます。(下は走査線が広っがっていく途中の状態です。)Pebbleの時はプログラミングでリングのラインを拡大していき、それ風にしていましたが、こちらではPremiere Proでグラデの円を拡大してく動画で作成しています。またApple Watchは音も出せるので、走査線のアニメに合わせて「ピーンピコーン」と音が出る様にしました。

音ありの動画です。やはりこの音があるとグッとらしくなります。 ちなみにコスモレーダーの画像は2199のものに手を加えて作成してますが、2199のコスモレーダーではこの様な走査線は走ってなかった気がします。(音はしてましたが)ですので、初代のTVアニメ版の走査線のイメージ+2199のビジュアル、という感じです。

MacBook Proの上で。結構カッコイイです。松本メーターなのも作りたくなりますw

常用するには常に音が出るのもツライので、音無しバージョンも作成しています。・・・以上、ちまちまと作成し続けているフェイスの追記でした。

2024.11.1.追記・・・また画像素材などを一切準備せずにClockologyの持つ機能だけで多機能なフェイスをデザインしてみました。これまで使用したことの無かったひと月分のカレンダーや、歩数の履歴を表示する折れ線グラフも表示させてみました。

基本、レイヤーを増やしていき機能をぽとぽと追加していくだけで作れるのですが、各項目の配置と大きさのバランスを整えるのに結構悩みます。(下2枚の画像はリアルタイムの時刻表示させての撮影だとアナログ表示とかいい感じのタイミングで撮るの面倒なので、スクショ撮ったものを表示させて撮影しています。ので、全て同じ時間を表示しています。)

折れ線グラフは棒グラフやドット表示なども選べ、また機能的にも歩数だけでなく、消費カロリー等アクティビティリングと同様の項目が選ぶことができます。

黒鏡面のジェットブラック外装はガラス部との境界が継ぎ目なく繋がっている様に見えるので(液晶画面の存在が感じられない)、表示するフェイスの背景色を黒にすると黒くつるんとした一体型の本体に直接文字が浮かび上がって表示されている様に見えて良いです。

以上、また作成した新しいフェイスデザインの追記でした。

2024.11.8.追記・・・ほぼ毎週の様に追記しています。今回はいわゆるNODE GARDENなフェイスを作ってみました。まずはgifアニメによる正面からの動画をどうぞ。(2024.11.17.追記:全ての画像、差し替えました。)

斜視の動画も貼っておきます。秒の右の3,189は歩数、100%はバッテリー残量です。

 

背景はものすごい久しぶりにp5.jsでコーディングしたのですが、Clockology上でJavaScriptを走らせることはできないので、結局動画を書き出し、背景に貼ってますw

昔からクリエイティブなコーディングの入門として作られるノードガーデンですが、今でもいけますね。プログラミング的には、ある数の点を416×496の画面内をランダムに移動させ、ある距離よりも近づいた点同士を線で繋ぐ、離れたら切るという命令をしているだけです。Pebbleの時はProcessingで作ってそれをI君が作ってくれた、Pebble用にコーディングを書き出す「Pebcessing」を使い、フェイスデザインを楽しんでました。懐かしい。。Apple Watchで同等のことをしようとするとやはり当初やってた様なSwiftでやるしかないのですが、Clockologyのお手軽さを知ってしまった今となってはもうSwiftに戻れないですw

で、昔フォントを起こしたSYD MEADさんデザインのフォント版も作成。ミニマルなノードガーデンとの相性も良く、カッコイイ。

さらについでに久しぶりにMEADさんのフォントを使用したので、こてこてな別案もついでに作成。下の画像、最上段から現在時刻の22時17分、心拍数49、秒数28、11月07日、最下段の00はバッテリー残量で2桁表示にしているので100%は00と表示します。

以上、いろいろ作り込んでいくと最後はこんなミニマルなフェイスデザインに行き着く、という追記でした。

2024.11.10.追記・・・シンプル、ミニマル系なフェイスの後は以前に作ったコテコテにデザインしたオリジナルのフェイスの移植をしました。中央の数字、上段から02時40分58秒、11月10日、です。両サイドの赤いLED風の表示は下から上に流れる様に点灯しています。

本当はもう一回り大きく表示できるのですが、Series 10の画面表示領域の四隅の角Rが大きいので、この様なデザインの場合、角のとんがりが欠けない様にするには表示を小さくするしかありません。

詳細はこちらでご紹介していますが、オリジナルはまだClockologyがない頃にXcodeでコーディングして作成していました。下の画像は当時のデザイン検討中の様子です。

動画です。ジェットブラック外装は額縁感もなく、一体的なつるんとした感じが良いですね。

・・・以上、また昔作ったフェイスの移植作業の追記でした。これで移植作業はほぼひと段落した感じかと思われます。

◀︎ DESIGN WORKに戻る

 

Apple Watch Series 10(GPSモデル)- 46mmジェットブラックアルミニウムケースとブラックスポーツバンド - S/M - 先進的なディスプレイ、睡眠時無呼吸の通知、高速な充電、Suica対応、スマートウォッチ、スポーツウォッチ
Apple(アップル)
¥63,491(2024/09/23 16:12時点)
Apple Watch Series 10を選ぶ理由 — より大きいディスプレイ。最大30%も広くなったスクリーン領域。より薄く、より軽く、より快適な着け心地を追求したデザイン。健康とフィットネスのために重要な情報を届ける先進的な機能。緊急時に助けを呼ぶ安全機能。より高速に充電できるバッテリーは、約30分で80%までの充電が完了します。
Apple Watch Series 10(GPSモデル)- 42mmジェットブラックアルミニウムケースとブラックスポーツバンド - S/M - 先進的なディスプレイ、睡眠時無呼吸の通知、高速な充電、Suica対応、スマートウォッチ、スポーツウォッチ
Apple(アップル)
¥58,592(2024/09/23 16:12時点)
Apple Watch Series 10を選ぶ理由 — より大きいディスプレイ。最大30%も広くなったスクリーン領域。より薄く、より軽く、より快適な着け心地を追求したデザイン。健康とフィットネスのために重要な情報を届ける先進的な機能。緊急時に助けを呼ぶ安全機能。より高速に充電できるバッテリーは、約30分で80%までの充電が完了します。
Apple Watch Ultra 2(GPS + Cellularモデル)- 49mmブラックチタニウムケースとブラックトレイルループ - M/L - 先進的なディスプレイ、睡眠時無呼吸の通知、高速な充電、Suica対応、スマートウォッチ、スポーツウォッチ
Apple(アップル)
¥126,198(2024/09/23 16:12時点)
Apple Watch Ultra 2を選ぶ理由 — スポーツと冒険のための究極の腕時計。ランナー、サイクリスト、スイマー、ハイカー、ダイバーなど、様々なニーズに対応する先進機能を搭載。屈強なチタニウムケースに、サテンのような輝きを持つブラックが新登場。超鮮明な常時表示Retinaディスプレイ。驚くほどの精度を発揮する高精度2周波GPS。健康、安全、つながるためのパワフルな機能。バッテリーは通常使用時で最大36時間、低電力モードなら最大72時間使えます。
タイトルとURLをコピーしました