こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「アイドリッシュセブン」から、ストーリーを閲覧する画面を紹介します！
このデザインにより以下の特徴があると感じました。
- ストーリーを読むための指の移動距離が短い（フィッツの法則）
- 読みたいストーリーを切り替えやすい（手数の省略）
- ストーリーサムネイルがない（ネタバレ防止？）
- 「読む」ボタンを表示する際にアニメーションしている（視線誘導）
該当の画面はこちらです。ストーリーが一覧で並んでいますね。
前後の画面の遷移をアニメーションで見るとこんな感じです。
早速UIデザインを見ていきたいと思います。
1：ストーリーを読むための指の移動距離が短い
読みたいストーリーの枠を選択すると、枠の近くに「読む」ボタンが表示されます。
このレイアウトにより「フィッツの法則」が利用されていると感じました。
ボイスがあるようなゲームではリソースのダウンロードが発生する都合上、あるいは誤タップした際にリカバリがしやすいように
「このストーリーを読みますか？」「いいえ/はい」
といったダイアログが表示されることが珍しくありません。
その場合、ストーリーのサムネイルなり枠の位置と、ダイアログのボタンの位置が離れることが予想されます。
それに対して「アイドリッシュセブン」のデザインは各々のボタンの位置が常に一定の近さを保つデザインになっています。
これによりユーザーは指を大きく移動させずに済みます。
これはフィッツの法則に当てはめられると考えられ、ユニバーサルデザインの観点で見たときに良いUIデザインだと感じました。
例えば指を怪我したり、関節炎などで指の関節が固定化されるような状況の時を想像すると使いやすいと感じるのではないでしょうか。
フィッツの法則とは…
この法則は、ひらたく言ってしまえば「指や手やスタイラス(棒)などで、ある位置をポイントする動作は、その位置までの距離が遠いほど長い時間がかかり、その位置のターゲットの大きさが小さいほど時間がかかる」というものである。
2：読みたいストーリーを切り替えやすい
確認のダイアログがないことで、読みたいストーリーをより簡単に切り替えることができます。
確認ダイアログがある場合はストーリーを切り替えるためには以下の操作が必要です。
- 任意のストーリーAを選択
- 「Aを読みますか？」というダイアログが表示され、これを閉じる
- 任意のストーリーBを選択
- 「Bを読みますか？」というダイアログが表示され、ストーリーBを読むを選択
これに対して「アイドリッシュセブン」のように確認ダイアログがない場合は以下の操作になります。
- 任意のストーリーAを選択
- 任意のストーリーBを選択
- ストーリーBを読むを選択
このように確認ダイアログがあるデザインと比較して手数が少ないデザインになっています。
3：ストーリーサムネイルがない（ネタバレ防止？）
このストーリー一覧画面を見ると目次は文字のみでそれぞれのシーンを象徴するようなサムネイルがありません。
一般的に文字より画像の方が情報量が多い傾向があります。
例えば「第１話 マネージャーの提案！」の場合、場所や時間帯は分かりません。サムネイルがあれば、いつ、どんな場所の話なのかが伝わります。
また、ストーリーを見返したいと思った時、記憶を呼び起こす際の手掛かりになり得ます。
このようにユーザビリティを高めることができるサムネイルを表示していないのは何か理由があると考えられます。
可能性が高いのはネタバレの抑止かなと考えます。
「アイドリッシュセブン」のコンテンツ利用ガイドラインを確認すると、シナリオのネタバレに関して一定の制限を設けています。
（２）シナリオについて
メインストーリー
・1～4部までは実況配信等も含め、完全ネタバレ解禁といたします。
ただし、文字起こしやアプリ録画等でシナリオのみを配信するなど、シナリオそのものを他者へ読んでもらうことを目的とした掲載・配信はお控えください。
・5部やイベントストーリーの過度なネタバレ(シナリオを丸ごと含む画像や動画配信など)は禁止といたします。
【2022.01.12追記】「アイドリッシュセブン」コンテンツ利用ガイドライン - 【公式】アイドリッシュセブン
サムネイルではシナリオの内容までは分かりませんが、画像は情報量が多いため、少なからずシナリオを読む前の事前情報が与えられてしまいます。
初めてシナリオを読んだ時の読み手の感情的な変化を重視した結果、サムネイルを表示しないデザインを採用したのかな、と推測しました。
4：「読む」ボタンを表示する際にアニメーションしている
任意のストーリーの枠をタップすると「読む」ボタンが表示されるのですが、緩やかなアニメーションをしながら表示されています。
このアニメーションがあることで視線が誘導されるデザインになると感じました。
視線が誘導されることでユーザーは自然と「読む」ボタンの存在に気付き、タップするものだと理解されます。
仮に「読む」ボタンのアニメーションが無い場合、画面の変化量に対して視線が誘導されるまでの時間がなく、変化に気付きにくくなる懸念があります。
UIアニメーションがあることで視線の誘導が起こり、ユーザーが戸惑わないデザインになっていると感じました。
以上です。
ストーリーを閲覧する画面をデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「アイドリッシュセブン」のガイドラインを確認したところ、公式HPにて、ゲーム画像をブログに投稿することは許諾されている旨の記載がありました。
【2022.01.12追記】「アイドリッシュセブン」コンテンツ利用ガイドライン - 【公式】アイドリッシュセブン
主な参照箇所を抜粋します。
（１）画像について
・コンテンツ内で使用している一次創作物は、過度の加工等を行わない限り、WebブログやSNSなどで私的利用範囲での掲載をいただいても問題ございません。
ただし、シナリオの過度なネタバレに繋がるものや、掲載の結果アイドリッシュセブンのイメージを逸脱・誤認させる、またアイドリッシュセブンのイメージを損なうことがないようご配慮ください。
イベントストーリー
過度なネタバレ(シナリオを丸ごと含む画像や動画配信など)は禁止といたします。
ラビチャ、RabiTV
ラビチャ、RabiTVについては過度なネタバレ(シナリオを丸ごと含む画像や動画配信など)はお控えください。ただし、以下の範囲内に限り、ラビチャ、RabiTVの感想をSNS等で発信・発言いただけるものとします。
その場合は、ラビチャ、RabiTVの特性や未読の方へのご配慮をお願いいたします。・感想を伝えることを目的とした発信が前提で、以下の掲載枚数に収まっていること
ラビチャ：通常画面表示で4枚まで、もしくは全画面表示で1枚まで
RabiTV：通常画面表示で4枚まで、ログ表示での掲載は禁止※既定の枚数以内の場合でも、おおまかな内容がわかるような掲載は禁止いたします。
※動画の公開は禁止いたします。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
