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

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

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

「Q&Qアンサーズ ~クイズRPGでオンライン・バトル~」たった7文字表示するだけで利便性の向上、テンポの良さ、訴求の3役をこなしている凄いUI

こんにちは!ちょこです! 「Q&Qアンサーズ ~クイズRPGでオンライン・バトル~」のクイズを選ぶとき、設問の文頭が少しだけ見えるの良いな!って話です。 ▲クイズのジャンルを選択する画面 どういった部分で良いと感じたのか説明します。 1:利便性について…

「Q&Qアンサーズ ~クイズRPGでオンライン・バトル~」漫画にちゃんとアンチック体が使われている。

こんにちは!ちょこです! 「Q&Qアンサーズ ~クイズRPGでオンライン・バトル~」に漫画があるのですが、ちゃんと漫画でよく使う「アンチック体」が使われていました。 ▲プロローグが漫画で描かれています ▲漫画でよく使われるフォント。私は「アンチゴ」っ…

「Q&Qアンサーズ ~クイズRPGでオンライン・バトル~」サムネイルが本のモチーフ!世界観に沿ってて素敵です!

こんにちは、ちょこです! 「Q&Qアンサーズ ~クイズRPGでオンライン・バトル~」のキャラクターのサムネイルのデザインが世界観に沿ってて素敵だな、と思いました。 こちらです! バトル中はまた別のデザインですが、モチーフは同じく本です。 このゲームの…

「Q&Qアンサーズ ~クイズRPGでオンライン・バトル~」動画視聴でインセンティブがもらえる!

こんにちは、ちょこです! 「Q&Qアンサーズ ~クイズRPGでオンライン・バトル~」で動画を視聴することで様々なインセンティブがあったので紹介してみます。 クエストボーナス ガチャ プレゼントボックス クエストボーナス まずは「クエストボーナス」です!…

「Q&Qアンサーズ ~クイズRPGでオンライン・バトル~」古今東西のキャラが登場すると世界観が作りづらい?

こんにちは、ちょこです! 「Q&Qアンサーズ ~クイズRPGでオンライン・バトル~」のボタンデザインがブラウザっぽくて気になりました…! ▼こちらのデザイン。 シンプルなのは良いとは思うのですが、CSSで再現できてしまう系のボタンのデザインだと、少し古く…

「モダンコンバットVersus」ゲームをプレイしながらボタンの位置調整ができる

こんにちは!ちょこです! 「モダンコンバットVersus」、通称「モダコンVS」のボタンの位置調整機能が独特だったので紹介したいです。 早速なのですが、ボタンの位置調整機能の画面がこちらです! こんな! 移動したり、銃も撃てます! いわゆる、トレーニン…

「どうぶつの森 ポケットキャンプ」情報の見せ方に関して考えてみました

こんにちは!ちょこです! このブログでは「ゲームのUIを見てみよう!」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「どうぶつの森 ポケットキャンプ」通称「ポケ森」の情報の見せ方につ…

「どうぶつの森 ポケットキャンプ」エンプティステートの紹介

こんにちは!ちょこです! このブログでは「ゲームのUIを見てみよう!」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「どうぶつの森 ポケットキャンプ」通称「ポケ森」のエンプティステー…

「LEGO Star Wars: The Force Awakens(レゴ スター・ウォーズ/フォースの覚醒)」これがレゴの足跡!こういった部分もUXには大切だと思います

こんにちは、ちょこです。 「LEGO Star Wars: The Force Awakens(レゴ スター・ウォーズ/フォースの覚醒)」の足跡が可愛かったので紹介させてください。 歩いてたら地面によく分からない模様が付いてたことに気付きました。 これ、キャラクターの足跡なんで…

「LEGO Star Wars: The Force Awakens(レゴ スター・ウォーズ/フォースの覚醒)」カメラとキャラの間に遮蔽物があった時の表示の仕方

こんにちは、ちょこです。 「LEGO Star Wars: The Force Awakens(レゴ スター・ウォーズ/フォースの覚醒)」でカメラとキャラクターの間に遮蔽物があった時の見せ方を紹介します。 こんな感じでキャラクターのアイコンが表示されます。最初見た時何かと思っ…

「LEGO Star Wars: The Force Awakens(レゴ スター・ウォーズ/フォースの覚醒)」コインを配置することもUIの一端

こんにちは、ちょこです。 「LEGO Star Wars: The Force Awakens(レゴ スター・ウォーズ/フォースの覚醒)」でコインの配置でプレイヤーの行動をコントロールしてたので紹介します。 こちら、画面を見ただけで分かりますかね…。 地面が無い場所にコインがあ…

「プロ野球PRIDE」ボタンは画面内に配置するようにしたい

こんにちは、ちょこです。 「プロ野球PRIDE」にてキャンセルボタンが画面外に表示されてて、押しづらく感じました。 ▲キャンセルボタンが画面の外に出ている しかもこれ、スクロールできないんですよね… ソシャゲは色んな画面の比率に対応しなければいけない…

「プロ野球PRIDE」バッターボックスに入るとカメラが移動して選手がフレームインする演出。ちょっとした工夫だけどしっかりと没入感を高める演出。

こんにちは、ちょこです。 「プロ野球PRIDE」にて、バッターの準備ができたらカメラが若干選手の方に寄る演出が入っていました。 こんな感じでカメラが寄ります。 比較するとこんな感じです。 ▲バッターが画面に収まるようになりました ボールの位置がずれる…

「プロ野球PRIDE」黒い背景に赤い文字は避けた方が良い。色の組み合わせには注意が必要。

こんにちは、ちょこです。 「プロ野球PRIDE」で使用されてる文字色が視認性の観点から気になりました。 ▲お知らせ画面 ▲注意事項 ▲クエスト(?)画面のリストの強調表示 以上です。赤い >< 赤文字って強調色として認知されていますが、実は黒地に赤文字って…

「プロ野球PRIDE」会話画面がとてもよくまとまっていると感じた理由。あと若干のデメリット。

こんにちは、ちょこです。 「プロ野球PRIDE」の会話画面が完成されてると感じているので、縦画面のゲームは基本的に全部これに倣えば良いと思ってます。 どん!こんな感じです。 コロプラ社の縦画面のゲームは多分大体このUIだと思うのですが、割と完成され…

「プロ野球PRIDE」フィルタの状態を複数保存できる機能が便利!

こんにちは、ちょこです。 「プロ野球PRIDE」のフィルタ機能にプリセットが入ってて目からうろこ! このゲーム、フィルタの設定が4つまで保存できるようになっています。 初めて見た機能ですが、ゲームによっては非常に便利な機能だと思います。フィルタの状…

「激ムズ彼氏~ホスト編~」アンチパターン、誤字やレイアウトの不揃い

こんにちは、ちょこです。 「激ムズ彼氏~ホスト編~」プレイしています。今回はアンチパターンの話です。 アンチパターンは「やらない方が良いデザイン」という意味で使われることが多いです。デザインに正解はないのですが、いくつかの不正解はあります。 …

「激ムズ彼氏~ホスト編~」選んだことのある選択肢にマークが表示されると効率的にスチルイラストが回収できて超便利

こんにちは、ちょこです。 「激ムズ彼氏~ホスト編~」の話です。ひたすら選択肢を選んでホストの好感度をコントロールするゲームなのですが、選んだことのある選択肢にマークが付く仕様です。 こんな感じでハートマークが表示されます。 ▲増減量は4パターン…

「激ムズ彼氏~ホスト編~」動画広告を訴求するテクニック。システムではなく世界観に寄せた文章の方が楽しい!

こんにちは、ちょこです。 動画広告の訴求文が面白かったので紹介します。 「激ムズ彼氏~ホスト編~」の場合、好感度が下がる選択肢を選ぶとランダムで「動画広告を見るともう一度選択肢選べるけど…どうする?」という訴求ダイアログが表示されます。 ▲世界…

「激ムズ彼氏~ホスト編~」ホストがオススメする、という設定で他タイトルへの導線が作られている。そこまでは良かったが…

こんにちは、ちょこです。 「激ムズ彼氏~ホスト編~」にて、ゲームが終了した画面で他タイトルに遷移する導線があるのですが、世界観を尊重するデザインだったのが良いな、と感じました。 これ。 「ホストのオススメ他店へ遊びに行く」って表記なのが良いで…

「垢のプリンス~恋の人体錬成~」メッセージ送りの位置に話者グラフィックを表示するのはオススメできない

こんにちは、ちょこです。 「垢のプリンス~恋の人体錬成~」の会話ウィンドウにて、キャラの位置が右下にあったのが気になりました。 この画面。 一見するとメッセージ送りかと思いきや、話者のグラフィックです。 ん~…、これはちょっと分かりづらい…。 恐…

「GOLF CRASH -ゴルフクラッシュ-」ミュートアイコンがゲームっぽくてかわいい

こんにちは、ちょこです。 「GOLF CRASH -ゴルフクラッシュ-」にてミュートアイコンのデザインがかわいいので紹介します。 下の方にあるこれ is かわいい。 ▲お口にチャック ミュートアイコンって大体は禁止マークとかバツマークを使うことが多いので、新鮮…

「GOLF CRASH -ゴルフクラッシュ-」ストレスのかかる場面でこそ遊び心が大切。操作に合わせて鍵が動くアニメーションについて

こんにちは、ちょこです。 「GOLF CRASH -ゴルフクラッシュ-」にて鍵の表現が面白かったので紹介します。 こんな感じでプレーできないコースには鍵が掛けられているのですが… その鍵が操作に合わせて動くようになっています。 ▲動きます! 細かっ! どうして…

「GOLF CRASH -ゴルフクラッシュ-」お知らせ画面の挙動がシームレス。軽い操作感を実現されていました

こんにちは、ちょこです。 「GOLF CRASH -ゴルフクラッシュ-」のお知らせ画面が良い操作性でした。 どんなところかと言うと… ▲シームレスで開閉 ▲アニメーションするバナーもある これ、どういう運用と実装なのかな。多くのゲームはwebでの実装に見えるけど…

「ディズニー マイリトルドール」考えてみるとスタンプは紙に押すもの。紙らしさを表現するちょっとした工夫

こんにちは、ちょこです。 「ディズニー マイリトルドール」のスタンプのデザインを見てて気付いたことを書いておきます。 スタンプが使われている場面 ゲーム内でスタンプが使われている場面はいくつかあります。 ▲ミッション画面に表示される達成した印 ▲…

「ディズニー マイリトルドール」色選択のUIがMVP並みに優れたUIだと感じました

こんにちは、ちょこです。 アバターの色変更が興味深いUIだったので紹介します。 色選択というとどういったUIを想像しますか? マイリトルドールのUIはこういったUIになっていました。 ▲瞳の色を変更 ▲チークの色を変更 カーソル固定で色サンプルを可変する…

ディズニー マイリトルドールから学ぶ温かみのある可愛いアイコン作成の実例を紹介。左右非対称なデザインが素敵。

こんにちは、ちょこです。 「ディズニー マイリトルドール」にてボタンの下にある文字がカーブになっているのが興味深いなと感じました。 この部分です。一般的には可読性を考慮して直線にします。 ▲カーブになっている この画面は比較的頻繁に見る画面…とい…

「ディズニー マイリトルドール」目的のボトルを探すときに持っているユーザーのリストが表示されるのは便利。導線の良さってなんで気付きづらいんだろう。

こんにちは、ちょこです。 「ディズニー マイリトルドール」欲しいボトルを設置してるユーザーが観れるの便利です! 機能導線系って基本的にはゲームの仕様とかシステムを理解した上での話になるので書きづらい部分があります。なので、先にシステムとか仕様…

「ディズニー マイリトルドール」見出しのデザインのバリエーション紹介。一貫性や統一感はないけど丁寧に作られている。

こんにちは、ちょこです。 「ディズニー マイリトルドール」各画面の見出しのデザインが豊富だったので紹介します。 上のような画面の見出しのバリエーションには以下のようなものが見られました。 書体や見出しなどのバリエーションが豊富ですね。 一般的に…

「ディズニー マイリトルドール」タイトル画面にロードの進捗の代わりに遊び心のあるテキストが表示される

こんにちは、ちょこです。 「ディズニー マイリトルドール」のタイトル画面に表示されるロード中のテキストが可愛いな、と思いました。 ▲ここ! ▲アニメーションするとこんな感じ! あまり見ないけど、個人的には遊び心があって好きなデザインです。最近見か…