移植を機にUIを見直してみた

ただいま、新チャリ走を、別プラットフォームにバージョンアップ移植しようと考えています。再度、スマホ版やNintendo3DS版を、プレイしました。

特に、ユーザインターフェイスについては、直さないといけないところが沢山ありました。当たり前のことを、再現性持って、ちゃんとできるように、ワークフローの整理と、最低限のデザインのルール、移植先のプラットフォームに合わせた操作の統一ルールをまとめました。

ワークフロー

  • 画面デザインやワイヤーフレームデザインから入らない。どういうユーザが、どこからゲームを起動してどの画面をたどってどういう体験をするのかという、起動から終了までの一連の流れのユーザ体験を洗い出す。ユーザ体験は、1種類ではなく、インストール時や、再起動時、プレイ目的の違いなど、数種類考えること。
  • ユーザ体験設計を行ったら画面別の必要要素の洗い出しを行う。
  • 画面別の必要要素の洗い出し後にワイヤーフレームの設計に入る。
  • ワイヤーフレームの設計後は、ユーザ体験設計とつきあわせて、無駄なく気持ちよく操作できるか検証して、ユーザ体験設計やワイヤーフレーム設計を修正する。
  • 画面デザインは、画面デザインそのものを直接デザインしない。トンマナ、デザインルール、コンポーネントのデザインをまず行う。
  • そのために、大半の種類のコンポーネントが使われる主要ページのみを、まず仕上げて、プロデューサーの最終決定をとる。
  • トンマナ、デザインルール、コンポーネントの方向性が決定してから、全ページの画面デザインに取り掛かること。
  • ワイヤーフレームは、デザイン指示ではない。ワイヤーフレームが提供したいユーザ体験の意図を理解すること。その意図と世界観を実現する画面デザインを作ること。そのままワイヤーフレームの中に機械的に要素をあてていくのは画面デザインではない。
  • 画面デザインの制作中に、追加・修正されたトンマナ・デザインルール・コンポーネントは明確にドキュメント化していく。

画面デザインの当たり前のルール

  • カラーパレットで、目的と色を定義する。定義した色を利用して、デザインする。
  • ユーザ体験上の目的やコンポーネントの意味から、コンポーネントを選択する。カラー・フォント・マージン・パディングなどをエレメント毎個別にゼロからデザインしない。コンポーネントからデザインを原則選択する。
  • 違うグループのエレメントは違うグループに、同じグループのエレメントは同じグループに見えるようにする。そのために、ブロック間のマージンをきっちりとる。ブロックの大小グループにあわせて、事前に定義したマージンを使うこと。
  • 同じ意味のものは同じデザインに。違う意味のものは違うデザインに。同じデザインのものは、フォント・サイズなど統一する。違うデザインにする場合は、ちょっと変えるのではなく、明確に差違化(高いジャンプ率になるように)されるようにする。
  • アライメントはそろえる。同じものは同じアライメント、違うものは違うアライメント。
  • ボックス内の文字等のエレメントはルール通りのパディングをとる。文字数の都合でパディングをとらないのはNG。
  • 角丸があるボックスの角丸の中心点から周辺エリアに文字等のエレメントをいれてはいけない。

ゲーム内での共通操作ルール

  • デフォルトの選択行為は「A」ボタンで行う。メニューでのサブ操作のキーは、X→Yの順番。
  • 一つ前の画面スタックに戻る操作は「B」ボタンで行う。
  • 画面内でのボタンなどの要素間の移動は左側の上下左右キーで行う。
  • ステージ内のコース選択画面でのステージ切替のような、同レイヤーの画面の横移動は、L・Rキーで行う。