こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「鋼の錬金術師 MOBILE」、（以下、ハガモバ）の冊子風のストーリー画面のデザインを紹介します。
- ストーリー画面は冊子風のデザイン
- どこをタップするのか分かるデザイン
- モチーフにあったアニメーション
- フォーカスによって情報の優劣が明確に
- 紙面のレイアウトは全部違う
- 僅かに表紙の中の画像が大きくなる演出
ストーリー画面は冊子風のデザイン
「ハガモバ」のストーリー画面が冊子風のデザインになっているのが面白いと感じました。冊子の記事を読むことと、ストーリーを鑑賞することを関連付けたデザインです。
ホーム画面からストーリー選択までの一連の流れを見るとこんな感じです。
いずれかの冊子を選び、その中の記事を選んでいく、という流れです。
どこをタップするのか分かるデザイン
ストーリー選択画面を見ても、ボタンらしいボタンは無いため、一見するとどこをタップすれば良いのか分かりにくいと感じるかもしれません。
しかし、この画面では写真の色のトーンが周囲と馴染んでおらずやや浮いている存在に見えます。その結果、自然と視線が写真に誘導されているかと思います。
また、ユーザーの多くは日常生活の中で写真を選択し何かしらの操作することが出来るとを学習済みです。
視線誘導とメンタルモデルの組み合わせにより、ユーザーは自然と写真をタップすることを理解し、促されています。
モチーフにあったアニメーション
先ほどから紹介している通り、「ハガモバ」のストーリー選択画面は冊子風のデザインを採用しています。見た目だけではなくアニメーションにも工夫が施されています。
具体的には、冊子を開くアニメーションと先の階層に進んで行く様子が紐づいているため、現在何が起きているのか直感的に理解できる点です。
結果だけ見ると当たり前に思うかもしれませんが、モチーフの特性を取り入れつつナビゲーションの役割の果たしているのはとても難しいことのように感じます。
フォーカスによって情報の優劣が明確に
更に先に進むと、先ほどはタップできた写真はタップできなくなります。
より伝わりやすくするために、写真は若干暗くなり、新しく表示されたボタンが相対的に明るく表示されます。
焦点とカメラをコントロールして、情報の優劣を切り替えることで今度は写真部分が操作できないことが明確になっています。
紙面のレイアウトは全部違う
章ごとに冊子が分かれているのですが、紙面のレイアウトがすべて異なっています。
全部同じだとリアリティに欠けるだけではなく、単調な印象を与えかねません。
画面に変化を付けることで情報量を増やし、ゲームらしい賑やかな印象を与えていると感じました。
僅かに表紙の中の画像が大きくなる演出
よく見ると選択中の冊子の表紙の中の画像だけ、若干大きくなっています。
表紙の枠の大きさは変わらないのですが、カメラが寄るような変化の仕方です。
これは実際にプレイしたほうがその違和感を感じやすいかもしれません。
平面のアニメーションだけではなく、僅かに奥行き方向のアニメーションが加わることで画面内の情報量が増え、賑やかな印象を与えているのかなと感じました。
細やかな演出ですが、こういったマイクロインタラクションの積み重ねも心地よい画面作りには大事だと考えています。
以上です。
ストーリー選択画面をデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
Ⓒ 2021 荒川弘/SQUARE ENIX CO., LTD. All Rights Reserved.
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「鋼の錬金術師 MOBILE」のガイドラインを確認したところ、ゲーム中で撮影されたスクリーンショット、およびゲーム内で撮影された動画はWebサイトやSNSへ投稿しても良い旨の文章がありました。
生配信及び動画・画像投稿に関するガイドライン | 鋼の錬金術師 MOBILE | SQUARE ENIX
利用いただけるもの
本ガイドラインに従い利用いただけるもの（以下「利用対象」といいます）は、以下のとおりです。
- 本ソフトのファンキット
- 以下に記載の本ソフトの公式サイトおよび当社が運営する以下のサイト内に掲載されているテキスト・情報・画像・動画
- 本ソフト内に表示されるテキスト、ゲーム中で撮影されたスクリーンショット、およびゲーム内で撮影された動画
- 本ソフト内で使用されている楽曲、音楽データ
- コラボレーションイベント等のために、特別に本ソフトに含まれるコンテンツ
利用いただける範囲
- ゲームプレイの配信を行うことで法人から給与その他の報酬を得ている方：
・個人名義のソーシャル・ネットワーキング・サービスで利用すること。
・一般社団法人日本音楽著作権協会（JASRAC）と音楽に関する利用許諾契約締結済の動画共有サイト（「YouTube」「ニコニコ動画」等）にて「利用対象」を配信すること。- (1)に該当しない個人の方：
個人のホームページやブログ、動画共有サイト、ソーシャル・ネットワーキング・サービスなどで「利用対象」を利用すること。但し、動画配信や生配信をする場合は、一般社団法人日本音楽著作権協会（JASRAC）と音楽に関する利用許諾契約締結済の動画共有サイト（「YouTube」「ニコニコ動画」等）での配信に限ります。利用条件
掲載・配信に際して、以下の権利表記を表示してください。
Ⓒ 2021 荒川弘/SQUARE ENIX CO., LTD. All Rights Reserved.
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
