「ガーディアンテイルズ」画面左上からヘルプが呼び出せる機能があって便利
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ガーディアンテイルズ」通称「ガデテル」から、ヘルプの閲覧機能について紹介します。機能自体は珍しくないのですが、 該当の画面はこちらです。 画面左上の「？マーク」をタップすると、機能のヘルプが表示されます。 アニメーションで見るとこんな感じです。この画面はダンジョン系の画面なので、ダンジョンに関する情報を閲覧することができます。 以前のソシャゲはヘルプ画面に遷移して、そこで必要な情報を閲覧するデザインになっている…
「ガーディアンテイルズ」フィルタ画面でアイコンと文字が表示されていて色覚多様性対応がされていると感じました
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ガーディアンテイルズ」通称「ガデテル」から、フィルタ機能のウィンドウについて紹介します。フィルタ機能、ソシャゲにはよく採用されている機能なので参考になるかもしれません。 該当の画面はこちらです。 左から順に「属性」「クラス」「レア度」の順番で並んでいます。今回注目するのは「属性」のグループです。 このデザインの何が良いか、という話ですが、アイコンだけではなく文字も書かれている点です。 簡単な情報であれば、文字よ…
「ガーディアンテイルズ」画面を長押しするとゲージが表示されるのであとどれくらい押せば良いのか分かって便利
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ガーディアンテイルズ」通称「ガデテル」から、長押しすることで何が起きるのかユーザーに伝えるデザインについて紹介します。 最近だと、長押しとリングゲージの組み合わせについて紹介もしていましたね。 「ガーディアンテイルズ」の画面はこちらです。 「ガーディアンテイルズ」の場合、ステージによってはクリア条件が旗を倒すことだったりします。一定時間長押しすると旗を倒すことができます。 アニメーションで見るとこんな感じです。…
「ガーディアンテイルズ」ホーム画面の直下に取り組むべきミッションの内容と導線が表示されていて遷移するのが便利
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ガーディアンテイルズ」通称「ガデテル」から、次にやることを伝えている導線について紹介します。 デイリーミッションやストーリーミッションなど、ユーザーにやることを伝えているゲームは多くありますが、「ガデテル」の例も見てみたいと思います。 該当の画面はこちらです。 ホーム画面下部に以下の4つの情報が表示されています。 ミッション内容 獲得できる報酬 進捗状況 導線 こちらの「スタート」を押すと、ミッションに挑戦する…
「ガーディアンテイルズ」敵を倒した時のHPゲージの消滅アニメーションの紹介
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ガーディアンテイルズ」通称「ガデテル」から、敵を倒した時のゲージのアニメーションについて紹介します。 該当の演出はこちらです。画面上部にあるHPゲージに注目です。 分かりやすいように該当部分を大きくします。このように敵を倒すとHPゲージが袈裟斬りされたように左右に分かれます。 デザインの意図を推測するに、HPゲージが消えるだけではターゲットの切り替わりと区別が付かないことも考えられます。HPゲージの消滅アニメー…
「ガーディアンテイルズ」ガチャ演出にユーザーの操作を介入することは自己奉仕バイアスに基づいたデザインなのかも
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ガーディアンテイルズ」通称「ガデテル」から、ガチャ演出最中にユーザーがサインが書ける演出について紹介します。 該当の演出はこちらです。 「ガーディアンテイルズ」ではガチャの演出中にこのようにユーザーにサインを求められます。画面に一筆書きで入力すると、演出の続きが再生され、抽選結果が表示されます。 この演出で注目したいことはユーザーが介入できるかどうかです。 結果は変わらないが、結果に対する納得感が得られることが…
「ドラゴンクエストけしケシ！」アバター選択画面で性別に言及しないメッセージの事例
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ドラゴンクエストけしケシ！」通称「DQけしケシ」から、アバター選択画面のデザインを紹介します。 該当の画面はこちらです。 「ドラゴンクエストけしケシ！」はゲーム開始直後にプロフィールアイコンを設定することができます。 その際に表示されるメッセージには以下のように書かれています。 あなたのことを表わすアイコンをえらんでください。 このように男の子、女の子というような性別に言及しない伝え方になっています。 最近はゲ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ガーディアンテイルズ」通称「ガデテル」から、レアアイテムの獲得演出について紹介します。 該当の演出を2つ紹介します。まずは武器演出です。 まずは予告演出部分として、外箱が高級感のあるデザインになり、ゆっくりと開封演出が再生されます。 続いてシーンが切り替わり、キャラクターが武器を掲げる演出が再生されます。星の数や「SSR」といった記号ベースのレアリティを強調するのではなく、他との差別化によって特別感を醸し出して…
「ガーディアンテイルズ」通知バッジに優劣を付けてユーザーの行動を誘導することに繋げるデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ガーディアンテイルズ」通称「ガデテル」から、通知バッジのデザインのバリエーションについて紹介します。 該当の演出はこちらです。 画面左端に動いているものがあるのが分かりますでしょうか。分かりやすくするために大きくしてみます。 ダイヤを抱えたキャラクターが、ダイヤを頭上高くまで掲げながら「迷宮ボタン」の上で飛び跳ねています。 これは機能的には「通知バッジ」と見なすことができます。 タップすると、このように機能が開…
「ガーディアンテイルズ」恒例！ショップに無料アイテムが並んでる！単純接触効果で課金のハードルを下げる行動に繋がっている？
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ガーディアンテイルズ」通称「ガデテル」から、無料アイテムをショップに陳列する施策について紹介します。 該当の画面はこちらです。ショップ画面ですね。 このようにショップなのにも関わらず、無料アイテムがリストの一番上に並んでいます。 購入完了までの流れをアニメーションで見るとこんな感じです。花火～ 無料アイテムの購入は実質的には配布と同じです。なので、ユーザー的にはショップに置かずに、ログインボーナスなどの直接配布…
「ガーディアンテイルズ」文字ではなく画像を使うことで画像優位性効果を狙っている？
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ガーディアンテイルズ」通称「ガデテル」から、時間制限を表わすグラフィック、及びアイコンを紹介します。 該当の画面はこちらです。ショップ画面ですね。 こちらに目覚まし時計のアイコンと「6日」と書かれています。これは商品の販売期間があと6日であるということを示しています。 よくある表現としてはテキストで「あと○○分」といった表現でしょうか。このようにグラフィックで表現する例はあまり見たことがなかったかもしれません。…
「アルゴナビス from BanG Dream! AAside」ブースト一括機能は最近の音ゲーには実装されがちな便利な人気機能
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アルゴナビス from BanG Dream! AAside」通称「ダブエス」から、ブースト一括消費設定の機能を紹介します。 ここ数年で日本で開発されている音ゲーでは、比較的実装されている機能です。 該当の画面はこちらです。セッション、いわゆるライブに望む前に設定できるようになっています。 ブーストの説明は以下の通りです。 ブーストを使用することでライブ後の報酬ボーナスがついかされます。※所持数が消費数に満たな…
「アルゴナビス from BanG Dream! AAside」ノーツの大きさや濃さが調整できるのはスコアを伸ばしたいユーザーの希望に応えるためだと感じた話
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アルゴナビス from BanG Dream! AAside」通称「ダブエス」から、ライブの各種設定機能を紹介します。 ライブの各種設定は基本的に備わっていて当然と思われている節があるので、ある程度把握しておきたい次第です。 該当の画面はこちらです。 大きく分けて ライブ設定 ライブ演出設定 システム の3つに分けられています。まずはライブ設定の各種設定から見ていきます。 リズムアイコンの速さ（1.0～11.0…
「アルゴナビス from BanG Dream! AAside」メニュー画面の特徴を4つあげてみたよ！
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アルゴナビス from BanG Dream! AAside」通称「ダブエス」から、メニュー画面の呼び出し方のデザインを紹介します。 メニュー画面に遷移するデザインも多くありますが、「ダブエス」の場合は画面に被るデザインになっていました。 該当の画面はこちらです。画面下部にメニューが並んでいます。押しやすさに配慮している配置だと感じました。 アニメーションで見るとこんな感じです。画面右下のメニューボタンで開閉し…
「アルゴナビス from BanG Dream! AAside」ミッションを達成するための手助けとなる導線があるのは便利
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アルゴナビス from BanG Dream! AAside」通称「ダブエス」から、ミッションを達成するための画面に遷移する導線を紹介します。 ミッションを達成するための導線があることで、手数の省略や考えるコストを抑えることに繋がると考えています。 該当の画面はこちらです。 このミッションの内容は「最初のフレンドを作ってみよう」です。 ソシャゲに慣れていればフレンドの意味や作り方は概ね察することができますが、ユ…
「アルゴナビス from BanG Dream! AAside」スガキヤや天下一品が好物のアイドルとプロフィール画面のデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アルゴナビス from BanG Dream! AAside」通称「ダブエス」から、キャラクターのプロフィール画面に表示されている好物を紹介します。 好物が表示されているのは一般的ではありますが、その内容が少し風変りでした。該当の画面はこちらです。 画面左側にキャラクターの2Dグラフィック、右側にキャラクターのパーソナル情報が表示されています。 その情報の中で注目したいのはこちらです。好きなものに「ラッキーピエ…
「ドラゴンクエストけしケシ！」図鑑の空きを埋めたくなるのはツァイガルニク効果の影響？
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ドラゴンクエストけしケシ！」通称「DQけしケシ」から、図鑑画面における未入手のドラけしの見せ方を紹介します。 該当の画面はこちらです。 注目したいのはこの辺りですね。入手済みのドラけしはグラフィックが表示されています。 選択するとドラけしの詳細な情報、パラメーターなどが表示されています。 出会ったことはあるけど、未入手のドラけしは暗いシルエットの上に「？」が重ねられて表示されています。 選択するといくつかの情報…
「FINAL FANTASY VII THE FIRST SOLDIER」ボイスチャットをテキスト化するユニバーサルデザインの事例
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「FINAL FANTASY VII THE FIRST SOLDIER」通称「FF7FS」の設定画面に自動音声認識機能の項目がありました。 該当の画面はこちらです！ 色々項目が並んでいますが自動音声認識機能の項目はこちらです。私の端末の場合、デフォルトはオフでした。これをオンにしようとすると以下のようなダイアログが表示されます。 なにやら色々書いています。 該当部分を抜粋して、文字を書き起こしてみました。 本機…
「ドラゴンクエストけしケシ！」ドラけしが少しだけ歪んでいて、消しゴムとしてのリアリティと有機的な温かみのあるデザインと感じました
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ドラゴンクエストけしケシ！」通称「DQけしケシ」から、ドラけしのデザインを紹介します。 ドラけしは図鑑画面で確認できます。こんな感じで獲得したドラけしたちが並んでいます。 一見して違和感を覚えたのですが、微妙にシンメトリーではない…？ 基準線を引いてみるとこのように左右非対称なデザインになっています。例えばこちらのスライムのドラけしの場合、シルエットは対称的になっているけど、中の顔の部分は少し傾いています。 他…
「ドラゴンクエストけしケシ！」ミッション画面で報酬サムネイルが傾いている理由を考えてみた
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ドラゴンクエストけしケシ！」通称「DQけしケシ」から、ミッション画面のデザインを紹介します。 多くのソシャゲはミッション機能が存在しています。ミッションを通じて、例えば以下のような影響を及ぼすことが考えられます ゲームのルールの学習 単純接触効果によりアプリに好感を持つ 報酬を得ることでキャラ育成のサポート 継続率の安定、向上 ユーザーに取って欲しい行動の誘導 などなど。もちろんこれ以外にも多くあると思うので、…
「ドラゴンクエストけしケシ！」初期値をどこに設定するかもUIにとっては大事な要素
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ドラゴンクエストけしケシ！」通称「DQけしケシ」から、サウンド設定の初期値を見てみます。 初期値をどこにするかによってユーザーに与える利便性も変わってきます。初期値はビジュアルデザインに注目するだけだと忘れがちなのでしっかりと見ておきたい要素です。 該当の画面はこちらです。 サウンドの設定はこちらですね。BGM、SE、ボイスが並んでいます。音量の大きさの初期状態を見ると、5段階中の4段階目でした。中央の3段階目…
「ドラゴンクエストけしケシ！」消せるキャラを目立たせるだけではなく優先度がある？
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ドラゴンクエストけしケシ！」通称「DQけしケシ」にて、どのキャラを消したら良いのかヒントが表示されます。 該当の画面はこちらです。 アニメーションで見るとこんな感じですね。消せるキャラが拡縮してアピールしているのが分かりますでしょうか？ こちらの剣と… …こちらのキャラですね。 このように消せるキャラを1つだけ目立たせることでユーザーの行動を誘導していることがわかります。 また、ランダムで目立たせているわけでは…
「ドラゴンクエストけしケシ！」セーブデータの削除は敢えて手数をかけるデザインになっていた
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ドラゴンクエストけしケシ！」通称「DQけしケシ」にてセーブデータが複数保存できるようになっていました。ソシャゲではあまり見ない画面ですので、デザインの参考までに紹介したいと思います。 該当の画面はこちらです。 普段はこのように白い枠ですが、赤い枠になることで普段と違う印象を覚え、警戒する色使いにもなっています。 さて、画面を進めてセーブデータを消そうとすると、キャラクターコードの入力が求められました。セーブデー…
「ドラゴンクエストけしケシ！」セーブデータを複数保存することで家族内での端末の共有、アプリの削除の抑制につながるのかも
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ドラゴンクエストけしケシ！」通称「DQけしケシ」にてセーブデータが複数保存できるようになっていました。ソシャゲではあまり見ない画面ですので、デザインの参考までに紹介したいと思います。 該当の画面はこちらです。 このようにセーブデータを最大3つまで作成することができます。 コンシューマでは比較的多く見かけるデザインですが、ソシャゲでは珍しい仕様です。小さい子供など、端末を持たせることに懸念がある場合もあるかと思い…
「ドラゴンクエストけしケシ！」ゲームの世界観を取り入れた指先カーソルになっていた
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ドラゴンクエストけしケシ！」通称「DQけしケシ」の指先カーソルのデザインに世界観が取り入れられていたので紹介します。 該当の指先カーソルはこちらです。 アニメーションで見るとこんな感じですね。 右手の人差し指で対象を指し示すデザインです。 ゲームを進めていたらもう1パターンありました。 こちらは右手の人差し指で対象をタップするデザインです。 なんとなくロトの紋章っぽいデザインではあるのですが…元ネタが分からず……
「ドラゴンクエストけしケシ！」アイコンやタップエフェクトにスライムが採用されていて、世界観の表現と没入感を高める工夫だと感じました
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ドラゴンクエストけしケシ！」通称「DQけしケシ」のアイコン類でスライムのモチーフが取り入れられていました。世界観を取り入れるデザインの参考までにご紹介します。 見つけたのは以下の4つの箇所です。 タイトルに戻るボタンのアイコン キャラクターコードをコピーするボタンのアイコン パーティ切り替えボタンのアイコン タップエフェクト 早速それぞれ紹介していきます。まずは1つめ「タイトルに戻る」のアイコンです。 画面下部…
「ドラゴンクエストけしケシ！」消しゴムモチーフだから進行度合いが消えるデザインでも成立している！
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ドラゴンクエストけしケシ！」通称「DQけしケシ」のロード中の進捗ゲージのデザインを紹介します。 該当の画面はこちらです！画面左下にゲージが表示されているのが分かりますでしょうか？ 見やすく拡大してみますね。 こんな感じでスライムの消しゴムが進行度合いを示しています。 いかがでしょうか…。アニメーションは一瞬でしたが、違和感を覚えるかと思います。 はい、よく見るとゲージが消されているような演出になっています。 ゲ…
「ドラゴンクエストけしケシ！」タイトル画面に「ぼうけんをはじめる」というテキストが表示されており、アプリの期待感が高まった
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ドラゴンクエストけしケシ！」通称「DQけしケシ」のタイトル画面に表示されているゲーム開始のテキストを紹介します。 該当の画面はこちらです！ このように「ぼうけんを はじめる！」と書かれています。 これ、もしかするとドラクエシリーズのスマホゲーム初かも…？と思って関連タイトルを調べてみました。 結論から言うと「ドラクエウォーク」が「ぼうけんを はじめる」を採用していました。他は「タッチスタート」「Tap to S…
「FINAL FANTASY VII THE FIRST SOLDIER」マッチング開始ボタンがホーム直下にあり、最短ワンタップでマッチングするのが分かりやすく便利
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「FINAL FANTASY VII THE FIRST SOLDIER」通称「FF7FS」のマッチング開始ボタンについて紹介します。 該当の画面はこちらです！ こちらはホーム画面なのですが、画面右下に「START」というボタンがあります。こちらをタップするとマッチングが開始されます。 分かりやすくボタンを拡大します。マッチングが開始されるとマッチング中という表示ともにタイマーが起動します。 何の変哲もないUIに…
「FINAL FANTASY VII THE FIRST SOLDIER」ボタンの位置や大きさ、カメラの設定などがめっちゃ細かく設定できる
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「FINAL FANTASY VII THE FIRST SOLDIER」通称「FF7FS」のUIのカスタム機能について紹介します。 該当の画面はこちらです！ 多くのボタンが表示されていますが、以下の3つのパラメーターについて個別に調整することができます。 サイズ 透明度 表示/非表示 パーツを選択するとこのようにサイズと透明度が設定できます。 画面上部のボタンをタップするとボタンを非表示設定にする領域が表示され…
「FINAL FANTASY VII THE FIRST SOLDIER」サーバー選択画面に応答速度が表示されており、おすすめサーバーが分かりやすい
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「FINAL FANTASY VII THE FIRST SOLDIER」通称「FF7FS」のサーバー選択画面について紹介します。 該当の画面はこちらです！ 北米、東アジア、東南アジア、欧州、南米の5つのサーバーが表示されています。 特徴的なのはサーバー名の右側に表示されている数字です。東アジアは49.7ms、欧州は330.8msと表示されています。 公式なドキュメントは見つからなかったのですが、地域が遠いほど数…
「ブログリーダー」を活用して、appgameuiさんをフォローしませんか？
こんにちは、ちょこです！ 今回は「バイブコーディング」という単語を知ったので、試しにやってみました。 そろそろ夏休みに入りますし、自由研究にいかがでしょうか？ 以下、ざっくりしたステップと所要時間です。慣れてる方なら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に興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からクエストのスキップ機能をご紹介します。 このブログでも何度か紹介していますが、クエストのスキップ機能はスタミナ制を採用しているソシャゲにはほぼ確実に実装されている印象です。 以下、目次です。 クエストの周回に便利なスキップ機能 最大値のボタンも便利 クエストの周回に便利なスキップ機能 「レスレリ」にはクエストスキップ機能があります…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からストーリーの進行に合わせてデザインが変化するホーム画面のデザインをご紹介します。 日本のソシャゲはホーム画面のデザインを重視する傾向があると感じていたのですが、「レスレリ」のホーム画面の見た目は非常にリッチで、この時代のひとつの到…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）から世界観を取り入れたスタミナ回復アイテム配布機能のデザインの事例をご紹介します。 文字にすると分かりにくいですね…。とても素敵なデザインなので、今回はひとまずゲーム画面を見ていただければ！ 以下、目次です。 スタミナ回復をパイに置き…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からタイトル画面などでのプレイヤーIDの取り扱いついてご紹介します。何度か紹介しているので簡単に。 以下、目次です。 タイトル画面ではタップして表示する形式が増えてきた タイトル画面での表示位置は誤タップしない位置がオススメ ゲーム内でも配慮をしている タイトル画面ではタップして表示する形式が増えてきた ゲームの規模感やジャンルにもよ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からキャラクターの情報をフィルタする画面のデザインを紹介します。 色々なフィルタ画面を見ましたが、登場キャラクターの数が多く、キャラを訴求したいゲームは大体このような見た目のフィルタ画面に落ち着いている印象を受けます。 以下概要です。 顔サムネイルが表示され直感的に伝わりやすい 表情を付けたサムネイルが採用 属性情報が表示されている …
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からプラットフォームやデバイスによって、UIにどのような違いがあるか気付いた範囲でまとめてみました。 「レスレリ」は今まで記事にしてきたゲームの中でもかなりシンプルな対応でした。複数のプラットフォームでリリースする際、優先的に対応する…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「 ヘブンバーンズレッド」（以下「ヘブバン」）からプラットフォームやデバイスによって、UIにどのような違いがあるか気付いた範囲でまとめてみました。デザインの対応方針などの参考になれば幸いです。 以下、目次です。 プラットフォーム対応 1：プラットフォーム独自の機能、導線を設置する 1-1：Steam版では、タイトル画…
こんにちは、ちょこです。 このブログでは「ゲーム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」）から動きのあるホーム画面のデザインをご紹介します。ゲームの世界観やジャンルにもよりますが、個人的にはゲーム画面は常に何かしら動いていて欲しいので、画面が動いているのは好きです。 以下、概要です。 動く背景に隠された工夫がいっぱい レアリティの低いキャラでも動きが出せる 動きのない推しをホーム画面に設定しても寂しくない 動く背…
![【西武感想「オリックス好き『ダサいファン、キモい観客、最弱打線の西武は怖くない』」(オリックス13回戦)】(2025/07/04 [vol.9])](https://img.blogmura.com/sites/750653/post-images/72655930.webp/crop/120x120)
![【西武感想「西口監督は代打采配が下手。牧野を信じるなら声はかけようよ！」(オリックス12回戦)】(2025/07/03 [vol.8])](https://img.blogmura.com/sites/750653/post-images/72586771.webp/crop/120x120)