こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「魔法使いの約束」、通称「まほやく」のロゴに隠されたデザインを考察してみます。 「魔法使いの約束」のロゴは世界観の表現や可読性だけではなく、ストーリーに関わるメッセージが隠されているタイプのデザインに見えました。有名なのはPS1の「ヴァルキリープロファイル」でしょうか。 ヴァルキリープロファイル[PS1]。隠された真エンディング。初回で見られた人は… - おしょ〜の激コアゲームライフ 色々なタイプのロゴをデザイン…
「あんさんぶるスターズ！！Music」他のソシャゲにはないストーリー機能の4つの特徴
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「あんさんぶるスターズ！！Music」、通称「あんスタ」のストーリーのサムネイルを紹介します。 該当の画面はこちらです！ 右側にストーリーのリストが並んでいるのが分かるかと思います。既読のストーリーにはサムネイルが表示され、未読のサムネイルにはサムネイルが表示されていません。 多くのソシャゲのストーリーのサムネイルは未読であっても表示されます。アニメの次回予告のように、次のストーリーで何が起きるのかを簡易的に伝え…
「あんさんぶるスターズ！！Music」メニューのUI改修、7つの変更点
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「あんさんぶるスターズ！！Music」、通称「あんスタ」のメニュー画面のデザインを紹介します。 該当の画面はこちらです！ このようにボタンが並んでいるだけではなく、ビルのフロアにショップやアイドルルームが入っているように見えるデザインになっていました。 配置するだけではなく世界観を表現するデザインだと感じました。 …という感じで記事の下書きをしていたのですが、今日見たらデザイン変わってました。そんな事もある。 せ…
「あんさんぶるスターズ！！Music」音ゲーには定番になりつつある、BP一括機能の紹介
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「あんさんぶるスターズ！！Music」、通称「あんスタ」のBP一括消費設定の機能を紹介します。 該当の画面はこちらです！ こちらの機能はBP（スタミナ）を一括消費して、その分多くの報酬を獲得できる機能です。これにより、短い時間でより多くの報酬を獲得することができます。 過去に何度か紹介していますが、ここ数年の音ゲーには比較的実装されている機能です。 一括消費機能が音ゲーに多く実装されている背景には、楽曲ごとに決ま…
「あんさんぶるスターズ！！Music」あんスタのオシャロゴデザイン紹介
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「あんさんぶるスターズ！！Music」、通称「あんスタ」のストーリーのロゴデザインを紹介します。 該当のロゴはこちらです！ 色んなロゴがリリースされているのですが、一番手前にあったのがこちらの「ドラマティカ」のロゴです。 ロゴ 幾何学の図形と直線的なシルエットで構成されています。西遊記という伝統的な舞台の中にあって、現代的なアレンジを加えたロゴになっているように見えます。 ロゴとイラストの色のトーンも統一されてい…
「あんさんぶるスターズ！！Music」ストーリーのフィルタ項目の中にシナリオライターさんの名前で抽出機能があった
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「あんさんぶるスターズ！！Music」、通称「あんスタ」のストーリーのフィルタ機能にシナリオライターの項目があったので紹介します。 該当の画面はこちらです！ 画面左側にストーリーカテゴリ、ライター、時期などの項目が並んでいます。ここで注目したいのは「ライター」の項目です。 項目を選択すると、このようにストーリーのシナリオを手掛けたライターさんのお名前がリストで表示されます。 日日日 結城由乃 ゆーます 西岡麻衣子…
「あんさんぶるスターズ！！Music」メニューアイコンとドロワーのアイコンが一体となったデザインになっていました
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「あんさんぶるスターズ！！Music」、通称「あんスタ」のアドベンチャーパートのメニューアイコンを紹介します。 該当の画面とアイコンはこちらです！ 画面右上にメニューアイコンがあるのが分かるかと思います。 メニューアイコンを押すとこんな感じで各種項目が縦に並びます。 挙動自体はよくあるデザインなのですが、メニューアイコンをよくみると下三角のマークが隠れています。 あまり見たことないデザインですが、ドロワーとメニュ…
「あんさんぶるスターズ！！Music」提供割合を分数で表すことで正確性が増し、画面もスッキリする発明
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「あんさんぶるスターズ！！Music」、通称「あんスタ」の出現カードの提供割合のデザインを紹介します。 該当の画面はこちらです！ 具体的にはこの部分です。当選割合が1/12となっていることが分かるかと思います。 多くのソシャゲは小数点で表記しています。このように分数での表記は初めて見たかもしれません。 小数点表示の問題点 小数点で表記する場合、割り切れない数字が出てくるため、小数点第3位くらいで四捨五入されている…
「キャットバスターズ - collections -」肉球は3本指か、4本指か？生物学的な正しさは4本指だけど、どちらも記号の役割は果たしている
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「キャットバスターズ - collections -」、通称「キャトコレ」にて肉球が取り入れられたデザインを紹介します。 紹介するのはタップエフェクトとタイトル画面の2つです。まずはタップエフェクトの紹介です。 1：タップエフェクトの肉球デザイン こちらですね。アニメーションで見るとこんな感じです。 分かりやすくするために、該当部分を拡大します。肉球をモチーフとしたデザインのタップエフェクトです。 ランダムに星が…
「キャットバスターズ - collections -」縦画面なのに親指で押しやすい範囲にボタンが配置されているデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「キャットバスターズ - collections -」、通称「キャトコレ」にて画面の下の方にボタンが集中しているデザインを紹介します。 該当の画面はこちらです。 よくあるソシャゲでは、画面上部にプロフィールへの導線や有償アイテムを購入するための導線が配置されています。 しかし、「キャットバスターズ - collections -」にはプロフィール画面が存在せず、課金システムもありません。 メインメニューは画面下部…
「キャットバスターズ - collections -」ヘルプの内容をキャラクターのセリフのようにすることで、ユーザーに語りかけてくるような没入感が得られる
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「キャットバスターズ - collections -」、通称「キャトコレ」にて世界観溢れるヘルプ文言を紹介します。 該当の画面はこちらです。 Q.博士の声、聞こえないニャ？ これも大人の事情ですニャ。色々難しいのニャ。お察しくださいニャ。 かわいすぎる！！ ボイスが無いのは疑問点でもあり、不満に繋がる点かもしれませんが、当事者であるキャラクターを中継することにより謎の説得力と納得感があります。 本人が言うなら仕方…
「キャットバスターズ - collections -」壊れたマシンに絆創膏を貼るのは比喩だけど、直感的に理解できるデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「キャットバスターズ - collections -」、通称「キャトコレ」にてマシンが故障中だった時の表現を紹介します。 該当の画面はこちらです。 画面中央に表示されているのがマシンです。このように故障中を示すデザインを「故障中」といった文字ではなく、絆創膏を貼った表現が採用されていました。 よく考えてみると、絆創膏を貼るデザインは比喩的な表現です。 多くの方はご存じかもしれませんが、現実世界において機械が故障中…
「魔法使いの約束」会話ログ画面のビジュアルが作り込まれており、没入感を損なわないデザインでした
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「魔法使いの約束」、通称「まほやく」の会話ログの画面を紹介します。 該当の画面はこちらです。 章タイトルが装飾され、丁寧にデザインされているのが素敵です。 ソシャゲの会話ログ画面は比較的簡素なデザインになっていることが多いです。黒い下地に白い文字が表示されている程度であったり、少し情報量が増えてもキャラクターの顔グラフィックが表示されているくらいです。 会話ログ画面はそういうものだと思っていたのですが、改めて理由…
「魔法使いの約束」色のトンマナな光源の位置を統一することでデザインの一貫性が感じられた
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「魔法使いの約束」、通称「まほやく」のメニューアイコンのデザインを紹介します。 該当の画面はこちらです。 アイコンはこちらですね。全体的に色のトーンが統一されているだけではなく、光源の統一もされています。 ナナメ左上から円状に明るくライトが入っているのが分かりますでしょうか。 デザインの独自性、特異性のようなものはないのですが、優しい色使いが世界観に合っているように感じます。 輪郭線は黒にせず濃茶にし、影の色もた…
「魔法使いの約束」急に近づくとキャラクターが驚くアクションが用意されていた、こんなデザイン初めて見た！
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「魔法使いの約束」、通称「まほやく」のユーザーの操作に対するキャラクターのリアクションを紹介します。 「魔法使いの約束」ではキャラクターのモデルをプレビューする機能がある。 キャラクターをタップするだけではなく、急に近づく（ズームにする）とリアクションするデザインが実装されていました。 該当の画面はこちらです。 アニメーションで見るとこんな感じです。 gifでは速度を変えて2回ズームさせていますが、キャラクターが…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「魔法使いの約束」、通称「まほやく」の育成のオート機能を紹介します。 該当の画面はこちらです。 設定画面だけ見ても分かりづらいですよね…。 まずは育成パートの画面を紹介します。 こんな感じで任意のキャラクターを1人を育成するゲームです。 ゲームに慣れている人であれば、ゲーム画面を見るだけでゲームのジャンルや詳細なルールが想像できるかもしれません。 ゲーム中の説明画像によると… 1：ガチャでカードをゲットして、育成…
「ドラゴンクエスト ダイの大冒険 -魂の絆-」サムネイルを長押しするとリングゲージが表示されて分かりやすい
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ドラゴンクエスト ダイの大冒険 -魂の絆-」、通称「魂の絆」で採用されていた、長押しする際にリングゲージのUIパーツを表示するデザインを紹介します。 該当のUIパーツが使われている画面はいくつかありますが、編成画面を例に紹介します。 画面中央に3Dのキャラクターが表示され、それを囲うように装備アイコンや特技アイコンが並んでいます。特技アイコンを長押しすると詳細ダイアログが表示されます。 アニメーションで見るとこ…
「ドラゴンクエスト ダイの大冒険 -魂の絆-」ゲームならではのアンケート調査のデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ドラゴンクエスト ダイの大冒険 -魂の絆-」、通称「魂の絆」のアンケート機能を紹介します。 アンケートはゲーム開始直後、チュートリアル終了時に表示されていました。該当の画面はこちらです。 画面上部にキャラクターが表示され、アンケートの設問を読み上げています。画面下部には4択の選択肢が並んでいます。 選択肢を選んで回答すると、キャラクターから回答に対する反応が得られます。 例えば「ダイの大冒険」のことをいつから知…
「ドラゴンクエスト ダイの大冒険 -魂の絆-」アイテム名をサムネイルに重ねて表示することで結果的に色覚多様性対応に繋がるデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ドラゴンクエスト ダイの大冒険 -魂の絆-」、通称「魂の絆」の色覚多様性対応を紹介します。 具体的にはシルエットが同じで色差分のあるアイテムをどうやって区別させているか、という話です。 該当の画面はこちらです。 このように所持アイテム画面では同じシルエットで色だけが異なるアイテムが多く並んでいます。これをP型のシュミレーションフィルタに通すと以下の見た目になります。 色情報の一部が失われるため、アイテムの差別化…
「ドラゴンクエスト ダイの大冒険 -魂の絆-」説明画像のデザインが情報整理と視線誘導がなされて短い時間でも内容を理解しやすい
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ドラゴンクエスト ダイの大冒険 -魂の絆-」、通称「魂の絆」の説明画像の視線誘導が上手くでき、見やすいデザインであった点を紹介します。 説明画像をデザインする際の参考になれば幸いです。 説明画像が使われている画面はこちらです。 説明画像はヘルプ画面や画面遷移中に表示されています。 ヘルプ画面はゆっくり見れるけど、画面遷移中では短い時間の表示ですね。 アニメーションで見るとこんな感じです。 通信環境などにもよりま…
「ドラゴンクエスト ダイの大冒険 -魂の絆-」四か国語対応していたのでタイトルロゴを比較してみた
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ドラゴンクエスト ダイの大冒険 -魂の絆-」、通称「魂の絆」の言語別のロゴを紹介します。多言語のロゴデザインを行うことは稀ですが、稀だからこそ参考資料が少ないです。 該当のロゴはこちらです。 「ドラゴンクエスト ダイの大冒険 -魂の絆-」の場合は以下の4つの言語対応がされています。 日本語 英語 フランス語 繁体字 それでは一つずつ見ていきます。まずは英語版です。 1：日本語版 これが基準となるロゴだと思います…
「ドラゴンクエスト ダイの大冒険 -魂の絆-」多言語対応する際に説明画像の数を抑えるアイディア
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ドラゴンクエスト ダイの大冒険 -魂の絆-」、通称「魂の絆」の多言語対応を行う際に用意する画像を少なくする小技を紹介します。 該当の画像が使われている画面はこちらです。 このように記号化されています。 これはドラクエシリーズやダイの大冒険の文字というわけではありません。 では、なぜわざわざ画面キャプチャの文字部分を加工してるのかな、と考えた際に多言語対応が関係しているのかなと思い浮かびました。 説明画像を作成す…
「ドラゴンクエスト ダイの大冒険 -魂の絆-」強化可能な特技と強化不可な特技が最初から分かれていることで見やすいデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ドラゴンクエスト ダイの大冒険 -魂の絆-」、通称「魂の絆」にてどの特技が強化できるかが分かりやすいデザインになっていました。 該当の画面はこちらです。 この画面で注目したいのは、この部分です。強化可能と強化不可がテキストで明示され、表示領域も分けられています。 このデザインにより、強化可能な特技が明確に分かります。 他のソシャゲではフィルタ機能で「強化可能なもののみ表示」といった方法で抽出するデザインを見かけ…
「ドラゴンクエスト ダイの大冒険 -魂の絆-」再生マークをボタンに載せることで、ボタンの役割が分かりやすくなるデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ドラゴンクエスト ダイの大冒険 -魂の絆-」、通称「魂の絆」の動画インセンティブのボタンデザインを紹介します。 該当のパーツが使われている画面はこちらです。「ドラゴンクエスト ダイの大冒険 -魂の絆-」では動画広告を観ることでガチャが2回まで回すことができます。 該当のボタンを部分を分かりやすくトリミングします。 よく見ると、ボタンの中に再生を示すアイコンが付いています。これにより以下の特徴が挙げられます。 他…
「永遠の7日-終わりなき始まり」ジャイロを効果的に取り入れることで、端末を回転させるのに没入感を損なわない天才的な発想
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「永遠の7日-終わりなき始まり」、通称「とわなな」の思わず画面を回転させてしまうデザインを紹介します。 該当の画面はこちらです。 これだけだとわかりづらいですよね。少し補足します。 通常「永遠の7日-終わりなき始まり」は縦画面でプレイするゲームです。このようにADVパートは縦画面です。 ただ、一部ストーリーはムービーが挿入され、横画面の表示になります。 縦画面から横画面に切り替わるため、ユーザーは端末を回転させな…
「永遠の7日-終わりなき始まり」アンケート機能の実装事例の紹介と、設問の中にUIの使い勝手に関するものがあり驚いた話
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「永遠の7日-終わりなき始まり」、通称「とわなな」のアンケート機能について紹介します。ユーザー調査の手法の参考になればと思います。 該当の画面はこちらです。 「ゲーム体験調査1」「ゲーム体験調査2」という件名でゲーム内にメールが届いていました。 設問数は「ゲーム体験調査1」の場合は43項目前後で構成されていました。大雑把に回答するのに5～6分程度かかりました。 設問を考える際の参考までに3つほど事例を紹介します。…
「永遠の7日-終わりなき始まり」封書の持つ機能を利用して、メールの未読既読をあらわすデザイン事例
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「永遠の7日-終わりなき始まり」、通称「とわなな」のメール画面にて採用されていた封書のアイコンについて紹介します。未読、既読の見せ方をデザインする際の参考になればと思います。 該当の画面と封書アイコンはこちらです。 画面全体の開封アニメーションは以下のようになっています。 変化している部分を分かりやすく見せるために封書アイコンの部分を拡大します。 このように、既読か未読かを文字ではなくグラフィックで示しているデザ…
「永遠の7日-終わりなき始まり」ゲージの境界線に白い筋を表示して視線誘導をし、情報量の多い画面でも見やすくしていた
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「永遠の7日-終わりなき始まり」、通称「とわなな」のゲージのデザインが見やすくなるための工夫が取り入れられていたので紹介します。ゲージの見せ方をデザインする際の参考になればと思います。 該当のゲージデザインはこちらです。 味方が水色、敵が赤のHPゲージのデザインになっています。見やすく工夫されている点は、HPの残量部分と下地の間に白い光の筋のようなエフェクトがある点です。 アニメーションで見るとこのような感じです…
「永遠の7日-終わりなき始まり」訴求バナーが世界観に寄せたデザインだった 見せ方の参考までに
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「永遠の7日-終わりなき始まり」、通称「とわなな」のバナーの見せ方が世界観に寄り添ったデザインだったので紹介します。バナーの見せ方をデザインする際の参考になればと思います。 該当のバナーはこちらです。 アニメーションで見るとこんな感じです。 バナーは画面左上に表示されています。天井からぶら下がっているモニターの中に各種訴求バナーが表示されていることが分かります。 ここで表示されているバナーは以下の4点です。 運命…
「永遠の7日-終わりなき始まり」アイコングラフィックの色がきれいだったのでよく見てみた
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「永遠の7日-終わりなき始まり」、通称「とわなな」のアイコンのデザインがきれいだったので紹介します。ゲームのアイコングラフィックをデザインする際の参考になればと思います。 該当のアイコンはこちらです。 いくつかの特徴があるので、分類分けしてみます。 1：基本型 「アイコン」と聞いたときに想像するのはこの様な構図のデザインだと思います。 「とわなな」のアイコンは背面を暗くしています。これによりアイコンが手前にあるよ…
「永遠の7日-終わりなき始まり」MSAAって何だろう…？ アンチエリアスの一種でした
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「永遠の7日-終わりなき始まり」、通称「とわなな」のゲーム設定の中にあったMSAAという項目を紹介します。あまり聞きなれない単語かもしれません。 該当の項目はこちらです。 このようにオプション画面の中にゲーム設定の項目が並んでいます。その中に「MSAA」という項目があります。 情報を階層に表わすと以下のようになります。 MSAA └オフ └オン └高 └中 └低 オフとオン（高）を比較すると以下のようになります。…
「ブログリーダー」を活用して、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」）から動きのあるホーム画面のデザインをご紹介します。ゲームの世界観やジャンルにもよりますが、個人的にはゲーム画面は常に何かしら動いていて欲しいので、画面が動いているのは好きです。 以下、概要です。 動く背景に隠された工夫がいっぱい レアリティの低いキャラでも動きが出せる 動きのない推しをホーム画面に設定しても寂しくない 動く背…
