見出し画像

2.UI分析してみた「ムー*ン〜ようこそ!ムー*ン谷へ〜」


UI分析兼殴り書きメモ第2弾はムーミンです。

そういえば前にTwitterで話題になってたような……とふと思い出し、
遊んでみよう!と思ってダウンロードしてみました。

箱庭アイテム(このゲームではデコと呼ぶ)をタップすると、
遠くにいるムー*ン達が早歩きでスタスタとやってきてくつろぐ姿がやけにシュールで癖になりそうです。健気ですね。
全体的にイラストのタッチが繊細な分、UIのボタンの立体感やバナーのテイスト違いが目立ってしまい、ところどころチグハグな印象も受けてしまいました。また、文字やアイコンのイラストが一部小さいため、視認性に欠けるのが勿体無い点でした。
一番最後にこれがムー*ンの世界観に沿うのでは?と思うUI・デザインについて少しまとめましたので、お時間がある方は見てみて下さい。

━━━*━━━━*━━━━*━━━━*━━━━*━━━━*━━━━

・(初見時の)押せないボタン(と気づけなかった矢印)

画像1

初回ダウンロード画面の左上の矢印、押せなかった……!
押せないなら暗くなるなど、いっそボタンは無くてもいい気がします。

追記:押せる矢印と見比べると、初回ダウンロード時の矢印ボタンは押せない表示のものだと判明。しかし、初回なので押せる・押せないボタンの違いには気づけませんでした……🤦‍♀️

・モーダルズームできる!!?

画像2

まさかのズーム機能がモーダル内の表示領域にあるとは!
縦横のスクロールが付いていたので、触ったらズームできて驚きました。

→文字が大きく見れるのは良いですが、ズームできるのであれば「ズームできるよ!」というのを知らせてほしいワガママ。
改善案としては「指二本スワイプでできるよ!」という矢印と文の表示出すとかが無難でしょうか?難しい。

・同じ役割のボタンが混在している

画像3

モーダルで画面遷移するための手段として
「次へ」ボタンと、左右に「矢印」ボタンが表示されてましたが、
どっちかがあればいいのでは?と思いました。
プレイ画面が横であれば、真ん中にボタンがあるよりも左右の親指に近い所にあるほうが使いやすいと個人的には感じました。

・アイテム獲得のモーダル(フレームが可愛い)

画像4


モーダルの中に背景イラストがあるのって少し珍しい……?新鮮でした。
お花のフレームはカメラアプリとかのデコフレームみたいで、さりげに可愛いかも!🌼イラストタッチぽいのもいいです。

・押せないボタン

画像5


キャラ図鑑にある矢印ボタンは押せないもので、スワイプが正しい操作
この場合はスクロールバーの方がスワイプ操作と伝わる気がします👆

もし、バーを常時表示にしないのであれば「横にスワイプするとまだキャラいるよ〜」とわかるように、あえて見切れさせる、またはやや右端に透かしをかけるなどした方が良さそうです。

・お知らせバナー、デザインの統一感が薄い

画像6


バナーを見ていたら統一感が薄いかな、と感じました。
日替わりお出かけはまだ読めますが、海釣りはグラデがムー*ンの世界にとってややテイストが異なる印象です。せっかくの海テーマなので、背景は海や波のデザインだと海釣り感がでてワクワクしそう🌊🌊🌊

━━━*━━━━*━━━━*━━━━*━━━━*━━━━*━━━━

ムー*ンのイラストがかなり平面タッチな分、世界観を壊さずにデザインするなら……?と自分なりにいくつかサイトなどを調べてみた所、公式のムー*ン展のwebサイトがイメージが近いと感じました。
https://moomin-art.jp/outline.html

配色やフォント、文字サイズ、余白の取り方などが世界観を引き立てています。ムー*ンに詳しい訳ではありませんが、サイトやイラストを見た所(それとおぼろげな記憶の印象では)あまり華美にせず、ユルさと落ち着きのある雰囲気がムー*ンの魅力の一つかな、と個人的には考えています。

スクリーンショット 2020-08-27 0.28.31

スクリーンショット 2020-08-27 0.37.41

この記事が気に入ったらサポートをしてみませんか?