「ディープインサニティアサイラム」メッセージウィンドウを画面中央に配置するデザイン。キャラとテキストの距離が近いので読みやすい

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

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

今回は「ディープインサニティアサイラム」の会話シーンのUIを紹介します。

デザイン案の参考になれば幸いです。

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

f:id:appgameui:20211114174539p:image

このように画面の左右にキャラクターが配置され、吹き出しが画面中央の下から上に流れるデザインになっています。

アニメーションで見るとこんな感じです。

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

直前の会話内容が画面内に残りつつ進行していくため、少しくらい読み飛ばしたとしても見落としを防ぎやすくなっています。

このUIの特徴は以下の４点かなと思います。

視線が画面中央に集中する
キャラの表情を見ながら文章を読むことができる
バストアップだけではなく全身が描かれている
叫ぶときや心の声を表現する際に漫画のような吹き出しのデザインが使える

吹き出しを利用するデザインは比較的少数派ではあります。
横画面であればよくある会話シーンは以下の３つのデザインかな、と思います。

1：メッセージウィンドウ型+画面下部

まずはメッセージウィンドウが画面下部にあるデザインです。
メッセージウィンドウの細かなデザインの違い、キャラクターが２Ｄか３Ｄの違いなどがありますが、概ねこのレイアウトが基本形かなと思います。

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

２：吹き出し型+画面中央

２つめは「ディープインサニティアサイラム」同様に吹き出しを利用するデザインです。

「ディープインサニティアサイラム」ではキャラクターの全身が表示されていますが、ゲームによってはバストアップまでの表示として、表情を大きく見せるデザインも多く見かけます。

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

３：吹き出し型+キャラの近く

３つめは、画面内に複数のキャラクターを表示させ、吹き出しを利用するデザインです。キャラクターに演技させつつ、どのキャラが話しているのかも直感的に分かりやすくなるデザインです。

ただ、あまりに自由にやりすぎてしまうと、ユーザーが次に表示される吹き出しの位置が予想できなるため、不要なストレスを与えてしまう可能性もあります。

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

細かく分類すれば他にもありますが、今回は「ディープインサニティアサイラム」のデザインと代表的な事例を述べるに留めます。

どれが正解というものはなく、どのような見せ方をしたいかによってレイアウトを選択するのが良いのかなと思います。

以上です。

会話シーンのデザイン案の参考になれば幸いです。

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

© SQUARE ENIX CO., LTD. All Rights Reserved.

権利者さまへ

以下はコンテンツ利用に関する認識の説明です。

「ディープインサニティアサイラム」のガイドラインを確認したところ、ゲーム内で使用されている画像やスクリーンショット画像はWebサイトやSNSへ投稿しても良い旨の文章がありました。

【Deep Insanity】ディープインサニティ | SQUARE ENIX

主な参照箇所を抜粋します。

利用いただけるもの

本ガイドラインに従い利用いただけるもの（以下「利用対象」といいます）は、以下のとおりです。

以下に記載の本ソフトの公式サイトおよび当社が運営する以下のサイト内に掲載されているテキスト・情報・画像・動画
　https://www.jp.square-enix.com/deepinsanity/game/

本ソフト内に表示されるテキスト、ゲーム中で撮影されたスクリーンショット、およびゲーム内で撮影された動画

※但し、以下のものは除きます。

コラボレーションイベント等のために、特別に本ソフトに含まれるコンテンツ

利用いただける範囲

(1)ゲームプレイの配信を行うことで法人から給与その他の報酬を得ている方：

個人名義のソーシャル・ネットワーキング・サービスで利用すること。

動画共有サイト（「YouTube」「ニコニコ動画」等）にて「利用対象」を配信すること。

(2)　(1)に該当しない個人の方：

個人のホームページやブログ、動画共有サイト、ソーシャル・ネットワーキング・サービスなどで「利用対象」を利用すること。