「仮面ライダー シティウォーズ」ドロワーのUIを採用する時に注意したいこと

こんにちは、ちょこです。

「仮面ライダー シティウォーズ」のホーム画面にある、メニューボタンのデザインと挙動が気になりました。

注意したいこととしては

• 挙動が(ある程度)推測できる見た目にする

です。
以下、詳細と解決案の提案を書いてみます。

どんなデザインだったのか

まず、どのようなデザインなのかを紹介します。
ホーム画面全体は以下のようになっていました。

メニューボタンは左上のこちらのデザインです。

▲グラフィックにも「MENU」って書いてあるのか…

挙動としては、以下のようにな挙動でした。画面端から開閉するUIです。

ボタン…というかアイコンをタップすると画面端からメニューが表示されます。
いわゆる「ドロワー」と呼ばれるUIです。

どういった問題があるのか

この「ドロワー」のUIですが、どういった問題があるのかは簡単です。
見た目から挙動が推測できないのでストレスに感じる、という点です。

他のボタンと同じデザインですが挙動が違います。

 

見て気付くかと思いますが、この「MENU」と「RECEIVE」のUIパーツのデザインとしては同じものです。しかし、それぞれタップすると挙動が違います。

これがストレスに感じます。
UIの中で有名な考え方にアフォーダンスと呼ばれるものがあります。

これが機能していないデザインだと感じました。

アフォーダンス理論とは？【心理学用語をわかりやすく簡単に。】 | プロが集まる公式LINE集客研究所「PROL」

他のゲームはどうしているのか

他のゲームはどうしているのか軽く調べてみます。

「きららファンタジア」

会話シーンのUIでドロワーが採用されていました。

ドロワー部分はこんな感じです。
画面の端に吸着して引き出しする挙動です。

 「キングスレイド」

キングスレイドは画面端に吸着していないデザインでした。
しかし、中空に浮いているので引き出しとはちょっと扱いが違うかも。

純粋なドロワーではないというか、デザインの意図が失われてしまっているので、この使い方で流行ってしまうのが少し心配です。

「ときめきアイドル」

ここまで来ると純粋なドロワーではなくなっている気がします。

ただ、ボタンの形状がドロワーの形状を保っていて、アニメーションも画面端からスライドインしてくるのでドロワーの親戚かなぁ…と。

▲ドールズオーダーも似た挙動なのですが、これはドロワーではないかな…。

画面の上に重ねてくるデザインなので所謂「HUD」と呼ばれるものに類しそう。
厳密に共通認識を持っている定義とかないと思うので雰囲気ですけど。

どうすれば良いのか

「仮面ライダー シティウォーズ」の場合はどうしたら良かったのか、上記のタイトルを例に考えてみます。

近しいデザインだと「ときめきアイドル」のデザインを参考にするのが良いと思います。

理由としては、同じメニュー項目の表示なのでユーザーに与える操作感が近しいものだからです。

「MENU」のボタンデザインを他と違うデザインにして、挙動を「ときめきアイドル」に合わせると今よりも見やすくなるのかな、と思います。

とはいえ、iPhoneXのノッチ対応や画面端のセーフエリアの担保をしないといけないので、ドロワーの扱いやデザインには注意が必要だと感じました。