UIマスターへの道～第1回目～シャドウバース

はじめまして！
インターン生の飛山瞳です！

今日から記事を書かせていただきますが、私はスマホアプリのUIデザインに興味がありますので、
それについて発言してみたいと思います。

第一回目は、「SHADOW VERSE」（シャドウバース）
通称シャドバでいってみましょう！

※使用する画像は全てスクリーンショットです。

シャドウバースとはCygamesが贈る本格スマホカードバトルです。
対戦型オンラインTCGですね！

簡単に説明するとお互いに20の体力数値があって、それをカードを使って対戦相手の体力を0にすれば勝ちというルールです。

このゲームで私が注目したのはフォントの使い方です。

↓会話画面を例に出します↓

すみません、私はまだ勉強したてでボキャブラリーが少ないのですが、
このフォントは明朝っぽい感じでポップとは違う表現で選ばれていると感じます。

というのもこのゲームの世界観はストーリーもあるのですが割りとシリアス寄りな感じで
しかも美麗イラストと謳っているので、美麗な感じをこの文字で表しているのだと思います。
ポップなフォントだと違うなーと思うので私はフォント選びのセンスをよく間違えるのでとても参考になったポイントです。

文字って大事！！！

というわけで私の注目ポイント1「フォント」でした。

次に、これは動画で紹介したいと思いますが、とにかくシャドバは動く！光る！です！

これはUIというよりUXっていうんですかね。

スマホゲームですから、タッチして遊ぶゲームですから！
さわって楽しい、見て楽しい！
ちなみにカードを出すたび、さわるたび、声優さんが沢山喋ってくれます。
UIとはそれるのかも知れませんが私はこれをUXと解釈してUIのカテゴリに入る大変な魅力だと思っています。

というわけで私の注目ポイント2「動かせる！光る！」でした。

あとUIの研究の時に考えて見るのが
「テーマカラーは何かな、どんな場面、意味の時や場所にどの色が使われてるのかな」です。

ザッと見てみたいと思います。

↓ホーム画面です↓

メインカラーがグレーでサブカラーが金と青ですかね。
アクセントがグリーンでしょうか。

ちなみに割と多くのスマホゲームが課金系のボタンを緑、注意してねみたいな意味のボタンを赤にしてるのは
共通していると思います。
（反対にしている作品もありますがね！）

シャドバでは赤は
・デッキのカードが不足している
・カードを分解する
・手札がいっぱい
・エネミーターン
の時などに使われていました。勉強になります！

そして、カード枠もUIの仕事なので是非カード枠にも注目したいと思います。

４種類のカード枠があります。

1.レジェンド

2.ゴールドレア

3.シルバーレア

4.ブロンズレア

レアな程豪華なカード枠です。

またロゴ作りもUIでして、タイトルロゴだけではなく、
シャドバには「カードパック」の種類もあってそのパックごとにテーマがあり、
それぞれロゴが作られているのでそこも注目です！

↓スタンダードパックのロゴ↓

↓エボルヴパックのロゴ↓

↓バハムートパックのロゴ↓

バハムートパックのロゴは金でベベルトエンボスが強めで、バッグにバハムートが降臨されていて
とても豪華で個人的に特に惹かれるロゴデザインです。

他にも、ランクごとのUIもあって、一つ一つ細かくてそれぞれのランクに合った豪華さで
一度真似して全部作ってみたいですね。

さて初回でしたが凄い主観的に語ってしまいましたが、回数を重ねるごとに内容のある記事を書けるようになりたいですね！
頑張ります！

それではお付き合いいただきありがとうございました！

興味を持たれた方はお気軽にお問い合わせください。