アプリゲームUIデザイン

「FINAL FANTASY VII THE FIRST SOLDIER」FPSだとサウンド設定を細かく設定できることが重要なんだな

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「FINAL FANTASY VII THE FIRST SOLDIER」通称「FF7FS」のサウンド設定の細かさについて紹介します。 該当の画面はこちらです！ めっちゃ細かい…！サウンド関係だけで以下の7項目に分けられていました。 マスターボリューム BGM SE ボイス 環境音 マイク ボイスチャット なぜこんなに細かく分けられているかと言うと「FINAL FANTASY VII THE FIRST SOLD…

2021/11/30 02:11

「ゲートオブナイトメア」ピリオドはベースラインに揃えたい

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ゲートオブナイトメア」通称「ゲトメア」におけるローディング中のピリオドの位置について考えてみます。結論から述べると、ピリオドと三点リーダーの区別がなく使われている箇所がありました。不必要に半角と全角の混在、欧文と和文の混在があるため気になりました。 該当の画面はこちらです！ 右下に「Now Loading・・・」と表示されています。一般的にはこの部分の点は中央に揃える文字ではありません。欧文フォントのピリオドで…

2021/11/29 00:10

「ゲートオブナイトメア」どこでもメインコマンドが呼び出せる機能が便利

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ゲートオブナイトメア」通称「ゲトメア」におけるメインコマンドの呼び出し機能を紹介します。 該当のUIはこちらです！ 画面左上にある「メニュー」ボタンを押すと、どこからでもメインコマンドが呼び出せるデザインです。 アニメーションで見るとこんな感じです。 ちなみにホーム画面だと逆にUIが消える挙動になります。 この機能によって、ホーム画面に戻らずとも他のメイン機能にアクセスすることができます。 このデザインは手数の…

2021/11/28 03:47

「ゲートオブナイトメア」フィルタ画面のアイコンの下に文字が書かれていたので、より伝わりやすくする工夫がされていた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ゲートオブナイトメア」通称「ゲトメア」のフィルタ画面のアイコンデザインデザインを紹介します。 該当のUIはこちらです！ アイコンの下に文字が表示されているのが大きな特徴です。 弓が3種もあるためアイコンだけでの差別化が難しかったのかもしれません。後付けのデザインかもしれませんが、結果的には文字情報でも補足することで分かりやすくしています。 属性にも文字情報が書かれている点も珍しいデザインです。属性は色がメインで…

2021/11/27 01:01

「ゲートオブナイトメア」ボタンの中にキャラクターのイラストが描かれているのはキャラクターや世界観の魅力を訴求するデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ゲートオブナイトメア」通称「ゲトメア」のメインコマンドのボタンデザインを紹介します。 該当のUIはこちらです！メインメニューのUIと… …アルバム画面のUIです！ 画面内に大きくボタンが配置されているのが分かります。また、大きなボタンの中には機能を表わすラベルだけではなく、ゲームのキャラクターのイラストが描かれています。 キャラクターのグラフィックにはアイコンや文字だけのボタンと異なり、記号的な意味合いはありま…

2021/11/25 23:23

「オクトパストラベラー 大陸の覇者」ゲームUIの選択肢とシステム的なUIの選択肢の違い

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「オクトパストラベラー 大陸の覇者」通称「オクトラ大陸の覇者」の選択肢のUIを紹介してみます。ゲームUIでは比較的当たり前に実装されていることなのですが、一般的なUIの教本とは異なる点だと感じたため取り上げてみたいと思います。 該当の画面はこちらです！ こちらですね。 手記を読みますか？ いいえ/はい とあります。ストーリーを進行する上で登場する選択肢の一つです。 ここで注目したいのは「いいえ」「はい」の選択肢の…

2021/11/24 23:41

「オクトパストラベラー 大陸の覇者」長押しするとゲージが表示されるので、何かアクションがあることが分かりやすい

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「オクトパストラベラー 大陸の覇者」通称「オクトラ大陸の覇者」の長押しをすると表示されるリングゲージのUIを紹介します。長押しの操作と一緒に実装されていると、より分かりやすいデザインになるのかな、と思います。 該当のUIはこちらです！ 「オクトパストラベラー 大陸の覇者」では一部のキャラクターのサムネイルを長押しすると下位階層の詳細画面に遷移します。長押しするとリングゲージが表示されるため、何かが起こるであろうヒ…

2021/11/23 23:30

「オクトパストラベラー 大陸の覇者」目的地マーカーがたくさんあるけど、優先度設定が出来るので便利

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「オクトパストラベラー 大陸の覇者」通称「オクトラ大陸の覇者」の目的地の優先度設定機能を紹介します。マップ上に目的地マーカーが多く表示されているのですが、任意の一つを目立たせることで分かりやすくなっているデザインだと感じました。 該当の画面はこちらです。「オクトパストラベラー 大陸の覇者」ではこのようにマップ上に様々なマーカーが表示されています。 同じデザインのマーカーも多くあるため、優先度付けが無く次に向かう目…

2021/11/23 15:23

「オクトパストラベラー 大陸の覇者」選択した武器を装備した場合、パラメーターがアップするかどうかキャラクターのポーズで簡易的に分かるようにしているデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「オクトパストラベラー 大陸の覇者」通称「オクトラ大陸の覇者」の鍛冶画面にて、パラメーターが上昇する武具を選択した時に装備可能なキャラがリアクションするデザインを紹介します。 昔のFFでも見かけた伝統的な表現ですが、最近のアプリではあまり見ないデザインかもしれません。 該当の画面はこちらです。 アニメーションで見るとこんな感じです。選択する武器を変更すると、画面右側に表示されている装備可能なキャラクターが明るくな…

2021/11/21 23:30

「オクトパストラベラー 大陸の覇者」剣と短剣のアイコンの向きを変えることでそれぞれが区別しやすいデザインになっていた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「オクトパストラベラー 大陸の覇者」通称「オクトラ大陸の覇者」の武器アイコンのデザインを紹介します。アイコンのデザインの参考になれば幸いです。 該当の武器アイコンはこちらです。 武器アイコンは色々並んでいますが、特に注目したいのは 剣アイコンと… 短剣アイコンです！ この2つアイコンのデザインの大きな特徴は左右反転をしている点です。 細かく見ると剣は両刃、短剣は片刃にしており、柄の大きさにもデザインの違いを設けて…

2021/11/21 00:46

会話シーンの主なレイアウトまとめ（横画面編）

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は横画面のゲームに登場する主な会話シーンのUIを紹介します。よくみかけるレイアウトを5つ紹介します。デザイン案の参考になれば幸いです。 1：オーソドックス 2：吹き出し＋表示位置固定 3：吹き出し＋劇場 4：劇場＋キャラグラフィック 5：クラシックRPG 1：オーソドックス 以下、主な特徴 スチルイラストやムービーを挿入してもテキストの表示位置を変えなくて良い ナレーションを入れることが可能 キャラクターを揺らすな…

2021/11/20 00:30

「ディープインサニティ アサイラム」似たデザインのアイコンが多くあったので整理してみた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ディープインサニティ アサイラム」の見出しの付け方とアイコンのデザインで気になったことがあったので整理してみました。 こちらが目次です。 1：ボタンのラベルと画面見出しが異なる 2：似たアイコンが多い 2-1：「オプション」と「素材」 2-2：「メニュー」と「会話ログ」 2-3：「チェックマーク」と「実績」 2-4：「倍速」と「移動」 2-5：その他いろいろ では、早速見ていきます。 1：ボタンのラベルと画面見…

2021/11/18 23:39

「ディープインサニティ アサイラム」レビュー誘導にキャラ画像を利用すると単純接触効果により、高評価に繋げやすいのかな

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ディープインサニティ アサイラム」のレビューを催促する画像が実装されていました。 該当の画像はこちらです！ 該当部分を拡大します。画像の左側には よろしければレビューにご協力をお願いいたします。 と運営からメッセージが表示され、画面中央付近にはゲーム内のナビキャラが微笑みながら プレイしてくれてありがとうございます！ と感謝を伝えています。 これはユーザー目線のUIではなく、開発者目線でのUIですがアプリの評価…

2021/11/17 23:59

「ディープインサニティ アサイラム」長押しするとリングゲージが表示されるので、長押し操作に気付きやすい

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ディープインサニティ アサイラム」の長押しをすると表示されるリングゲージのUIを紹介します。長押しの操作と一緒に実装されていると、より分かりやすいデザインになるのかな、と思います。 該当のUIはこちらです！ 「ディープインサニティ アサイラム」では一部のキャラクターやアイテムのサムネイルを長押しすると下位階層の詳細画面に遷移します。長押しするとリングゲージが表示されるため、何かが起こるであろうヒント、どれくらい…

2021/11/16 23:42

「ディープインサニティ アサイラム」キャラボイスがない時は会話シーンのUIは枠ではなく吹き出しにするとキャラクターの感情表現に繋がるのではないか

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ディープインサニティ アサイラム」の吹き出しを採用した会話シーンのUIを紹介します。先日の記事と合わせてデザイン案の参考になれば幸いです。 該当の画面はこちらです！汎用的な吹き出し以外を紹介します。 まずは心の声を呟く吹き出しです。 こんな感じのデザインですね。漫画でもよく見かけますね。丸っこいデザインです。左右対称に近い形状をしています。 続いて、大声を上げる吹き出しです。 トゲトゲしてます。これも比較的左右…

2021/11/15 23:47

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

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ディープインサニティ アサイラム」の会話シーンのUIを紹介します。 デザイン案の参考になれば幸いです。 該当の画面はこちらです！ このように画面の左右にキャラクターが配置され、吹き出しが画面中央の下から上に流れるデザインになっています。 アニメーションで見るとこんな感じです。 直前の会話内容が画面内に残りつつ進行していくため、少しくらい読み飛ばしたとしても見落としを防ぎやすくなっています。 このUIの特徴は以下…

2021/11/14 23:30

「発見王」公式Twitterのスペース利用中はゲーム内にも通知が届くUIデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「発見王」にて、Twitterのスペースを実施中の通知デザインを紹介します。 「発見王」では、不定期にTwitterのスペースを実施しています。ゲームをプレイしていてもその通知が届く仕組みになっていました。通知が届くことによってスペースに参加が促される効果もあるのかもしれません。あまり見ないデザインの事例かなと思います。 該当の画面はこちらです。お知らせメニューの中に「ライブ実況」という項目があります。 この「ラ…

2021/11/14 01:07

「発見王」動画広告を見せるために、ゲーム内に広告業者というキャラクターを登場させるデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「発見王」の動画広告の見せ方について紹介します。最近は、ゲーム内に動画を流す仕組みを入れているゲームを多く見かけます。広告は没入感を妨げることがあるため、いかに没入感を下げずに自然に導入するかに苦心しています。 「発見王」では、広告業者の人を登場させるデザインを試みていました。 該当の画面はこちらです。 現実世界でも広告を見せて生活をしている人もいますが、ゲーム内に登場させるのは斬新な切り口だと思いました。 特に…

2021/11/13 03:03

「発見王」閉じるボタンの位置が異なるのは指の位置に配慮してのレイアウト

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「発見王」の閉じるボタンの位置について紹介します。結論から言うと、指の位置に配慮して画面を開くボタンの位置と閉じるボタンの位置を同じにしています。 では、具体的な事例を紹介します。該当の画面は2つあります。 紹介するのはプレイヤーのプロフィール画面と… こちらのもちもの画面です。 プロフィール画面の閉じるボタンは画面左下にあるのに対して… もちもの画面の閉じるボタンは画面右下にあります。 一見するとレイアウトの不…

2021/11/12 00:34

「ドラッグ王子とマトリ姫」会話シーンにおける3つの距離感とそれぞれの特徴の紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ドラッグ王子とマトリ姫」、通称「マトリ姫」の会話シーンのキャラクターの距離感を紹介します。 画面に対してどれくらいの距離感で表示するのかをビジュアル面で検証するのは、実はUIデザイナーであることが珍しくないのかなと思います。 確認した限り以下の3つの距離感がありました。 上半身まで表示する距離感 バストアップまで表示する距離感 表情を大きく見せる距離感 早速画面を紹介いたします。 1：上半身まで表示する距離感 …

2021/11/10 23:51

「ドラッグ王子とマトリ姫」チェックマークのデザインがハートマークになっていて華やか

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ドラッグ王子とマトリ姫」、通称「マトリ姫」のシナリオのフィルタ画面を紹介します。 該当の画面はこちらです！ よく見るとチェックマークがハートマークになっています。通常は「✓」とかのデザインであるため、UIのパーツとしてはちょっと特殊なデザインになっています。 アニメーションで見るとこんな感じですね。キャラクター、季節、時間軸といった各項目でハートマークの色も変えており、とても華やかな見た目になっているかと思いま…

2021/11/10 00:04

「オンエア！」キャラクターのプロフィール画面、相関図がゲームらしくデザインされていた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「オンエア！」のキャラクターのプロフィール画面のデザインを紹介します。 該当の画面はこちらです！ 学園モノっぽく方眼ノートや付箋、マスキングテープといった文房具がモチーフとして使われています。 色も多く使われており、賑やかな印象を与えるデザインになっているように見えます。 プロフィール画面でも興味深いのは「一問一答」のタブです。 質問は以下の8つです。 キャラクターの個性や好み、主人公に対する気持ちなど、クラスメ…

2021/11/08 23:30

「ワールドエンドヒーローズ」リングゲージがあることで長押しに必要な時間が分かるデザインになっていました

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ワールドエンドヒーローズ」、通称「ワヒロ」のリングゲージのUIを紹介します。長押しの操作と一緒に実装されていると、より分かりやすいデザインになるのかな、と思います。 該当の画面はこちらです！ 画面上部にこのように「長押しで登場人物を確認」と表示されています。文字で説明されているとやることが明確になっているため、分かりやすいと感じます。 さらに実際に長押しするとリングゲージが表示されるため、どれくらい長押しすれば…

2021/11/07 23:50

「ワールドエンドヒーローズ」チャットアプリを模したデザインの紹介。プロフィールアイコンがキャラ画像でなかったり、縦画面に切り替える機能が特徴的

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ワールドエンドヒーローズ」、通称「ワヒロ」のチャット画面のデザインを紹介します。 該当の画面はこちらです！ よくあるチャットアプリを模したデザインです。アニメーションで見るとこんな感じです。 キャラクターたちがプライベートなやりとりしている様子が垣間見えます。 グループチャットなので、基本的にはキャラクター同士の掛け合いが続きます。プレイヤーが介入しないままイベントが進行し、終了することも多くありますが、介入す…

2021/11/07 01:36

「エリオスライジングヒーローズ」ガチャ結果がメールボックスを模したデザインでした

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「エリオスライジングヒーローズ」、通称「エリオスR」のガチャ結果画面のデザインを紹介します。 該当の画面はこちらです！ ぱっと見て、ただの枠ではないことが分かります。特に画面左側にあるデザインに注目してみると、何かしらのアプリケーションを模しているようです。 Compose Inbox Send Mail Starred Drafts More このようなメニューがアイコン付きで並んでいます。おそらくこれはメール…

2021/11/06 01:07

「エリオスライジングヒーローズ」ゲーム開始直後の名前入力画面の演出が凝っていた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「エリオスライジングヒーローズ」、通称「エリオスR」のゲーム開始直後の名前入力画面のデザインを紹介します。 該当の画面はこちらです！このようにストーリーや世界観に合わせたビジュアルになっているのが特徴的です。 アニメーションで見るとこんな感じで遷移します。シームレスに情報が切り替わっているのが丁寧だと感じました。 特に入力された情報を確認する画面の表示アニメーションがめっちゃ凝ってます！見出しに「SECURITY…

2021/11/04 23:29

「エリオスライジングヒーローズ」ローディングアイコンを推しのアイコンに変更できる機能の紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「エリオスライジングヒーローズ」、通称「エリオスR」のローディング中のアイコンを変更できる設定を紹介します。 該当の画面はこちらです！ 「エリオスライジングヒーローズ」ではこのようにローディングアイコンが最大4つまで設定できます。設定したアイコンはランダムで表示されるようです。 画面の遷移フローはこのようになっています。システム設定 ⇒ 画面/演出 ⇒ ローディングアイコン 画面遷移からアイコン設定までをアニメー…

2021/11/04 02:15

「エリオスライジングヒーローズ」キャラクターのプロフィール項目の中にある家族構成の欄が気になる

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「エリオスライジングヒーローズ」、通称「エリオスR」のキャラクターのプロフィール項目に注目したいと思います。 該当の画面はこちらです！ 画面左側にキャラクターが表示されており、右側には名前や年齢などキャラクターのプロフィール項目が並んでいます。 中でも注目したいのはこちらの「家族構成」の項目です。あまり見たことはないのですが、キャラクターを多面的に捉えることができ、すごく魅力的な項目だと感じました。 キャラクター…

2021/11/03 00:11

「あんさんぶるスターズ！！Music」誕生日をお祝いするダイアログが特殊なデザインで特別感を演出している

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「あんさんぶるスターズ！！Music」、通称「あんスタ」の特殊なダイアログのデザインを紹介します。 該当の画面はこちらです！ 表示タイミングとしては、誕生日にゲームを起動してログインボーナスの演出後に表示されました。表示の優先度としては高く、ゲームをプレイする前にユーザーに必ず見てもらいたい演出の一つだと考えられます。 ダイアログのデザインを見てみると、まるで実際の端末と画面のように丁寧に作り込まれています。 こ…

2021/11/01 23:50