「星のドラゴンクエスト」のUIについて考えてみた。

本日より、GRENGEクリエイターによるブログがスタートしました！

トップバッターを任されましたUIデザイナーのキサンボンです。

どうぞよろしくお願いいたします！

今回は、スクエア・エニックスから配信されている

「星のドラゴンクエスト」のUIデザインについて思った事を書いてみました。

少し長いですがお付合いして頂けると幸いです。

全体的なUIについて書こうと思ったのですが

ものすごい量になりそうだったので

今回は「ホーム画面」と「フッターから行けるページ」のUIについて

主に書きました。

それではホーム画面から。

「星のドラゴンクエスト」がターゲットとしているのは

小学生以上の幅広いユーザー層なので

「文字サイズが大きい」「ひらがなを多用している」「漢字にはふりがなが振ってある」

上記3点はユーザーに則していて良いですね。

ユーザーが迷わないようにあえて出していると思うのですが

ボタンの数は多く、ヘッダー、フッター以外に7つもあります。

ボタンの数は多いはずなのにあまりそれを感じないし圧迫感もありません。

そう見える理由は以下の事からだと思います。

・装飾が少なく、ボタンの形状もシンプルである

・使用している色数を抑えている

・背景を画面全体で表示させている

内容を深く見て行くと複雑な部分はありますが

ゲームの入り口となるHOME画面がシンプルに構成されていると

入り込みやすいです。

ホーム画面で気になった部分もありました。

画面中央のキャラクターをタップすると、キャラクターの詳細がタブで表示されます。

その中にある「職業スキル」。

レベルに応じて解放されるスキルが一覧で表示されるのですが

スライド式に２ページ表示されるのですが

「ページ数の表示が無い」のと「１P→２P→1Pとループで表示出来てしまう」事で

あれ？今どこにいるんだ？いったい何ページあるんだ？と混乱します。

片手で操作するためにループにしてあるのだと思うのですが

そうだとしたら

現状はスワイプでキャラクターが切替わるので

そこはキャラクターをタップで切替に変更。

「職業スキル」をスワイプでページがスライドに変更。

ページ数を表示する玉を下に並べてページ数と現在地を表示させる。

この方が分かりやすいと思います。

ホーム画面はこのくらいにして

ここからはフッターから遷移出来るページについて

左から見ていきますです。

【マップ】

googleMapみたいで、何処まで拡大縮小出来るのかすぐに試しました。

マップ上にあるアイコンから、挑戦したいクエストにルーラで行けちゃいます。

画面左上のボタンからは、開催中のイベントに行けます。

まだ解放されてない大陸など、雲がかかっているけど見えてるのに行けない。

あの雲を取りたい！行ってみたいと冒険心をくすぐられます。

3D良いですね！

【クエスト】

一人でプレイできるクエストです。

「イベント」「ストーリー」「サブクエスト」がタブに分かれて表示されます。

デザインはとてもシンプルです。

タブに表示されているアイコンが

先ほどのマップ上のアイコンと共通して使われています。

【マルチ】

その名の通りマルチプレイで出来るクエストページです。

「マルチプレイ体験版」とバナー表示してありますが

普通にプレイ出来ます。

本リリースは何か変わるのでしょうか？

気になります。

スタンプが使いやすいように編集できるのが良いです！

【ふくびき】

ガチャです！

上部にあるボタンでふくびきの種類が切り替わります。

看板（バナー）は変わっていますが

それ以外のボタンの色や背景など基本的なデザインは変わらないので

変化が少なく変わったことに気付きづらいです。

押しとなる装備は

自分のキャラクターが装備している姿で表示されるので

おぉ！となりました。良いです。

もう終わっちゃいましたけど

ロト装備欲しいなぁ。また出ないかなぁ。

最後のページ

【ももん屋】

世界観を大事にしていて楽しい感じがするのですが

急にスゴく分かりづらいと感じました。

そう思っている人は私だけではないと思います。

ユーザーのランクに応じて木が伸び、お店が現れ、出来ることが増えていきます。

各施設の「アイコン」と「名前」が小さいので

どこで何が出来るのか分かりづらく

施設のレイアウトも規則性がある所とない所が混同していて

ぱっと見、どこを見たら良いのか迷います。

スクロール前提で作るのなら

全ての施設を木の中に納めた方が

分かりやすいのではないかと思います。

アイコンや文字の大きさもさることながら

配置の規則性の大事さをスゴく感じました。

個人的にとても勉強になったページでした。

【まとめ】

・ゲームの入り口が分かりやすいと全体が簡単に思える。

・切替にスクロールを使用する場合「全体」と「現在地」は分かるように注意する。

・レイアウトで規則性を持たせる場所とそうではない場所は明確に分けた方がよい。

以上が今回ブログを書いて得られた事。

基礎的な部分もありますが

改めて大事だなぁと初心に戻る事が出来ました。

だいぶ長くなりましたが

最後まで読んで頂いき、ありがとうございます。

今後、GRENGEのクリエイターが

様々な内容でブログを更新していくと思いますので

ご期待ください！