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

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

020_アンチパターン

「ゲートオブナイトメア」ピリオドはベースラインに揃えたい

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「ゲートオブナイトメア」通称「ゲトメア」におけるローディング中…

「ディープインサニティ アサイラム」似たデザインのアイコンが多くあったので整理してみた

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ディープインサニティ アサイラム」の見出しの付け方とアイコンの…

「魔界戦記ディスガイアRPG」チェックボックスの見た目をしているのにラジオボタンの挙動になっていると誤解を招きやすい!

こんにちは!ちょこです! このブログでは「ゲームのUIを見てみよう!」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「魔界戦記ディスガイアRPG」でチェックボックスの見た目なのにラジオ…

「パニシング:グレイレイヴン」横組みのフォントを縦組みに使わないで

こんにちは!ちょこです! 今回はアンチパターンの紹介です。 「パニシング:グレイレイヴン」で横組み用のフォントを縦組みで使ってしまったと思われる箇所がありました。 該当の画面はこちらです。この画面はキャラクターの育成画面です。キャラクターの左…

「パニシング:グレイレイヴン」文字が被ってしまうのは良くないデザイン

こんにちは!ちょこです! 今回は「パニシング:グレイレイヴン」からアンチパターンの紹介をします。 アンチパターンの意味については以下を引用します。 デザインパターン(デザパタ)とは - IT用語辞典 e-Words アンチパターンという用語が広まるに連れて…

「三国志名将伝」見た目がチェックボックスなのに挙動がラジオボックスのアンチパターンデザインがあった件

こんにちは、ちょこです。 「三国志名将伝」をプレイしていたら、アンチパターンがあったので事例として紹介します。該当の画面はこちらです。 挙動としてはこのような動作をします。チェックボックスは複数の項目を選択できるUIパーツですが、見ての通り「…

「三国ブレイズ」チェックボックスの見た目なのにラジオボタンの挙動をするUIパーツ

こんにちは、ちょこです! 「三国ブレイズ」で見た目はチェックボックスで、挙動がラジオボタンになっている箇所がありました。 アンチパターンの事例として紹介します。 該当の画面はこちらです。 4つのアイテムの中から任意のアイテムを1つ選ぶ場面です…

「サクラ革命」護符強化画面の文字の色が背景と馴染んでしまっていた

こんにちは、ちょこです。 「サクラ革命」を遊んでいたら、見づらい文字がありました。該当箇所は護符を強化する画面ですね。 画面左端にある、強化後の予測数値が見づらいと感じた文字です。背景の白色と文字の黄色が馴染んでしまっています。 ちなみに通常…

「Food Fantasy フードファンタジー」ダイアログを閉じる挙動が不統一だった。ユーザーの学習コストを下げる意味でも挙動の統一は大切

こんにちは!ちょこです! 今日も今日とて「Food Fantasy フードファンタジー」です。 今回は閉じるボタンの位置が不統一だったので、アンチパターンとしての事例紹介です。 該当の画面はこちらです。ストーリー収集画面の「冒険の思い出」と「イベント」の…

「スタースマッシュ」スタンプを送るとボイスが流れるけど、スタンプに文字が含まれていないので送信するまで何のメッセージが伝わるのか分からない

こんにちは!ちょこです! 「スタースマッシュ」のスタンプ機能のデザインがちょっと変わったアンチパターンであったので事例として共有してみます。 該当の機能が使える画面はこちらです。 分かりやすいようにスタンプ部分を大きくします。見て分かる通り、…

「プラネット・コマンダー」文字は読めるサイズにしてほしい

こんにちは!ちょこです! 「プラネット・コマンダー」でめちゃくちゃ小さい文字があったので、アンチパターンとして紹介します。 該当の文字があったのはこちらの画面です。 分かりやすくトリミングすると、この箇所です。 うぅ…視力検査の文字みたいなサイ…

「三国ドライブ」色覚多様性対応について。まずは「自分とは違った色の見え方の世界がある」というところから意識して欲しい

こんにちは!ちょこです! 「三国ドライブ」で視認性が良くない文字があったのが気になりました。画面としては以下の画面です。 具体的にはこの部分です。背景が無彩色に近い赤、文字が暗めの赤です。 オリジナルでも視認性は低いのですが、これをシミュレー…

「三国ドライブ」NEWの文字をキャラの顔に被せんといてくれぇ

こんにちは!ちょこです! 「三国ドライブ」のガチャ結果画面にて、キャラのサムネイルとNEWの文字が被っているのが気になりました…。 ガチャ結果画面をデザインする際のアンチパターンとして紹介します。 人間の生理的な反応として、人の顔に目が行くので、…

「三国ドライブ」アイテムのカラーバリエーションを展開する時に色覚多様性対応の視点で注意したいこと

こんにちは!ちょこです! 「三国ドライブ」のアイテムデザインが色覚多様性対応の視点から見たときに懸念がありました。デザイナーが陥りがちなアンチパターンとして紹介してみます。 アイテムのカラーバリエーションを作る機会のある方 カラーバリエーショ…

「少女歌劇 レヴュースタァライト -Re LIVE-」Downloadingは「・・・」ではなく「...」を使うといいよ!

こんにちは!ちょこです! 「少女歌劇 レヴュースタァライト -Re LIVE-」をDLしてたのですが「・・・」の位置が気になりました。 ここですね。 「Download・・・」 「・」は英語圏にはないので「・・・」ではなく「...」とするのが一般的です。 事実、他の画…

「BLEACH Soul Rising」画像の比率が正しくない状態で表示されていたのですが、避けた方が良いアンチパターン

こんにちは!ちょこです! 「BLEACH Soul Rising」で画像が引き延ばされて(あるいは潰されて?)表示されている箇所がありました。 アンチパターンとして挙げられるので、実装時には注意したいものです。 該当する箇所はこちらです、どん(棒読み) いや分かん…

「聖闘士星矢 ライジングコスモ」スクロールすることを仄めかすなら、スクロールする向きに合わせたアニメーションをすると良い話

こんにちは!ちょこです! 今回は「聖闘士星矢 ライジングコスモ」の商店画面のアニメーションが気になったので、なぜ気になったのか書いてみます。 UIのアニメーションを付ける機会がある方、あるいは考える方の参考になれば幸いです。 さて、紹介する商店…

「ヒプノシスマイク-A.R.B-」UIのアンチパターンを放置する6つのデメリット

こんにちは、ちょこです! 引き続き「ヒプノシスマイク-A.R.B-」をプレイしています。今回はUIパーツのアンチパターンと見られる使われ方をされていた箇所があり、気になった次第です。 下の画面なのですが、よく見てください。 ご覧になりましたかね・・・…

「ヒプノシスマイク-A.R.B-」黒背景に赤文字は絶対に避けて欲しい理由

こんにちは!ちょこです! 今回のテーマは「視認性が良くない色の組み合わせについて」です。 過去何度か「色覚多様性」については書いているのですが、黒赤のNGパターンを結構見かけます。ちょっと色を変えるだけでぐっと読みやすくなるので忘れないでいて…

「デュエル・マスターズ プレイス」黒地に赤文字は見づらいので避けた方が良い話

こんにちは、ちょこです! 「デュエル・マスターズ プレイス」、通称「デュエプレ」のお知らせ画面で見辛い文字列がありました。 この組み合わせは非常にメジャーで頻出もしています。デザイナーだけではなく開発者の方はアンチパターンとして知っておいて欲…

「テイルズ オブ クレストリア」チャットボタンの位置が定まっていない。一貫性は大切にしてほしい

こんにちは!ちょこです! 「テイルズ オブ クレストリア」をプレイしていてチャットボタンの位置が不統一なのが気になりました。 ▲ホーム画面 見やすくするために拡大してみます。 ▲画面上部を拡大 このように画面上部中央にチャットボタンが配置されている…

「スタートリガー」どこからでもチャットにアクセス出来るのは良いけど、もう少し制限しても良かったのでは…

こんにちは、ちょこです! 「スタートリガー」をプレイしていて、情報の優先度について気になったので書いてみます。 この画面の左側にある吹き出し…。この吹き出しが割と常に最上面に表示されます。 ▲ガチャを選択する画面でも… ▲ガチャを引く画面でも… ▲容…

「スタートリガー」今日は、黒背景に赤文字の組み合わせはNGということだけ覚えて帰って欲しい

こんにちは!ちょこです! 「スタートリガー」の色覚多様性対応が気になりました…! お知らせ画面!文字が赤い…!! PhotoshopのP型フィルタで見るとこんな感じです。 文字は結構見づらい感じです…。赤字が悪いわけではないのですが、背面が暗い時に赤い文字…

「魔界ウォーズ」フッターのボタンが画面によって変化する。予期しない変化はしない方が良い

こんにちは!ちょこです! 「魔界ウォーズ」でフッターのボタンがホーム画面とそれ以外の画面で変化する挙動になっていたのが気になりました。 フッターの左側に注目していただきたいのですが、ホーム画面では『クエスト』になっています。 しかし、他の画面…

「魔界ウォーズ」ショップ画面のバナーの数が多すぎ問題。もう少し数を絞って訴求したい

こんにちは!ちょこです! 「魔界ウォーズ」の訴求バナーが限界突破してた…! ホーム画面の訴求バナーが数が多い…!! 数えてみたら18個あります。 カルーセルの訴求効果に関して疑問視されているはずなんだけど、効果があるのかな…。 uxmilk.jp カルーセルは…

「フィッシングスーパースターズ」黒背景に赤文字つかいがち問題。色覚多様性について考えてみました。

こんにちは、ちょこです! 「フィッシングスーパースターズ」にて色覚多様性対応が不十分だと感じた画面を見かけました。 この画面。 一部の文字が読みづらくなっている箇所があります。 一見して分かりますでしょうか? ▲少し考えてみて欲しいです 正解はこ…

「アズールレーン」デザインが気になったところ。とにかく色覚多様性対応の意識だけは忘れないでいて欲しい!

こんにちは、ちょこです! 「アズールレーン」のUIでいくつか気になった箇所があったんですよね…。ちょっとまとめて考えてみます。 なるべく主観によらず普遍的な部分での話でまとめたつもりですが、考察不足であればすみません。 1:情報の扱い方 2:ボタン…

「VOEZ」画面が回転してて没入感に深刻な影響があったけど、記事書いてる間に修正されたので良かった!

こんにちは、ちょこです! 「VOEZ」プレイしているのですが 楽曲プレイ前後に画面が回転するのがストレスに感じます。 どういうことかと言うと… まず、楽曲前に180度回転します。 ▲ぐるーん 楽曲をプレイした後にも再度回転します。 ▲ぐるーん 再プレイを選…

「ドラゴンエッグ」大事なリソースで桁数が多い場合は区切りのカンマがあると分かりやすい

こんにちは!ちょこです! 桁数があまりに多い時は区切りのカンマがないと、一見して桁数がわかりづらく感じます! こちらの画面は課金石で回すガチャの実行確認ダイアログなんですが… 消費数が500万となっててさすがにインフレが凄くて驚きました。 ▲衝撃的…

「ドラゴンエッグ」NEWの主張が強いんじゃあ

こんにちは!ちょこです! 「ドラゴンエッグ」のガチャ画面でNEWの主張が強すぎると感じました! ガチャ結果なんですが、NEWがサムネイルとがっつり被って何を獲得したのか分からないんですよね… 動きで見るとこんな感じです。 ▲NEWの主張がつよつよ ある程…