こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「FINAL FANTASY VII THE FIRST SOLDIER」通称「FF7FS」のUIのカスタム機能について紹介します。 該当の画面はこちらです！ 多くのボタンが表示されていますが、以下の３つのパラメーターについて個別に調整することができます。 サイズ 透明度 表示/非表示 パーツを選択するとこのようにサイズと透明度が設定できます。 画面上部のボタンをタップするとボタンを非表示設定にする領域が表示されます。 アニメーションで見るとこんな感じです。パーツを選択し、ドラッグ&ドロップで操作できます。 「FINAL FANTASY VII THE FIRST SOLDIER」はFPSであるため、アクショ

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

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

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

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

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

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

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「オンエア！」のキャラクターのプロフィール画面のデザインを紹介します。 該当の画面はこちらです！ 学園モノっぽく方眼ノートや付箋、マスキングテープといった文房具がモチーフとして使われています。 色も多く使われており、賑やかな印象を与えるデザインになっているように見えます。 プロフィール画面でも興味深いのは「一問一答」のタブです。 質問は以下の８つです。 キャラクターの個性や好み、主人公に対する気持ちなど、クラスメートに聞く内容のような項目が並んでいます。 特待生へ一言 よく行く場所は？ よく見る夢は？ 100万円もらったら？ 最近爆笑したことは？ フェチおしえて！ たからハンバーガーのお気に入りは？ 好きなタ

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

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

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

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

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

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

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「魔法使いの約束」、通称「まほやく」のロゴに隠されたデザインを考察してみます。 「魔法使いの約束」のロゴは世界観の表現や可読性だけではなく、ストーリーに関わるメッセージが隠されているタイプのデザインに見えました。 有名なのはPS1の「ヴァルキリープロファイル」でしょうか。 ヴァルキリープロファイル[PS1]。隠された真エンディング。初回で見られた人は… - おしょ〜の激コアゲームライフ 色々なタイプのロゴをデザインすることがあるかと思いますが、デザインをする際の一つの指針のとなれば幸いです。 「魔法使いの約束」のロゴデザインはこちらです。 このロゴに隠れているデザインの意図について考察を述べさせていただきます

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「あんさんぶるスターズ！！Music」、通称「あんスタ」のストーリーのサムネイルを紹介します。 該当の画面はこちらです！ 右側にストーリーのリストが並んでいるのが分かるかと思います。 既読のストーリーにはサムネイルが表示され、未読のサムネイルにはサムネイルが表示されていません。 多くのソシャゲのストーリーのサムネイルは未読であっても表示されます。 アニメの次回予告のように、次のストーリーで何が起きるのかを簡易的に伝える目的があるのかな、と思います。 「あんさんぶるスターズ！！Music」が表示していないのは、未開封の宝箱のように読んでみるまで中身が分からず、わくわくさせる意図を感じました。 サムネイルを見せな

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「あんさんぶるスターズ！！Music」、通称「あんスタ」のメニュー画面のデザインを紹介します。 該当の画面はこちらです！ このようにボタンが並んでいるだけではなく、ビルのフロアにショップやアイドルルームが入っているように見えるデザインになっていました。 配置するだけではなく世界観を表現するデザインだと感じました。 …という感じで記事の下書きをしていたのですが、今日見たらデザイン変わってました。そんな事もある。 せっかくなので新旧のUIを比較してデザインの意図を探ってみたいと思います。 レイアウト面、ビジュアル面で分けて考えてみます。 レイアウト 1：イベント類の導線が増えている 追加された導線があるのが特徴的

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「あんさんぶるスターズ！！Music」、通称「あんスタ」のBP一括消費設定の機能を紹介します。 該当の画面はこちらです！ こちらの機能はBP（スタミナ）を一括消費して、その分多くの報酬を獲得できる機能です。これにより、短い時間でより多くの報酬を獲得することができます。 過去に何度か紹介していますが、ここ数年の音ゲーには比較的実装されている機能です。 一括消費機能が音ゲーに多く実装されている背景には、楽曲ごとに決まった時間を拘束されることが主な原因かと推測しています。 拘束時間が決まることでイベント期間の終盤の追い上げが困難になります。 その結果、時間効率の良い楽曲を周回するのが攻略方法となり、ゲームと呼ぶには

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「あんさんぶるスターズ！！Music」、通称「あんスタ」のストーリーのロゴデザインを紹介します。 該当のロゴはこちらです！ 色んなロゴがリリースされているのですが、一番手前にあったのがこちらの「ドラマティカ」のロゴです。 ロゴ 幾何学の図形と直線的なシルエットで構成されています。 西遊記という伝統的な舞台の中にあって、現代的なアレンジを加えたロゴになっているように見えます。 ロゴとイラストの色のトーンも統一されているので、同一の世界観のものであると伝わりやすくなっています。 綺麗なロゴだけではなく、挑戦的なロゴも見かけたので紹介します。 こちらですね！読めません！ あえて読みづらくしているとは思いますが、ここ

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「あんさんぶるスターズ！！Music」、通称「あんスタ」のストーリーのフィルタ機能にシナリオライターの項目があったので紹介します。 該当の画面はこちらです！ 画面左側にストーリーカテゴリ、ライター、時期などの項目が並んでいます。 ここで注目したいのは「ライター」の項目です。 項目を選択すると、このようにストーリーのシナリオを手掛けたライターさんのお名前がリストで表示されます。 日日日 結城由乃 ゆーます 西岡麻衣子 木野誠太郎 …とお名前が並んでいますね。 ストーリーの詳細情報を見てみると、一番上にシナリオライターの項目があります。 こちらですね。 シナリオライター：日日日、とあります。 イラストレーターさん