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

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

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

以前、ゲームUIに関して調べようと思った際にwebかDTPベースの情報しかなく、困った末にブログを作成いたしました。主に実際のゲームである事例を元に、ゲーム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：その他

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

• altタグを入力している時に注意していること

• ブログ1年目を振り返って

「魔界戦記ディスガイアRPG」過去のADVパートでは旧版のグラフィックが採用されていた

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

このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。

今回は「魔界戦記ディスガイアRPG」から過去作品の紹介をする機能とその中の会話シーンを紹介いたします。

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

キャラクターに注目してみると、色の塗り方や各パーツのデザインがちょっと古い印象を受けますが、実際古いデザインです。

「魔界戦記ディスガイアRPG」の通常の会話シーンで使われているグラフィックはこちらです。

新旧のキャラデザを比較するとこんな感じですね。
こちらが旧デザインです。

こちらが新デザインです。

このように新旧が用意されている理由は「魔界史回想シリーズ」という機能があるためです。

遷移で見るとこんな感じですね。

魔界史回想⇒シリーズ選択⇒エピソード選択、という画面遷移をしています。

IPのシリーズ作品の場合、過去の作品やエピソードを知ってもらおうと、キャラクターやストーリー紹介をするケースはあります。

「魔界戦記ディスガイアRPG」のようにグラフィックまで旧版を用意するのは初めて見ました。

リアルタイムにプレイしていたユーザーにとっては懐かしさを強く感じられる表現かと思います。

過去作品をリスペクトし、ファンを大切にしているデザインに感じられました。

以上です。

過去作品を紹介する機能やデザインを検討する際の参考になれば幸いです。

「魔界戦記ディスガイアRPG」あやしげな演出を盛り上げる、遊び心のある映像表現

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

このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。

今回は「魔界戦記ディスガイアRPG」からキャラクターの転生演出を紹介いたします。

該当の画面と演出はこちらです！ 

このように転生演出の間に静止画が挿入されるデザインが特徴的です。

また、静止画では伝わりませんが、
この演出の最中にはドリルなどの機械的なSEやキャラクターの絶叫を模したようなSEが流れています。

このキャラクターが持っている機械類の駆動音をイメージしていただくと分かりやすいかもしれません。

背景は全体的に怪しい雰囲気です。
大きな石造りの一室で、窓が無く薄暗い地下室のような場所です。

演出の流れをもう少し詳しく見てみます。
まず最初に、いかにも怪しい改造手術が行われるような場面が表示されます。

• 何に使うのか分からない器具のある部屋
• 怪しい雰囲気の医師
• 物騒な器具

そしてその後に

• 背景で流れる物々しいSE
• 綺麗な背景
• 「恐れ入りますがしばらくそのままでお待ちください」と丁寧なメッセージ

というSEと静止画が挿入されています。

日本国内のTV放送では、画面に表示されている映像が、機器の故障やガイドラインに抵触するような映像であった場合、その部分を放送しても問題のない映像に差し替えるケースがあります。

怪しい雰囲気の画面と物騒なSEから、
画面の向こうでは表示できないようなことが起きていると想像します。

もちろん実際にはそんなことは無いと思いますが、「魔界戦記ディスガイアRPG」はメタ的であたりコメディ調の世界観です。

怪しげな雰囲気を盛り上げるためにギャグ要素として表示していると推測します。

以上です。

今回紹介した演出はUIデザインとして見た場合には世界観の表現、意匠性に関わる部分と見ることが出来るのかもしれませんが、もう少し広く捉えるならば「遊び心の提供」と見ることが出来ます。

「魔界戦記ディスガイアRPG」の転生演出のように、演出の途中で演出とはまったく関係のない静止画を挿入するデザインはかなり稀です。

取り入れられる機会は限られるかもしれませんが、デザインの幅を増やす意味では把握しておいた方が良いのかもしれません。

「魔界戦記ディスガイアRPG」ボタンのマイクロコピー。分かりやすさだけではなく世界観を取り入れたデザイン

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

このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。

今回は「魔界戦記ディスガイアRPG」からボタンの中にある世界観を取り入れたマイクロコピーの事例を紹介いたします。

該当の画面はこちらです！
召喚結果画面です。通常の召喚結果画面と異なる点として、何度でもやり直しができる点があげられます。

分かりやすいように該当部分を拡大します。 

このように

• 「OK」
• 「キャンセル」

のボタンの中のテキストが…

• 「OKッス」
• 「やり直したいッス」

となっているのが特徴です。

文章を読まなくても、ユーザーが行動を判断できるようにするために、ボタンの中のテキストに「ユーザーが何をするのか」という旨を書くことはよくあります。

例えば利用規約の画面では「同意しない」「同意する」といったように、ダイアログの内容を読まなくてもユーザーが何をすべきであるか、伝わるデザインになっています。

分かりやすいように該当部分を抜粋しました。

多くのダイアログのボタンはこのように「いいえ」「はい」となっています。

こちらも分かりやすいように該当部分を抜粋しました。
こういった汎用的なボタンテキストの場合は選択肢だけ見ても、ユーザーが行動を判断できません。

「同意する」といったボタンテキストの場合、内容を読まなくてもユーザーは行動が判断できます。

最初に紹介した召喚結果画面のボタンテキストの場合、
行動が分かるボタンテキストに加え、世界観が伝わるテキストになっています。

ゲームの場合、分かりやすさといった評価軸に加え、楽しんでもらうための没入感も重要です。

すべての画面やダイアログでこのようなデザインを採用すると逆に分かりづらさが勝りそうですが、ポイントを絞った上で取り入れてみると他の画面との差別化も図られ、ゲームにメリハリが生まれます。

以上です。

ボタンの中に表示されるテキストについて、分かりやすさだけではなく、世界観を取り入れるデザインの事例を紹介しました。

ボタンテキスト、マイクロコピーの参考になれば幸いです。

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

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

このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。

今回は「魔界戦記ディスガイアRPG」でチェックボックスの見た目なのにラジオボタンの挙動になっている箇所があったので、アンチパターンの事例として紹介いたします。

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

フィルタ画面にあるチェックボックスのUIパーツに注目です！

分かりやすくするために拡大します。
昇順、降順と並んでいます。

一見すると気づかないかもしれませんが、よく考えてみると昇順と降順は同時には選択できません。選べるのはどちらかひとつだけです。

同じく「魔界戦記ディスガイアRPG」の例ですが、こちらではチェックボックスが正しく使われていました。

キャラクター別表示の部分にチェックボックスのUIパーツが使われています。
こちらは複数選択が可能な挙動になっています。

同じようなアンチパターンは稀に見かけます。
以前も「三国志名将伝」というゲームで同じような使われ方をしているチェックボックスがありました。

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

一部の例外がリリースされ、広がってしまった結果、ユーザーの認知コストや学習コストが増してしまいます。
ルールの不統一ということでブランドイメージも弱くなってしまうことも懸念されます。

UIパーツの挙動には基本的なルールがあります。
ルールを守るメリットですが…

• ユーザーのメンタルモデルが利用できる
• ユーザーの学習コストが抑えられる
• 実装する際に詳細な指示書を用意しなくても認識が合わせられる

などです。

ゲームがより面白くなったり、ユーザーのストレスが減らせるのであればルールを守らなくても良いこともあります。 

ルールを絶対視してしまうと、デザインの拡張性も失われてしまいます。

絶対視はしてはいけないのですが、必然性がないのであれば余計なことはしない方が良いのかな、と思います。
基本的なUIパーツのルールの挙動や取り扱いのルールには気を付けたいところです。

以上です。

UIパーツの挙動のルールについてはデザイナーよりもエンジニアの方が深く理解しているケースもあります。

相互に知識を補って、アンチパターンになりそうなデザインがあったら相談すると良いのかもしれません。