こんにちは、ちょこです！
今回は 「クローズxWORST～打威鳴舞斗～」のホーム画面のデザインのすごいところを紹介します。
「ホーム画面のデザインってどうデザインすれば良いのか分からない」
「何が良いデザインなのか分からない」
といった悩みを抱えている方の参考になればと思います。
どこがすごいと感じたのか
どこがすごいと感じたか以下に簡単にまとめてみました。
1:情報の優先度
まずは情報の優劣がしっかりと定まっている点を紹介します。
ぱっと見でメインコンテンツがはっきりと分かるデザインになっています。
▲ぱっ
如何でしょう。
画面中央付近の文字に視線が行ったのではないかな、と思います。
考えられる理由としてはジャンプ率が高く、色の差別化もされているためだと考えます。
その結果、自然とメインコンテンツに視線が誘導されます。
その上でさらに、メインコンテンツの中でも情報に優劣をつけています。
今度は少し画面をよく見てください。
喧嘩クエスト⇒強化⇒ガチャ⇒ダチの順番で視線誘導がなされていることに気付くかと思います。
まず「喧嘩クエスト」が「Zの法則」または「Fの法則」によって最初に目に留まります。
次に「喧嘩クエスト」の末尾から「強化」に視線が自然と繋がるようにレイアウトされています。
▲こんな感じで視線が移動します
優先度を定めてレイアウト、色などがしっかりとデザインされていると感じました。
続いて色の話です。
2:色の選択
次にメインコンテンツの色について、誘目性が考慮されている点に注目しました。
「誘目性」について簡単に説明すると…
黒背景においては、誘目性が高い順に、黄→黄赤→赤→黄緑→黄緑→赤紫→青→緑→青緑→紫→青紫と並んでいるあれです。
これですね。黒背景の場合、赤ではなく黄色が最も誘目性が高いとあります。
「クローズxWORST～打威鳴舞斗～」では、このように黄色、赤の順で目立たせたい色を使っています。
さらによく見ると「喧嘩」の下に補色の紫を敷いています。
これによって、強調したい黄色をより引き立てています。
こういった細かい部分にまで手を入れているのは凄いです。なんというか、抜かりない…。
いずれも斬新な発想ではなく、基礎的な知見でのみ構成されています。
続いてグループ分けと見せ方の話です。
3:グループ分けと見せ方の差別化
「クエスト」や「強化」といったメインのボタンにはあえてアイコンを使用せず、グラフィカルな文字で仕上げています。
この表現によって他のボタンらしいデザインとの差別化もされています。
▲メインのボタンは文字だけ
▲フッターは文字とアイコン
▲それ以外の機能はアイコンのみ
それぞれデザインの見せ方が違っており、しっかりとグループ分けがなされています。
ついボタンの強弱や大小によってのみデザインを考えてしまいがちですが、こういった見せ方も有効なのだと感じました。
次にアニメーションの話です。
4:アニメーション
人は速く動くものに対して視線が向きます。これは恐らく危機回避のための作用なので自然な動作です。
画面内には複数のものが動いています。
その全てに視線が向くようなことがあると、画面がうるさく感じてしまいます。
「クローズxWORST～打威鳴舞斗～」のデザインでは、アニメーションの速度をコントロールすることによって、視線誘導を実現しています。
まずは画面遷移後の登場アニメーションを紹介します。
▲とりあえず、あと100回くらい見てください
多くのパーツに分けられていますが、アニメーションを基準に分類すると…
- 前の画面から変わらず表示されているパーツ
- ゆっくり動くパーツ
- 素早く動くパーツ
- 瞬間的に表示されているパーツ
このように分類できます。
複数のパーツが動いていますが、自然と画面中央に配置されているメインコマンド群に視線が行ったのではないでしょうか。
手法としては、
- 表示タイミング：背景をしっかり見せた後に、メインコマンドが登場するアニメーションを見せる
- アニメーションの緩急：ブラーが掛かっている画像を表示して疑似的なイージングを再現している
- 変化量：短い時間で大きく変化するものほど視線が集中する
などで視線誘導していると感じました。
視線が誘導されることにより、画面が切り替わった後、何を見たら良いのか、という迷いが無くなります。その結果、ユーザーは何をすべきであるか自然と思考がまとまります。
次に待機時のアニメーションも紹介します。
ホーム画面にはパーツごとにループアニメーションの演出も入っているのですが、メインコンテンツのアニメーションの速度が最も速くなっています。
これを見ると
イベント!! ＞ 喧嘩クエスト(他) ＞ デイリーイベント ＞ イベントバナー
という順番で、ループする速度が管理されています。
「イベント!!」が最も速くループし、イベントバナーの更新が最もゆっくりです。
更新する頻度が高いほど自然と視線が向く回数も増します。
このようにアニメーションの工夫によって視線の誘導が管理されています。
最後に世界観のグラフィック表現に関する考察です。
5:世界観の表現
最後に世界観を構成しているグラフィックについて紹介します。
「クローズxWORST～打威鳴舞斗～」のマイページは複数のモチーフをコラージュのようなデザインを採用している部分があるのですが、それが世界観の雑然さ、混沌さ、アウトローさを表現しています。
もう一度ホーム画面を見て欲しいです。
特にこちらに注目して欲しいです。
学校の校舎、鳥居、バイク、進入禁止のフェンス、消火栓の看板などなど、多様で雑多なモチーフが使われていることに気付くかと思います。
しかしそれほど多くのモチーフが使われているにも関わらず、受け取る情報量としては全くうるさくありません。
これは今の自分にとってはレベルが高く、考察も十分にできないのですが、
- 日常的に目にするものである
- 屋外にあるもので統一されている
といったことにより、モチーフとしての違和感やグループとしての違和感を感じさせない工夫があるように見受けられます。
例えば、
車を運転している時、住宅街の中に急に城が出現したら違和感を感じますし、
スーパーで買い物をしている時に魚売り場の中に野菜が置きっぱなしになっていたら気になります。
恐らくデザイン原則のひとつの「分類」という括りに該当しそうですが、人間は無意識にモノをグループに分類するクセがあります。
そういった作用を利用してモチーフを慎重に選別されているのだと思います。
以上です。
見れば見るほど、お手本的のようなきれいなデザインです。
繰り返しになりますが
- 情報の優先度付け
- 色の使い方(誘目性、補色の利用)
- グループ分けによる差別化
- アニメーションによる視線誘導と優先度付け
- 世界観の表現
などを利用してホーム画面が構成されていました。
ホーム画面をデザインする際の参考になれば幸いです。
少し古いタイトルですが、非常に参考になるのでゲーム開発者(特にデザイナーとディレクターの方)は是非一度見てほしいタイトルです。
最後に付け加えておくと、2013/8リリースですが、リリース当時と2020/10時点でデザインはほぼ変わってないので、7年の運用にも耐えられる設計の強固さもあるようです。
『クローズxWORST～打威鳴舞斗～』最速プレイレポート！ [ファミ通App]
最強すぎる…。
