2017年3月18日

箱を積み上げていく様なApple Watch用 Custom Watchface

フォントを起こせる様になったので、今回はこの様なwatchfaceを作ってみました。時刻に合わせて数字を記載した箱が積み上がっていく様なウォッチフェイスです。これで09時20分58秒です。


動画はこちらです。09時14分47秒〜53秒と09時17分56秒〜09時18分02秒あたりです。


Instagramにアップした真正面からの動画。08:57:58〜08:58:15

U Tさん(@utdesign)がシェアした投稿 -

イラレでの作業風景です。312x390の領域内でどの位の位置、大きさで表示するかの検討。イラレでパース感のある変形って初めてやりました。


で、フォント化し(左から0〜9。中村至男さんっぽいですかね?)、


完成。これは04時58分59秒。12時ちょうどだと0の箱が6個並ぶだけになります。全体の表示位置はもう少し下でもいいですね。


で、そもそもこのwatchfaceのデザインは最初はこんな全然違うものでした。「へ」の字を積み重ねていく様なウオッチフェイスです。


これをフォント化し、


作ってみたのですが、上のブルー1色で同ピッチのままではあまりに時刻が分かりづらいので(まぁそういうデザインなのですが)、もうちょっと実用的になる様に、時、分、秒間で少し間隔を広げ、色を変えてみたのがこちら。7時25分49秒です。しかし、多少は分かりやすくはなったものの、そもそもデザイン的にどうもイマイチ。。。で、遠目に見るとビルの夜景っぽくも見えてきて、だったらビルっぽくして、ついでに分かりやすく数字も表示したらどうよ、ということで出来たのが最初のものになります。


最後に腕に巻いた状態。02時25分41秒。あまり高く積み上がってない、この位の積み重ね具合が良いですね。


今回のウォッチフェイスはアニメのキャラ等を使用しない、Apple Watchでは初のフォントも含めたオリジナルな私デザインのウオッチフェイスになるかと思います。(時刻の経過で何かしら積算していく様な表示手段は世の中には多々ありますが。)ゼロから始めてちょっとずつやってきたApple Watchでのウォッチフェイス作りですが、2ヶ月程でここまで出来る様になりました。以上、Apple Watchでの新watchfaceのご紹介でした。

Apple WatchでSYD MEADなwatchface

Pebbleで作っていたwatchfaceの移行を色々やっています。今回はSYD MEADさんによるTRON用のフォントのwatchfaceを作ってみました。(Pebbleで作った時のアップはこちらです。)下の画像で10:22です。


別バージョン。10:22、03月16日、20秒、です。Pebbleの時は数字の画像をドット絵で作り、プログラミングで時刻に合わせてその画像を表示していたのですが、今回はフォントを起こしたので、もうどんな大きさの文字にしようが、プログラミングの記述も無しで常にアウトライン画像で綺麗に表示されます。素晴らしいー。


Pebbleで作っていた時の画像。もう3年も前ですね。数字の解像度は66x66ドットでしたので粗々でした。(それでもオリジナルなウォッチフェイスを作れるということで満足してましたが。)



以下、今回フォントを起こした手順です。まずはCADソフト(Vellum-Nitrogenを使用してます。)で形状を作ります。このTRONフォントは16分割された正方形とそれに内接する円だけで構成されているので、非常に簡単です。この位ならイラレでもできますが、やはり作図的な作業はCADソフトが早いですね。


で、できた形状をEPSで書き出しイラレに持っていき、


フォント作成アプリ(Glyphsを使用)にコピペしてあとは大きさやスペース具合を整え、


完成したら.otf書き出しをしてフォント化。でそのフォントをXcodeのwatchKitAppにドラッグ&ドロップで使用可能になります。


オリジナルなフォントは初めて作ったのですが、簡単ですね。フォントが起こせるということは1を表示する時に1という数字でなくても何かしらのイラレで作った絵でも良いということになりますので、また表現の幅が広がります。以上、シドミードさんなウォッチフェイスを作ったことのアップでした。

2017年3月13日

DESIGNER'S FILE 2017に掲載して頂きました。

昨日発売のデザイナーズFILE2017という、プロダクトデザイナーと建築家が掲載されたデザイン年鑑に掲載して頂きました。昨年、当ブログ宛に出版社から掲載のお誘いがあり、せっかくなので掲載して頂くことにました。292ページもある、結構分厚い本です。


で、私のページはこちらです。一部モザイクですみません。名前がUTDESIGN(ユーティーデザイン)で五十音順の掲載だったのでプロダクトデザイナーのトリのページに掲載して頂きました。知り合いも何人か掲載されており、基本1デザイナー1見開きですが、よりお金を払えばページ数はいくらでも増やすことは可能でした。(そこまではしませんでしたが。)
ページには自撮り画像が必要だったので止むを得ずiPhoneで撮影したのですが、どうせならということで某Takramさんっぽく、白Tに黒ジャケ、笑顔、モノクロ画像、にしてみたのですが、、、非常に残念な感じになったので、とりあえずTシャツは昔SYD MEAD JAPANで販売したTシャツにフォトショで入れ替えておきました。


以下、各ページのアップ。本業の会社員としての製品デザインの仕事も載せようかとも思ったのですが、当ブログ宛てに掲載のお誘いを頂いたので、「UTDESIGN」としてデザインしたモノ達(=プライベートでの趣味のデザイン活動)を掲載することとしました。他の方々のページが本業としての仕事の成果を営業も兼ねてキチッと掲載しているのに対し、私のページだけ思いっきり「趣味の披露」になってて申し訳無い感じです。。

まずはSYD MEADさんとの仕事。オフィス設立40周年記念で出した腕時計とそのパッケージ。もう7年も前ですね。


Pebbleのウォッチフェイス。原稿と画像出しは昨年10月位でしたので、まだPebbleが無くなる前でした。このPebble Time本体の画像はPebbleのオフィシャルのテンプレート画像がイマイチなので、現物を撮影後それを下敷きにほとんどフォトショで描いてます。


3Dプリントネタとまだamazonで絶賛販売中のアクリル製iPhone、Apple Watch充電スタンド。3Dプリントは最近はやってないですね。。


ということで、腕時計系出なく、デザイナーとして本に掲載されるのは久しぶりだった、デザイナーズFILE2017に掲載して頂いたお知らせでした。一応amazonへのリンク張っておきます。

2017年3月12日

Apple Watchでオリジナルなwatchface その6

Apple Watchでのwatchface作りが止まらんです。パラパラアニメが簡単に実装できるとPebbleではなかなか出来なかったwatchfaceの妄想がいろいろ広がります。
ということで、まずは動画をどうぞ。(久しぶりにFull HDでアップしました。)


以下静止画で解説。まずはAKIRAより健康優良不良少年腕時計。金田のバイクの1シーンです。コマ数はオリジナルの半分位に減らしていますが、これで十分です。15fps位は出そうです。最初、Pebbleで作ってたデコ助野郎時計(こちら。もう4年も前です。)のフルカラーアニメ版を作ろうと思ったのですが、ビジュアル的にこちらのがカッコ良いので、まずはこれを作りました。このシーンがAKIRAの予告編で出て初めて見た時、この1カットだけでものすごーく期待しましたね。


エヴァなwatchfaceは結局こんなになりました。時刻表示のスペースを広げ時刻と日にちを表示する様にしました。基本ループアニメなので、一定期間で上下の六角形がパラパラしてます。使用した7セグのフォントが9の下線が無いとか、1だと左に寄ってしまうとかイマイチのものですが。。


前にアップしたX-WINGの照準風。ループアニメ向き。


時刻を指差さないミッキー時計のミッキーも上下に動くアニメにしました。


森雪も口を動かしてみました。


口パクその2。小さくてほとんど見えないですが。


アニメという訳ではありませんが、こんなのも作りました。ワイプアウト的な。カスタムフォントを入れるだけでもそれなりのが出来ますね。


ただの7セグなwatchfaceなど。今見るとエヴァのwatchfaceもこちらのフォントを使用すれば良かったですね。


以上、その後のApple Watchのウォッチフェイスのアップでした。

2017年3月4日

Steve Jobs WatchをTさんがしていた!

少し前、スティーブジョブズが生前に使用していたセイコーの80年代の腕時計がオークションで400万円オーバーと言うすごい値段で落札され(ものはこちら)、その後、セイコーがアパレルメーカーのナノ・ユニバースと復刻させていたりしましたが(こちら)、なんと職場のTさんが、80年代当時から30数年、ずーっと使用していた1本の腕時計がまさにそれと同じモデルの黒文字板だったので驚きました。当人はそんなことは知らずに、今こんなことになっている事をお教えしたら驚いてました。


背面の刻印6431-6030から同じモデルであることは間違いないでしょう。Jobsのは1983年製造のものですが、Tさんのは1982年製造のもののようです。(一部モザイクかけててすみません)


1回だけオーバーホールをかけたけど全く壊れず、電池交換のみし続け、ずっと使用しているそうです。ガラス周りとかベゼルの外周がいい感じに黒が剥げてきていてシルバーになっており、逆にオリジナルよりもよい気がします。


セイコーの復刻版の発売は3月10日のようですね。amazonにはレディースの小さい方のみありましたのでリンク張っておきます。


以上、身近な方がジョブズウォッチをしていて驚いた、のアップでした。

Apple Watchで改札デビューと注意点

やっと2月いっぱいでPASMOの定期が切れたので、Suicaに移行し、Apple Watchでの改札デビューを果たしました。下は初改札の時の画像です。


下は通過直後のApple Watchのスクショ。事前にビックカメラのView Suicaカードも新規加入しWalletに登録していたので、それ経由でSuica残額1,000円以下になったら3,000円自動チャージする様にもしました。


最初はApple Watchでの改札は、上手く反応しなくてバタンとか閉まるとやだなぁ、と、緊張気味に大袈裟なくらいしっかりとセンサー部に当てていたのですが、慣れるとほんとに楽です。Apple Watch側をセンサーに向けなくても(手のひらが下を向いた状態でも)反応しますし。ただセンサーはやはり左側に欲しいですね。欲を言うと左の上面でなく、側面に。
また、ここまで反応が良いと、小さいピカチュウの人形とか、紙で適当に作ったカードとか、野菜とか、スタバのコーヒーとかMESHとか、どう見てもSuicaなど入りそうもないものを手に持って改札をピッとかすると面白いですかね?(実際は腕に巻いたApple Watchが反応)

で、注意しないといけないのはApple WatchでSuica等を使用する場合、パスコードロックが必須なのですが、ロック解除しないまま改札を通ろうとすると思いっきりバタンと閉まりエラーとなります。Apple Watchは腕から外すと自動でパスコードロックがかかるので、例えば腕から外して(ここでパスコードロックがかかる)充電し、そのまま腕に巻き、何もせずに改札を通ろうとするとダメです。パスコードロック中は画面上の方に小さく青いカギマークが出ているので、腕に付けたらまずそのマークを消す習慣をつけておいたほうが良いでしょう。(一回解除すればその後は腕から外さない限り大丈夫です。)また万が一、パスコードロックを解除してても改札がエラーになった場合は、そのまま画面を強く押すとヘルプモードに入れますので、駅員に清算などを頼む場合はそうしましょう。ただし、清算などの為に腕から外すとまたパスコードロックがかかってしまうので、駅員にApple Watchを渡す場合は腕から外し、パスコードロックを解除し、右ボタン2度押しでSuicaモードにし、そこで画面強く押しヘルプモード、が良いかと思われます。

以上、Apple WatchでのSuicaデビューの話でした。

Apple Watchでオリジナルなwatchface その5

その後のApple Watchでのwatchfaceです。EVAっぽいのを作ってみました。かなり暗く粗いのですが、動画です。(この位暗くしないと赤い部分がとんでしまうので。。)


静止画は静止画でモアレってますが。


作成中の図です。2次元CADアプリで製図して基本の形状を作り、イラレに持っていきテキスト等を入れ、最後にフォトショに持っていきアニメーションの検討とコマ撮り画像の書き出し、と、意外と手間かかってるのですが、結果どうもイマイチです。


エヴァっぽいのを作る前に時刻表示にカスタムのフォント(いわゆるデジタルの7セグメントのフォント)を入れたかったので、その為に試しで作ったもの。フォントの追加は非常に簡単でした。自分でフォントを起こせばそれだけでかなりオリジナルなwatchfaceが作れそうです。


で、今日は宇宙戦艦ヤマト2202を観てきたのですが(いやー、良かったです。今後の展開に期待!)、Pebbleでも作っていた森雪のwatchface(こちら)をApple Watchでも。Pebbleではフキダシを入れ、そこにセリフを入れていたのですが、今回は字幕風にしました。また、同じ画像ではつまらないので、別のカットを使用。これで11時27分です。


こんなのも作りました。こちらの方が字幕っぽいですが、森雪が小さいですね。


以上、その後のアニメ系なApple Watchのwatchfaceでした。

2017年2月25日

Apple Watchでオリジナルなwatchface その4

その後も地道にApple Watchでのwatchface作りを進めています。現在はPebbleで作っていたものの移植を色々試しています。とりあえずまずは動画を撮りましたのでどうぞ。


以下、各ウォッチフェイスの解説です。まずはSTAR WARS Episode4でのX-WINGの最後の照準風watchface。Pebbleではプログラミングで動く線を描画していたのですが(こちら)、Apple Watchではパラパラアニメで表現しています。基本ループアニメなので、徐々に狭まる赤い線はありませんが。入れるとすると膨大な量のアニメ画像が必要になりますのでやってません。(現状で8コマのループです。)また、黄色い線は少しグローを加え、よりオリジナルに近くなる様にしています。



作成中の図。左下がオリジナルのスクショ。左上が光ってる風、背景の黒も若干黄色っぽくしています。右が線のみのものです。


まばたきをするベイマックスなwatchface。Pebbleの時はプログラミングでランダムなタイミングでまばたきさせていたのですが、Apple Watchでは一定間隔でまばたきします。そもそもApple Watchは腕を振って点灯させても数秒で消えてしまうので、それで良いかと思います。黒目は正円でなく、若干楕円にして傾けているのですが、ほとんど分かりませんね。Pebbleの時は目を閉じた時のまぶたの輪郭を1ピクセルの線で描いてましたが、今回はまぶた部を少しグレーにして一段奥まっている様な表現にしています。


リアルバージョン。Pebbleでは74色だったのでこういう微妙なグラデは辛かったですね。オリジナルは意外と目の間隔が開いています。


トロのwatchface。どうもドット絵なトロはApple Watchには似合わないので、CGな方のトロで。腕をジタバタさせています。黒バックだとこんな。


背景をトロの部屋に。やっぱ落ち着きます。


で、動画にはありませんが、別のwatchface。背景黒前提なwatchfaceとなるとやはりパタパタ時計風なwatchfaceを作りたくなりますが、ここはJAZのDERBYのシリンダー回転メカデジ風のwachfaceにしてみました。


シリンダー部分はモデリングしてるのですが、結局最後はフォトショでグラデを調整しています。(ハイコントラストなツヤツヤした円筒にしたかったのですが、どうしても真正面からの描画で円筒っぽく見えなかったので。)


ちなみにJAZのDERBYという時計はこちら。1970年代の電磁テンプ式のメカデジです。(昔のブログより画像引用)


ムーブメントはこんな。数字を印刷した円筒を回転させて時刻表示をします。カッコイイ。


で、Apple WatchのアプリはiPhoneアプリの下にぶら下がる感じで入れてますので、現状特に必要ないのですが、一応iPhone上にもオリジナルwatchface用のアプリがいます。(nextをタップで各ウォッチフェイスの説明のページになります。)そのうち何かしら連携したアプリとかにするかと思われます。


以上、Apple Watchでのwatchface作りのその後、でした。