「アイドリッシュセブン」メールボックス画面に見る引き算のデザイン

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

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

今回は「アイドリッシュセブン」こと「アイナナ」から、プレゼントボックスのデザインを紹介します！

「アイナナ」のプレゼントボックスはメールボックスという設定でデザインされています。このデザインにより、以下の特徴があると感じました。

1. ゲームの世界観が取り入れられている（主観的満足度が高まる）
2. 受け取り済みボックスと切り替えなくて済む（手数の省略）
3. アイコンを使って状態を伝えている
4. 受け取ったら暗くなる（直感的な分かりやすさ、未読メールへの誘導）

該当の画面はこちらです。

アニメーションで見るとこんな感じです。
ホーム画面のEMAILのボタンをタップすると画面遷移します。

1：ゲームの世界観が取り入れられている

メールと言う設定通り、メールボックスらしいデザインが感じられます。
具体的には、手紙の様な特別なダイアログが用意されている点です。
罫線が引かれ、フチには便箋にありそうな装飾が描かれています。

このように設定とビジュアルを合わせることで、よりゲームへの没入感が高まり、ユーザーの満足度も高まると考えます。

2：受け取り済みボックスと切り替えなくて済む

受け取り済みのプレゼントを確認したい時、いちいち画面を切り替えなくて済むのが便利だと感じました。

ゲームによっては受け取り済みのアイテムを確認するために、タブや画面遷移をして、確認させる設計になっています。

「アイナナ」の場合、プレゼントはメールボックスに届くという設定です。
この設定により受け取り済みのメールが同じ画面に残っていても違和感がありません。

実際のメールを思い浮かべてみると分かりやすいと思いますが、メールを読んでも既読が付くだけです。既読フォルダに勝手に振り分けられたりしません。

メールというメンタルモデルを利用することで、ユーザーの学習コストを省き、且つ画面遷移をさせずに済むデザインを取り入れています。

設定に沿うだけではなく、利便性にも優れたデザインになっている点が素敵だと感じました。

3：アイコンを使って状態を伝えている

アイコンを利用して、開封済み、未開封と言うことが分かるデザインになっています。
複雑な情報であれば文字の方が伝わりやすいと思いますが、これくらいの情報であればグラフィックで表現したほうが、見た瞬間にどういう状態であるか伝わるかと考えます。

4：受け取ったら暗くなる（直感的な分かりやすさ、未読メールへの誘導）

開封済みが暗くなるのも重要なポイントです。

考え方としては引き算のデザインだと感じました。

開封済みを暗くすることで相対的に未開封が明るくなることが重要です。

未開封が明るく目立ちやすくなり、自然と視線が誘導されます。
視線が誘導された結果、タップするように促されるデザインに繋がっています。

未読メールを目立たせたいというオーダーがあった場合、つい未読メールに通知バッジを付けて目立たせるなど、足し算のデザインを選択しがちです。
「アイナナ」のデザインは引き算を上手く利用したデザインだと感じました。

まとめ

まとめると「アイドリッシュセブン」のプレゼントボックスのデザインについて感じたことは以下です。

1. ゲームの世界観が取り入れられている（主観的満足度が高まる）
2. 受け取り済みボックスと切り替えなくて済む（手数の省略）
3. アイコンを使って状態を伝えている
4. 受け取ったら暗くなる（直感的な分かりやすさ、未読メールへの誘導

他にも気付いた点があれば、コメント欄にて教えていただけると嬉しいです。

以上です。

プレゼントボックスのデザインを検討する際の参考になれば幸いです。

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

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

---

権利者さまへ

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

「アイドリッシュセブン」のガイドラインを確認したところ、公式HPにて、ゲーム画像をブログに投稿することは許諾されている旨の記載がありました。

【2022.01.12追記】「アイドリッシュセブン」コンテンツ利用ガイドライン - 【公式】アイドリッシュセブン

主な参照箇所を抜粋します。

（１）画像について

・コンテンツ内で使用している一次創作物は、過度の加工等を行わない限り、WebブログやSNSなどで私的利用範囲での掲載をいただいても問題ございません。
ただし、シナリオの過度なネタバレに繋がるものや、掲載の結果アイドリッシュセブンのイメージを逸脱・誤認させる、またアイドリッシュセブンのイメージを損なうことがないようご配慮ください。

イベントストーリー
過度なネタバレ(シナリオを丸ごと含む画像や動画配信など)は禁止といたします。

ラビチャ、RabiTV
ラビチャ、RabiTVについては過度なネタバレ(シナリオを丸ごと含む画像や動画配信など)はお控えください。

ただし、以下の範囲内に限り、ラビチャ、RabiTVの感想をSNS等で発信・発言いただけるものとします。
その場合は、ラビチャ、RabiTVの特性や未読の方へのご配慮をお願いいたします。

・感想を伝えることを目的とした発信が前提で、以下の掲載枚数に収まっていること

ラビチャ：通常画面表示で4枚まで、もしくは全画面表示で1枚まで
RabiTV：通常画面表示で4枚まで、ログ表示での掲載は禁止

※既定の枚数以内の場合でも、おおまかな内容がわかるような掲載は禁止いたします。
※動画の公開は禁止いたします。

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

お問い合わせ