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

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

2020-01-01から1年間の記事一覧

「キキ&ララのトゥインクルパズル」デフォルトのユーザー名が世界観に寄り添ってて可愛い

こんにちは!ちょこです! 「キキ&ララのトゥインクルパズル」の名前入力画面にて、世界観に寄り添ったライティングだったので紹介します。 該当の画面は以下です。 紹介したいのはこちらの「名無し星」という文字列です。 「名無し星」と「星」が付いてい…

「キキ&ララのトゥインクルパズル」エンプティステートについてまとめ

こんにちは!ちょこです! 「キキ&ララのトゥインクルパズル」のエンプティステートの事例紹介です。 さくっと紹介! エンプティステートがあったのは以下の画面です。表示可能なメールが無い時です。 該当の部分を抜き出すとこんな感じです。ちなみにキャ…

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

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

「サクラ革命」ボタンを段階的に表示することによって、ユーザーの視線を誘導、やることを仄めかすデザインになっています

こんにちは、ちょこです! 「サクラ革命」のホーム画面にて、アニメーションによる視線誘導がありました。割と見落としやすい部分だと思うので紹介します。 該当のシーンはこちらです。 ホーム画面に遷移した際、下位階層のボタンが時間差でアニメーション表…

「サクラ革命」バトル中の文字演出に可愛い花びらが添えられていました。演出中の文字は世界観を表現するチャンス!

こんにちは!ちょこです! 「サクラ革命」にて、バトル中の演出文字がデザインされていたので紹介します。 ゲーム内に演出はいくつかありますが、どの演出にも共通して「戰」の文字があります。 演出の流れはこんな感じです。バン!バン!バン!と文字が出ま…

「サクラ革命」ストーリーを進めると、日本地図の画面に乙女たちの寄せ書きが追加されるデザインになっている

こんにちは、ちょこです! 今回は「サクラ革命」のストーリーの進行度の示し方のデザインについて紹介します! 「サクラ革命」ではストーリーを進めていくと、日本地図に乙女たちの寄せ書きが追加されていくデザインになっていました! 序章をクリアした時点…

「サクラ革命」メリットが多いはずなのにユーザーから問い合わせが多かったランクアップ時のAPの振る舞いについて

こんにちは、ちょこです! 今回はグラフィック寄りのUIではなく、サービス寄りのUIの話です。 「サクラ革命」のランクアップ時のAPの振る舞いについてです。 リリース当時「サクラ革命」は主人公(司令)のランクが上がってもAPが回復せず、代わりにAP回復薬が…

「サクラ革命」部隊編成時におすすめ編成機能がないので、属性の有利不利が分かりやすく示されていた

こんにちは、ちょこです! 「サクラ革命」でバトルに入る前の部隊編成画面で、どの乙女が有利属性か、不利属性か分かるように示されていました! 以下はその部隊編成画面です。 どこに有利属性、不利属性の情報が表示されているかと言うと、少女のサムネイル…

「サクラ革命」ADVパートの仕様が割と複雑だったので整理してみました。3Dと2Dが混在しているのは描画負荷の軽減のため?

こんにちは、ちょこです! 「サクラ革命」のADVパートの表現がとにかく複雑だったので、どういった要素で構成されているのか整理してみます。 要素を以下の4つに分けて考えてみます。 キャラクター 吹き出し 選択肢 文字色/文字サイズ キャラクター 吹き出…

「サクラ革命」お知らせ画面の見出しがIPっぽいテキストになっていた

こんにちは!ちょこです! 「サクラ革命」のお知らせ画面の見出しが『サクラ革命通信』となっていました。通常は『お知らせ』とかなのでIPを意識したライティングになっています。 該当の画面はこちらです。 こんな感じで見出しの部分が『サクラ革命通信』…

「Food Fantasy フードファンタジー」画面遷移演出を考える際に、場所が変わるという意識で演出を作るとシームレスな演出になって没入感が高まるかもしれない

こんにちは!ちょこです! 「Food Fantasy フードファンタジー」にてレストランの画面に遷移する際に、扉を開ける演出がなされていました。 こちらが遷移前の画面です。 レストランに遷移する際は、こちらの扉が開いて画面遷移します。 こんな感じで扉が開き…

「Food Fantasy フードファンタジー」石を金貨に変換する際に、遊び心のある演出が実装されていました

こんにちは!ちょこです! 「Food Fantasy フードファンタジー」にて、金貨獲得があったので事例紹介です。 「Food Fantasy フードファンタジー」では所謂「石」を使って金貨が得られる機能が実装されていました。 リソースの交換機能自体は一般的ですが、演…

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

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

「Food Fantasy フードファンタジー」ガチャ結果をシェアすると報酬がもらえる機能はユーザーが望む機能なのか?

こんにちは、ちょこです! 「Food Fantasy フードファンタジー」にて、ガチャで新規獲得したキャラをシェアすると、ガチャ1回分の報酬が獲得できる機能が実装されていました。 右下の部分のボタンからシェアできます。 私自身はシェアしたことはないので(…

「Food Fantasy フードファンタジー」UIパーツの中に食器が取り入れられていたデザインの事例紹介

こんにちは、ちょこです! 「Food Fantasy フードファンタジー」のUIパーツにて、タイトルの世界観が取り入れられたデザインが見られました。 UIパーツをデザインする際の拠り所として、世界観を取り入れることは多いかと思います。参考までに紹介します。 1…

「Food Fantasy フードファンタジー」エンプティステートは情報が空かどうかだけではなく、ユーザーのストレスになるかどうかも大事な評価軸

こんにちは、ちょこです! このブログでは何度か紹介させていただいているエンプティステートです。 なぜか海外タイトルで採用されている割合が高いです。文化圏によるメンタルモデルの違いがあるのかな…? 「Food Fantasy フードファンタジー」で該当する画…

「Food Fantasy フードファンタジー」エラー文に顔文字が使われていた。親しみは出るけど発話者が分からないと戸惑うぜ

こんにちは!ちょこです! 「Food Fantasy フードファンタジー」にて、エラー文に顔文字が用いられていました。該当の画面はこちらです。 大きくするとこんな感じです。 T_T、体力が足りません。まずは体力を回復してから続けてください〜〜>_< 顔文字がある…

「Food Fantasy フードファンタジー」図鑑画面のビジュアルデザインがビジュアルに特化しすぎてる件

こんにちは、ちょこです! 「Food Fantasy フードファンタジー」のキャラ図鑑のような画面のビジュアルデザインが斬新でした。 該当の画面はこちらです。 キャラクターそれぞれが、漫画のコマの様な、結晶の欠片のような枠のデザインになっています。 通常、…

「Food Fantasy フードファンタジー」サーバー選択画面にアイコンが表示されていてかわいい!

こんにちは!ちょこです! 「Food Fantasy フードファンタジー」のサーバー選択画面に世界観に沿ったグラフィックが表示されていました。ちょっとしたことですが、デザインとしては珍しい。 何より、とてもかわいい! 該当の画面はこちらです! ここの部分で…

「食物語」プレイ時間に応じて報酬がもらえる機能について

こんにちは!ちょこです! 「食物語」にてプレイ時間に応じて、報酬が獲得できる機能が実装されていました。画面としては以下の画面です。 挙動としてはこんな感じです。ホーム画面から報酬が受け取れるデザインになっています。 施策の概要としてはゲームに…

「食物語」下地を暗くしてアイコンを明るく描くと、ボタンと認識されやすいよ!

こんにちは、ちょこです。 「食物語」のUIパーツの中でドロワーがありました。デザインの手法としてはスキューモーフィズムです。 デザインの特徴を実例を交えて紹介してみたいと思います。 ドロワーのモチーフとして巻物がよく使われていることを記事にしま…

「食物語」ゲーム中にキャラクターに関するクイズの機能が実装されていた。日本も昔は〇✖クイズの実装が流行ってたけど目的が違っている

こんにちは、ちょこです! 「食物語」の施策でクイズがありました。日本でも昔は〇✖クイズを実装するのが流行ってた頃がありましたが、それとは目的が異なっていると感じたので、紹介してみます。 該当の画面はこちらです。 「聖闘士星矢 ライジングコスモ」…

「食物語」架空のデザインとスキューモーフィズムの組み合わせについて考えてみた

こんにちは、ちょこです! 「食物語」のメニューのデザインが「アークナイツ」と同じ思想で作られていると感じました。珍しいのでデザインの比較をしてみたいと思います。 ここがメニュー部分ですね。 敷地の見取り図がモチーフになっており、その中に書庫や…

「食物語」スクショを撮るとTwitterに投稿を促す機能がある

こんにちは!ちょこです! 「食物語」でスクリーンショットを撮ると、Twitterの投稿を促す導線が表示されます。 以下が該当の画面です。スクショを撮った直後の状態です。 分かりますでしょうか? こんな感じで画面下部に「スクショを撮りました!友達にシェ…

「食物語」中国のアプリを日本語ローカライズする際のルビの対応事例

こんにちは!ちょこです! 「食物語」の特徴の一つに難読漢字が多いことが挙げられます。 例えばキャラクターの名前です。 ほとんど中国読みなので分かんないです。中華料理好きな人なら分かるのかな…? アドベンチャーパートにはルビが振られている部分もあ…

「食物語」レベルアップ画面で開放される機能が予告されていた

こんにちは、ちょこです! 「食物語」でレベルアップした際に、未開放の機能が開放される条件も表示されていました。 変わった実装だったので紹介します。 該当の画面はこちらです。レベルアップの情報の他に「ここまでレベルアップすると、この機能が開放さ…

「食物語」チュートリアルの中に『プレイヤーの名前を決める』フローを組み込んでおくと、名前入力の画面のデザインできる

こんにちは!ちょこです! 「食物語」の名前入力画面が世界観に沿っており、没入感を高めるデザインになっていました。 該当の画面はこちらです。 世界観が取り入れられているところを拡大しますね。こんな感じで「委任状」というデザインを用いています。 …

「食物語」最近よく見かけるお知らせ画面のデザイン

こんにちは、ちょこです! 「食物語」のお知らせ画面が最近よく見るデザインになってる…! 流行ってるの?知らない間にトレンドなのこれ…!? 該当の画面はこちらです! 何に戸惑っているかと言うと、メンタルモデルと違うデザインであることに対する違和感…

「食物語」訴求画像を一括で閉じれなくても不思議と快適だと感じた

こんにちは!ちょこです! 「食物語」のホーム画面遷移時に表示される、お知らせダイアログのデザインが良かったです。見た目ではなく挙動とか設計思想の部分ですね。 該当の画面はこちらの画面です。 タイトルを起動させ、初回にホーム画面に遷移すると、こ…

「食物語」オート戦闘の設定で最後のwaveのみ必殺技を使用する設定がありました

こんにちは、ちょこです! 「食物語」のクエスト中のオート戦闘の設定で「最終戦で必殺技を発動する」という項目がありました。AIコマンドが少し進化した感じですかね。 該当の画面はこちらです。上の方に小さく「最終戦で必殺技を発動する」という文字が表…