「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」ガシャ履歴画面をデザインしたい貴方へ 必要な情報を簡潔にまとめたデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からガシャ履歴画面をご紹介します。これはガシャの購入履歴が確認できる機能ですね。理由は分かりませんが、比較的見かけるようになった印象です。 以下、概要です。 階層を分けて表示してる ガシャ履歴が確認できるとエラーが出たときに便利 ユーザー間のコミュニケーションにも利用される 階層を分けて表示してる こちらは「シャニソン」のガシ…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」赤文字の使い方をまとめてみました
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）から赤文字の使い方をご紹介します。赤文字を使っても強調されるかどうかは、下地の色や周囲の情報に埋もれないかなど、他の要素との兼ね合いもあります。ただ、一般的に赤は誘目性の高い色なので、強調色として使いやすいと感じるのかもしれませんね。 以下、概要です。 シャニソンでの赤文字の使われどころを分類してみた 1：注意文言 2：ステー…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」ガシャ結果画面を見たらシェアする情報が3パターンもあった！細かな差分にも注目！
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からガシャ結果をシェアする機能をご紹介します。シェアする情報を選べるのが珍しいデザインでした。 以下、概要です。 シェアする情報を選択できる シェアする文言が変わる シェア可能なアイドルの上限数も変わる シェアする情報を選択できる 「シャニソン」のガシャ結果画面ではガシャ結果をシェアできます。結果をシェアできるゲームはしばしば…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」レビューに誘導するイラストが新ユニットのコメティックだった
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からレビュー誘導のダイアログのデザインをご紹介します。レビューの数や評価を高めたい開発者が多いのか、しばしば見かけるデザインです。 以下、概要です。 イラストには新ユニットが描かれている イラストにアイドルからのメッセージが書かれている イラストはボタンが埋もれないような配色 ダイアログを表示するタイミングはガチャを引いた直後…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」チェックボックスよりも顔アイコンが目立つフィルタ画面 『シャニマス』から引き算をしたデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からアイドルの情報をフィルタする画面のデザインをご紹介します。名前だけではなく、顔アイコンがあるとより直感的に分かりやすくなるのかも、と感じました。何度か同じようなデザインを紹介しているので、興味があったら他のタイトルのデザインも見ていただければと思います。 以下、概要です。 顔アイコンが表示され直感的に分かりやすい アイドル…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」『出勤日数』や『初出勤日』という表現でアイマスの世界観への没入感をさらに高めるテキストライティング
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からゲームの没入感を高めるテキストライティングの事例をご紹介します。UIデザイナーが文言を決めることは稀だと思いますが、テキストはゲームの没入感を考慮する上で重要な要素だと考えています。 以下、概要です。 世界観に合ったテキストライティングで没入感アップ 世界観に合ったテキストライティングで没入感アップ 「シャニソン」では世界…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」視聴条件のハードルは高いけど、ユーザーを楽しませようとする工夫が取り入れられている【OurSTREAM】
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からYouTubeを利用したアイドルたちの実在感を高める取り組みをご紹介します。 UIというよりUX寄りの視点です。「シャニソン」の世界観に対する没入感を高めるデザインの中に、アイドルの実在感を高めるアプローチがある、と解釈しています。 以下、概要です。 YouTubeに動画を残して実在感を高めている YouTubeでアーカイ…
「ブログリーダー」を活用して、appgameuiさんをフォローしませんか？
#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版では、タイトル画…
こんにちは、ちょこです！今回、私が購入した書籍の中から生成AIに興味がある方向けに紹介する書籍はこちらです！ 「教えて！からあげ先生 はじめての生成AI」 生成AIは今後、各種ツールに組み込まれ利用することも増えてくると思うので、デザイナーだけではなく社会人に必要な知識のひとつだと考えています。 以下、主な感想です。 ChatGPTを使ったことがない人向けに書かれている ChatGPTで何ができるかイメージしやすい マンガがあってとっつきやすい もっと知りたくなった方の案内もある ChatGPTを使ったことがない人向けに書かれている タイトルに「はじめての生成AI」とある通り、この書籍は主に生…
こんにちは、ちょこです。Appleの『ヒューマンインターフェイスガイドライン』を元に振り返り用の小テストを作成しました。知識の棚卸の参考になれば幸いです。今回は「アクセシビリティ編」です。全5問です。 Q1：ヒューマンインターフェイスガイドラインでは、およそ何人に1人の割合で日常生活やデバイスの操作方法に何らかの影響を与えるような障がいを抱えているとされている？ Q2：ヒューマンインターフェイスガイドラインでは、タッチスクリーンデバイスにおいてヒットターゲットの大きさはどの程度必要だと書かれている？ Q3：ヒューマンインターフェイスガイドラインでは、アクセシビリティを考慮する場合、リンクにはカ…
こんにちは、ちょこです。Appleの『ヒューマンインターフェイスガイドライン』を元に振り返り用の小テストを作成しました。知識の棚卸の参考になれば幸いです。今回は「アプリアイコン編」です。全5問です。 Q1：ヒューマンインターフェイスガイドラインでは、アプリアイコンをデザインする際に何を重視している？ Q2：アプリアイコンをデザインする際、何を目指すと良いとされている？ Q3：テキストをアイコンに含めても良い時はどんな時？ Q4：アイコンに写真を使わない方が良い理由は何ですか？ Q5：プラットフォームごとに考慮する要素はない？ Q1：ヒューマンインターフェイスガイドラインでは、アプリアイコンをデ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ドラゴンクエストモンスターズ3 魔族の王子とエルフの旅」（以下「DQM3」）からプラットフォームやデバイスによって、UIにどのような違いがあるか気付いた範囲でまとめてみました。デザインの対応方針などの参考になれば幸いです。 以下、目次です。 プラットフォーム対応 1：プラットフォーム独自の画面を用意する 1-1：起動時の注意喚起画面を用意する 2：プラットフォーム独自の機能、導線を設置する 2-1：iOS版のタイト…
こんにちは！ちょこです！ このブログでは「ゲーム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」）から動きのあるホーム画面のデザインをご紹介します。ゲームの世界観やジャンルにもよりますが、個人的にはゲーム画面は常に何かしら動いていて欲しいので、画面が動いているのは好きです。 以下、概要です。 動く背景に隠された工夫がいっぱい レアリティの低いキャラでも動きが出せる 動きのない推しをホーム画面に設定しても寂しくない 動く背…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）からキャラクターのイメージカラーを採用したUIをご紹介します。最近色んなアプリで見かける気がします。体感ですが、2020年頃から徐々に見かける印象…流行りなのでしょうか…？ 以下、概要です。 キャラごとにUIの色が変わっている イメージカラーがグラデーションのキャラもいる 反映しない箇所もある キャラごとにUIの色が変わって…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）からリストを見切れさせることで続きがあるように見せるデザインをご紹介します。忘れないようにする意味でも、しばしば取り上げています。 以下、概要です。 見切れたリスト 見切れてないと終わり感 見切れたリスト 情報が画面内に収まりきらずスクロールさせる必要がある場合、スクロールバーを設けるだけでなく、情報を見切れさせることも重要…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）から通知マークのデザインをご紹介します。いわゆる赤い丸のマークでも良いのですが、ゲームの世界観にマッチしたデザインも良いですよね。 以下、概要です。 世界観に合わせたデザイン 1：ゲーム起動直後のPV 2：ローディング中のアイコン 3：TIPSの行頭記号 4：報酬獲得済みのマーク 5：課金アイテムのモチーフ 6：公式サイトに…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）から注意喚起画面のデザインをご紹介します。日本のソシャゲにはゲームをプレイする前に注意喚起を表示することがあります。どのような要素をどのように表示しているか紹介します。 以下、概要です。 世界観のある画面デザイン 文字を見やすく 世界観のある画面デザイン 「ブルーロックPWC」のゲームプレイ前の注意喚起画面はIPの世界観を取…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からライブ設定の項目をご紹介します。音ゲーのライブ設定はユニバーサルデザインを取り入れていることが多いので、個人的には注目しています。 以下、概要です。 視覚過敏対応を意識した設定項目 視線を集中させる意図を感じる設定項目 端末の負荷を考慮した設定項目 主観的満足度も大事 プレビューがあって分かりやすい 任意のタイミングでサウ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からコンボ演出のデザインをご紹介します。音ゲーに限らずコンボは表示は幅広いジャンルに採用される要素のひとつなので、応用もしやすいのかなと思います。 以下、概要です。 特定のコンボ数時にタイトルならではの特殊演出がある 283（ツバサ）COMBO：283プロダクションロゴ 412（シャイニー）COMBO：スワンマーク コンボする…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からキャラのイメージカラーをUIに反映したデザインをご紹介します。キャラクターを訴求するタイプのゲームだと、しばしば見かけることがあります。 以下、概要です。 ユニット単位ではなくアイドルごとにカラーを用意 一色に限定しない 髪の毛や瞳の色をサンプリングしている ユニットごとにトーンを揃えている キャライメージのカラー紹介 ユ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）から分かりやすいダイアログのデザインをご紹介します。 以下、概要です。 視線が誘導されやすい配色 押させたい選択肢は右に配置し視線を誘導 2択に絞って迷わせない 本文を読まずに選択肢だけ読んでも判断できるテキスト 視線が誘導されやすい配色 「シャニソン」のダイアログの選択肢は無彩色と有彩色で分けられています。ダイアログが全体的…
