アプリゲームUIデザイン

プレイしたアプリゲームのUIデザインに関して、書き残しておこうと思います。毎日24時に更新!

「ディズニー マイリトルドール」色選択のUIがMVP並みに優れたUIだと感じました

こんにちは、ちょこです。 

 

アバターの色変更が興味深いUIだったので紹介します。

f:id:appgameui:20200325075427p:image

色選択というとどういったUIを想像しますか?

マイリトルドールのUIはこういったUIになっていました。

 

f:id:appgameui:20200329211346g:plain

▲瞳の色を変更

 

 

f:id:appgameui:20200329211945g:plain

▲チークの色を変更

 

カーソル固定で色サンプルを可変するという発想はなかったです!

他のゲームのUIを見てみます。

 

 

1:アルケミアストーリーの場合

例えば「アルケミアストーリー」のUIはこんな感じでした。

f:id:appgameui:20200329212144p:plain

既定の色から選択する形式ではなく、自由入力タイプです。

これはこれで仕様としてはアリだと思いますが、プリセット化できないデメリットもあるので一長一短かな、と思います。

例えば黒目の中で色分けすることが出来ないので、そういった細かいカスタムをしたい場合はそれぞれ設定するパラメーターを分けなければなりません。

f:id:appgameui:20200329212517p:plain

 

2:Real Boxing 2 ROCKYの場合

「Real Boxing 2 ROCKY」はこんな感じです。

f:id:appgameui:20200329212249p:plain

こっちはプリセット型ですが、数が多くないので大丈夫みたいです。
数を絞ってしまう、というのも一つの手ではあるとは思います。

 

3:ハリー・ポッター:ホグワーツの謎

「ハリー・ポッター:ホグワーツの謎」の場合はこんな感じ。

f:id:appgameui:20200329214704p:plain

マイリトルドールと同様にプリセットが用意されています。

f:id:appgameui:20200329214816p:plain

▲用意されてるプリセット


ただ、スクロールして選択、というUIなので2手必要ですが…

f:id:appgameui:20200329214506g:plain

▲スクロールと選択の2手必要


マイリトルドールの場合はスクロールが選択も兼ねているので1手で済みます。

 

 

f:id:appgameui:20200329211346g:plain

▲スクロールが選択も兼ねている

 

これはスマートなUIだな、と感じました。

 

色先行のUIを想像すると、大体はパレットがあったり、数値をいじって色を変える、というUIに慣れていましたが、どちらもコントローラーで操作するUIだと気付かされました。

マイリトルドールの色選択のUIは指で操作するというデバイスに合わせた良いUIだな、と感じました。

 

もし、アバターなどでプリセットの数が多い場合、こういったUIを検討してみても良いのかなと思い紹介させていただきました。

ディズニー マイリトルドールから学ぶ温かみのある可愛いアイコン作成の実例を紹介。左右非対称なデザインが素敵。

こんにちは、ちょこです。

 

「ディズニー マイリトルドール」にてボタンの下にある文字がカーブになっているのが興味深いなと感じました。

f:id:appgameui:20200329200735p:image

 

この部分です。一般的には可読性を考慮して直線にします。

f:id:appgameui:20200329202610p:plain

▲カーブになっている

 

この画面は比較的頻繁に見る画面…というか割とメインスキームに組み込まれているので特別感を印象付けるためにデザインを工夫したのかな、と感じます。

ナナメにするデザインはしばしば見たことあったけど、カーブは初めて見たかも。少なくともそれくらい珍しいデザインだと感じます。

またゲームUIではかなり攻めたデザインなので、採用した側も結構冒険したな、という印象を受けました。

もしかすると、このゲームのUI全般がゲームと言うよりは雑誌などのデザインを参考にしている節があるので、そっちであればカーブを使うのは珍しいことではないので、参考にしている資料が違うのかも。

 

あ、あとアイコンも可愛いです!

f:id:appgameui:20200329202610p:plain

▲左右非対称の家のアイコンがエモい。

 

「おかえし」「きままに」というデザインは動きがあるのが分かりやすく良いです。

よくみると「お家にもどる」も左右非対称なのが非常にエモい。

 

これ普通は左右対称にしてしまうけど、左右対称にしてしまうと整然とした印象を受けるので、温かみと表現したい場合は左右非対称にすると良いんだな、と感じました。

「ディズニー マイリトルドール」目的のボトルを探すときに持っているユーザーのリストが表示されるのは便利。導線の良さってなんで気付きづらいんだろう。

こんにちは、ちょこです。

 

「ディズニー マイリトルドール」欲しいボトルを設置してるユーザーが観れるの便利です!

f:id:appgameui:20200329184531p:plain



機能導線系って基本的にはゲームの仕様とかシステムを理解した上での話になるので書きづらい部分があります。なので、先にシステムとか仕様の話をします。

 

システムとか仕様の話

ボトルというリソースがあり、それは各ユーザーから得られるものです。

ボトルには複数の種類があり、必要なボトルを所持しているユーザーを探す必要があります。

そういった手間を省くために、ボトルが必要な画面から入手できる導線を設置しています。

アニメーションだとこんな感じです。

f:id:appgameui:20200329182217g:plain

 

画面の流れを追うとこんな感じの階層になっています。

f:id:appgameui:20200329183816p:plain


よくあるRPGのソシャゲだと…

育成で必要な素材がどこのクエストで獲得できるのか探すのが面倒。
なので、そこに導線を引くようにしました。

これと同じような意図の設計になっています。

 

導線の良さって気付きづらい

導線の良さって気付きづらいな、と感じます。
恐らく、

  1. サービスの全体がまとまらないと導線が引けない
  2. 繰り返し操作しないと脳の学習が導線の改善を提案するに至らない
  3. 他のサービスと比較しないと発見できない

などが主なのかな、と感じました。
なので、ゲームに限らず他サービスを触ってインプットを増やしたり、何度も操作して改善する箇所がないか目を光らせる努力が必要だな、と感じました。

もしユーザーの導線が可視化するようなシステムがあったとしたら、そういったサービスを取り入れることも検討してみても良いかもです。

「ディズニー マイリトルドール」見出しのデザインのバリエーション紹介。一貫性や統一感はないけど丁寧に作られている。

こんにちは、ちょこです。

 

「ディズニー マイリトルドール」各画面の見出しのデザインが豊富だったので紹介します。

f:id:appgameui:20200324085255p:image

 

上のような画面の見出しのバリエーションには以下のようなものが見られました。

f:id:appgameui:20200329120621p:plain



書体や見出しなどのバリエーションが豊富ですね。

一般的にはUIは統一性、一貫性を基本とします。

あくまで原則的なものであって、必ずしも遵守すべきもの、というものではありません。

(ただ、運用するにあたって結構な手間が掛かったり、ルールが複雑なものになり、制作難度が高くなるのでオススメできないです…が、選択肢は自由!)

 

 

以前「見出しに英語を使うと読めない」という話を書いたのですが…

 

「仮面ライダー シティウォーズ」画面をかっこよくすることと、項目に英語を使うことは結び付けない方が良いです - アプリゲームUIデザイン

 

「ゼノンザード」アルファベットを見出しに使う時は注意が必要 - アプリゲームUIデザイン

 

 

画面に遷移する前の画面では日本語が全面に表示されているので迷わないんですよね。

f:id:appgameui:20200329121024p:plain

▲メニューのアイコン

 

 

アイコンの中に文字が描かれていますが、グラフィックとして認識します。
文字として認識しているのはその下の方にある日本語の方です。

なので、見出しに英語を使うデザインが成立できているのだと感じました。

 

f:id:appgameui:20200329133614p:plain

▲英語の方ではなく、日本語の方が見出しとして機能している

 

f:id:appgameui:20200329133733p:plain

▲画面の流れとして一貫性を保つために文字のカーブが継承されている
 

 

ちなみに他の画面の見出しの種類も豊富です。

f:id:appgameui:20200329134205p:plain

 

多い…!上に紹介したのは19種類ですが、細かい差分を含めればもっとあるかも。

見出しはいわゆるh1、h2のように情報の優先度を設けてデザインするのが一般的ですが、世界観を重視した考え方もできるのだな、と気付かされました。

 

見出し以外にも以下のような可愛いポップアップのデザインもあるので、世界観を重視したUIを検討している方は一度見てみても良いかもです。

f:id:appgameui:20200329135315p:plain

▲ログイン時に表示されるお知らせ

 

f:id:appgameui:20200329134645p:plain

▲イベントごとにデザインされている

 

アプリ内の掲示板を見ると小学生、中学生も多くプレイされているようなので、こういった賑やかしはユーザーにとって訴求になり得るデザインなのかな、と感じました。