こんにちは！ちょこです！
今回は「クローズxWORST～打威鳴舞斗～」のアルバム画面を紹介します。
アルバムまたは図鑑とも言われますが、実装されているキャラクターの一覧、及び所持状況が確認できる画面です。ソシャゲの多くはコレクション要素があり、アルバムといった機能はなくてはならない存在です。
さて、そのアルバム画面ですが、大きく分けるとページャーで送るタイプか、無限スクロールタイプかに大別することができます。
「クローズxWORST～打威鳴舞斗～」はページャータイプです。
そのページャーのUIで工夫が見られたので紹介します！
図鑑やデジタルカードゲームのデッキ編成画面といった、一覧性が高く、表示するものの数が多い画面を作成される方の参考になればと思います。
さて、「クローズxWORST～打威鳴舞斗～」のアルバム画面はこのようになっていました。
ページャーはここですね。両端が見切れているようになっています。
左端を選択している状態だとこんな感じです。右端が見切れるようになっています。
どこを選んでも見切れるように工夫がなされています。
挙動としてはこんな感じです。スワイプでページャーをスクロールすることが出来ます。目立ちにくいですがスクロールバーもあります。
このデザインのように、アルバムにページャーを採用するメリットですが…
- 現実にある図鑑のようにページを送る感覚が得られる
- ページャーの数字から、全体量が感覚的に把握できる
- 容易に最下部に遷移することができる
- スクロールせずにページ送りするだけで情報が更新されていくので、指を動かさなくて良い
とかでしょうか。
とはいえ無限スクロールでもやりようによっては同じような恩恵を受けることは可能なので、無限スクロール型と比較して、優位性や独自性といったものはそこまで大きくありません。
整理すると…
- 見切れることによってスクロールできることが仄めかされている
という工夫がなされています。
アルバム画面など、ページャーを使う場面のデザインの参考になれば幸いです。
以下余談です。
最近のアプリはアルバム(または図鑑)のような画面はページで区切らず、無限スクロールとフィルタを使い分けしていることが多いです。
(Googleも昔はページャーだったけど、いつの間にか挙動変わってますよねそういえば)
そして図鑑はデータが増大し続ける箇所です。
サーバー側の設計やデータの持ち方などにも影響があります。
一般的なスキルセットのUIデザイナーがその判断を適切に下すことは難しいです。
ですので、こういった画面のデザインをする際は実装担当エンジニアの方とよく相談することをおすすめします。
もちろんどの画面も相談するのが良いですが、アルバム(図鑑)画面は分かりやすくアクセシビリティに影響があります。これはUIの評価軸でもあるので、そういった意味できちんと話すようにすると良いのかな、と思います。
そういえば今年のCEDECでもそれっぽい感じのことに触れているシーンがありました。
さらに調査を行う中で、長期運用でのサーバー削減やデータの増加により、writerへのSELECTの負荷が顕著化しているのが分かったそうだ。
このような問題は、他のシステムでも起こっていたと山口氏は話す。その例として、『シノアリス』の図鑑機能を挙げる。長期運用を続けるうちに図鑑テーブルが肥大化してしまい、SELECTのコストが高くなってしまったというのだ。
とか。
「シノアリス」の図鑑画面は無限スクロール型です。
挙動としてはこんな感じです。
長すぎて規定容量内に収まらなかった…。
いずれにしろ、長期運用することによって、メリットとデメリットの分岐点を判断し直す必要がある様子。
したらば！
