アプリゲームUIデザイン

「永遠の7日-終わりなき始まり」ストーリー選択画面にて、いつもと違う雰囲気を醸し出すためにエフェクトが付いていた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「永遠の7日-終わりなき始まり」、通称「とわなな」にて、UIパーツを目立たせるためにアニメーションを用いたデザイン事例を紹介します。 該当のアニメーションはこちらです。 画面全体の動きを見るとこんな感じです。 画面中央にある帯にエフェクトが付いています。遠目で見ても、どこを目立たせたいのかがすぐに分かるかな、と思います。 どのようなアニメーションになっているのか、もう少し分かりやすくするために拡大してみます。 こ…

2021/09/30 00:47

「永遠の7日-終わりなき始まり」グリッチフィルタの表現をUIパーツにも取り入れたデザイン

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「永遠の7日-終わりなき始まり」通称「とわなな」の会話パートのグリッチフィルタについて紹介します。 該当の画面はこちらです。 キャラクターのグリッチ表現以上に、UIのデザインも変えているのが大きな特徴と言えます。左右に並べて比較してみます。左側が通常時のUIです。右側がグリッチフィルタ適用時のUIです。 心情描写を表わす時や大声で叫ぶ時など、キャラクターの声色やトーンによってメッセージウィンドウのデザインを変えるゲー…

2021/09/29 01:03

「三國志 覇道」デフォルト値を決めるだけでデザインはそのままで手数を少なくできる事例の紹介

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「三國志 覇道」のデフォルトの選択肢を設定することで利便性が高められる事例について紹介します。 該当の画面はこちらです！ まずは画面の内容を簡単に説明します。 この画面は資源と銭を一定のレートで交換することができる画面です。銭と交換可能な資源は以下の4種です。 兵糧 木材 石材 鉄鉱 ユーザーはこれらの資源の中から任意の資源を一種と、銭と交換する資源量を選択、決定します。 この画面において便利だと感じた点は、画面遷移…

2021/09/28 01:43

「三國志 覇道」メンテナンス直前にゲーム画面に告知メッセージを表示して、確実にユーザーに届ける熱意のあるUI

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「三國志 覇道」のメンテナンス直前の告知UIについて紹介します。 該当の画面はこちらです。 このように画面の中央付近に、もうすぐメンテナンスに入る旨のメッセージが表示されています。 画面に表示されているメッセージは以下の通りです。 22:55頃にデータの更新を行います更新時に一度タイトル画面に戻されますが、改めてログインすることで引き続きご利用いただけます メッセージはタップすることで消すことができます。アニメーショ…

2021/09/28 01:24

「三國志 覇道」戦闘と採取でアイコンのデザインを変えることで誤操作防止に繋がるかもしれない

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「三國志 覇道」のアイコンのデザインについて紹介します。 該当の画面はこちらです！ 注目してもらいたいのは画面中央のアイコンです。アニメーションで見ると、このように剣とクワのアイコンが表示されています。 状況を補足します。 「三國志 覇道」はスタミナを消費して部隊に対して実行するコマンドを選んでいくシステムです。 コマンドにはいくつか種類がありますが、主なコマンドとして以下の2つがあります。 ユニットを指定して戦闘す…

2021/09/26 23:50

「ロマンシング サガ リ・ユニバース」過去の作品のクレジットがオリジナル表記で見ることができる

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ロマンシング サガ リ・ユニバース」、通称「ロマサガRS」のクレジット画面について紹介します。 該当の画面はこちらです。 「ロマンシング サガ リ・ユニバース」のクレジット画面の大きな特徴として、過去作品のクレジットを見ることが出来る、ということが挙げられるかと思います。 確認することが出来るのは以下の13作品です。 ロマンシング サガ リ・ユニバース 魔界塔士サ・ガ サ・ガ2 秘宝伝説 サ・ガ3 時空の覇者 完結…

2021/09/25 23:50

「ロマンシング サガ リ・ユニバース」チャットウィンドウを半透明にすると、ゲームの状況を把握しつつチャットも楽しめるデザイン

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ロマンシング サガ リ・ユニバース」、通称「ロマサガRS」のチャット画面について紹介します。 該当の画面はこちらです。 画面上部にある吹き出しアイコンからチャットウィンドウを開く挙動になっています。こちらのアイコンですね。 このアイコンをタップしてチャットウィンドウを開くと、このような見た目になります。ウィンドウが透過し、背面のグラフィックが見えています。 チャットウィンドウを開いていてもゲームの進行状況が確認でき…

2021/09/24 23:50

「ロマンシング サガ リ・ユニバース」ちょっと特殊なドロワーメニューのデザイン紹介

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ロマンシング サガ リ・ユニバース」、通称「ロマサガRS」のUIパーツについて紹介します。 該当のUIパーツはこちらです。 アニメーションでみるとこのような動きをします。 このように画面の上部を除く、下と左右の3方向からメニュー群が表示されます。 分類するならドロワーメニューでしょうか…。 画面下部から登場するパーツはドロワーっぽい挙動なのですが… …画面左右から登場するメニュー群はちょっと唐突には感じます。 下部…

2021/09/23 23:50

「ロマンシング サガ リ・ユニバース」商品購入を促進するために無料アイテムをショップに陳列する試み

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ロマンシング サガ リ・ユニバース」、通称「ロマサガRS」の無料アイテムをショップに陳列する施策について紹介します。 該当の画面はこちらです。 このようにショップなのにも関わらず、無料アイテムがリストの一番上に並んでいます。 無料アイテムは実質的には配布と同じです。なので、ユーザー的にはショップに置かずに、ログインボーナスなどの直接配布をしてもらう方が、手数が省略できるため利便性が高まります。 このショップに無料ア…

2021/09/22 15:50

「ロマンシング サガ リ・ユニバース」キャラモーションのプレビュー機能にダンスホールって付けるの賢い

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ロマンシング サガ リ・ユニバース」、通称「ロマサガRS」のモーション確認画面の名前の付け方について紹介します。 該当の画面はこちらです。 この画面は「芸術の都ファーゴ」です。この画面の中には以下の2つの機能が内包されています。 ダンスホール コンサートホール 今回紹介するのは「ダンスホール」です。ヘルプによると「ダンスホール」は以下のように紹介されています。 キャラクターの様々なポーズを閲覧できる「ダンスホール」…

2021/09/22 01:58

「ロマンシング サガ リ・ユニバース」サウンド項目のデフォルト値は中間値がおすすめ

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ロマンシング サガ リ・ユニバース」、通称「ロマサガRS」のオプション画面のデフォルト値を紹介します。 該当の画面はこちらです。オプション画面ですね。 いくつかオプション項目が並んでいますが、ここではサウンド周りのオプション項目に注目します。 以下は初期状態です。デフォルト値がゲージの中間値になっているのが分かるかと思います。 しばしば最大値になっているゲームを見かけることがありますが、UIの観点から評価すると、中…

2021/09/20 23:40

「ロマンシング サガ リ・ユニバース」ゲームボーイっぽいタイトル画面の作り込みがやばい

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ロマンシング サガ リ・ユニバース」、通称「ロマサガRS」のタイトル画面のデザインを紹介します。 該当の画面はこちらです。 全体的にレトロ感が漂うデザインになっています。 ちなみにアニメーションで見るとこんな感じでした。 このノイズ！ SEが伝わらないのですが、スイッチ入れた時の音も再現しており、丁寧に作り込んでいます。 イベント期間中ということもあるのかもしれませんが、この表現は初めて見たかもしれません。 また、…

2021/09/19 02:03

「僕のヒーローアカデミア ULTRA IMPACT」ロード中を示すアニメーションにデザインのバリエーションが用意されていた。単純接触効果に繋がるのかもしれない

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「僕のヒーローアカデミア ULTRA IMPACT」、通称「ヒロトラ」のロード中のアニメーションのバリエーションについて紹介します。 該当のアニメーションがある画面はこちらです。 画面右下に「now loading...」の文字が見えるかと思います。その傍らにキャラクターが表示されています。 このキャラクターのバリエーションが多く用意されていたので、事例として紹介します。 アニメーションで見るとこんな感じです。 それ…

2021/09/18 02:07

「僕のヒーローアカデミア ULTRA IMPACT」特殊なUIパーツのアニメーションの実装事例

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「僕のヒーローアカデミア ULTRA IMPACT」、通称「ヒロトラ」の特徴的なUIパーツのアニメーションについて紹介します。 該当のUIアニメーションがある画面はこちらです。こちらはクエストクリア画面です。 画面下部に表示されている情報ウィンドウの表示アニメーションに注目します。 アニメーションで見るとこんな感じです。 該当箇所を拡大してみます。ちょっと特殊な動きをしているのが分かるかと思います。 通常、こういった…

2021/09/17 23:54

「僕のヒーローアカデミア ULTRA IMPACT」小さな文字は輪郭線で囲うのではなく、シルエットを単純化させた下地を敷くことで可読性を高める工夫が隠れていた

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「僕のヒーローアカデミア ULTRA IMPACT」、通称「ヒロトラ」のUIパーツの中の文字加工について紹介します。 該当のUIパーツがある画面はこちらです。 こちらはキャラ画面のトップ画面です。「チーム編成」「強化」「プレイキャラ」「メモリー」といったボタンが並んでいます。 その中のひとつの「強化」の文字について注目します。 このように文字の周囲に輪郭線があることが分かるかと思います。 続いて別の画面を見てみます。…

2021/09/16 23:58

「僕のヒーローアカデミア ULTRA IMPACT」

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「僕のヒーローアカデミア ULTRA IMPACT」、通称「ヒロトラ」のUIパーツの色設計について紹介します。 象徴的な例として、ホーム画面のUIパーツを紹介します。 画面下部を見てみると、メインメニュー類のアイコンの色が白黒でデザインされていることが分かります。 メインメニュー以外のアイコンも白黒のデザインです。 メニュー画面にある各種アイコンも同様のデザインです。 こんな感じですね。 ゲームUIの場合、画面を賑や…

2021/09/15 23:52

「三國志 覇道」メンテナンス中でもユーザーの期待感を煽るテキストを表示するデザイン事例

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「三國志 覇道」のメンテナンス中に表示されるメッセージについて紹介します。 該当の画面はこちらです！ このように、ゲームがメンテナンス中であれば、メンテナンスであることを告知するダイアログが表示されています。 表示されているメッセージは以下の通りです。 1周年記念の大型アップデートのため メンテナンスを実施中です お楽しみにお待ちください メンテナンス予定時間： 09:00〜18:00 ここで注目したいのは以下の3つ…

2021/09/14 23:53

「僕のヒーローアカデミア ULTRA IMPACT」アドベンチャーパートがコミック風のデザインだった

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「僕のヒーローアカデミア ULTRA IMPACT」、通称「ヒロトラ」のアドベンチャーパートのデザインについて紹介します。 該当の画面はこちらです！ 全体的にコミックをモチーフとして取り入れているのが特徴のデザインです。 具体的な特徴としては、キャラクターを枠で囲ったり… メッセージウィンドウを吹き出しっぽいデザインにするなどです。 他にも、コマの背景に集中線を付け、よりコミックらしく表現する工夫も見逃せません。 状…

2021/09/13 23:45

「聖闘士星矢 ゾディアック ブレイブ」タイトル画面にサイン色紙を表示する柔軟な発想に驚きました

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「聖闘士星矢 ゾディアック ブレイブ」のタイトル画面について紹介します。 該当の画面はこちらです！ はい、タイトル画面にサイン色紙が表示されるんです…。 より正確に表現するなら、タイトル画面の一連の流れの中にサイン色紙が表示されるシーンがある、といった感じでしょうか。 流れで見るとこんな感じです。 ゲーム内にこのような画像を入れるデザインは初めて見ました。 う～ん…デザインの意図を推測してみるに… 聖闘士星矢はオリジ…

2021/09/12 23:57

「三國志 覇道」タスクが完了してから送る通知と、完了する少し前に送る通知

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「三國志 覇道」のスタミナが回復した時の通知メッセージについて紹介します。 該当の画面はこちらです！ 「三國志 覇道」では施設の強化完了時や部隊の帰還時など、様々なシーンで通知メッセージを受け取ることができます。 添付した上記の画像はスタミナが回復した際のメッセ―ジです。 軍令書がまもなく全快！ [S20]状況を確認し、部隊に命令を出しましょう このように書いていますね。 興味深いのは「全快完了した」のではなく、「ま…

2021/09/11 23:50

「三國志 覇道」優先度の低いUIを非表示にする設定があると、結果的に重要な情報を目立たせることに繋がるのかも

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「三國志 覇道」のUIパーツの表示、非表示の切り替えオプションについて紹介します。 該当の画面はこちらです！ プレイヤー都市名 推奨ミッション 攻城戦ガイド 遠景時主要都市名 など、UIの表示に関するオプションが用意されています。 今回の記事で紹介するのは「プレイヤー都市名」の表示に関する項目です。 切り替えられる内容を見ると、以下の4パターンが用意されていました。 （プレイヤー都市名を…） 表示（する） 非表示（に…

2021/09/10 23:58

「三國志 覇道」ミッション達成を通知するUIが、そのまま報酬受け取りに変化したり、ミッションに関係する画面に遷移するUIに変化してめちゃ便利

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「三國志 覇道」のミッションの報酬受け取りの方法のデザインと導線設計について紹介します。 該当の画面はこちらです！ 具体的には、画面右下にあるこちらのUIです。 このUIの特徴を整理して、以下の3点にまとめました。 ミッションが達成されたことをしっかりと通知している 報酬を受け取れる導線を設置している ミッション達成に関係する画面に遷移する です！ひとつずつ詳細を紹介します。 1：ミッションが達成されたことをしっかり…

2021/09/09 23:54

「三國志 覇道」提供割合画面で登用済みかどうかを表示することでコレクション魂が刺激される！

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「三國志 覇道」の提供割合の画面のデザインについて紹介してみます。 該当の画面はこちらです！ 提供割合の画面デザインについて触れるのってあまりないのですが、ちょっと変わったデザインパターンだったので気になりました。 特徴としては以下の2点が大きいかと思います。 武将のサムネイルが表示されている 登用済みであることが分かる 提供割合の画面のデザインを考える前に、まず人材画面（ガチャ画面）の役割を考えてみます。 人材画面…

2021/09/08 23:54

「三國志 覇道」ユーザーの購買行動を促すためにショップに無料アイテム置いてるんじゃないか説

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「三國志 覇道」の商店に並んでいる無料アイテムの役割について考えてみます。 該当の画面はこちらです！ 商店に置くことはユーザーにとっては最適では無い こちらが無料の商品です。毎日1セットだけ、銭と無償の石が獲得できます。 ユーザーから見ると、毎日配布するアイテムであればログインボーナスと同じ役割に見えます。 ただ、ログインボーナスと違うのは、受け取るためには商店に遷移しなければならないため、手数や時間がかかってしまう…

2021/09/07 23:54

「三國志 覇道」フィルタリングした際に表示していないアイテムがあることを伝えていた。正確な情報を伝えて誤解を防止していると感じました！

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「三國志 覇道」のフィルタリングの結果、隠れているアイテムがある場合の表示方法について紹介します！ 文字で書くと分かりづらいかもしれないので、さっそく該当の画面を紹介します！該当の画面はこちらです！ こちらは武将が並ぶ画面です。注目していただきたいのはこちらです！ フィルタリングした結果、表示されてない対象がある、ということが示されています！ 武将リスト以外でもフィルタが実装されている場面では同様の実装になっているこ…

2021/09/06 23:36

「三國志 覇道」出陣時や戦闘開始時などのボイスはサウンドUIの実例だと思った話

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「三國志 覇道」のボイスを利用してユーザーに情報を伝えるデザインについて紹介します！ 普段あまり意識することはないかもしれませんが、画面から目を離している時や目の不自由なユーザーに有効だと考えています。 今回紹介する主にボイスが使われている場面は以下の通りです。 出陣開始 戦闘終了 帰還開始 人材画面にて、求人の種別を切り替える 武将獲得 武将強化 商店に入店 兵士募集 負傷兵士の治療 いろんな場所で使われていますね…

2021/09/05 22:06

「三國志 覇道」目的の敵や土地を見つけるためのサーチ機能が便利！

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「三國志 覇道」のサーチ機能について紹介します！ 該当の画面はこちらです！ これ、どういった機能かと言うと…周辺の敵、プレイヤー、資源が獲得できる土地などを抽出し、リストにしてくれる機能です！ 例えば、索敵して出陣する際はこんな感じで相手を選択することができます。 資源を獲得できる土地も探せます！ とても便利…！ このジャンルのゲームをPCで遊んでいた時は、広大な土地の中から手作業で探していた記憶があります。 自分で…

2021/09/04 23:58

「三國志 覇道」親階層に戻らずに情報が切り替えられて便利に感じました！

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「三國志 覇道」の施設強化画面にて、親階層に戻らなくても施設情報に切り替えられる導線設計について紹介します！ 該当の画面はこちらです！この画面では資源を利用して、施設のレベルを上げることができる、といった操作を行う画面です。 この画面において便利な導線は、このように施設を切り替えることができる点です。 画面の左右に表示されている矢印ボタンをタップすることで、このように次々と施設を切り替えることができます。 親階層に戻…

2021/09/03 23:50

「三國志 覇道」背景に時間差分があることで、よりゲームが楽しくなる

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「三國志 覇道」の内政画面の時間変化の表現について紹介します！ 該当の画面はこちらです！日中はこんな感じの見た目になっています。 日中のビジュアルは風の表現に注目 雲が薄く伸びていることから、上空では風が強く吹いている様子が伺えます。 同時に、建物からの煙は垂直に立ち昇っている様子から、地上近くでは風は吹いていない様子が伺えます。 このような風の表現から、穏やかさを含めつつ、戦乱の時代の躍動感が感じられるビジュアルの…

2021/09/02 22:21

「三國志 覇道」サーバー選択画面をデザインする際はサーバーをどのように運用するのかも意識してデザインすると良さそう

こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「三國志 覇道」のサーバー選択画面のデザインについて紹介します！ 該当の画面はこちらです！ 特に注目するのはこちらです。S11+S12という表記になっています。 これは「サーバー11とサーバー12が統合され、新サーバー6になった」という意味を示しています。 過去にこのブログで紹介したゲームではサーバーを統合するようなデザインではありませんでした。ですので、世界観を取り込んだデザインと言う評価軸で考えていましたが、「三…

2021/09/01 23:50