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

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

「鋼の錬金術師 MOBILE」タップエフェクトがハガレンっぽくてかっこいい!

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

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

 

今回は「鋼の錬金術師 MOBILE」、(以下、ハガモバ)のタップエフェクトのデザインを紹介します。

 

タップエフェクトのデザインが「ハガレン」っぽい

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

 

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

タップエフェクトを見るとハガレンらしいデザインが採用されていました
ユーザーが「ハガレン」の世界観を理解しているからこそ選べる、IPタイトルならではの強みのあるデザインだと感じました。

 

ファンサービスをするとユーザーの満足度に繋がる

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

タップエフェクトを表示しないタイトルもありますが、こういうデザインを見ると個人的にはタップエフェクトはあった方が良いのかもしれません。

ぱっと浮かんだ理由は主に以下の3点です。

  1. タップしたかどうかが分かる
  2. 配信をしている時、画面のどこをタップしたのか視聴者に伝わりやすい
  3. 世界観を訴求する余地を与えることができる

他にもあるかもしれませんが、「ハガモバ」のタップデザインを見る限りはこれくらいでしょうか。

 

「ハガモバ」のようにIPを活かしたタップエフェクトだと、そのIPが好きなユーザーにとってゲームの好感度、主観的満足度が高まる要因に繋げられると推測します。

特にタップエフェクトは頻繁に見る演出でもあるため、IPらしさを表現するには適切な場所かと思います。

 

 

以上です。

IPを活かしたタップエフェクトをデザインする際の参考になれば幸いです。

 

このブログではこのようにゲーム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」HPゲージにハガレンらしい意匠が施されていた

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

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

 

今回は「鋼の錬金術師 MOBILE」、(以下、ハガモバ)のバトル中のHPゲージを紹介します。

 

HPゲージのデザインのバリエーションが多数用意されていた

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

「ハガモバ」はバトルのチュートリアルから始まるのですが、HPゲージのデザインバリエーションが多く、気になりました。

格闘ゲームなど一部の例を除けば、HPゲージって結構シンプルに構成されるものだと思っていたので、差別化されているという意味で目を引いたのかもしれません。

早速ですがHPゲージのデザインを紹介してみます。

 

世界観を取り入れたHPゲージ

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

HPゲージをよく見るとハガレンらしいエフェクトがありました。
直線で構成された幾何学的に光る筋が見えるかと思います。

HPゲージに取り入れている必然性まではわからないのですが、IPらしさを表現し、ファンサービスとしては機能しているように見えます。
個人的にも面白いアイディアだと感じました。

 

ここまで差分がある理由は謎

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

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

見た限り範囲では、HPゲージの形状は長方形、平行四辺形、台形の3種類が確認できました。その上で先ほど紹介したハガレンらしいエフェクトの有無があり、さらにバリエーションが分かれている状況です。

…というか、ほぼ全部の場面でデザインが異なっている気もします。

 

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

ここまで差分を用意している理由はちょっと説明不可です…。

開発時に画像管理が複雑になってきますし、容量が無駄に大きくなってしまうのもあまり良くないと思います。
ユーザーに対しては、HPが減りゲージの残量が小さくなった時に、平行四辺形と長方形とで見え方が変わってくる問題もあります。

もしかしたら、HPについてはゲーム中は主に数字を見るので、HPゲージは賑やかしのパーツと割り切り、機能性についてはそこまで気にしてないのかも…?

…とはいえデザイン差分を多く用意する意味まではやっぱり分からない。
結果的にいつの間にかバリエーションが増えてしまったというなら分からなくもないけど。

 

理由が推測できる出来る、という方がいらっしゃいましたらコメント欄で教えていただけると助かります。

 

 

以上です。

IPらしいHPゲージを意識し、デザインする際の参考になれば幸いです。

 

このブログではこのようにゲーム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」、(以下、ハガモバ)のバトルメニューのダイアログを紹介します。

 

一覧性のあるバトルメニュー

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

「ハガモバ」はバトル中に各種ステージ情報が確認できます。
確認できる情報は主に以下の8つかなと思います。

  1. 敵味方の位置がわかるマップの上面図
  2. 現在のラウンド数
  3. 勝利条件
  4. 配属条件
  5. 三ツ星の条件
  6. 「リタイア」ボタン
  7. 「再挑戦」ボタン
  8. 「バトル設定」ボタン

見た感じ、階層の深いところに情報を置かずに、一覧性の高いレイアウトになっています。
一覧性が高いレイアウトができるのは、獲得報酬は表示しないなど、情報の取捨選択も行われていることも重要かと思います。

 

バトル設定はアイコンで表示されている

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

個人的に面白いと感じたのは「バトル設定」を示す歯車アイコンです。
ボタンではなくアイコンにすることでスペースを抑え、文字の情報量を抑えています。

 

ボタンの優劣が付いている

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

ダイアログの下部にボタンが並んでいますが、「バトル設定」のアイコンの面積が一番小さく表示されています。
ボタンではなくアイコン化させて表示することで情報の優劣が付けられているのも興味深いです。

 

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

ちなみに他のダイアログでは目立たせたいボタンの色を明るくしているケースがあります。
目立たせたいボタンの色を付けることが出来ない場合、デザインの引き算を行う考え方になると思うのですが、このような方法もあるのだと勉強になりました。

 

以上です。

引き算のデザインを考える際の参考になれば幸いです。

 

このブログではこのようにゲーム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」ただ綺麗なだけではなく、何が起きてるのか分かりやすい!BGMを聴く画面のデザインの紹介

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

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

 

今回は「鋼の錬金術師 MOBILE」、(以下、ハガモバ)のサウンドが聞ける画面デザインを紹介します。

 

音楽を流すとレコードが回るデザイン

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

「ハガモバ」にはゲーム内のBGMを聴ける機能が実装されていました。
画面のデザインはいわゆるスキューモーフィズムに寄っています。

また、レコードが若干見切れているため、圧迫感を感じにくい構図にもなっています。

 

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

BGMを再生すると画面内のレコードが回転し始め、音楽が流れているという状況が直感的に理解できます。

 

レコードのジャケットでカテゴリを選択

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

聴けるBGMの数は多く、カテゴリに分かれています。
カテゴリごとに専用のイラストが描かれたジャケットが用意されており、リッチなサムネイルに仕上げると同時に、これから聴く音楽を選ぶ、というのが直感的に理解できる画面デザインになっています。

 

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

画面の遷移はこんな感じです。
選んだレコードが蓄音機にセットされ、ページのナビゲーションが表示されていなくても、一連の流れで何が起きているか直感的に理解できるデザインです。

 

針を落とす瞬間、針が若干上に移動する

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

針のアニメーションをよく見ると、レコードの針を落とす際に若干パーツが上に移動しています。
やや傾いた角度から蓄音機を見ているため、針を落とすアニメーションも効果的に付けられたのではないかな、と感じます。

 

レコードの凹凸が分かる光の反射アニメーション

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

回転中のレコードのフチをよく見ると、レコードの表面の凹凸が伝わるような光の反射が表現されていました。

円盤を回転させてもシルエットは変わらないため、動いている様子が伝わりにくいところもあるのですが、細部を作り込み、情報量を増やすことでリアリティを増しているように感じました。

 

以上です。

ただ見た目が綺麗なだけではなく、何が起きているのか分かりやすい画面デザインだと感じました。

BGMを聴く画面をデザインする際の参考になれば幸いです。

 

 

このブログではこのようにゲーム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日改定版です

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

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

 

お問い合わせ