meycoのUX&UIデザイン技術メモ

@meycoがUIデザイナー&アーティストとして仕事する上で、役にたった事をひたすらまとめます。ゲームUI強めです。My portfolio site.: http://meycou.com/ & Meyco's thoughts blog:http://blog.meycou.com/

ゲーム【VOXCHRONICLE】で気をつけたUIの話。

f:id:meyco:20130531142034j:plain


こんにちは、5月にリリースしたオクスクロニクルのデザインを作る上で、気をつけたことをまとめます。何かの参考になれば幸いです。

 

コンセプトアート編

前のゲームを飛び越えなければいけなかった。

VOXQUESTというゲームの一応続編ですが、全く別物だったので、フラットなデザインを残しつつ、様々なステージを楽しんで頂くようにつくりました。

また、最初は私が全てのUIからキャラデザまで行う予定でしたが、仕様が膨らみすぎて不可能になったので、背景は別な人が描くことになりました。なので、どんな絵がきてもいいように、無難なUIで纏めています。

 

インデザインは、グルーブコースターを参考に

f:id:meyco:20130531134203g:plain

GrooveCoasterのUXが素晴らしいので、参考にしました。インベーダーかわいい。

あのタップした時の気持ちよさを真似したかったのですが、もっと精進が必要でした。次回作で音ゲー作るときに、もっと研究して取り入れたいと思います。

UI編

ゲームキューブのコントローラーを参考に、誰でも解るUIボタンを作りました。

f:id:meyco:20130531133845j:plain

ゲームキューブコントローラーのUIが良いのが「とりあえず押す」ボタンがわかるということです。画像で言うと、緑のAボタン

これを参考に「初見でも、とりあえずこのボタンを押し続ければ進める」というデザインにしました。
私なんかはチュートリアルをすっ飛ばす人間なので、こういう仕様は大事です。


見れば見るほどゲームキューブのボタン配置素晴らしいなぁ。スマブラではお世話になりました。

 

 スピード感がある仕様だったので、最初から両手持ち&親指使いを想定

f:id:meyco:20130531141921j:plain

前回のVOXはゆっくりめの音楽だったのですが、今回はスピードやボタンの素早い切り替えを想定して作らなければいけませんでした。
なので、人指ゆびを使ってっというのは、あまり想定していません。

 

次に、UIを決める上で大事な5W1Hですが

  1. When(いつ)→外での待ち時間に、腰を据えて(外の光に負けない、解りやすい彩度や明度が必要?)
  2. Where(どこで)→電車の待ち時間や移動時間、家など(同上、プラス、背景を黒ベースや暗い色にした方が目が疲れないのでは?)
  3. Who(誰が)→10代〜30代ぐらいの人。男性が多いのではと推測(文字は小さくても読める年代なのでは?)
  4. What(何を)→ゲームを
  5. Why(なぜ)→そのゲームを遊びたくて起動する(やりこみ要素が必要、図鑑など)
  6. How(どうやって)→何処かに立ちながら、または座って。(歩きながら遊ぶゲームではないので、多少複雑なコマンド入力でも大丈夫なのでは?)

 という事になりました。これらは私一人で決めたわけではなく、プロマネさん達で話し合った結果、気づいたら要素的に全部入ってた。という流れでした。
次からはこういう話もちゃんと出来るようになりたいです。

 

また、iphoneに親指2本を 使うと、画面の隠れる範囲がかなり大きくなります。
今回は敵キャラもたくさん出てくるので、殆ど画面が埋まります。なので、ボタンは普通のボタンよりもコンパクト気味に作っています。

f:id:meyco:20130531142649j:plain
初代VOXQUEST

f:id:meyco:20130531142034j:plain
今回のVOXCHRONICLE

 

ですが、「ボタンが小さくて、押しにくい」というご意見も頂きますので、これは今後改善していかなきゃなぁと思ってる次第です。


今回は背景&ボスキャラやメッセージ、ゲージなどのUIがちゃんと見えるように、アイレベル(地平線のこと)を下げています。ぱっと見はスッキリしましたが、ボタンはもう少し内側に大きくしても大丈夫だったかもしれません。

 

次回は、お恥ずかしながら、VOXCHRONICLEの反省点と解決策をまとめます。
ゲームの方もぜひ遊んでくださいね!

f:id:meyco:20130531143747p:plain