【メインコンテンツ】プレイしたゲーム、参考書籍、用語集などまとめ

こんにちは、ちょこです。このブログでは主にゲームUIの紹介をしています。

ゲーム業界を目指す方、プランナーの方、非デザイナーの方、ゲームUIに興味のある方、その他ゲーム開発者の参考になれば幸いです。

以下、メインコンテンツを紹介いたします。

1：紹介させていただいたゲーム

このブログで紹介したゲームの一覧ページです。
プレイしたことがあるゲームや、UIが気になっていたゲームがあれば幸いです。

紹介させていただいたゲーム

2：参考書籍

ゲームUIデザイナーさんの参考になりそうな書籍の一覧ページです。
自分で購入して読んだ範囲で紹介させていただいています。

参考書籍

3：ゲームUIデザイナー向け用語集

読んだ書籍の中で、ゲームUIデザイナーさんに関係のある用語を紹介します。

ゲームUIデザイナー向け用語集

4：ゲームUIの画面ナレッジ

画面ごとのナレッジをまとめます。随時編集します。

ゲームUIの画面ナレッジ

5：ゲームUIデザイナーにオススメしたい動画

講演や用語解説など、ゲームUIデザイナーさんの学習に参考になりそうなプレイリストです。随時追加、更新いたします。

ゲームUIデザイナーにオススメしたい動画

6：おすすめのサイト

ゲームUIに関係する記事が多く取り扱われているサイトを紹介します。

おすすめのサイト

7：ゲームUIデザイナーの参考になりそうな事例の記事

ゲームUIに関係するインタビューや制作事例などの記事を紹介します。 
（採用目的が強い記事は除外）

ゲームUIデザイナーの参考になりそうな事例の記事

8：タグ一覧

当サイトのタグ一覧ページです。
スマホではタグ一覧が表示されないのでタグ一覧ページを作成しました。

タグ一覧

9：ゲームUI FAQ

過去に書いた記事が「どのような問題解決になるのか」という視点でまとめたページです。自分自身がデザインをする際に困った時用の備忘録も兼ねています。

ゲームUI FAQ

10：ゲームUIデザインを検討するメモ

ゲームUIについて感じたことなど。メモ。 

ゲームUIデザインを検討するメモ

11：UE5

UE5の操作について、UIデザイナーが関わりそうな部分のTipsを記載します。

【UE5】初心者向けTips

12：ブログ運営

以下はブログ運営に興味のある方向けの記事です。

• altタグを入力している時に注意していること

• ブログ1年目を振り返って

• chromeで全画面スクショを撮影する方法【拡張機能不要】

13：その他

• 観た映画ときっかけ
• プライバシーポリシー
• お問い合わせ

「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」シャニソンコンボ演出

こんにちは！ちょこです！

このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！

今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からコンボ演出のデザインをご紹介します。音ゲーに限らずコンボは表示は幅広いジャンルに採用される要素のひとつなので、応用もしやすいのかなと思います。

以下、概要です。

特定のコンボ数時にタイトルならではの特殊演出がある

「シャニソン」をプレイしていたら、特定のコンボ時に演出が表示されていました。
具体的には「283 COMBO」「412 COMBO」時の２か所です。

283、412はそれぞれ「シャニソン」にとって特別な数字です。

283…283プロダクションは「シャニソン」に登場するアイドルたちが所属する芸能プロダクションです。ホーム画面の背景でも目立つようにデザインされています。

412…412（シャイニー）はゲームタイトルにも含まれている「シャイニーカラーズ」に由来すると考えられます。
2020年に、4月12日は「シャイニーカラーズの日」として日本記念日協会に認定された旨のお知らせが公式から発表されています。

BLOG│THE IDOLM@STER OFFICIAL WEB | バンダイナムコエンターテインメント公式サイト

それぞれの演出も紹介します。

283（ツバサ）COMBO：283プロダクションロゴ

283 COMBO 時には283プロダクションのロゴが数字の背面に表示されています。

412（シャイニー）COMBO：スワンマーク

412 COMBO 時にはシャイニーカラーズシリーズを象徴するスワンマークが数字の背面に表示されています。

コンボする楽しさを再定義

音ゲーはある程度慣れてくるとフルコンボが前提になり、達成感が弱くなる傾向があります。特殊な演出を用意することでフルコンボができなくても一定ラインを超えた達成感が得られたり、画面にメリハリが生まれると推測します。

コンボする楽しさをより魅力的に見せる面白いアイデアだと感じました。

（この考え方はコンボ表示があるゲームなら汎用性は高そうなので、特許とかありそうな気もしたけどどうなんだろう…？）

以上です。
コンボ演出のデザインの参考になれば幸いです。

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

---

権利者さまへ

以下はコンテンツ利用に関する認識の説明です。
「アイドルマスター シャイニーカラーズ Song for Prism」のガイドラインを確認したところ、以下の記載がありました。

当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。 例えば、「ご自身によるゲームプレイ映像に、皆様の声や姿、アバターなどを重ねた動画又は配信をデジタルプラットフォーム（Youtube,Twitch,ニコニコ動画等。以下、単にプラットフォームといいます）上で共有すること」のみならず、「スクリーンショットやプレイ動画の切り抜きをインターネット上で共有すること」等も含みます。

【「アイドルマスター」シリーズ】「ゲーム実況ポリシー」の変更に関するお知らせ | 【公式】アイドルマスター ポータル（アイマス）

ゲーム実況ポリシー | バンダイナムコエンターテインメント公式サイト

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

お問い合わせ

「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」ユニットごとではなく、アイドルごとにイメージカラーを設定しても被らないようにするためには『ユニット』という情報を利用し、文脈を生み出しているからかも

こんにちは！ちょこです！

このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！

今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からキャラのイメージカラーをUIに反映したデザインをご紹介します。キャラクターを訴求するタイプのゲームだと、しばしば見かけることがあります。

以下、概要です。

ユニット単位ではなくアイドルごとにカラーを用意

「シャニソン」はアイドルを育成するタイプのゲームですが、ユニット単位ではなくアイドルごとにイメージカラーが用意されていました。

▲ユニット「イルミネーションスターズ」のメンバーたち

このように同じユニットでもアイドルによって背景色が異なっています。
下位階層のキャラ詳細画面では、以下の要素の色を変えています。

• ボタンを除く一部のUIパーツ
• 文字
• 背景

▲風野灯織：落ち着いた青系

▲櫻木真乃：明るいピンク

▲八宮めぐる：眩しい黄色

このようにUIを利用して、アイドルごとのイメージカラーを伝えています。
特に背景の色を変えることで、全体の印象が大きく変わっていると感じます。

一色に限定しない

画面を見ていると、使用している色を一色に限定していないことが分かります。
グラデーションを用いたり、使う場所によって色を変えるなどしています。

▲同じ系統色だけど、完全に同じ色ではない

もし、キャラのイメージカラーを任意の一色に定義してしまうと、以下のようなデメリットが大きくなる懸念が考えられます。

• 柔軟さがなくなる
• グッズなど、展開がしづらくなる

ある程度色の幅を用意し、厳密さが求められないようにしているのかもしれません。

髪の毛や瞳の色をサンプリングしている

イメージカラーの設定は、キャラクターの髪の毛や瞳の色をイメージカラーに設定しているケースが多いように見えます。

理由は半ば消去法にも考えられますが、推測してみました。

• 髪色、瞳の色などは極端に変わらないのでイメージカラーのモチーフにしやすい
• 同じ衣装を着た場合でも差別化しやすい
• 全身図でもフェイスアップ時でも使いやすい
• 色数を抑えやすく、画面内に並べたときに情報量も抑えやすい

とか…？

ただ、世界観やキャラによって変わってくると思います。
補色…とまではいきませんが、髪色に対して対照色相を採用するケースもあります。

▲双方の色を際立たせやすい配色

ユニットごとにトーンを揃えている

「シャニソン」に登場するのは若い女性アイドルです。したがって、使える色にもある程度の偏りが生まれます。

微妙な色の差を理解してもらうために、「ユニット」という文脈を加えているように見えます。

例えば「赤」とだけ聞いたら真っ赤な赤、RGBで言うなら（255,0,0）辺りをイメージすると思います。

しかし、そこに「リンゴのような赤」「さくらんぼのような赤」「ルビーのような赤」という情報を加えることでイメージする色も変わってきます。

同様に、「ユニット」というの情報を加えることで「元気の良い赤」「落ち着いた赤」「透けるような赤」などの文脈が作用しているのかもしれません。

▲系統としてはピンク系ですが、それぞれユニットが異なるアイドル

キャライメージのカラー紹介

最後に「シャニソン」でのキャラごとのイメージカラーを紹介します。
事例を知ることで、読んでいる方のそれぞれの分析に役立てられないかと考えています。

以上です。
キャラごとにイメージカラーを設定する際の参考になれば幸いです。

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

---

権利者さまへ

以下はコンテンツ利用に関する認識の説明です。
「アイドルマスター シャイニーカラーズ Song for Prism」のガイドラインを確認したところ、以下の記載がありました。

当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。 例えば、「ご自身によるゲームプレイ映像に、皆様の声や姿、アバターなどを重ねた動画又は配信をデジタルプラットフォーム（Youtube,Twitch,ニコニコ動画等。以下、単にプラットフォームといいます）上で共有すること」のみならず、「スクリーンショットやプレイ動画の切り抜きをインターネット上で共有すること」等も含みます。

【「アイドルマスター」シリーズ】「ゲーム実況ポリシー」の変更に関するお知らせ | 【公式】アイドルマスター ポータル（アイマス）

ゲーム実況ポリシー | バンダイナムコエンターテインメント公式サイト

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

お問い合わせ

「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」わかりやすいダイアログのデザインをAppleのヒューマンインターフェイスガイドラインを交えて紹介

こんにちは！ちょこです！

このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！

今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）から分かりやすいダイアログのデザインをご紹介します。

以下、概要です。

視線が誘導されやすい配色

「シャニソン」のダイアログの選択肢は無彩色と有彩色で分けられています。
ダイアログが全体的に無彩色で構成されていることもあり、有彩色のボタンに視線が誘導されやすくなっています。

Appleの「ヒューマンインターフェイスガイドライン」のボタンについて書かれたページには以下のように書かれています。

複数の選択肢の中で推奨するものを視覚的に差別化する場合は、サイズではなくスタイルを使用する。複数の選択肢を提示する際に同じサイズのボタンを使うと、それらが一まとまりの選択肢であることが分かります。推奨される選択肢や最もよく使われる選択肢を強調したい場合は、その選択肢に目立つボタンスタイルを適用し、ほかの選択肢にはそれよりも目立たないスタイルを適用します。

https://developer.apple.com/jp/design/human-interface-guidelines/buttons

「ヒューマンインターフェイスガイドライン」が絶対ではありませんが、一定のガイドラインに沿ったデザインになっている、と解釈しても良いのかもしれません。

押させたい選択肢は右に配置し視線を誘導

「シャニソン」では押させたい選択肢は一貫して右側に配置しています。
アプリのUI場合、基本的には左側に「戻る」や「キャンセル」などのボタンを配置し、右側に「決定」や押させたいボタンを配置します。

LTR（Left To Right、左書き）の文化圏では右側に配置することで、自然と視線が誘導されるレイアウトになります。

２択に絞って迷わせない

ダイアログの選択肢を絞っている点にも注目です。
ざっくり見た感じ、「シャニソン」では基本的には選択肢は２択に絞っています。
選択肢を少なくすることでユーザーの認知コスト、判断するコストを抑えることに繋げられていると考えます。

本文を読まずに選択肢だけ読んでも判断できるテキスト

すべてではありませんが、いくつかのダイアログの選択肢はテキストが簡潔に書かれているため、本文を読まず選択肢を見るだけで判断できます。

Appleの「ヒューマンインターフェイスガイドライン」のボタンについて書かれたページにも以下のように書かれています。

アイコンより短いラベルの方がもっと明確に意図を伝達できる場合は、テキストを使う。テキストを使用する場合は、ボタンによって何が起きるのかを簡潔に説明する文言にします。

https://developer.apple.com/jp/design/human-interface-guidelines/buttons

一方でゲーム内の選択肢すべてを対応するとコストがかかる場合があります。
ゲームの規模にもよりますが、例えば以下の３点のコストは大きいかと思います。

1. 文言を統一するコスト
2. ローカライズを対応するコスト
3. 調整やチェックなど運用するコスト

このデザインを採用する場合は、優先度を絞って対応を検討すると効率的かもしれません。

以上です。
分かりやすいダイアログをデザインする際の参考になれば幸いです。

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

---

権利者さまへ

以下はコンテンツ利用に関する認識の説明です。
「アイドルマスター シャイニーカラーズ Song for Prism」のガイドラインを確認したところ、以下の記載がありました。

当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。 例えば、「ご自身によるゲームプレイ映像に、皆様の声や姿、アバターなどを重ねた動画又は配信をデジタルプラットフォーム（Youtube,Twitch,ニコニコ動画等。以下、単にプラットフォームといいます）上で共有すること」のみならず、「スクリーンショットやプレイ動画の切り抜きをインターネット上で共有すること」等も含みます。

【「アイドルマスター」シリーズ】「ゲーム実況ポリシー」の変更に関するお知らせ | 【公式】アイドルマスター ポータル（アイマス）

ゲーム実況ポリシー | バンダイナムコエンターテインメント公式サイト

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

お問い合わせ

「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」ログインボーナスからホーム画面までシームレスに遷移し、没入感を阻害しないデザインが好き

こんにちは！ちょこです！

このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！

今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からログインボーナス画面のデザインの要素をご紹介します。ログインボーナス画面はユーザーが見る頻度が高い画面だからか、デザインにコストをかけるアプリをしばしば見かけます。

以下、概要です。

デザインバリエーションが豊富

「シャニソン」のログインボーナス画面は事務所にあると便利なホワイトボードを活かしたデザインでした。
ホワイトボードにはデザインバリエーションが用意されており、主に以下の3つの要素に注力しています。

1. ボード右下のアイドルのグラフィック
2. 報酬などを囲う装飾
3. 季節感の演出

特にアイドルのグラフィックはユニットごとに描くなど、コンセプトが分かりやすいデザインだと感じました。

▲ユニットごとに描かれている

圧迫感を軽減する透過ホワイトボードを採用

ホワイトボードをただ配置するだけだと画面に圧迫感が生まれてしまいがちです。
「シャニソン」では透過するホワイトボードを採用し、画面の圧迫感を抑える工夫がされていました。

ホワイトボードと言えば透過しないデザインを真っ先にイメージしていましたが、調べてみたら透過するホワイトボードも存在するようです。

透明ホワイトボード・シンプル脚 | 株式会社ライト黒板製作所

シームレスにホーム画面に遷移する

ログインボーナス画面からホーム画面までの遷移が、映像的に連続してるのも興味深く感じました。

多くのソシャゲは専用のログインボーナス画面を用意したり、ダイアログを用意するなど、画面が切り分けられたデザインが採用されています。

「シャニソン」のログインボーナス画面の場合は映像がつながっているため、画面内で何が起きているのか理解しやすく、没入感を阻害しにくいと感じました。

また、「アイドルの誕生日演出」「〇〇記念ログインボーナス」など、通常のログインボーナスに加えて演出を表示する場合、場面を分けて表示しています。
必ずしも映像的に連続することを優先しているわけではなさそうです。

▲プロデューサーの誕生日演出⇒ログインボーナス

▲アイドルの誕生日演出⇒ログインボーナス

▲ログインボーナス⇒アニメ放送記念ログインボーナス

ナビキャラの衣装が変わる

季節によってナビキャラの衣装が変わる点にも注目です。
UIの視点で見た場合、個人的には以下の感想を抱きました。

• イベントをより盛り上げる
• ナビキャラファンへのサービス

季節やイベントに合わせて衣装を変えることで、ゲーム全体でイベント感を盛り上げることはもちろん、ファンサービスにも繋がるかと考えます。

少し補足します。
プレイアブルなアイドルたちと違い、ナビキャラは基本的にはNPCです。
したがってアイドルたちのように衣装追加がありません。

ログインボーナスを利用し、普段と違う衣装が見れることで、ナビキャラファンのファンサービスに繋がるかと考えました。

デザインバリエーション紹介

最後にデザインバリエーションをいくつか紹介します。
どれだけ種類があるのか分からないのですが、少なくとも網羅はできていません。
気になる方はプレイして確認していただければと思います。

以上です。
ログインボーナス画面をデザイン、運用する際の参考になれば幸いです。

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

---

権利者さまへ

以下はコンテンツ利用に関する認識の説明です。
「アイドルマスター シャイニーカラーズ Song for Prism」のガイドラインを確認したところ、以下の記載がありました。

当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。 例えば、「ご自身によるゲームプレイ映像に、皆様の声や姿、アバターなどを重ねた動画又は配信をデジタルプラットフォーム（Youtube,Twitch,ニコニコ動画等。以下、単にプラットフォームといいます）上で共有すること」のみならず、「スクリーンショットやプレイ動画の切り抜きをインターネット上で共有すること」等も含みます。

【「アイドルマスター」シリーズ】「ゲーム実況ポリシー」の変更に関するお知らせ | 【公式】アイドルマスター ポータル（アイマス）

ゲーム実況ポリシー | バンダイナムコエンターテインメント公式サイト

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

お問い合わせ