ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

「ドクターマリオ ワールド」主な画面UIまとめ

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

 

ドクターマリオワールド」の主な画面をまとめました。

 

まず、ゲームを起動させるとユーザーの情報を作成するための画面が表示されます。

ドクターマリオワールド はじめから

 

次に利用規約の同意、地域の設定画面が表示されます。

ドクターマリオワールド 利用規約

 

それが終わるとタイトル画面が表示されます。

ドクターマリオワールド タイトル画面

 

しばらく待つと、ロード画面が表示され、

ドクターマリオワールド ロード画面

 

チュートリアルが始まります。

ドクターマリオワールド チュートリアル

 

gifだとこんな感じの動きになります。

 

ゲーム本編が始まる前にナビ(キノピオ)が説明してくれます。

ドクターマリオワールド チュートリアル ナビ

 

演出が入って、

ドクターマリオワールド ステージ開始演出

 

キノピオがデモプレイを見せてくれます。

ドクターマリオワールド チュートリアル 指先

 

ドクターマリオワールド チュートリアル ナビ

 

デモプレイが終わったら、プレイヤーが操作するステージが始まります,

ドクターマリオワールド ステージ開始

 

演出はこんな感じです。

ドクターマリオワールド ゲーム開始演出


 

 

クリアしました!

ドクターマリオワールド ステージクリア

 

スキル演出はこんな感じ。

ドクターマリオワールド スキル


クリア演出はこんな感じです。

ドクターマリオワールド ステージクリア演出

 

クリアするとステージ一覧を挟み、次のステージに遷移します。

ドクターマリオワールド ステージ一覧

 

 

チュートリアルをクリアするとドクターを選択することができます。

ドクターマリオワールド ドクター選択

 

データ連携を勧められます。

ドクターマリオワールド データ連携

 

名前入力はこのタイミングです。

ドクターマリオワールド 名前入力

以上がチュートリアルでした。

 


 

その後、色々進めました。主な機能を紹介します。

ドクターマリオワールド ワールドマップ



左上の「コンパス」のアイコンを押すと…
ドクターマリオワールド アイコン

 エリアの一覧が表示されます。ここから任意のエリアに飛ぶことも可能です。

ドクターマリオワールド マップ一覧

 

「スピーカー」のアイコンは…

ドクターマリオワールド アイコン お知らせ

お知らせの画面が表示されます。

 

バナーをタップするとこんな感じです。

ドクターマリオワールド お知らせ詳細

 

歯車のアイコンは「設定メニュー」に遷移します。

ドクターマリオワールド 設定 アイコン

 

メニューとしてはこんな感じです。

ドクターマリオワールド 設定

 

オプションボタンを押すと…

ドクターマリオワールド オプションボタン

 

使用言語やプッシュ通知の設定ができます。

ドクターマリオワールド オプション

ドクターマリオワールド 言語設定

ドクターマリオワールド 言語設定

一部フォントが乱れているのは、表示しているフォントの中に対応する文字が含まれていないので、代替フォントで表示している可能性があります。(よくある)

 

さて、今度は画面左上のアイコンをタップすると…

ドクターマリオワールド プロフィールアイコン

 

使用可能なアイコンの一覧が表示されます。

ドクターマリオワールド アイコン

 

今度は右上のマークの中を見てみます。

ドクターマリオワールド バッジアイコン

 

獲得条件はステージクリアなどです。称号とか実績のようなものかな。

ドクターマリオワールド バッジ

 

チュートリアルボタンを押すと

ドクターマリオワールド チュートリアルボタン

 

こんな感じで過去に見たチュートリアルの一覧が表示されます。
主にプレイ中に関するチュートリアルです。

ドクターマリオワールド チュートリアル項目一覧

ドクターマリオワールド 確認ウィンドウ

ドクターマリオワールド チュートリアル

以上が「設定メニュー」でした。

 

 

さて、一度メイン画面に戻ります。

ドクターマリオワールド 


 

左上のハートをタップすると…

ドクターマリオワールド ハートアイコン

 

ハートショップの画面に遷移します。

ドクターマリオワールド ハート


ダイヤのアイコンは…

ドクターマリオワールド ダイヤ

 

ショップ画面に遷移します。

ドクターマリオワールド ショップ画面

 

デイリープレゼントを取得するとこんな感じの画面です。

ドクターマリオワールド デイリーボーナス取得 ショップ画面

 

 

左上のメールのアイコンをタップすると…

ドクターマリオワールド メール

 

メールボックスの画面に遷移します。

ドクターマリオワールド メールボックス

 

タブを切り替えるとこんな感じ

ドクターマリオワールド メールボックス フレンド

 

 

その下のミッションのアイコンは…

ドクターマリオワールド ミッション アイコン

ミッション画面に遷移します。

ドクターマリオワールド ミッション画面

 

フッターを見ていきたいと思います。

ドクターマリオワールド フッター

 

まずはショップ。

ドクターマリオワールド ショップボタン

 

当然ですがショップ画面に遷移します。ダイヤのアイコンと同じですねー。

ドクターマリオワールド ショップ画面



次にスカウトボタンです。

ドクターマリオワールド スカウトボタン

 

 

スカウト画面はこんな感じですね。

ドクターマリオワールド スカウト画面

 

ドクターマリオワールド スカウト演出

 

ドクターマリオワールド スカウト演出

 

スカウト演出としてはこんな感じです。

ドクターマリオワールド スカウト演出

スカウトメニューはこんな感じです。

 

 

フレンドメニューを見てみます。

ドクターマリオワールド フレンドボタン

 

フレンド画面はこんな感じです。

ドクターマリオワールド フレンド画面


キャラクター画面はどんな感じだろう。

ドクターマリオワールド キャラクター ボタン

 

キャラクター画面はこんな感じです。

ドクターマリオワールド キャラクター画面

 

VSモードのタブはこちら。
ゲームモードによって使用するキャラクターが設定できます。

ドクターマリオワールド キャラクター画面

 

ドクターマリオワールド

ドクターマリオワールド

ドクターマリオワールド

キャラクター画面は以上です。

 

 

最後にVSモードの画面です。

ドクターマリオワールド VSモードアイコン

 

こんな感じの画面です。

ドクターマリオワールド VSモード


報酬を獲得する時の演出はこんな感じです。
ドクターマリオワールド 報酬獲得

以上が「ドクターマリオワールド」の主な画面のデザインでした。
画面や演出をデザインする際に参考になればと思います。