Jetmanブログ

株式会社JETMANの中の人が、ゲームエンジンやUI/UX、クリエイターのキャリアデザインについて語ります。

UIデザイン道・その3「UX Flow(画面遷移図)とプロトタイピングは実装するエンジニアにとっても有用」

改めてUX Flowの重要性を感じる

前回は設計を行う上でUX Flowの重要性を語りました。我々の開発プロセス上では、UX Flowで、ペーパープロトタイピングと同様に目で追いかけられるインタラクションや操作感の検討を行います。また、クラウドを含めた開発全体を見渡した際、UX Flowをエンジニアと共有することで、企画(デザイナー)側が意図している見せ方を理解した上で、ロジック設計に臨めるメリットがあります。つまり、UX Flowがデザイナーとエンジニアのブリッジになるということです。

f:id:jetmanblog:20150227164310j:plain

UX Flowで仕様検討、プロトタイピングでインタラクションの検討

例えば、サーバ・クライアント間でのAPI仕様を検討する際に、UX Flowのように状態遷移、正常形・異常形の洗い出しが出来ないと、エンジニアにとっては、何をどのようにまとめてAPIの仕様を考えればよいか、設計側の意図が伝わりません。UX Flowでエンジニアリングの全体設計が行えた上で、ユーザインタラクションに関して、良い・悪いを検討するためにプロトタイピングは重要です。

プロトタイピングの手法

プロトタイピングツールの制約もあると思われ、ページトランジションで済むような仕様であればツールを使っても良いと思いますが、我々が手がける案件では、パーツトランジション、つまり画面遷移ではなく、一つの画面の中で要素が変化する場合には別のプロトタイピングの手法が必要になります。また、3D的な表現要素を含む場合も最近では多く、デザイナーが意図する演出をエンジニアに伝えるためには、AfterEffectのようなコンポジットツールFlashのような詳細なインタラクションを再現するツールを併用しています。

f:id:jetmanblog:20150227164222j:plain

当然、プロトタイピングして、皆が良いと思う結論を出した上で、実装に臨まないといけません。そういったツールを使うプロトタイピングで重要なのは、例えばアニメーションの移動速度や補間カーブが数学的にエンジニアに伝わること、また、3D的な空間配置を伴う場合には、その空間的な位置関係が数学的にエンジニアに伝わることです。

f:id:jetmanblog:20150227164238j:plain

トランジションのトレンド

最近注目するプロダクトでは、知人が関わっているPebble TimeというSmart Watchがあります。Pebble TimeのUIでは、上記のパーツトランジションを駆使して、日本のゲームのようなポップな世界観を構築しています。我々としても、画一的ではないUI/UXの価値観を見出したいという想いで、様々なプロジェクトに挑んでいます。機会があれば、そのような事例をお伝えしたいと思います。


株式会社ジェットマン|アプリ開発・UIデザイン

ゲーム領域|学科|宝塚大学 東京メディア・コンテンツ学部