中村勇吾さんによる、新INFOBARのUIの作られ方解説

「iida UI Virtual Touch」(http://www.au.kddi.com/original-product/a02/virtual-touch/ )はもはや仕様書や動画では不可能な画面の動きのディレクションのために作られたデモを元に作られた、という話がなるほど、と思ったのでまとめました。
4
Yugo Nakamura @yugop

INFOBAR A02のUIがウェブで試せる 「iida UI Virtual Touch」 http://t.co/nYauCgQN

2013-01-24 15:48:10
Yugo Nakamura @yugop

発表会ではあまらフィーチャーされませんでしたが、ベージュのキーを押すと起動するList viewというのが結構気合い入っています。ローカル、クラウド上の様々なエントリーをシームレスにブラウズするExplorerのようなもの。無駄にウネウネします。#infobar

2013-01-24 16:20:42
Yugo Nakamura @yugop

あと小山田さんのサウンドデザインがかなり良い感じです。操作音、着信音、目覚しアラームも、新しいスマホの音と呼ぶべきものから、コーネリアス印の楽しい音までバラエティに富んでます。例の「あ」って鳴るやつもあります。(笑) #infobar

2013-01-24 16:29:16
Yugo Nakamura @yugop

アイコンやテーマもさりげなく刷新されてます。丸と四角の微妙な中間どころの外形をもつ新しいフォーマットを作りました。「デコレーションパネル」というビジュアルアクセントとなるパネルがたくさん入ってます。デザインはすべて @HYBRIDWORKS さんのお仕事です。 #infobar

2013-01-24 16:37:35
Yugo Nakamura @yugop

フォントもinfobarのためにデザインされたものです。 @motla さんによるDeltroフォントをベースにしています。日本語はモリサワ新ゴです。 #infobar

2013-01-24 16:40:16
Yugo Nakamura @yugop

「ぷにぷに操作が気持ちいい!ようかん目指した新INFOBAR」http://t.co/TfZiN74G

2013-01-25 01:40:33
Yugo Nakamura @yugop

「iida UI Virtual Touch」 http://t.co/nYauCgQN ですが、かなりの精度で実機の動きが再現されています。というか逆に、このデモを手本にして実機のUIが実装されてるんです。 #infobar

2013-01-25 09:50:58
Yugo Nakamura @yugop

(続き) ここまでの動きになると、もはや仕様書や動画によるディレクションは不可能で、Flash上で完全に実働するデモとプログラムのコードによるディレクションをしています。実装側はそのプログラムをAndroid文脈に変換する作業をします。早くて正確なやりとりが可能になります。

2013-01-25 09:59:28
Yugo Nakamura @yugop

(続き)その開発用デモをウェブコンテンツに仕立て上げたものが、http://t.co/nYauCgQN となります。ちなみに今後公開予定のTVCMのモーションもそこから生成しています。一つのコードから、実機/ウェブ広告/TVCMをパブリッシュする手法的実験をしています。

2013-01-25 10:08:10
Yugo Nakamura @yugop

(続き)ちなみにそれらのプログラム/デザインの開発をほぼ1人で行ってきたのが、弊社の @alumican_net さんとなります。

2013-01-25 10:12:51
Yugo Nakamura @yugop

私からは以上となります。

2013-01-25 10:13:26

コメント