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

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

2020-02-01から1ヶ月間の記事一覧

「Chess Rush」図鑑画面が図鑑っぽく見えなかったのはパラメーターを載せすぎているから?他タイトルのデザインと比較してみました

こんにちは、ちょこです。 「Chess Rush」にて、画面下部のメニューに図鑑という項目がありました。 ▲画面下部のメニューに「図鑑」がある ただ、画面を見ると全然図鑑って感じがしないんですよね。 ▲図鑑?本の形をしていないので、イマイチ図鑑という気は…

「Chess Rush」ヘルプに動画が採用されていた。静止画と上手に使い分けたい。

こんにちは、ちょこです。 「Chess Rush」のヘルプが動画になっているの良いですね。 ▲ヒーローを選択して盤面に配置するところまでの説明 ただ、全部アニメーションしているわけではない様子。 ▲静止画のヘルプ項目もあります。 ▲いくつかは静止画です 動画…

「Chess Rush」アウトゲームの画面が多い気がしたので分類わけしてみました

こんにちは、ちょこです。 「Chess Rush」の導線どうなってるのかよくわからなかったので画面の遷移図をまとめてみました。 今回の記事は以下の図でほぼ全てです。 ざっくりこんな感じ。分類は無理やり当てはめました。情報整理は発展途上という印象。 以下…

「Chess Rush」デザインが凝っている画面の紹介。ガチャ周りは上手にカルチャライズしてるかも

こんにちは、ちょこです。 「Chess Rush」で凝ったUIがいくつかあるので紹介してみます。 1:碁霊士画面 2:スーパーガチャ機 3:宝さがしの冒険 4:ラッキー居酒屋 5:実績表示 1:碁霊士画面 早速ですが、なんなんですかね「碁霊士」って…。そんな「碁霊士…

「Chess Rush」フォント界のnullこと【豆腐】が表示されている。なるべくなら表示されたくない文字なので滅ぼしたい

こんにちは、ちょこです。 「Chess Rush」にて日本語のフォントに文字が格納されてないケースがありました。 ▲言語設定画面 ソシャゲで「豆腐」が表示されるのは初めて見たかも。 ▲豆腐 これは「指定されている文字が表示できないので、ダミーの文字を置いて…

「Chess Rush」PCゲームっぽいUIデザインだと感じた理由?ボタンや文字が小さかったから。でも将来的には垣根がなくなると思う

こんにちは、ちょこです。 「Chess Rush」ですが、しばしばデザインがPCっぽい印象を受けました。プラットフォームが違うとUIの考え方も変わるのでスマホを操作して違和感を覚えました。 どういった部分でPCっぽいなと感じたのかメモを残してみます。 1:ボ…

「Chess Rush」スマホの画面をデザインする際は情報が指で隠れてしまわないように気を付けたい事例

こんにちは、ちょこです。 「Chess Rush」の図鑑画面の星押しづらいし、情報隠れるんじゃー! どういうことかと言うと… この星の部分、タップ判定あるんですけどね。 ▲進化度合いを示す星 押そうと思うとこのようになります。 ▲キャラが指でがっつり隠れます…

「Chess Rush」シェア機能を入れるだけではシェアされない?ユーザーに相応のメリットを与える必要がある

こんにちは、ちょこです。 「Chess Rush」スクショ撮ったらシェア訴求するUIが表示されました。 ▲画面下部に外部SNSの導線が表示される スクショの撮影をトリガーにした仕様って結構珍しい。 ▲スクショを撮ると画面にメッセージが表示されます Chess Rushの…

「Chess Rush」ホーム画面が季節感あふれてたので紹介します

こんにちは、ちょこです。 「Chess Rush」のホーム画面が季節感あふれてたので紹介します。 他にもお知らせ画面であったり… 訴求画像のデザインも雪化粧がされています。 ▲「バナナ~」は一見すると意味不明ですがキャラクターの名前です。 アニメーションを…

「アークナイツ」ガチャ結果画面のビジュアルが良い

こんにちは、ちょこです。 「アークナイツ」のガチャ結果画面がオシャレでヤバい。 アニメーションで見るとこんな感じです。 表示されている情報はシンプルです。・レアリティ・キャラクターのビジュアル・兵の種別(近接タイプなのか、遠距離タイプなのかな…

「アークナイツ」【シナリオを読む】画面のUIがビジュアル優先だった。これを成立させることが出来るのは至難だと思う

こんにちは、ちょこです。 「アークナイツ」の「シナリオを読む」のUIが意外なUIだったので驚きました。 画面デザインはこんな感じです。 ビデオフィルムを用いることによって過去のシナリオを見れる=「記録映像」と言うデザインになっていると推測します。…

「アークナイツ」エラーメッセージをキャラクターが伝えることにより、ゲームへの没入感を高める説

こんにちは、ちょこです。 「アークナイツ」でFPと呼ばれるリソースがあるのですが、それが所持上限を超えて1日過ぎるとキャラクターからメッセージが届く仕様になっています。 ドクター!昨日もらった92FPが無駄になったじゃない!もう、FPの保存上限は300…

「アークナイツ」情報が指で隠れてしまう強化画面。実機プレビューも重要

こんにちは、ちょこです。 「アークナイツ」強化画面ですが、レイアウトが原因でストレスに感じる場面があります。 強化画面のデザイン 強化画面はこんなデザインになっています。 操作するとこんな感じです。 ストレスに感じた箇所 前提として、横画面のゲ…

「アークナイツ」ショップのコスチューム画面の表現がやはりパララックス的。コスチュームの色数を絞るところからデザインされていてきれい。

こんにちは、ちょこです。 「アークナイツ」でコスチュームのショップのデザインが超良かったので超紹介します。 こちらの画面です。静止画でもかっこ良いです。見せたいものが明確で情報もシンプルにまとまっています。 「静止画でも」と書いたのは、動かし…

「アークナイツ」地図情報と敵情報は監視カメラの映像と言う設定になっている?

こんにちは、ちょこです。 「アークナイツ」でクエスト画面から見れる「地図情報」の画面の下にある文字列が気になっていました。 ▲画面右側にある「地図情報」から遷移できます ▲こちらが地図情報 気になった文字列はこちらです。 ▲「EYSSOFPRIESTESS-RI03-…

「アークナイツ」NEWの表現が独特だったので紹介。情報の優先度を下げる時に良いかも。

こんにちはちょこ。 一般的に、新しいキャラクターを獲得した際に「NEW」とか付くちょこが、「アークナイツ」のデザインは変わっていたので紹介するちょこ。 単一のデザインとしては以下のような見た目になっているちょこよ。 ▲右から左に文字が流れてる こ…

「アークナイツ」ブルーム効果の効果が使われている場所が分かりました!

こんにちは、ちょこです。 「アークナイツ」のゲームオプション画面で「ブルーム効果」という項目がありました。 ▲「ブルーム効果」ってなんだろう…? グラフィック設定のブルームとは | ゲーミングPCなう ブルームとは、光源から光があふれ出るようなエフェ…

「アークナイツ」スタミナ配布をするだけでもキャラクターを絡ませるだけでこんなにも楽しくできる

こんにちは、ちょこです。 「アークナイツ」にてスタミナ配布のキャンペーンがあったのですが、バリエーションが用意されていて凝っていたので紹介します。 ただ配布するのではなく、キャラクターからの差し入れ、というコンセプトが設定されています。 丁度…

「アークナイツ」自動指揮にエラーが発生する、ってどういうこと?レアな仕様の紹介

こんにちは、ちょこです。 「アークナイツ」の自動指揮モード中に変わったエラーが表示されました。 っていうか、オートモードでエラーって出るんですね。 「自動指揮にミスが生じました」「手動操作を推奨します」と表示されています。 要するに「自動指揮…

「アークナイツ」強化素材が1つずつではなく、4つずつカウントアップされる実装がテンポ良かった

こんにちは、ちょこです。 「アークナイツ」で強化を実行する時に一度に4枚アップする実装になっており。テンポの良さを感じました。 強化画面はこんな感じ。 拡大! ▲こんな感じでカウントアップされます。 最大40枚までセットできます。 また以前プレイし…

「アークナイツ」プロファイル画面の3つの謎

こんにちは、ちょこです。 「アークナイツ」の図鑑の下位階層にキャラクターのプロファイル画面があるのですが、そこで面白い挙動があったので紹介します。 右側にあるボタンをタップするとそれぞれ「プロファイル」「ボイス」の情報が表示されます。 ▲動く…

「アークナイツ」その作り込みがゲームをもっと面白くする

こんにちは、ちょこです。 購買部のカテゴリのアイコンのアニメーションが素敵だったので紹介です。 こんな感じでタブを切り替えるんですが… アップ! 非アクティブだと28°くらい?傾いていて、アクティブになるとそれが正位置になるアニメーション。ついで…

「アークナイツ」メニューデザインの凄いところ

こんにちは、ちょこです。 「アークナイツ」のメニューが凄いって話をします。 1:画面上部にある 2:上下二段に分かれている 1:画面上部にある ▲画面上部にメインメニューが表示されます 開閉アニメーションはこのようになっています。 ▲普段は隠れていて…

「アークナイツ」潜在能力強化のマークがかっこ良かった!よ!

こんにちは、ちょこです。 「アークナイツ」の潜在能力強化のデザインが良いなー、と感じました。 ▲「潜在能力強化」は日本でいうところの「上限解放機能」です。 これです!星のデザインがモチーフになっています。カッコいい! 一覧で表示した時にも面積が…

「アークナイツ」スキルランクの数字がかっこいい!

こんにちは、ちょこです。 「アークナイツ」のスキルランクの数字のデザインがかっこいい! おしゃれ! これはちょっと敗北感すら感じました。 自分がデザインするとした場合、「効率的にタスクを処理できるためにどうするか」的な発想で「ここで必要なのは…

「アークナイツ」ガチャ画面が6つの多層構造になっている。パララックスみたいな感じか…?

こんにちは、ちょこです。 「アークナイツ」のガチャ画面で左右にスワイプする時の挙動が気持ち良かったです。 斬新ですが、パララックス表現として認識すると理解しやすいかもです。 ▲こんな感じで多層に作られています。パララ。 ▲ページャー(?)の表現も…

「アークナイツ」ステータスの詳細のアニメーションが小気味良い。こういったUIの演出が触り心地に繋がります。

こんにちは、ちょこです。 「アークナイツ」のキャラのステータスの詳細を展開する際のUIのアニメーションが良かったので紹介します。 あ、だめだ小さい。 この部分です。 この動きの小気味良さが素敵です! 具体的には「HP」などの文字の出方や、黒い枠が左…

「アークナイツ」誤タップが怖い!ボタンが指で隠れないように気を付けて!

こんにちは、ちょこです。 「アークナイツ」でボタンの配置が良くなく、指でボタンを隠してしまう画面がありました。 フレンド申請を承認するかどうかの画面右側にある「承認する」か「申請を拒否する」のボタンです。 これです。 ▲上下に並んでるぞ! 指を…

「アークナイツ」UIパーツの一貫性や統一性に関して再認識した話。見た目が不統一でも世界観が破綻していないのが凄い

こんにちは、ちょこです。 「アークナイツ」のタブデザインですが、かなり多種多様。UIが不統一というより各々の画面で好きに作っている感じが凄い。 しかしながら、混沌とならずに全体でのデザインや世界観は壊していないように見えます。 その点を中心に紹…