2017年3月28日

Apple Watch用デジボーグ

これまで何度となく作ってきたSEIKOのG757、通称デジボーグのwatchfaceですが、Apple Watch用のを作ってみました。秒針のアニメは面倒なので今回は作ってません。


ELバックライト点灯中っぽい青バージョンも作ったのですが、5秒おきにこのブルーと上のグレーの背景が切り替わる2コマアニメにしました。


4年程前にi'm WATCHバージョンを作った時(ブログでの紹介はこちら)のイラレデータがあるので、それをちょこっといじってApple Watch用に修正。オリジナルに忠実な7セグのフォントもこのデータから起こせるのですが、これも面倒なのでやりませんでした。


以上、Apple Wtachデジボーグを作ったよ、なアップでした。いやー、しかし微妙なドロップシャドウとか、アンチエイリアスとか、Pebbleでは出来なかったことが普通にできて良いですね。

2017.5.20.追記・・・こちらにほぼ完成したApple Watch版デジボーグアップしていますので、よろしければどうぞ。

2017年3月25日

Apple Watch用Mickey Digital Watch

以前に時刻を指差さないミッキーのウォッチフェイスを作りましたが(こちら)、今回は立ってもおらず、寝転んで時刻表示をデジタルで表示しているミッキーウォッチフェイスを作りました。


動画です。ミッキーは上下に動いていますが、動きはもうちょっと控えめでも良かった気がします。

背景のグラデはオリジナルは放射状の線がある様なグラデですが、面倒なのでただのグラデです。時刻表示のフォントはミッキーロゴ風とか、デジタルな7セグとか試しましたがどれもイマイチだったのでデフォルトの太めのフォントにし、色も白に落ち着きました。


コマアニメ用の画像作成のフォトショ作業さえ終わればすぐに完成するwatchfaceですね。以上、Apple Watch用ミッキーデジタル時計を作ったことのアップでした。

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秒。全体の表示位置はもう少し下がいいですね。


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


これをフォント化し、


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


最後に腕に巻いた状態。02時25分41秒。今回のウォッチフェイスはアニメのキャラ等を使用しない、Apple Watchでは初のフォントも含めたオリジナルな私デザインのウオッチフェイスになるかと思います。(時刻の経過で何かしら積算していく様な表示手段は世の中には多々ありますが。)


ゼロから始めてちょっとずつやってきたApple Watchでのウォッチフェイス作りですが、2ヶ月程でここまで出来る様になりました。以上、Apple Watchでの新watchfaceのご紹介でした。

2017.03.25. 追記・・・その後、色を付けたバージョンとか、HR. MIN. SEC. の表示を付けたバージョンを作ったりとかしてました。が、どちらもイマイチ。


また、数字の箱を上に乗せていくのではなく、下から上に持ち上げて行く様な表示にしたら常に最下段横1列を読めば現在時刻が分かりやすいと思ったのですが、数字が順次上に上がっていくということはそれぞれの位置のパースに合わせた数字を作らねばならないので非常に面倒なのでやめました。下右はそれ用に途中まで作った上が0で最下部が9のバージョン。線も若干太くしてます。


と、いろいろやって下が現状最終バージョンです。デフォルトでは全体的に最初のものより下めにレイアウトし、スワイプで上下位置が調整できる様になってます。


以上、その後の箱積み上げwatchfaceでした。

2017.04,08. 追記・・・結局上の追記で面倒だからやらなかったことをやりました。数字が順次上に上がっていくバージョンです。下はイラレでのフォント作成風景。


で、完成形。08時19分29秒。パッと見は同じですね。


下端が常に0で数字を順次上に積み上げていく前のバージョンでは下図左の様に箱の上端の数字を読まないと時刻が分からなかったのが、今回のバージョンでは最下部横1列を読めば時刻が分かる様になりました。うーん、分かりやすいー



・・・しかし、分かりやすくなったものの、そもそも文字がかなり小さいので、読みにくいのには変わりないので、さらに改良を加えました。通常は下の様にこれまでと同じなのですが、


画面を上にスワイプすると大きい文字で現在時刻、ついでに、年、月、日、曜日が現れる様にしました。これは分かり易すぎるー、というか上の箱群が時刻表示手段でなく、ただの時刻で動くアニメに成り下がってしまいましたw が、まぁ、これはこれでよろしいかと。


動画も撮りましたのでどうぞ。(今見るとApple Watchに付いたホコリが気になります。。)


これでこのwatchfaceも一段落かと思われます。以上、箱積み上げ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でした。