ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

【メインコンテンツ】プレイしたゲーム、参考動画、参考記事

こんにちは、ちょこです。

 

このブログではアプリのゲームUIを中心に記事を書いています。

ブログ開設以前、ゲームUIに関して調べようと思った際に基本的にはWebデザインかグラフィックデザインの情報しかありませんでした。困った末にゲームUIについてのブログを作成いたしました。

主に実際のゲームである事例を元に、ゲームUIの視点で記事を書いています。
ゲーム業界を目指す方、プランナーの方、非デザイナーの方、ゲームUIに興味のある方、その他ゲーム開発者の参考になれば幸いです。

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

 

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

バナー:ゲーム一覧

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

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

 

 

 

2:参考書籍

参考書籍まとめバナー

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

参考書籍

 

3:ゲームUIの画面ナレッジ

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

ゲームUIの画面ナレッジ

 

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

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

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

 

 

5:おすすめのサイト

バナー:おすすめサイト

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

おすすめのサイト

 

 

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

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

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

 

 

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

ゲームUIデザイナーに関係のある用語を絞って紹介します。

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

 

8:タグ一覧

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

タグ一覧

 

 

9:ゲームUI FAQ

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

ゲームUI FAQ

 

 

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

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

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

 

 

11:ブログ運営

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

 

 

12:その他

「鋼の錬金術師 MOBILE」ガチャ演出中の指先カーソルの向きまで意識されたクオリティの高いデザイン

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

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

 

今回は「鋼の錬金術師 MOBILE」、(以下、ハガモバ)から見やすいお知らせ画面のデザインを紹介します。

 

 

5:ガチャ演出(人体錬成じゃなかった)

 

リッチなガチャ演出

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

「ハガモバ」のガチャ演出がリッチって話、リリース直後くらいに話題になってた気がします。以下は演出の流れです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

場所は駅のホーム。
キャラクターが弾いたメダルが地面に落ち、電話ボックスに向かって転がっていきます。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

面白いのはメダルが画面から消えても電話ボックスに視線が誘導される点です。
メダルは小さく途中でカメラからは映らなくなってしまうのですが、主人公の演技によってメダルが拾われたことは伝わります。

また、朝靄のかかったような青白く静かな背景の中で、主人公の赤い服と電話ボックスの赤が目立ち、視線が誘導されます。

 

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

電話のダイヤルを回して3桁の数字を入力し、受話器をタップすると…

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

列車が到着し、中からキャラクターが登場します。

 

 

 

 

プレイヤーが演出に介入できるデザイン

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

「ハガモバ」のガチャ演出はリッチなだけではなく、ユーザーが演出中に介入できる点も大きな特徴かと思います。

2020年頃から中国系のソシャゲでしばしば見かける気がするのですが、流行ってるんですかね?

単にトレンドなだけなのかもしれませんがUIの視点で見ると、自分の操作が介入することで、ガチャの結果が悪くても受け入れやすくなるのかもしれません。それによってユーザーの不満が減り、問い合わせの件数も減る…とか?

 

自己奉仕バイアス(セルフ・サービング・バイアス) | ITカウンセリングLab

わかりやすくいうと、「成功は自分のおかげ、失敗は周りのせい」ということである。

効果や意図は図りかねますが、何かしらの理由があって採用しているのだと思います。
この辺りははっきりと分からないので、開発者さんのインタビューなどがあれば読んでみたいです。

 

指先カーソルを一部反転させているこだわり!

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

最後に紹介するのは、指先カーソルを場所によって反転させている話です。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

ガチャ演出中のダイヤルを回すシーンにて、指先カーソルがいつも使っている右手のデザインでは無く、左手のデザインに変わっていました。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

その後、受話器をタップする場面では右手の指先カーソルに戻っています。

 

電話を掛ける際、右手が受話器でふさがっているため、左手でダイヤルを回す操作を踏襲しているのかと推測します。

こういうこだわり方をしているソシャゲは初めて見ました。

画面上のどこを操作する、というだけではなく、どちらの指で操作しているように見せた方が、よりゲームへの没入感が高まるか、という視点で考えて判断されたように見えます。

こういうデザインはゲームUIデザインならではかもしれません。

 

 

以上です。

ガチャ画面のデザインや演出を考える際の参考になれば幸いです。

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 

Ⓒ 2021 荒川弘/SQUARE ENIX CO., LTD. All Rights Reserved.

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

鋼の錬金術師 MOBILE」のガイドラインを確認したところ、ゲーム中で撮影されたスクリーンショット、およびゲーム内で撮影された動画はWebサイトやSNSへ投稿しても良い旨の文章がありました。

生配信及び動画・画像投稿に関するガイドライン | 鋼の錬金術師 MOBILE | SQUARE ENIX

利用いただけるもの
ガイドラインに従い利用いただけるもの(以下「利用対象」といいます)は、以下のとおりです。

  • 本ソフトのファンキット
  • 以下に記載の本ソフトの公式サイトおよび当社が運営する以下のサイト内に掲載されているテキスト・情報・画像・動画

    https://www.jp.square-enix.com/hagane-mobile/

    https://twitter.com/hagane_mobile

  • 本ソフト内に表示されるテキスト、ゲーム中で撮影されたスクリーンショット、およびゲーム内で撮影された動画
  • 本ソフト内で使用されている楽曲、音楽データ
  • コラボレーションイベント等のために、特別に本ソフトに含まれるコンテンツ

利用いただける範囲

  1. ゲームプレイの配信を行うことで法人から給与その他の報酬を得ている方:
    ・個人名義のソーシャル・ネットワーキング・サービスで利用すること。
    ・一般社団法人日本音楽著作権協会JASRAC)と音楽に関する利用許諾契約締結済の動画共有サイト(「YouTube」「ニコニコ動画」等)にて「利用対象」を配信すること。
  2. (1)に該当しない個人の方:
    個人のホームページやブログ、動画共有サイトソーシャル・ネットワーキング・サービスなどで「利用対象」を利用すること。但し、動画配信や生配信をする場合は、一般社団法人日本音楽著作権協会JASRAC)と音楽に関する利用許諾契約締結済の動画共有サイト(「YouTube」「ニコニコ動画」等)での配信に限ります。

利用条件
掲載・配信に際して、以下の権利表記を表示してください。
Ⓒ 2021 荒川弘/SQUARE ENIX CO., LTD. All Rights Reserved.

鋼の錬金術師 MOBILEのコンテンツ利用ガイドラインです。2022年8月4日改定版です

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

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

 

お問い合わせ

 

「鋼の錬金術師 MOBILE」遷移直後に本文が見れたり、手数が少なく操作性の良いお知らせ画面の紹介

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

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

 

今回は「鋼の錬金術師 MOBILE」、(以下、ハガモバ)から見やすいお知らせ画面のデザインを紹介します。

 

お知らせ本文が最初の階層で確認できる

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

「ハガモバ」のお知らせ画面のデザインはこんな感じです。
画面左側にお知らせの見出しが並び、右側に本文がプレビューされています。

中国系のアプリを中心に数年前から見かけるフォーマットなので個人的に新奇性は感じられないのですが、旧来のデザインフォーマットが無くなるまで宣伝しておこうかなと思っています。

 

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

ちなみに旧来のデザインフォーマット、というのはこういうタイプだと考えています。
まずお知らせの一覧が表示され、いずれかを選択すると本文が読める、という階層のデザインです。

階層的にはガラケーの頃と変わっていないため、ややレガシーな印象を与えるデザインかと思います。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

「ハガモバ」のようなデザインフォーマットだと遷移直後に本文が確認できるため、より多くの情報を効率的にユーザーに伝えられるんじゃないかな、と考えます。

 

 

遷移無しで他のお知らせが読める

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

また、他のお知らせ本文を閲覧する時も便利です。
こんな感じで、左側に表示されている見出しを選択すると、即時本文が切り替わる挙動です。

都度お知らせ一覧に戻ったりしなくて済むため、手数の省略、時短に繋がるなど、操作性も良いと感じています。

 

 

以上です。

お知らせ画面をデザインする際の参考になれば幸いです。

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 

Ⓒ 2021 荒川弘/SQUARE ENIX CO., LTD. All Rights Reserved.

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

鋼の錬金術師 MOBILE」のガイドラインを確認したところ、ゲーム中で撮影されたスクリーンショット、およびゲーム内で撮影された動画はWebサイトやSNSへ投稿しても良い旨の文章がありました。

生配信及び動画・画像投稿に関するガイドライン | 鋼の錬金術師 MOBILE | SQUARE ENIX

利用いただけるもの
ガイドラインに従い利用いただけるもの(以下「利用対象」といいます)は、以下のとおりです。

  • 本ソフトのファンキット
  • 以下に記載の本ソフトの公式サイトおよび当社が運営する以下のサイト内に掲載されているテキスト・情報・画像・動画

    https://www.jp.square-enix.com/hagane-mobile/

    https://twitter.com/hagane_mobile

  • 本ソフト内に表示されるテキスト、ゲーム中で撮影されたスクリーンショット、およびゲーム内で撮影された動画
  • 本ソフト内で使用されている楽曲、音楽データ
  • コラボレーションイベント等のために、特別に本ソフトに含まれるコンテンツ

利用いただける範囲

  1. ゲームプレイの配信を行うことで法人から給与その他の報酬を得ている方:
    ・個人名義のソーシャル・ネットワーキング・サービスで利用すること。
    ・一般社団法人日本音楽著作権協会JASRAC)と音楽に関する利用許諾契約締結済の動画共有サイト(「YouTube」「ニコニコ動画」等)にて「利用対象」を配信すること。
  2. (1)に該当しない個人の方:
    個人のホームページやブログ、動画共有サイトソーシャル・ネットワーキング・サービスなどで「利用対象」を利用すること。但し、動画配信や生配信をする場合は、一般社団法人日本音楽著作権協会JASRAC)と音楽に関する利用許諾契約締結済の動画共有サイト(「YouTube」「ニコニコ動画」等)での配信に限ります。

利用条件
掲載・配信に際して、以下の権利表記を表示してください。
Ⓒ 2021 荒川弘/SQUARE ENIX CO., LTD. All Rights Reserved.

鋼の錬金術師 MOBILEのコンテンツ利用ガイドラインです。2022年8月4日改定版です

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

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

 

お問い合わせ

 

 

 

「鋼の錬金術師 MOBILE」ドットキャラを採用することで、世界観を加えた上、視線誘導の効果を高めたノーティフィケーションのデザイン事例

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

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

 

今回は「鋼の錬金術師 MOBILE」、(以下、ハガモバ)の世界観を取り入れたノーティフィケーションを紹介します。

 

ドットキャラのアニメーションで視線誘導

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

「ハガモバ」のホーム画面の左下には、初心者ミッションを訴求するためのキャラクターがドットで描かれています。

同じ世界観ではありつつもドット表現によって異質なもの、馴染んでいないものとして見えるため情報のメリハリが活かされ、視線が誘導されます。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

ちょっと小さいですよね。
分かりやすくするためにトリミングするとこんな感じです。
アルがエドを持ち上げて、トコトコ走っているシーンが描かれています。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

このドットキャラが動いているだけでも十分目を引くのですが、初心者ミッションをクリアすると画面を左右に大きく動き、より視線を誘導する効果を生み出しています。

いわゆる通知バッジと同じ役割だと思うのですが、世界観を加えた上、視線誘導の効果を高めた新しい手法のように感じました。

 

ドットにすることで情報が整理される

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

ホーム画面を見て分かる通り、ドットのキャラは画面の面積に対して非常に小さい面積で構成されています。
限られた面積の中で複雑なものを表現する場合、ドットで描いた方が情報が伝わりやすいのかもしれません。仮にこの面積の中で3Dのキャラクターを動かした場合、余計な情報が多くなってしまうため、何が起きているのか分かりにくく、画面内がごちゃごちゃして見えてしまう懸念も考えられます。

 

 

以上です。

限られた面積の中で視線を誘導するデザインを検討する際の参考になれば幸いです。

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 

Ⓒ 2021 荒川弘/SQUARE ENIX CO., LTD. All Rights Reserved.

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

鋼の錬金術師 MOBILE」のガイドラインを確認したところ、ゲーム中で撮影されたスクリーンショット、およびゲーム内で撮影された動画はWebサイトやSNSへ投稿しても良い旨の文章がありました。

生配信及び動画・画像投稿に関するガイドライン | 鋼の錬金術師 MOBILE | SQUARE ENIX

利用いただけるもの
ガイドラインに従い利用いただけるもの(以下「利用対象」といいます)は、以下のとおりです。

  • 本ソフトのファンキット
  • 以下に記載の本ソフトの公式サイトおよび当社が運営する以下のサイト内に掲載されているテキスト・情報・画像・動画

    https://www.jp.square-enix.com/hagane-mobile/

    https://twitter.com/hagane_mobile

  • 本ソフト内に表示されるテキスト、ゲーム中で撮影されたスクリーンショット、およびゲーム内で撮影された動画
  • 本ソフト内で使用されている楽曲、音楽データ
  • コラボレーションイベント等のために、特別に本ソフトに含まれるコンテンツ

利用いただける範囲

  1. ゲームプレイの配信を行うことで法人から給与その他の報酬を得ている方:
    ・個人名義のソーシャル・ネットワーキング・サービスで利用すること。
    ・一般社団法人日本音楽著作権協会JASRAC)と音楽に関する利用許諾契約締結済の動画共有サイト(「YouTube」「ニコニコ動画」等)にて「利用対象」を配信すること。
  2. (1)に該当しない個人の方:
    個人のホームページやブログ、動画共有サイトソーシャル・ネットワーキング・サービスなどで「利用対象」を利用すること。但し、動画配信や生配信をする場合は、一般社団法人日本音楽著作権協会JASRAC)と音楽に関する利用許諾契約締結済の動画共有サイト(「YouTube」「ニコニコ動画」等)での配信に限ります。

利用条件
掲載・配信に際して、以下の権利表記を表示してください。
Ⓒ 2021 荒川弘/SQUARE ENIX CO., LTD. All Rights Reserved.

鋼の錬金術師 MOBILEのコンテンツ利用ガイドラインです。2022年8月4日改定版です

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

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

 

お問い合わせ

「鋼の錬金術師 MOBILE」サーバーの名前はハガレンに登場する地名が採用されていました

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

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

 

今回は「鋼の錬金術師 MOBILE」、(以下、ハガモバ)のサーバー選択画面のデザインを紹介します。

 

サーバー内のキャラの情報が見れる

f:id:appgameui:20230122152944p:image

「ハガモバ」はサーバーごとにプレイヤーデータが作成される仕組みになっているらしく、サーバー選択画面で、サーバー内のキャラのアイコン、プレイヤーレベルなどが表示されています。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

複数のサーバーにキャラクターを作った場合、どのサーバーでプレイするのが良いか手掛かりとなりそうです。
ひとりでプレイするプレイヤーだけではなく、家族で端末を共有してゲームをプレイする場合にも有効そうなデザインだと考えられます。

 

デフォルトでオススメサーバーが選択されてる

f:id:appgameui:20230122153107p:image

タイトル画面には現在選択中のサーバーの名前が表示されています。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

ここの部分ですね。
画面中央付近に表示されているため、目に入りやすいデザインです。

 

f:id:appgameui:20230122153131p:image

画面の遷移的には以下の流れになりそうです。

  1. タイトル画面表示
  2. 任意のサーバー選択
  3. 画面タップ
  4. ゲーム開始

デフォルトでサーバーを選択することで、以下のようにユーザーに一手省くことができています。

  1. タイトル画面表示(サーバー選択済み)
  2. 画面タップ
  3. ゲーム開始

項目のデフォルトをどう設定するかによって使い勝手も変わってきます。

情報整理や見た目をデザインしている最中、ここまで意識が回らないこともあるかもしれませんがサーバー画面をお手本として、他の場面でもなるべく意識したいところです。

 

サーバーの名前を地名にして世界観に馴染ませている

f:id:appgameui:20230122180708p:image

「ハガモバ」ではサーバーの名前は連番と地名の組み合わせで構成されています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

例えば、サーバー1の「リゼンブール」は主人公たちの故郷の名前です。

ハガレンの世界観を知っているユーザーにとっては馴染みのある名前です。
サーバーの名前を連番ではなく、馴染みのある名前を採用することで、以下の様な工夫に繋がっていると感じました。

  • 世界観の訴求
  • ゲームの没入感の向上
  • サーバーの名前を覚えやすい

 

 

以上です。

サーバー画面をデザインする際の参考になれば幸いです。

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 

Ⓒ 2021 荒川弘/SQUARE ENIX CO., LTD. All Rights Reserved.

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

鋼の錬金術師 MOBILE」のガイドラインを確認したところ、ゲーム中で撮影されたスクリーンショット、およびゲーム内で撮影された動画はWebサイトやSNSへ投稿しても良い旨の文章がありました。

生配信及び動画・画像投稿に関するガイドライン | 鋼の錬金術師 MOBILE | SQUARE ENIX

利用いただけるもの
ガイドラインに従い利用いただけるもの(以下「利用対象」といいます)は、以下のとおりです。

  • 本ソフトのファンキット
  • 以下に記載の本ソフトの公式サイトおよび当社が運営する以下のサイト内に掲載されているテキスト・情報・画像・動画

    https://www.jp.square-enix.com/hagane-mobile/

    https://twitter.com/hagane_mobile

  • 本ソフト内に表示されるテキスト、ゲーム中で撮影されたスクリーンショット、およびゲーム内で撮影された動画
  • 本ソフト内で使用されている楽曲、音楽データ
  • コラボレーションイベント等のために、特別に本ソフトに含まれるコンテンツ

利用いただける範囲

  1. ゲームプレイの配信を行うことで法人から給与その他の報酬を得ている方:
    ・個人名義のソーシャル・ネットワーキング・サービスで利用すること。
    ・一般社団法人日本音楽著作権協会JASRAC)と音楽に関する利用許諾契約締結済の動画共有サイト(「YouTube」「ニコニコ動画」等)にて「利用対象」を配信すること。
  2. (1)に該当しない個人の方:
    個人のホームページやブログ、動画共有サイトソーシャル・ネットワーキング・サービスなどで「利用対象」を利用すること。但し、動画配信や生配信をする場合は、一般社団法人日本音楽著作権協会JASRAC)と音楽に関する利用許諾契約締結済の動画共有サイト(「YouTube」「ニコニコ動画」等)での配信に限ります。

利用条件
掲載・配信に際して、以下の権利表記を表示してください。
Ⓒ 2021 荒川弘/SQUARE ENIX CO., LTD. All Rights Reserved.

鋼の錬金術師 MOBILEのコンテンツ利用ガイドラインです。2022年8月4日改定版です

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

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

 

お問い合わせ