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

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

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

レトロ調のロゴデザインをする仕事の参考資料に「タイポさんぽ改」

こんにちは、ちょこです。 「タイポさんぽ改:路上の文字観察」を購入しました。 どういった方に参考になるか紹介します。 書籍の紹介文は以下のようになっています。 街角の文字をたのしく読み解く 珠玉のデザインエッセイにして、手描き文字デザイン再評価…

「創世記戦:アンタリアの戦争」情報の一部を隠すことによって、リストがスクロールできることが示されている

こんにちは!ちょこです! 「創世記戦:アンタリアの戦争」でアフォーダンスを利用している場面があったので、事例として紹介します。 該当の画面はこちらです。 画面右端に少しだけ映っているUIパーツが、アフォーダンスを用いているデザインです。 デザイ…

「創世記戦:アンタリアの戦争」動画広告を視聴した回数に比例して、報酬がレベルアップする実装事例の紹介です

こんにちは、ちょこです! 「創世記戦:アンタリアの戦争」にて、動画広告を視聴すると報酬が獲得される機能が実装されていたのですが、ちょっと変わった実装だったので紹介させてください。 該当の画面はこちらです。 挙動を見るとこんな感じです。 動画広…

紹介させていただいたゲーム

こんにちは!ちょこです! このページではブログ内で紹介したタイトルを50音順に並べています。ある程度プレイしたタイトルが追加されたらまとめて更新しています。プレイしたことがあるタイトル、参考になるジャンルのゲームがあれば幸いです。 現在234…

「創世記戦:アンタリアの戦争」アイテム一覧画面にショップへの導線がある

こんにちは、ちょこです。 「創世記戦:アンタリアの戦争」のアイテム一覧画面にてランダムでショップへの導線が表示されていました。 該当の画面はこちらです。 右下に横長のバナーが表示されています。 この導線は画面を切り替えるたびにランダムで切り替…

「Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」スワイプして選択肢を選ぶADVパートのUI

こんにちは、ちょこです。 「Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」のADVパートで選択肢を選ぶ場面があるのですが、左右にスワイプして選択肢を選ぶデザインになっていました。 ソシャゲではあまり見ないデザインだったので、事例とし…

「Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」映像にマスクをかける演出が新しい!

こんにちは!ちょこです! 「Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」のストーリー画面の演出で斬新なものがあったので紹介します。 該当の画面はこちらです。 アニメーションさせるとこんな感じです。 キャラクターの中にアニメが流れ…

「Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」トグルボタンのオン状態は右か左か

こんにちは!ちょこです! 「Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」にて、トグルボタンの挙動が気になりました。 該当の画面はこちらです。 トグルボタンはこの画面の下部にある「オート周回」のラベルのところに使われていました。 …

「Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」ADVパートでキャラの頭上にテキストが表示されるデザインが気になる

こんにちは、ちょこです。 「Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」のADVパートの吹き出しの位置が気になりました。 該当の画面はこちらです。 挙動としてはこんな感じですね。 個人的にはちょっと見づらいデザインだと感じました。 …

「三国志名将伝」バトルの途中でバトルスキップのボタンが表示される

こんにちは!ちょこです! 「三国志名将伝」のバトルスキップの挙動がちょっと変わった挙動でした。該当の演出は以下です。 バトルの途中に画面の右下に「スキップ」が表示されます。 該当部分だけ抜粋してもう一度お見せします。 細かい表示条件は分からな…

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

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

「三国志名将伝」ボイスチャット機能が実装されていたので稀有な事例として紹介。意外とメリットも多い

こんにちは!ちょこです! 「三国志名将伝」でボイスチャット機能が実装されていました。 該当の画面はこちらです。 このようにチャット欄で音声の送受信が可能な実装になっています。てっきり音声入力だと思っていたのですが、まさかの音声送信。 これがあ…

「三国志名将伝」レベルアップで開放される機能がリストでまとめられていた。次の目標にしやすくてモチベーションに繋げられる

こんにちは、ちょこです。 レベルアップするごとに機能解放されていくのですが、リスト表示されていて分かりやすくなっていました。 また、機能名だけではなく、機能の概要が説明されていることも、ユーザーの認知コストを下げるという意味で、良いデザイン…

「三国志名将伝」機能が多いならジャムの法則を用いて情報を整理してみると良さそう

こんにちは、ちょこです。 「三国志名将伝」では戦力の数字を高めることが遊び方の一つ これは主にキャラを強化して累積的に上がっていく どうやったら効率的に戦力の数字を上げることができるのか、その方法だけではなく優先度が示されている ちなみに、リ…

「三国志名将伝」クイズ機能はゲームに対する没入感に寄与しているかもしれない

こんにちは!ちょこです! 「三国志名将伝」のクイズ機能を紹介します! 該当の画面はこちらです。 クイズ機能。どういうわけだか中国のタイトルを中心に見かけることが増えてきました。 UI云々抜きにして、この機能のメリットとしては… 三国志に関する知識…

「三国志名将伝」お知らせ画面のデザインが手数が少なくて済むデザインだった

こんにちは、ちょこです! 「三国志名将伝」のお知らせ画面が既存のメンタルモデルと異なっていたので紹介します。 該当の画面はこちらです。 動きで見るとこんな感じです。 上部のタブが大項目の切り替えになっています。 左側のタブが小項目の切り替えです…

「三国志名将伝」エンプティステートの実装事例紹介

こんにちは!ちょこです! 「三国志名将伝」のエンプティステートの実装事例を紹介します。 該当の画面はこちらです。メール画面ですね。この画面の役割としてはプレゼントボックスのような役割です。 使用されているキャラクターが気になったので調べてみま…

「三国ブレイズ」チャット機能のボタン配置が自由に変えられる件

こんにちは、ちょこです。 「三国ブレイズ」にはチャット機能があるのですが、チャットボタンの位置が自由にカスタムできるようになっていたのが特徴的だと思いました。 該当の画面は以下です。 チャット機能のボタンはこちらです。 ホーム画面の例ですが、…

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

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

「三国ブレイズ」エンプティステートのデザイン紹介

こんにちは、ちょこです! 「三国ブレイズ」からエンプティステートのデザインの紹介をさせていただきます。 個人的にはエンプティステートの知名度を上げたいと考えているので、積極的に紹介しています。 エンプティステートでは以下の場面で使われていまし…

「ハムスターコレクション」スライドバーがありえないくらい可愛い

こんにちは、ちょこです! 「ハムスターコレクション」のスライダーバーがありえないくらい かわいい…!! 該当の画面はこちらです。 こちらが「スライドバー」です。「スライダー」とも言ったりしますね。 動くともっとかわいいです! ほんと、なんでここだ…

「ポケモンクエスト」プラットフォームに合わせたUI設計が大事

こんにちは、ちょこです。 「ポケモンクエスト」でUIの設計のルールがiOSの設計ルールに合っていないのが気になりました。 以下が該当の画面です。「はい/いいえ」の順番でボタンが並んでいます。 調べてみると「ポケモンクエスト」はswitchでも配信されてい…

「ミリオンモンスター」ロード画面が減っていくとTIPSの表示機会が減る。ゲームのシステムをどう伝えれば良いのか問題

こんにちは!ちょこです! ロード画面の実装が減っていく中において、「ミリオンモンスター」のTIPSについて考えてみました。 ソシャゲのロード中にTIPSが表示されるタイトルは珍しくありません。 「ミリオンモンスター」の画面は以下です。 デザイン的な特…

「イケメンけしけし」キャラクターを前面に出したゲームUIの紹介

こんにちは!ちょこです! 「イケメンけしけし」をプレイしていたら、汎用のUIパーツだけではなくグラフィックが多用されているUIのデザインになっていました。 「イケメンけしけし」は「LovePlan」というアプリのスピンオフに相当するゲームです。 もしかす…

「光を継ぐ者」メンテナンス中にカウントダウンがあった。開発者のプレッシャーになりそう

こんにちは!ちょこです! 「光を継ぐ者」がメンテナンス中だったのですが、まさかのカウントダウンが実装されていました。 該当の画面はこちらです。 ダイアログの中にメンテナンスの時間帯と、あと何時間何分何秒でメンテナンスが開ける予定なのか、カウン…

「光を継ぐ者」クエスト選択画面がパネル開放型で斬新だった

こんにちは!ちょこです! 「光を継ぐ者」からクエスト選択画面のデザインを紹介します。 UIの視点からだと、リスト選択型と比較して手数が省略できるのではないかなと思います。 該当の画面は以下です。 各パネルがクエストです。クリアするとパネルがど…

「光を継ぐ者」動画広告を視聴するとガチャが出来たり報酬が獲得できる機能まとめ

こんにちは、ちょこです! 「光を継ぐ者」にて、動画視聴で 報酬が獲得 ガチャができる ショップのラインナップが更新できる などの機能が実装されていました。こちらについて機能の紹介をしていきたいと思います。 動画広告を見ると報酬が獲得できる 動画広…

「光を継ぐ者」クエストを周回するソシャゲに必須な機能4選

こんにちは、ちょこです! 「光を継ぐ者」から、クエストを周回しやすくするための機能を4つ紹介します。 以下が便利だと感じた機能です。 オートバトル機能 バトルスピードアップ機能 連続戦闘実行機能 バトルスキップ機能 早速紹介していきます。 「オー…

「いきものバトルタワー」ボタンの中に「~する」というテキストを入れると本文を読まずに判断できるので便利

こんにちは!ちょこです! 「いきものバトルタワー」のUXライティングについて紹介します。 該当の画面は以下です。 この画面はゲームオーバーになった時の画面です。コンティニューするかを尋ねるダイアログが表示され、画面の下部に… 動画を見てふっかつ!…

「キキ&ララのトゥインクルパズル」UIパーツに世界観が取り入れられ、かわいいかったので事例紹介

こんにちは、ちょこです! 「キキ&ララのトゥインクルパズル」のUIパーツが世界観を取り入れられて、可愛かったので、デザインの事例として紹介してみます。 1:羽ペン 2:笛のアイコン 3:音符のデザイン 4:言語設定のアイコン 5:矢印のデザイン 1:羽…