中村勇吾さんによる、新INFOBARのUIの作られ方解説
-
- いいね！5
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
「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