どうも、わたしです(✿´ ꒳ ` )
ブログでは超お久しぶりです。
約3ヶ月ぶりの更新となってしまって申し訳ない…しかもtumblrテーマの説明終わってないね。

ここ3ヶ月もなかなか忙しくさせていただいてました。と同時に、クリエイティブな面でインプットをいろいろしてまして。
そろそろアウトプットの時期がきたので、ブログを更新させていただきました。

今回は度々このブログにも登場するスマホアプリ「スタンド マイヒーローズ」。
先日、大型アップデートが行われて、新UIデザインが公開されたのですが、個人的にめちゃくちゃ好きなので、
旧UIとどう変わったのか、調べてみた結果をご報告。完全に自己満。

ウェブデザイナー目線で書いてますので、無理やりウェブにねじ込んでます。UIデザインはあまりよくわかってないので、その点はご注意を…

それではどうぞ


まさにテイストまで変わる

百聞は一見に如かず、ということで、まずは新旧UIを見比べてみましょう。

レイアウトもテイストもごっそり変わってますね。
※背景は同じのを設定しています。スクショの時間帯がずれただけです。すみません。

新UIデザインの下に日付が2つ書かれていますが、
大型アップデートが行われたのは6/23。その後7/6に機能追加がされています。

デザインテイストはどのように変わったのか

旧デザイン

各アイテムのイラストなどは立体感があり、ぷっくりとした感じ。
ウェブデザイン的に言うと、「リッチデザイン」ですね。

新デザイン

一方、新UIの方はシンプルになっています。立体感がありません。
グラデーションやシャドウ(影)などを極力減らしてシンプルに仕上げたデザインですね。
こちら、ウェブデザイン的に言うと、「フラットデザイン」
もしくは「マテリアルデザイン」ですね。
(厳密に言うとこの二つは違いますが、大きい括りでは似たような感じです。)

ちなみにwindows8から導入されたスタート画面はメトロUIと言われています。(マテリアルデザインの一種)


この、リッチデザインとフラットデザインの関係性、身近なところでいうとiPhoneが分かりやすいかな…と。

iOS6まではリッチデザイン。iOS7からフラットデザインになっています。
https://saruwakakun.com/design/tips/flat#section1
※こちらの1-3.実例にて実際の画像が見れます。

iOS7は2013年にリリース。
フラットデザインそのものは2012年頃らしいのですが、iOS7が火付け役となり、2014年頃には爆発的に流行りました。
2017年現在でもフラットデザインを採用しているサイトが多いです。


では、なぜスタマイがリッチデザインからフラットデザインになったのか。
フラットデザインの一番の強みはシンプルである為「視認性が高い」ということ。

スマートフォン向けのアプリゲームですから、当然、スマートフォンでプレイするわけです。(タブレットもありますが…)
そうなると、小さい画面でもプレイしやすいデザインが必要となってきます。

今回の大型アップデートでは、新機能としてプライベート機能が追加されました。
これはキャラクターが配置された画面の上で画面をこする(キャラクターを撫でる)と、パラメーターが上昇し、
ガチャ(新カードを排出する為の機能)に必要なアイテムがもらえたり、特別なストーリーが読めるようになる機能です。

このプライベート機能が追加されることによって、必然的にホーム画面にはその機能に行くまでの導線(アイコン)を設置しなければなりません。

そうなると、今までのUI(リッチデザイン)では、少々圧迫感が出てしまいます。
そこでフラットデザインにすることによって、すっきりとした印象をユーザーに与えることができ、
ユーザーはそれほどストレスなくプレイできるというわけですね。


フォントも一新してさらにポップに

さて、よく話題にもあがるフォントについて。新UIでもフォントが変更になりました。

旧デザイン


 メイン:UDタイポス http://www.morisawa.co.jp/fonts/specimen/1656
 テキスト:特定できませんでした。

新デザイン


 メイン:RoG2サンセリフ http://www.morisawa.co.jp/fonts/specimen/1646 
 テキスト:新ゴ Pro http://www.morisawa.co.jp/fonts/specimen/1479

フラットデザインにすることによって、UDタイポスだとちょっと合わないんですよね。
試しに、パズルマップの部分のフォントを差し替えてみましょう。

いや、全くもって変!ってわけではないんだけど、コレジャナイ感もすごいですねこれ。
ちなみに、ウエイトかけてます。ウエイトかけてこれです。

通常テキストは新ゴに変更になりましたね。正直こちらはまだ慣れません。
ベタ打ちっぽいですが、もうちょっと文字間なんとかならなかったかな…
旧UIと新UIの間ぐらいの文字間だったらよかったなぁ…って…。

フォントにも左右されると思うんですが、私はこういう通常のテキストのフォントを選ぶときは、
「ヒラギノ角ゴシック」とか、「游ゴシック」とか、「源ノ角ゴシック」とか…
あとは個人的に大好きな「こぶりなゴシック」とかをチョイスすることが多いです。

font-feature-settingsしたいね。

それでも、デザイナーさんが悩んで悩んでチョイスしたんだと思います。ありがとう!早く慣れます!←

ちなみに、各イベントのバナーや、公式Twitterのイベント予告ムービーなんかも、
UDタイポス→RoG2サンセリフに変更になってました。

見てみるとレイアウトやシャドウなどはそのままで、フォントだけ変えてる感じですね。


おわりに

超駆け足でデザインテイストとフォントのお話をさせていただきました。
本当はレイアウトの話もちょっとしたかった…。

イベント中でも新UIの方には「イベント中」っていう帯がなくなってて、「!」になってる話とか。
各アイコンもすごくシンプル化されて、簡易的だけど分かりやすいデザインになってるとか。
フラットデザインだけど、ボタンだよ!ってわかる工夫がされているデザインとか。

よく見てみると、細かいところ結構拘ってるんですよね。

私がスタマイをプレイし続ける一番の大きな理由は、UIデザインがとにかくいいということ。
これはデザインの好みというのではなく、いかにストレスなくプレイできるかという点です。
キャラクターも魅力的だし、楽曲も素敵だし、他にもいいところはたくさんあるんだけど、UIが残念だとプレイする気っておきないんです。

大型アップデートと聞いたときは大丈夫かなと思いましたが、個人的に超満足なデザインでした。

スタマイのUIデザイナーさんは本当にプロの仕事をされているなぁと。
勉強させていただくことが本当に多くて、尊敬しています。(というのを、先日運営にメールしました。)

さてさて、スタマイ新UIがきたから、次はドラッグ王子とマトリ姫の新UIかな?
配色を見た感じではかなりガーリーで可愛い感じになってましたが…果たして本実装はどうなることやら…楽しみです٩( ‘ω’ )و

それでは、また。