こんにちは。
今日はスマホアプリのUXを考えるうえで最近インストールした「クラッシュ・ロワイヤル」がいろいろと参考になったので、このアプリに関して思ったことを書いていきます。
クラッシュ・ロワイヤルについて
クラッシュ・ロワイヤルとはSuperCellが開発したスマホアプリです。
手持ちのカードを駆使て戦う対戦系のゲームで、3本のレーンにそれらを配置し、自分の陣地を守りながら相手の陣地を攻略していきます。
クラッシュ・ロワイヤル (Clash Royale)を App Store で
クラッシュ・ロワイヤル (Clash Royale) - Google Play の Android アプリ
UX考
上の画像はクラッシュ・ロワイヤルのトップメニュー画面です。
GUIの配置は他のスマホゲームと大きくは変わりません。ヘッダーにレベルや経験値、所持しているゴールドのデータがあり、画面下部にメニューの項目一覧がアイコンリストで並んでいます。
これだけでもきれいにまとまっているとは思いますが、クラッシュ・ロワイヤルをプレイしてみて本当に「すごい！」と思ったのは、実は各ページの遷移の仕方なのです。
ページの遷移方法
普通のスマホゲームであれば、画面下部のメニューアイコンをタップすることで、該当のメニューに飛ぶことができます。「デッキ編集」をタップすればデッキ編集のページに。「ガチャ」をタップすればガチャのページに飛ぶといった感じですね。
もちろん、クラッシュ・ロワイヤルもアイコンをタップすればそのページに行くことができます。
ですがそれ以外にも、実は左右に画面をスワイプすることで、左右のページに遷移することができるようになっています。
LINEやFacebookなど、ゲーム以外のアプリではわりと一般的なページ遷移の仕方ではありますが、従来のスマホアプリではあまり見られなかった遷移の方法なので、これは参考になりますね。操作と画面の動きの連動性もよく、使っていて非常に気持ちよいです。
ページ遷移の軽やかさ
さらにすごいのは、このページ遷移の時の「軽やかさ」です。
他のスマホゲームではページ遷移時にデータロードを挟むことが多いため、ローディング画面を経由してページを遷移します。例えば、デッキ編集画面➡ロード画面➡ガチャ画面…といった感じです。
ですが、クラッシュ・ロワイヤルでは画面遷移の際にロードを行っているような挙動はしていません。
そのため、非常にスムーズにページ送りを行うことができます。データ通信の仕方やタイミングはゲームの仕組みやデータの持ち方などに応じて変わりますが、可能な限りロード時間は感じさせないほうがベターであるのは確かです。新規でアプリを作る際は、クラッシュ・ロヤイヤルの軽やかさはぜひ真似していきたいところですね。
アクティブなページの表現
最後に細かい点として、アクティブになっているページのアイコン枠が他と比べて少し大きくなるように設計されている点です。
ハイライトカラーが明るめである、アイコンが少し飛び出す見た目になる、テキストでページ名が表示される、左右のカーソルアイコンが表示されるなど、他にも「形状」によって今どのページを開いているかが表現されています。
こういった差を出す表現として、すぐに思いつくのが「色」ですが、色は色覚の差によって見え方が変わってくるため、色だけにすべてを頼るのはあまり好ましくありません。「色 + 形状」のセットで違いを出したほうが、より多くの人にわかってもらえるデザインとなるので、この辺りはこだわっていきたい点ですね。
最後に
以上、クラッシュ・ロワイヤルのUXについて、簡単に考察をしてみました。
ゲーム以外のアプリではよく使われている手法でしたが、こういった形で様々なジャンルのアプリでそれぞれのいいところを吸収していきたいですね。
