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

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

010_タイトル一覧-妖怪ウォッチメダルウォーズ

「妖怪ウォッチメダルウォーズ」タイトル画面に隠されたイースターエッグ?

こんにちは、ちょこきなこです。 「妖怪ウォッチメダルウォーズ」のタイトル画面にて、変わった仕様があったので紹介します。 どんな仕様なのか? タイトル画面でジャイロが利いているのです…。 傾けると画像が動きます。 必然性が感じられないいいい! この…

「妖怪ウォッチメダルウォーズ 」チュートリアルで操作に失敗しても進められる親切設計

こんにちは、ちょこきなこです。 「妖怪ウォッチメダルウォーズ」のチュートリアルにて、ユーザーフレンドリーだと感じる実装があったので紹介します。 どんな実装だったの? バトル中のチュートリアルにて、メンバーの交代操作を促す場面があるのですが、何…

「妖怪ウォッチメダルウォーズ 」訴求演出がアニメーションで動く!

こんにちは、ちょこきなこです。 今回は「妖怪ウォッチメダルウォーズ 」にてショップの訴求演出が豪華だな、って話をします。 gifです。豪華ですよね。 ガチャ更新演出との違いとは? 中国、韓国系のゲームだとガチャ更新よりも、こういった初心者パックの…

「妖怪ウォッチメダルウォーズ 」細かいパーツに世界観を示すデザインがあったので紹介

こんにちは、ちょこきなこです。 割と細かいパーツなのですが、通信状況を示すアイコンのデザインが丁寧になされていたので紹介させてください。 こんなデザイン gifです。こんな感じで動きます。 画像を見て理解出来ると思いますが、アイコンの下部がヒトダ…

「妖怪ウォッチメダルウォーズ 」画面遷移演出

こんにちは、ちょこきなこです。 今日の記事は短いです。 「妖怪ウォッチメダルウォーズ」の画面遷移のデザイン事例を紹介します。 どんなところが良かったのか? 世界観が表現できているのが良かったかな、と思います。普通はフェードだったり何かしら汎用…

「妖怪ウォッチメダルウォーズ 」戦闘に負けたときにアドバイスが表示されるのは【テンション・リダクション効果】を狙っている?

こんにちは、ちょこきなこです。 戦闘で負けると画面上にアドバイスが表示されます。このUIに関して書いてみたいと思います。 どんな仕様になっているのか? 仕様の説明を簡単にします。戦闘に負けると以下のスクショのように育成に関するアドバイスが表示さ…

「妖怪ウォッチメダルウォーズ 」画面をシンプルに見せるためには情報の扱いを細かく分析していく必要があると感じました

こんにちは、ちょこきなこです。 「妖怪ウォッチメダルウォーズ 」の妖怪メダルの上に乗る情報が整理されていたので紹介させてください。 どんなデザインになってるの? まず、左のメダルは「選択状態」「プロフィール設定」「部屋に設定」「ロック」状態。…

「妖怪ウォッチメダルウォーズ」図鑑画面にて未登録の妖怪のシルエットを表示する意味ってあるの?

こんにちは、ちょこきなこです。 「妖怪ウォッチメダルウォーズ 」の妖怪大辞典の画面にて、未獲得の妖怪でもシルエットで表示されています。これによってどういった効果があるのか調べてみました。 シルエットを表示することによってどんな効果があるの? …

「妖怪ウォッチメダルウォーズ 」情報が枠内に収まらない時はどうしたら良い?テキスト量を減らすか枠を広げるかがセオリー

こんにちは、ちょこきなこです。 「妖怪ウォッチメダルウォーズ 」にてホーム画面のウィスパーの吹き出しの中の文章が枠内に収まらず、最後まで読めない実装になっていました。 個人的にこういった実装はあまり見たくないのですが、しばしば看過されている気…

「妖怪ウォッチメダルウォーズ 」タップ範囲は最低限の大きささえ 確保していばOK?サイズ感ではなく押しづらければNG

こんにちは、ちょこきなこです。 「妖怪ウォッチメダルウォーズ 」にてタップしづらいと感じた部分があったので、なぜそう思ったのか考えてみました。 タップしづらい箇所はどこ? まずタップしづらいと感じた場所はクエストを選択し、バトルに遷移する場面…

「妖怪ウォッチメダルウォーズ」ボタンの見た目と挙動って合わせないとダメ?アンチパターンに繋がるので合わせるのが原則

こんにちは、ちょこきなこです。 今回はUIパーツのアンチパターンの紹介です。こういうネタはあまり好きでは無いのですが、実例を元にお手本として広まってしまうのも良くないので、紹介させてください。 アンチパターンって何? ここで言うアンチパターンと…

「妖怪ウォッチメダルウォーズ 」着替えた後のモーションって必要?必須ではないけどあるとゲームっぽい

こんにちは、ちょこきなこです。 「妖怪ウォッチメダルウォーズ 」にて、アバターを着替えた後にモーションがあるのが良いなと思いました。今回はこのモーションがある理由を考えてみます。 なぜ着替えた後にモーションがあるの? 最初は着替えを完了したこ…

「妖怪ウォッチメダルウォーズ 」タブは並列な情報?タブの中でも優劣を付けたい時の事例紹介

こんにちは、ちょこきなこです。 「妖怪ウォッチメダルウォーズ 」の実装事例からタブデザインについて考えてみました。 情報の取り扱い方という視点から見た時に、タブは基本的には情報の優劣がなく並列な情報を扱うものです。しかし、ゲームにおいては五十…

「妖怪ウォッチメダルウォーズ」UIの統一性は絶対厳守?バフデバフのアイコンから見る事例共有と考察

こんにちは、ちょこきなこです。 UIって一貫性とか統一性って重視されますよね。「妖怪ウォッチメダルウォーズ 」のバトル中のバフ、デバフのアイコンでその一貫性に関する実例の参考になりそうな実装があったので紹介します。 実例は以下の2つの画面です。 …

「妖怪ウォッチメダルウォーズ 」フィルタ機能はシンプルで十分?利便性は下がるがメリットはある!

こんにちは、ちょこきなこです。 「妖怪ウォッチメダルウォーズ 」にフィルタがソートのみで、抽出がないことにびっくりしました。今時シンプルなフィルタ機能は珍しいので考察と紹介をしてみます。 シンプルなフィルタ機能で困らないの? フィルタ機能がシ…

「妖怪ウォッチメダルウォーズ」無駄な情報を削るのが良いUI?ゲームにおいては必ずしも当てはまらない

こんにちは、ちょこきなこです。 UIって無駄な情報は削るのが原則だったりします。 それは必要な情報をより際立たせ、ユーザーが何をしたら良いのか迷わないようにする目的があります。ただ、ゲームにおいては必ずしもそうとは言えません。 そこで「妖怪ウォ…

「妖怪ウォッチメダルウォーズ」汎用ポップアップばかりだとシステムっぽく見えない?少しの工夫でゲームっぽく見せている事例の紹介

こんにちは、ちょこきなこです。 UIのパーツを作成していて、汎用の素材を使ってウィンドウをデザインすることって多いと思います。それは汎用的な素材の方がデータの読み込みが速かったり、デザインの統一性が図れたりするためです。 「妖怪ウォッチメダル…

「妖怪ウォッチメダルウォーズ」クローゼット画面に鏡は必要?必要かどうかは前後のストーリーなどによる

こんにちは、ちょこきなこです。 「妖怪ウォッチメダルウォーズ」では、クローゼット画面に鏡があるんですよね。これを見たときにちょっと感動しました。こういったデザインって見たことなかったんですよね。 じゃあ、今後こういった画面では鏡は必須になる…

「妖怪ウォッチメダルウォーズ」ボタンの形をしていないとボタンと認識されづらい?カメラに合わせて文字が濃くなり、アクティブかどうか分かるデザインになっている

こんにちは、ちょこきなこです。 一般的にボタンはボタンという形状をしていないとボタンと認識されません。あるいは押せると分からりません。 なので、ボタンは押せる形状でデザインする必要がある。 というのが原則ですが、今回はその例外の事例を紹介して…

「妖怪ウォッチメダルウォーズ」ルビはどんな時に必要?ガチャの訴求画像に見る事例紹介

こんにちは、ちょこきなこです。 以前、ルビの振り方に関して記事を書いたことがあったのですが、妖怪ウォッチメダルウォーズのルビの振り方の意図が分からなかったので考えてみました。 「刀使ノ巫女」ルビの振り方にこだわりが感じられる - アプリゲームUI…

「妖怪ウォッチメダルウォーズ」画面UIまとめ (冒険、ランキングバトル)

こんにちは、ちょこきなこです。「妖怪ウォッチメダルウォーズ」の画面紹介です。今回で最後、冒険まわりの画面の紹介です。 クエスト選択 トレジャーミッション デイリーミッション クエストボタン ストーリークエスト お手伝い ともだち イベント ストーリ…

「妖怪ウォッチメダルウォーズ」画面UIまとめ (フッター)

こんにちは、ちょこきなこです。 引き続き「妖怪ウォッチメダルウォーズ」の画面の紹介をしていきます。フッターからアクセスできる機能を中心にまとめました。 ホーム画面の妖怪 キャラ入れ替え AR機能 かばん メダルタブ スキル表示 ソート項目 スキルツリ…

「妖怪ウォッチメダルウォーズ」画面UIまとめ (ホーム)

こんにちは、ちょこきなこです。 先日の続きです。今回は「妖怪ウォッチメダルウォーズ」のホーム画面のメニューを紹介します。ホーム画面には以下のような機能があります。 模様替え トロフィー棚 カレンダー 妖怪大辞典 クローゼット メイクアップ 髪型 顔…

「妖怪ウォッチメダルウォーズ」画面UIまとめ (タイトル、チュートリアル、メニュー)

こんにちは、ちょこきなこです。 先日リリースされた妖怪ウォッチの新作 「妖怪ウォッチ メダルウォーズ」の画面をキャプチャーしました。 タイトル画面 設定画面 連携画面 アカウント選択画面 チュートリアル OPムービー アバター作成画面 章タイトル画面 …