こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「ヘブンバーンズレッド」、（以下、ヘブバン）からマイクロインタラクションを紹介します。
ちなみにマイクロインタラクションについてはCEDEC2022の講演にて「ヘブバン」の開発の方が触れています。実際にゲームをプレイしてみて本当に細かく作り込まれていると感じました。
後世に伝われ！！！
目次はこちらです。
- マイクロインタラクションの実装事例 15選
- １：ホーム画面のバルーン「明滅と拡縮」
- ２：タブ「中間を補間するアニメーションの例」
- ３：NOW LOADING「入りと終わりのアニメーションがある」
- ４：ADV「ADVシーンを抜ける時にカメラが遠ざかる」
- ５：アコーディオン「軸を持った回転」
- ６：スライダー「ツマミが大きくなる」
- ７：ドロワー「子階層を線で繋ぐ」
- ８：スライドイン「軽やかな質感を表現」
- ９：メニュー「端末のスクリーンを光らせる」
- 10：ホーム画面に遷移「円を描く複雑な動き」
- 11：簡易マップと詳細マップの切り替え「シームレスな遷移」
- 12：スタイル詳細画面の情報の入り方「時間差でリストを表示」
- 13：持ち物詳細本文「本文だけアニメーション」
- 14：シックスセンス「伸びるグラフ」
- 15：名簿「装飾をアニメーション」
- 動きを抑えた場面
- 余談
「ヘブバン」のマイクロインタラクションについて、CEDEC2022の記事を見ると以下のように紹介されていました。
画面をタップすることで何が起こったのか、ユーザーが状態変化を認知するための工夫も施されている。マイクロインタラクションにこだわることで、状態変化や操作の快適さを向上させる狙いがあるそうだ。
『ヘブバン』ストレスフリー、視認性の向上、アニメーションなど……徹底的なこだわりによって生まれたUIデザイン制作の秘訣【CEDEC2022】 | ゲーム・エンタメ最新情報のファミ通.com
とのことです。
「状態変化や操作の快適さを向上」の部分は「認知や触り心地の向上」と言い換えても良いのかな…。ソシャゲにおいてマイクロインタラクションにこだわりあることを伝えているケースはかなり稀だと思います。
「ヘブバン」をプレイした感じ、マイクロインタラクションによって主に以下の４点の特徴を感じました。
- 視線誘導
- 軽やかな質感表現
- わかりやすさ
- 没入感を阻害しない
どこにどのようなデザインが実装されているか知ることで、勉強になる部分もあるのかなと思います。
序盤をプレイした限りですが、今回は以下の15か所をご紹介させていただきます。
- ホーム画面のバルーン「明滅と拡縮」
- タブ「中間を補間するアニメーションの例」
- NOW LOADING「入りと終わりのアニメーションがある」
- ADV「ADVシーンを抜ける時にカメラが遠ざかる」
- アコーディオン「軸を持った回転」
- スライダー「ツマミが大きくなる」
- ドロワー「子階層を線で繋ぐ」
- スライドイン「軽やかな質感を表現」
- メニュー「端末のスクリーンを光らせる」
- ホーム画面に遷移「円を描く複雑な動き」
- 簡易マップと詳細マップの切り替え「シームレスな遷移」
- スタイル詳細画面の情報の入り方「時間差でリストを表示」
- 持ち物詳細本文「本文だけアニメーション」
- シックスセンス「伸びるグラフ」
- 名簿「装飾をアニメーション」
それでは早速見ていきます。
マイクロインタラクションの実装事例 15選
１：ホーム画面のバルーン「明滅と拡縮」
まずはホーム画面です。個人的にはかなり面白いと感じた画面です。
情報量が多いにもかかわらず、情報の優劣が的確なため、見やすい画面になっています。
ホーム画面の中には複数のバルーンが表示されています。
数えてみると全部で５つのバルーンが表示されていました。
- 第二章 Day24クリアで 1000クォーツGET！
- 新ストーリーイベント開催！
- PICKUP!
- SS確定ガチャ開催中
- 交流クリアでクォーツGET!
要件だけ見ると「どこも目立たせたい！」というソシャゲあるあるな厄介なUIにも見えます。
しかも、バルーンの中のテキストの末尾に「！」を付けたり、キャラアイコンなどのグラフィックを利用するなどして強調しています。
ただ、最も目立たせたいバルーンにしかアニメーションを付けていません。
このバルーンのアニメーションの特徴を整理すると、以下の４点が挙げられます。
- 画面内で唯一動いている（緩やかな拡縮）
- 明滅している
- 下地と文字のコントラストが最も高い
- バルーンの輪郭線が太い
CEDEC2022の講演では、人の認知特性を利用しユーザーの視線を誘導するための工夫を取り入れている旨が述べられています。
人間は明度や彩度のコントラストが強い箇所、あるいは形状が他と異なる部分に視線を向けやすいなどの認知特性を備えているという
『ヘブンバーンズレッド』UIデザインにおけるキーワードは視線誘導。品質向上につながる認知特性への理解とは【CEDEC 2022】 | スマホゲーム情報ならファミ通App
情報量が多くなりがちなホーム画面で、少しでも伝わりやすい画面をデザインするような意図が感じられました。
２：タブ「中間を補間するアニメーションの例」
次にタブ切り替えです。
メジャーなUIパーツであるため、ゲーム内では頻繁に目にします。
見やすいようにタブの部分に絞ってトリミングしてみます。
このように、始点から終点までアニメーションが補間されていることが分かるかと思います。
このアニメーションの意義について自分なりの所感を述べさせていただきます。
まず、現実世界で瞬間移動する物体はありません。
そのため、始点と終点の中間が補間されることで状況がより分かりやすくなります。
もちろん瞬間移動しても、前後関係から状況を推測することはできます。
しかし、人間の脳は楽をしたがります。
脳の代わりに機械が情報を補間してくれているため、脳の負荷が軽くなりポジティブな印象を抱くと考えられます。
また、タブの移動距離が短くても長くてもアニメーションの時間は同じになっています。これにより、操作が冗長にならないように配慮されていると感じました。
３：NOW LOADING「入りと終わりのアニメーションがある」
「NOW LOADING」のアニメーションは短めのロード中に画面右下に表示されるUIです。
分かりやすくするために該当部分をトリミングします。
「ヘブバン」のLOADINGの表示では、表示の始まりと表示の終わりのアニメーションをしっかりと用意しています。LOADINGはシステムメッセージであり、ゲームの中には無い情報です。そのため、没入感が阻害される恐れがあります。
「ヘブバン」のように表示の始まりと表示の終わりのアニメーションを用意することで、シーンの連続性が感じられ、没入感の阻害の抑制に繋がっていると感じました。
４：ADV「ADVシーンを抜ける時にカメラが遠ざかる」
こちらはアリーナでの訓練を終了する際のADVパートです。
この場面から離れる際、若干カメラがキャラクターから遠ざかっている演出を入れていることに気付きますでしょうか？（キャラよりも背景の方が変化量が大きいため、背景に注目すると分かりやすいかもしれません）
UIパーツに対するマイクロインタラクションではないかもしれませんが、細やかな演出という視点では似たようなものだと感じました。
また、比較的頻繁に見る場面であるため、クオリティの向上に注力する場面としては適切な気もします。
５：アコーディオン「軸を持った回転」
アコーディオンもよく見かけるUIパーツのひとつです。
ここではアニメーションが補間されずにパッと切り替わっています。
注目したい点は、角度が変わっても動いていない部分があることです。
グラフィックの変化量が多いほど差分を認識するための負荷が脳に掛かります。動かない部分を用意することで分かりやすさも大きく変わってくるのかな、と感じました。
こういった僅かな工夫の積み重ねが、ゲーム全体のクオリティを高めているようにも思います。
６：スライダー「ツマミが大きくなる」
こちらは設定画面にある、音量を調整するスライダーです。
ここで注目したいのは2点です。
1点目はゲージを触るとツマミが大きくなる点です。
端末で操作すると分かりやすいかもしれませんが、ツマミ部分が小さいままだと指で操作した時にツマミ部分が隠れてしまいます。
ツマミを少し大きくすることで指から隠れにくくなります。
2点目はスピーカーのデザインです。
音量に合わせてデザインの差分がある点です。
比較的レガシーな表現ですが、改めて考えてみると動的に変化するアイコンって割と特殊な気もします。
７：ドロワー「子階層を線で繋ぐ」
こちらは戦闘画面中に表示されているオートバトルの設定ボタンです。
見た目はドロワーに見えないのですが、挙動としてはドロワーなので、ドロワーとしています。
バトルをオートにするボタンを押下すると、必殺技を利用するかどうかの設定を選ぶボタンが表示されます。
このドロワーのアニメーションの特徴としては下位階層が線で繋がれている点です。
AUTO OFFからNORMALに向けて線が伸びてるのが分かりますでしょうか。
ボタン同士が線で繋がれていることで、親子関係が分かりやすくなっていると感じます。
AUTO OFF
└ NORMAL
└ FULL
▲こんな感じの親子関係が伝わる
８：スライドイン「軽やかな質感を表現」
こちらはブースター選択画面のリストを表示する際のスライドインのアニメーションです。
分かりやすくするために、該当部分をトリミングしました。
フェードインしていることは分かりますが、よく見るとわずかにスライドしています。
この黒い枠自体、横からスライドインするUIです。
それに加えて中のリストの情報もスライドインすることで、慣性が働いているようにも見えます。そのため、ゲームの雰囲気に合うように、より柔らかい質感になっているように感じました。
９：メニュー「端末のスクリーンを光らせる」
「ヘブバン」のメニューは専用端末を模したデザインになっています。
ここで注目したいのは端末を起動したかのようなアニメーションです。
特に以下の２点のアニメーションが印象的でした。
- 端末のスクリーンがライトグリーンに光る
- 端末の中のアイコンが端末の中心を起点にし、収束、拡散している
スクリーンが光っている瞬間をよく見ると、スクリーンから漏れた光が指に映り込んでいます。ほんとに一瞬だけしか表示されないのですが、光っている様子が表現されており、デザイナーさんのこだわりを感じるアニメーションです。
10：ホーム画面に遷移「円を描く複雑な動き」
こちらはホーム画面です。
遷移時のボタンの動きがバラバラなのが分かりますでしょうか。
等速だと速過ぎるためスローにしました。少しは分かりやすくなったでしょうか…。
個別に見ていくと、大まかに以下のアニメーションになっています。
- 左右の横長のボタンは円周に沿って動いている
- 画面下部の丸いボタンは左から順に表示。やや左下に移動している
- 画面下部の中央の矢印は移動せずその場でフェードアウト
- 画面上部のリソースは右上に移動
もう一度等速で見てみますがほんとに一瞬ですね。
動きとしてはかなり複雑なため、何かしら必要があっての実装なのかな、と推測します。視線誘導の意味もありそうですが、他にも理由がありそう…。
例えば、表示されるボタンの数が多く、頻繁に表示される遷移であるため、単調な動きだと画面として面白みに欠けると感じた、とか…？
11：簡易マップと詳細マップの切り替え「シームレスな遷移」
これは移動中に表示されるミニマップの開閉アニメーションです。
概要表示から詳細表示がシームレスに切り替わっています。
これも情報が連続しているため、変化が分かりやすいと感じました。
特に自分の位置を見落としにくくなるように思えます。
12：スタイル詳細画面の情報の入り方「時間差でリストを表示」
こちらはスタイルの詳細画面です。ステータスを表示する黒い枠が複数スライドインしています。ここで注目したいのはタイミングのズレです。
スタイル詳細画面に遷移した直後、まずは左の枠、続いて右の枠、とタイミングをズラして表示しています。
更に右枠についても若干タイミングをズラして上の枠から表示させています。
分かりやすくするために該当部分をトリミングします。
若干表示タイミングをズラしているのが分かりますでしょうか…？
もう少し分かりやすくするためにスローにしてみました。
恐らく、１フレームか2フレーム程度タイミングをズラしているのかな、と思います。
表示する若干タイミングをズラすことで、ゲームの動作が軽やかな質感になると感じました。
13：持ち物詳細本文「本文だけアニメーション」
こちらは持ち物の一覧画面です。
画面左に所持している持ち物がアイコンで表示され、画面右側には選択した持ち物の名称、役割、入手方法などがテキストで表示されています。
この右側の枠の中で唯一アニメーションしているのが、持ち物の役割のテキストです。
分かりやすいように該当部分をトリミングします。
このように、持ち物の名前部分のテキストは瞬時に切り替わりますが、その下の持ち物の役割のテキストにはアニメーションがあります。
大きく素早く動いているため視線が誘導されやすく、持ち物を切り替えた瞬間において画面内で最も見せたい場所であることが分かりやすいと感じました。
14：シックスセンス「伸びるグラフ」
こちらは現在のシックスセンスの数値を確認できるダイアログです。
ダイアログを表示させた直後、グラフがアニメーションしていることが分かります。
このアニメーションがあることで以下の２点の特徴があるように感じました
- この情報は動くものだということが伝わる
- 内側から外側に伸びることで成長している様子がより伝わる
グラフを動かさなくても数値を伝える目標は達成できますが、アニメーションを付けることで更に情報を補足できると感じました。
15：名簿「装飾をアニメーション」
最後に名簿画面のアニメーションを紹介します。
キャラクターのサムネイルが左から順に表示されていますが、ここで注目したいのは装飾的なUIパーツのアニメーションです。
該当部分をトリミングします。
かなり小さいのですが、回路図の様な幾何学的な模様が動いています。
画面の中で最後まで動いているパーツなので、小さいながらもかなり目立っているように感じました。意匠性以外に何か意味があるのかな…。
動きを抑えた場面
よく見ないと見落とすのが、引き算のアニメーションです。
「ヘブバン」のマイクロインタラクションを見ていると、アニメーションはあくまで手段であり、あちこち動かせば良いわけではない、と感じました。
視線誘導が分かりやすい例ですが、画面に表示されているUIパーツがあちこち動いていたら、ユーザーはどこに視線を向けて良いのか分からなくなります。
情報の優先度付けをするためには、足し算だけではなく引き算も重要なデザインです。
元々動いていないため、どこをやらないと判断しているか見つけるのは困難ですが、比較的分かりやすい場面を２点紹介します。
ガチャ結果画面のNEWは動かない
新しいキャラをゲットした時に「NEW」と表示されるのですが、かなり控えめな表現でした。
こちらがガチャ結果画面です。
見てわかる通り、NEWを目立たせるような表現ではありません。
分かりやすいようにトリミングしました。
NEWの表示はあるもののアニメーションはしていません。
その代わりに、サムネイルの周囲が淡く緩やかに明滅していることが分かります。
通知バッジは無く控えめな主張
成長できるキャラクターがいる場合、サムネイルに通知バッジが付くことがありますが、「ヘブバン」の場合はあまり強く訴求していません。
キャラクターのサムネイルが明るく明滅している程度です。
通知バッジが付くとサムネイルのシルエットが変化するため目に留まりやすいと感じるのですが、「ヘブバン」ではそこまで強く視線を誘導させるつもりは無いように見えます。
余談
マイクロインタラクションにこだわると、配信画面でも分かりやすくなると思う
余談ですが、「ヘブバン」にはタップエフェクトが実装されていません。
そのため、ゲームプレイ配信画面を見ると、画面のどこをタップしているのか分からないようになっています。
丁寧にマイクロインタラクションを作り込むことで、どこを操作したのか分かりやすくなる、といった効果もあるのかもしれません。
以上です。
UIパーツのアニメーション、マイクロインタラクションをデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
©WFS Developed by WRIGHT FLYER STUDIOS ©VISUAL ARTS/Key
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「ヘブンバーンズレッド」のガイドラインを確認したところ、以下の記載がありました。
個人または法人格のない団体は、「YouTube」「ニコニコ動画」等の動画投稿サイトや「Twitter」「Instagram」「Facebook」等のSNSに投稿（ストリーミング配信を含むものとし、以下同様とします。）するにあたり以下の事項をすべてご確認いただき、ご同意いただいた場合に限り投稿および収益化プログラムシステムによる収益化が可能です。
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
