こんにちは、「アプリゲームUIデザイン」のちょこきなこです。
「キズナストライカー」のマイページのキャラの表示領域が気になったので、キャラを大きく配置したパターンを考えてみました。
▲before
▼after
こんな感じです。
今回はとにかくキャラクターを大きく見せようとしました。
なぜならキャラクターの魅力を伝える画面だから。
なぜならキャラクターが魅力的なゲームだから。
故に情報の最上位にキャラを据える考えです。
でも、この考えが正しいのかは結構不安だったりします。
というのも、そういう考えってあまりUI関係の記事や書籍に書いてないので。デザイナーのエゴなのかなー…、と。
webとかデザインの話であればビジュアルを優先する話は珍しくないのですが、UIという観点から見ると、操作性とビジュアルの関わりをどう合理的に解釈したら良いのか分からないのでずっと悩んでます。
要するに見た目と操作性のバランスって難しいよね、という話です。
まぁ、実験だ！し！
細かいことはいいよ！ね！！
はい、いくつかデザインの説明ですが、
ガチャバナーの位置は上に持ってこようか迷いました。
ただ、「キャラを見せる！」と考えた結果、キャラの顔付近にバナーを置くのは微妙な気持ちになったので、下に配置しました。
これも「ユーザーが見る付近に広告を置くと訴求が高まる」って考え方もできるだろうし「キャラクターの近くに広告を配置してもコンテンツの心象が悪くなるだけ」と考えることもできます。
今回は「キャラを魅力的に見せる！」という考えがベースなので、下の方に配置しました。まぁ、下に置いたら置いたでタップしやすいよね、って話もできると思うので、考え方次第かな、というのもあります。
フッターは下に敷き詰めると画面の抜け感がなくなるので空けています。
敷き詰めても良いけど、安定感が増して躍動感に欠けるので、今回はサッカーモチーフだし、安定感より躍動感を取りました。
あとはメインターゲットが女性なので、フッターのボタンはクリアな感じの色味でまとめたつもりです。
画面上部のCPとかスターなどのリソースを左に寄せたのはフッターを右に寄せた歳に、全部右に寄ってると重心が偏るなー、と感じたののと
監督ランクをCPは比例の関係にあるので、数字を固めた方がユーザーのカタルシスが感じられやすいかなと考えたためです。
(数字が大きくなると気持ち良いと考えています)
キャラクターを大きく見せるために、背景の水平線(消失点)よりキャラを上の方に持ってきています。普通は目線の高さ揃えるんですけどね。
今回は大きく見せたいという意図があったのと、跳ねている構図なので丁度良かったかも。
以上です。
元々のデザインも意図があってのことだと思うので、今回はあくまでキャラを大きくしたらこういうデザインも浮かびました、というくらいです。
この辺は好みだと思います。
なので、改善とか改修案という話ではありません。
以下、デザインするまでの流れ。
▲ゲーム画面のキャプチャを切り貼りしてなんとなく雰囲気を考えます。元のデザインの画面下部にあったキャプションは無くても困らなさそうだったので省きました。
▲バナーを上に持ってくるかどうか悩んだ形跡。あとストーリーのボタンが大きすぎるので一旦画面外に出して雰囲気を想像中。
▲ストーリーのボタンとか雰囲気のアテを考え中。バナーやっぱり下に持ってきました(迷ってる)。フッターのボタンの雰囲気も考え中。
▲フッターメニューを面白くできないかな、ということでサッカーボールのマークをモチーフとしたパターンも考えていました。バナーの位置は定まんないなぁ…。キャラのコントラストも調整しました。やや背景から浮くように色調整しています。
(補足)
吹き出しの上にあるキャラ名はキャラを魅力的に表現する上で必要だと感じたので追加しました。あまり情報を追加するのは好きじゃないのですが、オリジナルIPで多くのキャラが存在する場合、キャラの名前を覚えるのが大変だったりします。
なので、なるべくキャラの名前は表示しておきたい。
あと、好きなキャラは名前を見るだけでテンション上がるので、そういった意味でも表示させておきたいな、という考えでした。
キャラクターを見せたい、って考えがなければ省略は可能かと思います。
▲さっきのフッターメニューのデザイン案は面白かったけど、配置場所が良い感じに決まらなかったのと、下手にキャラよりも目立ちそうだったので没に。
▲フッターがあることによる抜け感が気になったので右に寄せる案を考えてたみたいです。往生際が悪い(笑)。メニュー開閉式のデザインもあるので、それを採用するのも悪くはないけど、メニューが隠れちゃうので、ややゲームUIに慣れてないと分かりづらそう。なので没に。
▲結局ボタンを下にまとめるデザインを採用。
▲色々整えておしまいです。
自由に作れるので楽しかったですー
キズストの別の記事も紹介しておきますー
