こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「夢職人と忘れじの黒い妖精」（ゆめくろ）のイベントストーリー画面においてスクロールできることが伝わるデザインについて紹介します！
色んなアプリで何度か紹介していますが、リスト表示が表示されている画面で、スクロールできそうに見えるかどうかは割と重要なデザインです。
デザインをしている最中はついついバランス良くレイアウトを組みがちなので、意外と見落としやすい点だったりします。
該当の画面はこちらです。
短冊のような縦長のバナーが横に並んでいます。
今は制限がかかっているのかプレイできない状態ですが、ここで見て欲しいのはスクロールできるように見えるかどうかです。
画面右端のバナーを見ると右の1/4程度欠けていることが分かります。
このように中途半端に見切れていると、人間の脳は違和感を感じ、続きがあるように認識します。
その結果、スクロールできる可能性に気付くことに繋がります。
また、メインストーリーの画面もスクロールするのですが、こちらはやや気付きにくいデザインかもしれません。
比較して見ると、バナーの隠れ具合に違いがあります。
イベントストーリー画面同様にバナーは欠けているのですが、欠けている面積が小さく、見落としやすいデザインです。
私の場合は、バナーが欠けていることに気付く前に画面を操作して、スクロールできることに気付きました。
体感ですが、一部を隠すというよりは、多くを隠して一部を表示させるくらいの方がスクロールできることに気付きやすいように感じます。
別の画面の例も紹介します。
こちらはお出かけ相手を選ぶ時に表示されるキャラクターのリストです。
この画面のキャラクターのサムネイルは下半分が見切れています。
このようにサムネイルが見切れることで、下に情報が隠されていることが直感的に伝わります。
以上です。
リストを表示する画面をデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「夢職人と忘れじの黒い妖精」のガイドラインを確認したところ、公式HPにて、ゲーム画像をブログに投稿することは許諾されている旨の記載がありました。
コンテンツガイドライン | 夢職人と忘れじの黒い妖精 | ジークレスト
主な参照箇所を抜粋します。
2. 本サービス内の素材利用について
1. 画像及び動画
本サービスのスクリーンショットやプレイ動画などは、過度なネタバレを含まない内容であれば、インターネット上やSNSなどで公開していただいて構いません。例えば、覚醒イラスト、バトル、ガチャ結果などは公開していただけます。ストーリーは未読のお客様にご配慮をお願いいたします。ストーリー中に登場するイラストについてはご遠慮ください。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
