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

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

【メインコンテンツ】プレイしたゲーム、参考動画、参考記事

こんにちは、ちょこです。

 

このブログはアプリのゲームUIを中心に記事を書いています。

 

以前、ゲームUIに関して調べようと思った際にwebかDTPベースの情報しかなく、困った末にブログを作成いたしました。主に実際のゲームである事例を元に、ゲームUIの視点で記事を書いています。
ゲームUIデザイナーをはじめ、ゲームUIに興味のある方、ゲーム開発者の参考になれば幸いです。

以下、メインコンテンツを紹介いたします。

 

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

このブログで紹介したゲームの一覧ページです。
プレイしたことがあるゲームや、UIが気になっていたゲームがあれば幸いです。

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

 

 

2:参考書籍(作成中)

ゲームUIデザイナーの参考になりそうな書籍の一覧ページです。
読んだ範囲で紹介させていただく予定です。

 

3:ゲームUIデザイナーにオススメしたい動画

講演や用語解説など、ゲームUIデザイナーの学習に参考になりそうなプレイリストです。随時追加、更新いたします。

ゲームUIデザイナーにオススメしたい動画

 

 

4:おすすめのサイト

ゲームUIに関係する記事が多く取り扱われているサイトを紹介します。

おすすめのサイト

 

5:ゲームUIデザイナーの参考になりそうな事例の記事

ゲームUIに関係するインタビューや制作事例などの記事を紹介します。 
(採用目的が強い記事は除外)

ゲームUIデザイナーの参考になりそうな事例の記事

 

 

6:タグ一覧

当サイトのタグ一覧ページです。
スマホではタグ一覧が表示されないのでタグ一覧ページを作成しました。まだページだけある状態です。こちらもコツコツ追加いたします。

タグ一覧

 

7:ゲームUI FAQ

過去に書いた記事が「どのような問題解決になるのか」という視点でまとめたページです。自分自身がデザインをする際に困った時用の備忘録も兼ねています。

ゲームUI FAQ

 

 

8:ゲームUIデザインを検討するメモ

ゲームUIについて感じたことなど。メモ。 

ゲームUIデザインを検討するメモ

 

 

9:その他

以下はブログ運営に興味のある方向けの記事です。

 

 

 

「シャイニングニキ」アプリを更新してもらいたくなるテキスト

こんにちは!ちょこです!

 

「シャイニングニキ」にてアプリのデータ更新時のテキストが世界観に寄せた内容になっていました。

 

該当の画面はこちらです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

マーベル大陸に変化がおこりました

表示されているダイアログに書かれているテキストの内容は以下の内容です。

マーベル大陸に変化が起こりました。
12MBの更新パックを更新してください。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

テキストの内容を補足しますと、

「マーベル大陸に変化が起こりました」とは
「アプリの更新がありました」という意味です。

 

このテキストによって、以下のような感想を抱きました。

  • 部分的に曖昧なため、どんな変化が起きたのかワクワクする
  • 思わず更新したくなる
  • ダウンロードするデータサイズを事前に伝えており、更新するかどうかの判断の助けになる

 

短い内容ですが、情報の密度としては十分なのかな、と感じます。

 

 

ダイアログの目的はアプリを更新してもらうこと

このダイアログの目的はアプリの更新を行うために「更新」のボタンを押してもらうことです。

 

更新ボタンを促すために、まずはグラフィックやレイアウトなど、ビジュアル面での工夫をすることが多いのではないかな、と思います。

 

「シャイニングニキ」のデザインの事例ですと、

  • 「確定」のボタンが右に配置されている
  • 背景色に対して目立つ色を採用している

 といった点はグラフィック面で工夫している点だと感じました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

さらにテキスト側でもダウンロードするデータサイズを事前に伝える工夫をしており、利便性に貢献しています。

 

 

これからはビジュアルだけではなく、テキストもデザインする意識を持ちたい

 

ソシャゲUIにおいて、年々グラフィック面でのUIクオリティは高くなってきていると感じます。

これからはグラフィックやレイアウトといったビジュアル面だけではなく、テキストの内容にも気を配れると、クオリティの向上に繋がるのかもしれません。

 

 

アップデートのタイミングは離脱する懸念が考えられる

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

なぜアプリ更新のダイアログにこういったテキストを書いたのか、少し考えてみました。

アプリをアップデートする際、楽しみにするユーザーも多いと思いますが、離脱するユーザーが存在する可能性もあります。

  • アップデートが面倒に感じてしまう
  • あとで更新しようと思って忘れてしまう
  • アップデートに失敗した
  • アップデートするための容量が足りない

…などなど、様々な要因が考えられます。

そのため、アプリの更新を少しでも促進するような工夫を講じて離脱の可能性を無くそうと考えたのかな、と推測します。

 

以上です。

アプリの更新を促進し、離脱率を下げるための工夫のひとつとして参考になれば幸いです。

 

「シャイニングニキ」タイトル起動画面で表示されるテキストが概念的すぎた

こんにちは、ちょこです!

 

「シャイニングニキ」のゲーム起動直後のロード画面の進捗ゲージの下に、ゲームらしい遊び心のあるデザインが実装されていました。

ゲームの世界観を遊び心を添えて表現できないか、と悩んでいる方の参考になればと思います。

 

該当の画面はこちらです!

◆◆◆◆◆◆◆◆◆◆◆◆◆◆



 

「意識の通り道接続中」と表示されています。
文脈としては、データをインストール中、ゲームを始める準備中、というニュアンスでしょうか。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

また「心の扉へ移動中」という表示もありました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

こちらはサーバーへの接続が確立されていない状態の時に表示されているのかな、と思います。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

今回確認できたのは以下の2パターンです。

  • 意識の通り道接続中
  • 心の扉へ移動中

 ※他にも「意識の通り道建設中」というのもあるみたいですが、確認できず。

 

 

この「意識の通り道」と「心の扉」の意味を少し調べてみました。

 

「心の扉」はゲーム内だとガチャ画面の記号として使われています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

これですね。タップするとガチャ画面に遷移します。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆


ただ、おそらくタイトル画面での「心の扉へ移動中」は「ガチャ画面に遷移中」を意味しているわけではないと思います。意味が分からないので…。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

「シャイニングニキ」でのガチャ画面は「イメージ(アイテムとかシャドウ)が漂う記憶の海」みたいな扱いなので「心の扉へ移動中」とするのであれば「記憶の海へ移動中」とする方がイメージとしては近いんじゃなかろうか…。

「記憶の海」について、公式サイトによると

意識と無意識が具現化した、人の記憶と感情が集まる海。

とあります。この辺りから解釈の余地が大きくなってくるので「心の扉」の考察についてはここまでにします。 

 

 

「意識の通り道」についてもはっきりとは分からず。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

こちらも公式サイトを見ると「意識」という単語が頻繁に登場していました。

 

記憶の海

意識 と無意識が具現化した、人の記憶と感情が集まる海。
高次元に存在し、予測できない強大な力を秘めている 。 

 

デザイナーシャドウ

デザイナーの記憶は衣装と共に箱船に保管されている。
そこから生まれた自我を持った 意識 ――
それがデザイナーシャドウ。
強力なシャドウは他者の精神世界に影響を及ぼす。

 

 イメージ

それはデザイナーシャドウの力をより引き出すもの、
凝縮した人の 意識 の結晶、感情、認知、様々な瞬間から構成される。

結晶が具現化して氷塊となり、記憶の海を漂う。

そこに込められた強い感情、記憶がデザイナーシャドウと融合した時、
持ち主は強い力を手に入れることができる。

 

このように「意識」という単語が比較的頻出しています。

「シャイニングニキ」公式サイト-用語説明

 

このように「シャイニングニキ」の起動時のテキストについては、世界観に寄せつつも全体的に概念的なものを指し示しているため、具体的に何がどうなっているのかについてははっきりとさせないテキストになっているように感じました。

ちょっと変わったデザインですが、特にルールも無いので世界観に合わせていくとこうなった…という感じでしょうか。

 

以上が「シャイニングニキ」のデザインについての紹介です。

 

ロード中に表示されるテキストのデザインについては過去にも紹介したことがあります。

 

中でも良かったのは「聖闘士星矢 ライジングコスモ」のデザイン事例です。

  • IPならではの世界観を示す用語を盛り込んでいる
  • ロードゲージの進捗にあわせてテキストの内容がストーリーをなぞるように時系列に変化する

といった工夫がされています。

ああああああああ

 

「聖闘士星矢 ライジングコスモ」タイトル起動画面で世界観を表現するテキストが表示されていた。世界観に没入させるための小さな工夫 - ゲームアプリのUIデザイン

 

以上です。デザインを検討する際に参考になれば幸いです。

「シャイニングニキ」プレイヤーのことをどう呼称するか問題

こんにちは、ちょこです。

 

「シャイニングニキ」のお知らせの文章にてプレイヤーを「スタイリストの皆さまへ」と表記している部分がありました。

該当の画面はこちらです。

f:id:appgameui:20210410141647p:image

 

この部分ですね。
「スタイリストの皆さまへ」という挨拶から始まっています。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

ゲームならではの呼び方がある

ゲームではプレイヤーに対してゲームならではの呼び方をすることは珍しくありません。分かりやすいところだと「勇者さま」とか「殿」などは古くから使われています。

プレイヤーをどう呼ぶかで、運営とプレイヤー側がゲーム内の自分をどのように認識しているかが確認できます。

また、世界観を再認識し、世界観に没入する手助けにもなると考えられます。

 

他にも「親愛なるスタイリストの皆さまへ」という呼び方もされていました。

f:id:appgameui:20210410141700p:image

 

 

こちらですね「親愛なるスタイリストの皆さまへ」とあります。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

使い分けに関して規則性は分からなかったのですが、気分で使い分けしてるのかな…。

 

以上です。

プレイヤーをどう呼びかけるか考えることはゲームのお知らせ文の基本ですが、ゲームにあまり慣れていないUIデザイナーからすると特殊に見えるのかな、と思い紹介させていただきました。

お知らせ文のフォーマットを検討する際の参考になれば幸いです。

「シャイニングニキ」撮影モードで照明の設定まで出来ることに驚きました

こんにちは、ちょこです!

 

「シャイニングニキ」の撮影モードに照明の設定があることに驚きました。

ただ撮影するのではなく、ニキがどう撮影されたいか、ということが意識されているように感じました。該当の画面はこちらです。

f:id:appgameui:20210404232116p:image

 

まるで本物のスタジオで撮影するような設定

撮影モードがあるゲームは稀に見かけますが、背景の設定、UIの非表示、ポーズの変更などが中心で照明の設定が出来るゲームは初めて見ました。

 

照明の設定はデフォルトで以下の5種類が用意されていました。

  1. プルース(プルーズの誤字?)
  2. 全面の光
  3. 左からの光
  4. 右からの光
  5. 蛍光灯

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

それぞれを切り替えると以下のように見た目が変わります。
(プルーズ⇒全面の光⇒左からの光⇒右からの光⇒蛍光灯)

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

実際の人物を撮影する際には照明の設定は必要になります。
わずかな違いに見えるかも知れませんが、こだわりが感じられる設定です。

 

 

撮影は加工もセットで考える

「シャイニングニキ」は若い女性がメインターゲットのゲームです。
写真撮影と言えば加工もセットという認識になっているユーザーも多いのかもしれません。

今は加工アプリはもちろん、撮影時にフィルタをかけて撮影ができることが当たり前なになっています。加工のための技術的なハードルは低くなり、より身近になっています。

 

SNSでのシェアを視野に入れると、ただ撮影するだけではなく、加工を前提に考えるのが、自然な考えになってくるのかもしれません。

今後、SNSでの拡散を目的として、ゲームでキャラクターの撮影モードを検討する際は、ゲーム画面のスクショという概念ではなく通常のカメラアプリと同様に撮影モードを考えていく必要があるのかもしれません。

 

拡散したくなるスクショのために

以上です。

撮影モードを実装する目的の中には「SNSでの拡散」があるかと思います。

SNSでの拡散を目的とするならば、ただ画面のスクショが撮影できれば良いだけではなく、SNSで拡散したくなるスクショが撮影できるためのデザインも検討する必要が生まれてきます。

「シャイニングニキ」の照明設定はキャラクターを魅力的に見せるためのひとつのオプションだと考えます。

撮影モードに必要な設定を考える際の参考になれば幸いです。

 

 

▼類似の参考までに「Ink,Mountains and Mystery」の事例も置いておきます。よろしければこちらもどうぞ。

appgameui.hatenablog.com