「カウンター・アームズ -終焉武装少女-」漫画の展開の中でプレイヤーの名前を聞くので没入感が高かった
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「カウンター・アームズ -終焉武装少女-」でのプレイヤーの名前を決めるフローのデザインを紹介します。 該当の画面はこちらです！ 「カウンター・アームズ -終焉武装少女-」ではプロローグが漫画調でデザインされているのですが、その流れの中にプレイヤーの名前入力が挿入されていました。 流れを紹介すると、このような流れです。 実に漫画調です。 ストーリーの途中にプレイヤーの名前を入力するゲームのパターンと言えば、主に以下の2…
「イドラ ファンタシースターサーガ」ヘルプ画面で画像を多く採用しているデザイン例紹介
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「イドラ ファンタシースターサーガ」でのヘルプを見返すことが出来る機能を紹介します。 該当の機能がある画面はこちらです！ 動きで見るとこんな感じです。 文字だけではなく、画像があるのが特徴的です。文字だけだと画面の中にある情報の全てを説明することが困難です。 例えばボタンやアイコンなど、グラフィックの情報は図説したほうが直感的に理解できます。また、視線誘導を利用して情報の優先度を付けることもできます。 ヤコブ・ニール…
「ポップリンクス」最近は見かけなくなったけど、スタミナの消費量を増して時短を図る機能の紹介！
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ポップリンクス」でのスタミナの消費量を増して時短を図る機能を紹介します。 該当の機能がある画面はこちらです！ゲームを開始する前の画面で設定することができます。 この部分ですね。スタミナ消費倍率が1倍から3倍まで選択できます。 消費数に応じて獲得できるマニー、CP、ファンがアップ とも書かれています。 スタミナ消費の設定機能にアクセスするための前後の画面を確認すると、こんな感じです。 画面下部にあるこちらのボタンを押…
「ポップリンクス」色覚多様性対応のためと思われるオプションが用意されていました
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ポップリンクス」での色覚多様性対応の事例を紹介します。 ちなみに色覚多様性とは以下のようなものです。 UIをデザインする上では必要な情報かと思いますので、まずは存在だけでも覚えておいていただけると嬉しいです。 ”色”の見え方は人それぞれ違う！？『色覚多様性』とは メガネハット（株式会社アーバン） 色を感じる細胞、錐体細胞の働きによって様々な色を感じるわけですが、中には特定の錐体細胞の働きが弱い方や、機能していな…
「IDOLY PRIDE アイドリープライド」ヘッダー画像をぼかしたり、ぼかさなかったりする理由を考えてみた
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「IDOLY PRIDE アイドリープライド」の画面をスクロールした際のヘッダー画像の処理について紹介します。 言葉だけでは伝わりづらいと思いますので、さっそくですが画面を紹介します。該当の画面はこちらです！ こんな感じで画面をスクロールするとヘッダーの画像がすこしボケます。 アニメーションで見るとこんな感じです。スクロールする程度によってボケ具合も変わっています。 より分かりやすくするために該当部分を拡大しました。…
「IDOLY PRIDE アイドリープライド」ハッシュタグを利用して登場人物を紹介するデザイン
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「IDOLY PRIDE アイドリープライド」のストーリーに登場する人物紹介のデザインについて紹介します。 最近のソシャゲではストーリー内で誰が登場するか、予め分かるように情報を外に出しているケースがあります。 過去に紹介したゲームの例を挙げると 「プロジェクトセカイ カラフルステージ！ feat.初音ミク」 「ブラックスター -Theater Starless-」 「ヒプノシスマイク-A.R.B-」 などがあります…
「エヴァンゲリオン バトルフィールズ」操作性をカスタムするためのオプション紹介！判定範囲編
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「エヴァンゲリオン バトルフィールズ」から操作性を切り替えるオプションに関する機能を紹介いたします。 「エヴァンゲリオン バトルフィールズ」はアクション性のあるゲームです。アクション性の高いゲームでは操作性が重要です。 アクションゲームや音ゲーなど、アクション性が高いゲームにおいて、操作性を調整するオプションはしばしば用意されています。「エヴァンゲリオン バトルフィールズ」でもそういった操作性を調整するオプションが用…
「エヴァンゲリオン バトルフィールズ」アニメのデザインをゲームに取り入れて、ユーザーの学習コストを下げるデザインの事例
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「エヴァンゲリオン バトルフィールズ」からカウントダウンタイマーのデザインを紹介いたします。 該当の画面はこちらです！ こちらはバトル中の画面です。画面上部に数字がカウントダウンされているのがわかるかと思います。 分かりやすくするために数字の部分を大きくします！ このようにデジタル書体が採用されており、小数点第二位まで表示していることが特徴です。 公式のデザインも見てみます。制作時期によってデザインが異なりますが、新…
「魔界戦記ディスガイアRPG」過去のADVパートでは旧版のグラフィックが採用されていた
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「魔界戦記ディスガイアRPG」から過去作品の紹介をする機能とその中の会話シーンを紹介いたします。 該当の画面はこちらです！ キャラクターに注目してみると、色の塗り方や各パーツのデザインがちょっと古い印象を受けますが、実際古いデザインです。 「魔界戦記ディスガイアRPG」の通常の会話シーンで使われているグラフィックはこちらです。 新旧のキャラデザを比較するとこんな感じですね。こちらが旧デザインです。 こちらが新デザイン…
「魔界戦記ディスガイアRPG」あやしげな演出を盛り上げる、遊び心のある映像表現
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「魔界戦記ディスガイアRPG」からキャラクターの転生演出を紹介いたします。 該当の画面と演出はこちらです！ このように転生演出の間に静止画が挿入されるデザインが特徴的です。 また、静止画では伝わりませんが、この演出の最中にはドリルなどの機械的なSEやキャラクターの絶叫を模したようなSEが流れています。 このキャラクターが持っている機械類の駆動音をイメージしていただくと分かりやすいかもしれません。 背景は全体的に怪しい…
「魔界戦記ディスガイアRPG」ボタンのマイクロコピー。分かりやすさだけではなく世界観を取り入れたデザイン
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「魔界戦記ディスガイアRPG」からボタンの中にある世界観を取り入れたマイクロコピーの事例を紹介いたします。 該当の画面はこちらです！召喚結果画面です。通常の召喚結果画面と異なる点として、何度でもやり直しができる点があげられます。 分かりやすいように該当部分を拡大します。 このように 「OK」 「キャンセル」 のボタンの中のテキストが… 「OKッス」 「やり直したいッス」 となっているのが特徴です。 文章を読まなくても…
「魔界戦記ディスガイアRPG」チェックボックスの見た目をしているのにラジオボタンの挙動になっていると誤解を招きやすい！
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「魔界戦記ディスガイアRPG」でチェックボックスの見た目なのにラジオボタンの挙動になっている箇所があったので、アンチパターンの事例として紹介いたします。 該当の画面はこちらです！ フィルタ画面にあるチェックボックスのUIパーツに注目です！ 分かりやすくするために拡大します。昇順、降順と並んでいます。 一見すると気づかないかもしれませんが、よく考えてみると昇順と降順は同時には選択できません。選べるのはどちらかひとつだけ…
「魔界戦記ディスガイアRPG」ゲーム起動直後の注意喚起画面にて世界観が含まれたデザインの事例紹介
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「魔界戦記ディスガイアRPG」のゲーム起動直後に表示される、ゲームをプレイする上での注意喚起画面のデザインを紹介いたします。 こちらが該当の画面です。ゲーム起動直後に表示されます。 内容としては以下の文言が書かれています。 ご注意 このアプリは基本無料で遊べますが、一部有料でアイテムを購入することができます。 未成年（20歳未満の方へ）有料アイテムを購入する場合は必ず保護者の許可をもらうか一緒に購入するようにしてくだ…
「白夜極光」キャラクターがメッセージを入力中であることが伝わるチャット画面
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「白夜極光」のキャラクターとのチャット画面のデザインを紹介いたします。 最近、特に中国系のゲームに多い気がするのですが、キャラクターとショートメッセージをやりとりできる要素が実装されています。 「白夜極光」の場合はこのような画面でした。 動きで見るとこんな画面です。 特にここのUIが良いと感じました。相手がメッセージを入力している様子が伝わり、実際にキャラクターとやりとりしている印象を強く与えます。 また、その際、ユ…
「白夜極光」ユーザーのことを世界観に合わせた呼び方をしている事例の紹介
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「白夜極光」のゲーム内のユーザーの呼び方を紹介いたします。 このブログではしばしば紹介しているのですが、いくつかのゲームでは、ユーザーのことをゲームの世界観にあわせて呼んでいることがあります。 「白夜極光」の場合は「ナビゲーター」と呼んでいました。 分かりやすいように部分抜粋します。こちらですね。 運営からだけではなく、仲間からもナビゲーターと呼ばれています。 「白夜極光」は世界観が重視されるゲームです。 ユーザーの…
「白夜極光」ゲーム内のオプションが視覚障害者への配慮を感じた
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「白夜極光」のゲーム内のオプションが視覚障害者への配慮を感じたため、紹介いたします。 該当の画面はこちらです。左から順に ブリリアント ノーマル カラーアシスト と並んでいます。 この設定を変更することによって、バトル中のパネルデザインが変更できます。 各種デザイン紹介！ 色を決める際に判断しやすいように！ 色を中心としたゲームをデザインする際の参考に！ 各種デザイン紹介！ それぞれの見た目はこのようになっています。…
「白夜極光」プレイヤーの経験値の情報はビジュアルで見せても問題ないのかもしれない
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「白夜極光」のプレイヤーの経験値ゲージのデザインに新しさを感じたため、紹介いたします。 該当の画面はこちらです。 数字の中がゲージになっている！ プレイヤーの経験値はそこまで重要な情報ではないのかも？ 数字の中がゲージになっている！ 画面全体を見せても分かりづらいですよね。分かりやすく見せるため、拡大表示します！ 一見すると数字のデザインに見えますが、中のオレンジ部分が獲得した経験値になっています。この場合は8割程度…
「白夜極光」アイテムが不足しているとアイテムアイコンが震えて伝えるデザイン
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「白夜極光」から施設の解放に必要なアイテムが不足していることを、より強調して伝えるUIデザインを紹介いたします。 ソシャゲでは何かを強化したり、解放する際にアイテムを消費することは一般的です。汎用性の高いシーンかと思いますので参考になりやすいかな、と思います。 該当の画面はこちらです。施設を解放する際の確認ダイアログです。 不足しているとアイテムアイコンが震える！ アイテムが不足している場合、どのように伝えるかも考え…
「IDOLY PRIDE アイドリープライド」ボタンが押しやすい位置にあるダイアログ！
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「IDOLY PRIDE アイドリープライド」のダイアログのデザインを紹介します。 「IDOLY PRIDE アイドリープライド」で実装されているダイアログはソシャゲで一般的に使われがちな画面中央に表示されるデザインではありません。いくつか実装されている場面を紹介します。 例えばこちらの画面です！ 縦画面の場合、画面中央にOKボタンが寄ってしまうことがある… 指が届きやすい位置にボタンが配置されているため、操作しやす…
「IDOLY PRIDE アイドリープライド」汗の表現が素晴らしい！アイドル達の存在感が増す表現！
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「IDOLY PRIDE アイドリープライド」のアイドルの汗の表現について紹介します。 「IDOLY PRIDE アイドリープライド」ではアイドルが踊ると汗をかく演出が実装されています。汗が確認できる場面はいくつかあるのですが、事例となる画面をひとつ紹介します。 こちらです！こちらはライブ中の画面です。 ライブ途中で汗の表現が！ リザルトやホーム画面でも汗の表現が見れます！ ユーザーの反応も良い！ CEDEC2021…
「IDOLY PRIDE アイドリープライド」ホーム画面に設定したキャラに合わせてライブボタンのデザインを変化させているのは、短時間でゲームの世界観を訴求したかったから？
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「IDOLY PRIDE アイドリープライド」のホーム画面に設定したキャラクターによって一部ボタンのデザインが変化することについて紹介します。 該当の画面はこちらです！ホーム画面ですね。 キャラに合わせてライブボタンのデザインが変化している！ UIパーツと通じて視覚情報による単純接触効果を期待したのかも？ ゲームの世界観を訴求するためのUIパーツをデザインする際の参考になれば！ キャラに合わせてライブボタンのデザイン…
「IDOLY PRIDE アイドリープライド」見出しのUIアニメーションが小気味良かったので紹介！
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「IDOLY PRIDE アイドリープライド」の見出しのテキストのアニメーションについて紹介します。 該当の画面はこちらです！ショップ画面ですね。 こちらのショップ画面の見出しですが、子階層に遷移した際、親階層の見出しが小さく残り、子階層の見出しが表示されるようなアニメーションになっています。 実際の挙動はこちらです。 こちらは「ショップ画面」から「メインライブクリアパックの画面」に遷移した時のアニメーションです。 …
「IDOLY PRIDE アイドリープライド」通知バッジのデザインに変化をつけることで、より強く訴求したい情報とそれ以外の情報に優先度を付けたいという意図が感じられる
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「IDOLY PRIDE アイドリープライド」のライブ中に通知バッジのデザインについて紹介します。 ここで言うところの「通知バッジ」とは、ボタンなどの上に表示される、情報に更新があったことを示すマークのことを指しています。 例えばこちらの画面で使われたりしています。これはストーリーのTOP画面です。 これは未読のストーリーがあることを示しています。概ねどのゲームも誘目性を優先してか、赤系のマークを採用するデザインにな…
「IDOLY PRIDE アイドリープライド」ライブ中の演出が長押しで倍速に切り替わるUIデザイン
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「IDOLY PRIDE アイドリープライド」のライブ中に長押しをすると倍速モード切り替わるデザインについて紹介します。 該当の画面はこちらです！ …と言っても動いてないと分からないですよね。アニメーションで紹介します！ こちらが等速の画面です。 上部にライブ映像が流れ、下部はライブ中に発生したスキルと獲得したスコアなどが上から下に流れて表示されています。 これくらい速度であれば、重要な情報は追えるかな、と感じます。…
「IDOLY PRIDE アイドリープライド」撮影モード時に画面を分割するガイドが表示されるUIと撮影モードの位置付け
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「IDOLY PRIDE アイドリープライド」の撮影モード時に画面を分割する枠が表示されるUIと撮影モードの位置付けについて紹介します。 該当の画面はこちらです。画面上に白い線が表示されているのが分かるかと思います。 この白い線は画面右下のボタンを押すと… このように表示と非表示を切り替えることができます。 「三分割構図」を取り入れやすくなる！ この白い線の意味は写真の構図を検討する際に補助線の役割を果たすようです。…
「IDOLY PRIDE アイドリープライド」フルボイスのADVパートなら動画プレーヤーのようなUIだと没入感が増す！
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「IDOLY PRIDE アイドリープライド」のADVパートが動画プレーヤーのようなデザインをしていたので紹介します。 目新しさが感じられるかもしれませんが、それだけではなくしっかりと利便性も担保されているのが特徴的です。 具体的には 早送り、巻き戻しができる 会話ログが見れる 再生速度の切り替えができる 会話のテンポが良い といった点が良いと感じました。 さて、該当の画面を紹介します。該当の画面はこちらです。 まず…
「IDOLY PRIDE アイドリープライド」ロードが挟まらず、遷移アニメーションもスムーズであると没入感が維持されたままゲームを楽しめる
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「IDOLY PRIDE アイドリープライド」の画面遷移演出のデザインを紹介します。 該当の画面遷移演出は以下です。こちらはホーム画面です。 映像的に繋がっているため情報が補間され、切り替わった印象が軽減される！ 画面を左右にスワイプするとフッターメニューが切り替わります。アニメーションで見るとこのようになります。 フッターメニューで画面を切り替えているのですが、メニューが切り替わったことが意識されないデザインになっ…
「IDOLY PRIDE アイドリープライド」外が見えなくても室内の光を工夫することで時間帯の表現が可能！
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。 少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「IDOLY PRIDE アイドリープライド」の部屋の様子が時間帯に合わせて変化しているデザインを紹介します。 「それってUIなの？」を感じるかもしれませんが、ボタンを作ったり、画面をレイアウトするだけではなく、ゲームの没入感を高めるのもUIの役割の一つです。 該当の画面はこちらです。メインコンテンツであればどこでも良いのですが今回は「アイドル」の画面を例にします。 昼夕夜の3パターンの時間差分！ 「IDOLY P…
「IDOLY PRIDE アイドリープライド」キャラクターをフィルタする際に名前だけではなく顔グラフィックがあると分かりやすい！
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。 少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「IDOLY PRIDE アイドリープライド」のフィルタ画面にて、キャラクターの名前だけではなく、顔グラフィックがあるデザインを紹介します。 該当の画面はこちらです！ 見やすいように部分拡大しますね。 こんな感じで… チェックボックス 顔グラフィック アイドルの名前 といった情報で構成されています。 顔グラフィックがある方がストレスなく見分けることができる！ 「IDOLY PRIDE アイドリープライド」では最初か…
「IDOLY PRIDE アイドリープライド」ユーザーの行動を誘導するための導線を設置してユーザーの学習を促す工夫
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「IDOLY PRIDE アイドリープライド」から今やれることを誘導してくれる導線を紹介します。 ソシャゲはやることが多いので、次になにをすればいいのか迷うこともあると思います。そういった時に「これをやると良いよ」と示すことによって、ユーザーの行動がデザインできます。 該当の画面はこちらです！メニュー項目が並んでいる中に導線が設置されています。 ナビキャラの顔アイコンもゲームの没入感を損なわないための工夫！ こちらの…
「IDOLY PRIDE アイドリープライド」フリック操作でタブが切り替えられるのが超快適！
こんにちは！ちょこです！ このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「IDOLY PRIDE アイドリープライド」からスワイプ操作でタブが切り替えられる挙動について紹介します。 該当の画面はこちらです！ミッション画面ですね。画面上部にタブがあることが分かりますでしょうか？ スワイプ操作によって快適にタブ切り替えができる！ アニメーションで見るとこんな感じです。左右にスワイプすることで、このようにタブを切り替えられます。 これ以上タブ切り替えができない場合のアニメーションもあります。…
「ブログリーダー」を活用して、appgameuiさんをフォローしませんか？
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ファイナルファンタジーIX」（以下「FF9」）のゲーム起動直後に表示される、プレイ上の注意喚起のメッセージを紹介します。基本的には定型文なのですが、高速モードに触れている点が丁寧に作られている印象を受けます。以下、目次です。 特に「高速モード」に注意を促している 特に「高速モード」に注意を促している 「FF9」では多くのゲーム同様に、起動直後にプレイ上の注意について伝えるメッセージが表示されます。 健康のため、ゲー…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」のタイトル画面のデザインを紹介します。バリエーションが多く、没入感を高める効果があるようにも感じました。丁寧に作られている印象を受けます。以下、目次です。 再開するエリアに合わせて変化し、没入感が高い 現在のパーティを表示する 再開するエリアに合わせて変化し、没入感が高い 「トライブナイン」のタイトル画面は、ゲームを再開するエリアに合わせた背景が表示されます。 以下はタイトル画面とゲーム画面を比較し…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」の与ダメのアニメーションをご紹介します。取り上げられることは少ないし、いざ作ろうと思うと悩みそうな部分かな、という印象です。 以下、目次です。 与ダメのアニメーションが気持ち良い！ 通常の与ダメは「上下に揺れる」 クリティカルな与ダメは「ズーム」 連携時の与ダメは「右からスライドイン」 与ダメのアニメーションが気持ち良い！ 「トライブナイン」のバトルを見ていて気づいたのですが、与ダメの表示アニメーシ…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」の会話パートのデザインをご紹介します。 丁寧なライディングで見た目が綺麗！ 以下、目次です。 丁寧なライティング設定 場面とキャラの立ち絵の両立 見え方のパターン紹介 赤系統 紫系統 青から緑系統 緑～黄色系統 その他 丁寧なライティング設定 「トライブナイン」の会話パートの特徴のひとつに丁寧なライ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」のマップ機能をご紹介します。グラフィティという探索要素をサポートしてくれる機能が実装されています。 探索が楽になるデザイン！やったー！ 以下、目次です。 グラフィティは探索要素 グラフィティの情報が表示されるのが便利 どこにいても確認できるのが便利 段階的開示が利用されてて見やすい 情報の優先度にしたがった配色 グラフィティは探索要素 「トライブナイン」のグラフィティは探索要素のひとつです。発見した…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」のバトルスキップの機能をご紹介します。雑魚敵のバトルをスキップできる便利な機能です！結果的にユーザー体験のデザインに寄ったので、ゲームUIとは少し外れるかも？ 以下、目次です。 時短になる ストレスの軽減にもなる バトルスキップ時に世界観を含めたメッセージが表示される ユーザーがバトルシステムを理解しづらくなるかも？ 時短になる TAKE DAWN機能はキャラクターと敵との戦力差があるとフィールド上…
こんにちは、ちょこです！ 今回は「バイブコーディング」という単語を知ったので、試しにやってみました。 そろそろ夏休みに入りますし、自由研究にいかがでしょうか？ 以下、ざっくりしたステップと所要時間です。慣れてる方なら1分かからないかもしれません。 1時間目：バイブコーディングって何？（0:01） 2時間目：まったくの初学者に向けたバイブコーディングの適切な進め方を教えて？（0:02） 3時間目：最初の指示出し（0:03） 4時間目：仕様の追加（0:05） 5時間目：修正指示（0:06） 6時間目：一旦完了（0:07） 1時間目：バイブコーディングって何？（0:01） まず、言葉の意味を知らない…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」のエレベーターの操作パネルのUIをご紹介します。現実のデザインを丁寧に取り入れ没入感を高めつつ、不必要な情報を省いたデザインです。 ひとつひとつ丁寧に作られててすごい！ 以下、目次です。 没入感を高めるデザイン 1：ボタン配置が自然 2：読まれない文字も丁寧に扱う 3：階数がドットフォント フィクションのデザイン 没入感を高めるデザイン 「トライブナイン」ではエレベーターを操作する際、操作盤を模した…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」のバトル敗北時に難易度を下げる救済措置をご紹介します。以下、目次です。 1：より多くのユーザーが楽しめる設計 2：敗北が無駄ではないと感じる 3：わかりやすいメッセージ 4：モチベーションを維持するラベリングとメッセージ 4-1：キャラクターからの応援メッセージ 4-2：キャラクターを「強化」と表現…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」のSteam版とiOS版の画面を比較したのでご紹介します。以下、目次です。 プラットフォーム 1：Steam版はゲーム開始直後にキーコンフィグ設定がある 2：データ連携時に使用する外部サービスが違う デバイス 1：カーソルが用意されている 2：探索のレイアウトが違う 2-1：キャラクターのHPの位置…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アストラルパーティー」のSteam版とiOS版の画面を比較したのでご紹介します。 Steam版とiOS版とで運営が異なっており、今のところサーバーも分かれています。コントローラーは非対応。対応デバイスはマウスのみです。 以下、目次です。 運営違いのため除外する要素 1：企業ロゴが違う 2：問い合わせ先のメールアドレ…
こんにちは、ちょこです。 ここではゲームUIデザイナー向けに、ソシャゲのガチャ画面などで見かける「特定商取引法に基づく表示」と「資金決済法に基づく表示」について記載します。 「法律で決まっているので表示する」という認識でも実務上は恐らく困らないと思うのですが、表示漏れの防止や表示の必要性を質問された際に回答できるように、もう少し詳しく知っておきたいな、と思ったため疑問に感じていることをGeminiを使って出力しました。 厳密な正確性まで担保できませんが、概ね納得できる内容かと感じました。もし疑問に感じたことがあれば各々調べてみてください。 以下、目次とGeminiの回答です。存在しないリンク先…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アストラルパーティー」（以下「アスパ」）からキャラクターの露出の程度を変更できるナイーブエンジェルモードをご紹介します。 キャラクターの露出はUIデザイナーが直接コントロールできる部分ではないかもしれませんが、根底には「より多くの人に楽しんでもらいたい」という意思が含まれています。この意思は良いUIを作る際にも重要…
こんにちは、ちょこです！今回、私が購入した書籍の中からUIのアニメーションに興味がある方向けに紹介します。書籍でUIアニメーションが紹介されているのは結構珍しいかも…？ 「ゲームUI 作り方講座 Photoshop＆After Effectsで学ぶ、UIデザインとアニメーションの基本」 本書によると、想定読者は「就職して間もない新卒から入社3年目ほどの方」を想定している、とのこと。購入するとPhotoshopやAfter Effectsのファイルもダウンロードできるので、割と現場寄りの構成。 これらのことから、おそらく学生や非デザイナーに対しては書かれていないかもしれません。 また、モバイル端…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「クロノトリガー」のSteam版とiOS版の画面を比較したのでご紹介します。結論から述べると、今までのマルチプラットフォームとは違っていたり、移植を繰り返してきたタイトルであるため、ある程度前提情報が必要になると感じました。まずはマルチプラットフォーム対応の影響以外の要素を紹介します。 以下、目次です。 前提の話 除…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「星の翼」のSteam版とiOS版の画面を比較したのでご紹介します。結論から述べると、主にバトル画面とオプション項目に違いが見られました。なんとなくの印象ですが、バトル周りはSteam版準拠で作りつつ、バトル以外のメニューなどのUIはスマホを少し意識しているのかな、という印象を受けました。 以下、目次です。 1：バト…
「inZOI」の主な画面 タイトル名 inZOI タイトル画面 〇 〇 アバター作成 〇 アバター_年齢層 〇 アバター_気質 〇 アバター_人生 〇 アバター_プリセット 〇 アバター_表情変更 〇 アバター_ポーズ変更 〇 アバター_背景変更 〇 アバター_顔プリセット 〇 アバター_髪型 〇 アバター_肌 〇 アバター_顔の特徴 〇 アバター_目元 〇 アバター_化粧 〇 アバター_身体 〇 アバター_衣装 〇 〇 アバター_アクセサリー 〇 家族作成 〇 〇 ADV 〇 都市選択 〇 都市編集 〇 〇 〇 〇 〇 〇 〇 都市編集_にゃんストア 〇 都市の状態を調整 〇 魂の管理レポー…
「魔法少女まどか☆マギカ Magia Exedra（まどドラ）」の主な画面 タイトル名 魔法少女まどか☆マギカ Magia Exedra タイトル画面 〇 OPアニメ 〇 お知らせ画面 〇 ホーム画面 〇 〇 〇 ガチャ画面 〇 〇 ガチャ演出 〇 ガチャ結果 〇 交換所 〇 〇 プレゼント画面 〇 〇 パーティ画面 〇 パーティ編成_編成コピー 〇 ロード画面 〇 キャラ獲得 〇 限界突破 〇 キャラ編成 〇 〇 キャラ強化 〇 〇 キャラ一覧 〇 〇 キャラ詳細 〇 〇 キャラ_スキル 〇 〇 クエスト 〇 メインクエスト_トップ 〇 〇 メインクエスト_リスト 〇 メインクエスト_道中 …
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からメニューのデザインをご紹介します。 ビジュアルに特徴のあるメニューだったので、見せ方を模索したいときのアイディアの参考になれば幸いです。 以下、目次です。 放射状に配置したボタン 強調された調合ボタン フィッツの法則と視線誘導を考慮したレイアウト 放射状に配置したボタン 「レスレリ」のメニューの特徴として、各メニューアイコンが放射…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からクエストのスキップ機能をご紹介します。 このブログでも何度か紹介していますが、クエストのスキップ機能はスタミナ制を採用しているソシャゲにはほぼ確実に実装されている印象です。 以下、目次です。 クエストの周回に便利なスキップ機能 最大値のボタンも便利 クエストの周回に便利なスキップ機能 「レスレリ」にはクエストスキップ機能があります…
こんにちは、ちょこです。 このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回はゲーム起動直後のロード画面で表示される、世界観が含まれたローディングメッセージの事例を紹介します。 「本コンテンツは、『星になれ ヴェーダの騎士たち』のために公式に作成されたものではなく、使用された情報又はデータの一部は開発会社の商標又は著作物です」 以下、目次です。 1：ゲーム内用語を用いる 2：時系列に沿って文章を順番に表示する 3：読めるだけの時間確保も必要 1：ゲーム内用語を用いる ロード中に表示されるメッセ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「星になれ ヴェーダの騎士たち」（以下「星になれ」）からゲーム起動時に表示される、ローディング中を表すメッセージを紹介します。久々の紹介。海外で開発されるタイトルに多く見られる印象です。 ▲「星になれ」のロード画面です 以下、目次です。 1：メッセージは2種類用意されている 2：メッセージには世界観を含めた言葉が使われている 3：時系列に沿った順番でメッセージが表示されている 1：メッセージは2種類用意されている 表…
こんにちは、ちょこです。 このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ ここでは過去プレイしたゲームをもとに、レビューに誘導するダイアログをデザインする際に参考になりそうな要素をまとめました。レビューに誘導するダイアログをデザインする際の参考になれば幸いです。 以下、目次です。 1：キャラグラフィックを表示 専用グラフィックを表示 汎用的な立ち絵を表示 2：レビューボタンを目立たせる 3：ボタンには分かりやすいテキストを入れる 4：レビューを促すメッセージを表示 5：手書き風メッセージで世界観…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「星になれ ヴェーダの騎士たち」（以下「星になれ」）から。レビューを促すダイアログのデザインを紹介します。▲「星になれ ヴェーダの騎士たち」評価ダイアログ 以下、目次です。 1：専用のダイアログを用意 2：ナビキャラを表示 3：星を5つ並べて高評価を訴求 4：特に訴求したい要素は文字色を変えて訴求 5：ダイアログの枠の外にボタンを配置し目立たせている 1：専用のダイアログを用意 他のアプリにも見られる傾向ですが、レビ…
こんにちは、ちょこです。 このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ ここでは過去プレイしたゲームをもとに、サーバー選択画面のUIについてまとめました。サーバー選択画面をデザインする際の参考になれば幸いです。 以下、目次です。 設計 1：おすすめサーバーを表示する 2：デフォルトでおすすめサーバーを選択しておく 3：おすすめサーバーで始めるとインセンティブが獲得できる 4：サーバーの状態を表示する 5：サーバーの応答速度を表示する 6：サーバーが統合された場合の見せ方 7：サーバー内のキャラ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からアカウント削除をする際の手順や見せ方のデザインをご紹介します。誤操作を防ぐために複雑な操作になっていると感じました。 以下、目次です。 アカウントを削除するためには文字列を入力する必要がある 強めの警告文でアカウント削除の意思を確認 例文がキーボードのUI隠れない アカウントを削除するためには文字列を入力する必要がある 「ブレマイ」ではアカウント削除時の方法はやや複雑な手…
こんにちは、ちょこです。 このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ ここでは過去プレイしたゲームをもとに、ユーザーIDの表示方法についてまとめました。「配信者が安心してゲームを配信できるようにするために、ユーザーIDはどう取り扱うのが良いのかな…」と悩んでいる方の参考になれば幸いです。 以下、概要です。 1：タイトル画面ではタップして表示する形式が増えてきた 2：ゲーム内でユーザーIDを取り扱う場合、事前に表示を仄めかす場合もある 3：フレンド申請にはユーザーIDを使わない 4：タイトル画…
こんにちは、ちょこです。今回は「ブレマイ」のホーム画面に表示されているキャラの変更方法を紹介します。ミッションクリアのために操作が必要な方の参考になれば幸いです。 ホーム画面のキャラ変更方法は以下の手順で行えます。 【キャラ変更方法】 1：ホーム画面に遷移 2：画面右上の人型のアイコンをタップ 3：変更元のキャラを指定 4：変更後のキャラを指定 流れをアニメーションで見るとこんな感じです。 ▲ホーム画面に表示するキャラを変更する際の流れ アニメーションだと速すぎて分かりにくいかもしれません。一手ずつ説明します。 1：ホーム画面に遷移 まずホーム画面に移動します。 ▲「ブレマイ」のホーム画面 2…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からホーム画面でバッテリーの残量やwifiの接続状況が表示されているデザインをご紹介します。ゲームシステムにもよりますが、たまに見かけるデザインです。 以下、目次です。 ホーム画面でバッテリー残量とwifiの接続が確認できる 充電中と平常時の差分がある バッテリー残量がわずかになっても特に警告は表示されない ホーム画面でバッテリー残量とwifiの接続が確認できる 「ブレマイ」…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からADVパートでのルビの使い方をご紹介します。ルビを採用する際の使いどころ、ルビの設計思想の参考になれば幸いです。 以下、目次です。 キャラの名前にだけルビを振っている 読みにくい場所にルビが振られていると助かる 配信時の誤読防止にもつながる キャラの名前にだけルビを振っている 「ブレマイ」のADVパートでは、見た限りキャラの名前のみルビが振られていました。また、メッセージ…
こんにちは、ちょこです。 ここではUE5を学習する中で得た知見を書き残しておきます。同じくUE5を学習したいUIデザイナーさんの参考になれば幸いです。 久々にUE起動したら見慣れないレイアウトでした…。以前のレイアウトに戻す方法あるかなー…、とメニューを見てみたらありました。良かった。 ▲UIたちはどこへ… 以下の手順で以前のレイアウトに戻せました。 上部メニューから「ウィンドウ」を選択 「レイアウトをロード」を選択 「UEクラシック レイアウト」を選択 UE4のレイアウトに変更されたらOK ▲メニューから簡単に変更できます ▲UEクラッシック レイアウトを選択 見慣れたレイアウトだ！ ▲UE…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からメインコマンドにアクセスしやすいメニューのデザインをご紹介します。メインコマンドに対するアクセシビリティが高いデザインだと感じました。 以下、目次です。 メインコマンドにアクセスしやすいメニュー レイアウトが同じだから分かりやすい ボタンの色や形状で情報の優劣をつける 右端に寄せているから片手で操作しやすい 背景をぼかしてメニューが際立っている メインコマンドにアクセスし…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からユーザーIDについてご紹介します。体感だと2020〜2021年頃から扱いが変わってきた印象です。ユーザーIDの性質や取り扱いについて考えるきっかけになれば幸いです。 以下、目次です。 タイトル画面ではユーザーIDの表示・非表示が切り替えられる ゲームの中に入ったら非表示切り替え機能はない フレンド申請時にはフレンドNo.を使う タイトル画面ではユーザーIDの表示・非表示が…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からリザルト画面の特徴を紹介します。各パーツのアニメーションを利用して、視線の誘導をしつつ、何が起きているのか分かりやすく見せる工夫などがされていると感じました。 以下、目次です。 左上から右下に視線誘導するデザイン 情報の優先度に沿った、文字の大きさと表示する順番 ゲームを進めるために必要なボタンは目立つ上に押しやすい配置 左上から右下に視線誘導するデザイン 「ブレマイ」の…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からパズル部分に視線が集中される仕組みを紹介します。視線の誘導って割と自然にデザインされているので、意識して見てみると要素分解が難しい部分だと感じました。 以下、目次です。 周囲と比較して彩度が高い パズル部分がよく動く 面積が広い 「引き算のデザイン」を利用 角丸と角の使い分け 周囲と比較して彩度が高い 人は一般的に無彩色より有彩色、低コントラストよりハイコントラストのもの…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からスタミナを効率的に消費できる便利機能を紹介します。 以下、目次です。 豊富な便利機能 1:スタミナ一括消費機能 2:オート周回機能 3:スキップチケット 豊富な便利機能 「ブレマイ」には効率的にスタミナを消費する便利機能がいくつか実装されていました。ここでは以下の3点をあげます。 スタミナ一括消費機能 オート周回機能 スキップチケット それぞれ詳細を紹介します。 1:スタ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からパズル画面のピースのデザインを紹介します。パズルゲームは色々ありますが、ピースのデザインはゲームの差別化のためにも重要視されがちなのかな、と考えています。 以下、目次です。 世界観を取り入れたデザイン 色だけではなくシルエットでも差別化されたデザイン 世界観を取り入れたデザイン 「ブレマイ」のピースのデザインはキャラクターの顔をデフォルメさせたような見た目になっています。…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）からトグルボタンのデザインをご紹介します。トグルボタンは多くのゲームに採用されることが多いUIコンポーネントのひとつです。汎用性の高いUIだと思うので、デザインする上で参考にしやすいかと考えます。 以下、目次です。 色と文字を使ってオンオフが分かりやすいデザイン 色と文字を使ってオンオフが分かりやすいデザイン 「ブルーロック…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）から使用されているフォントを紹介します。「ブルーロックPWC」ではいくつかのフォントが使われていますが、今回は『数字』に注目してみました。 以下、目次です。 世界観を伝えるフォントを採用 事例1：ゴールスコアは原作やアニメと同じ7セグメントフォント 事例2：戦力の数字はユニフォームの数字と似たフォント 余談（ユニフォームに使…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）から動きのあるホーム画面のデザインをご紹介します。ゲームの世界観やジャンルにもよりますが、個人的にはゲーム画面は常に何かしら動いていて欲しいので、画面が動いているのは好きです。 以下、概要です。 動く背景に隠された工夫がいっぱい レアリティの低いキャラでも動きが出せる 動きのない推しをホーム画面に設定しても寂しくない 動く背…
![[乙女]恋の花咲く百花園](https://img.blogmura.com/sites/879330/post-images/21004435/crop/80x80)