こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「崩壊3rd」から、ドロワーのデザインと開閉の挙動についてご紹介します。
最近、ドロワーの開閉について考えるきっかけがあったので調べてみました。
「崩壊3rd」でドロワーが使われている場所を４か所ほどピックアップしてみました。
1：学寮
アニメーションで見ると僅かに開閉アニメーションが付いていますね。
2：基地
こちらは開閉アニメーションはなく、瞬間的に表示が切り替わるタイプです。
3：キャラクターリスト
こちらも開閉アニメーションはなく、瞬間的に表示が切り替わります。
4：アルバイト選択
アニメーションとしては一番大きいですね。
開閉アニメーションもありますが、開くときと閉じる時の尺が同じ程度であるのが特徴的です。
以上、ドロワーのデザイン事例でした。
挙動やデザインの一貫性は割と曖昧な感じですね。
ドロワーパーツの特徴は何か？
続いて「崩壊3rd」のドロワーパーツの特徴を考えてみました。
- 開閉ボタンが同じ位置だと、指の移動量が少なくて済む（フィッツの法則）
- 空中に浮いているデザインだと、端末固有のセーフエリアに干渉しづらい
- 吹き出し型のデザインだと、中に含まれる項目の数が増えても大丈夫なように大きさを変えやすく、見た目の印象からも開閉のアニメーションの挙動が予想しやすく相性が良い
う～ん…こんなところでしょうか…。
触った感じ、空中に浮くタイプの吹き出し型のデザインだと、どの画面でも無難に活躍できそうな印象です。
開閉ボタンの位置は固定か可変か？
次に開閉ボタンの位置について考えてみます。
「崩壊3rd」ではドロワーの開閉ボタンが固定のデザインと可変のデザインがありました。
開閉ボタンが同じ位置だと操作しやすいデザインになります。
閉じるボタンが移動するデザインの場合、認知コスト、指の移動するストレス、狙って押すストレスなどが加わります。
スワイプ操作で開閉できるのであれば操作性も向上するのですが、「崩壊3rd」の場合はスワイプ操作での開閉はできませんでした。
吹き出し型はアイコンのみのデザインに向いている？
最後に扱う情報とデザインについて考えてみます。
吹き出し型のデザインの場合、このようにアイコンのみを並べています。
メニューアイコンの下位階層に各コマンドが並んでおり、情報の親子階層が明確に表れているように感じます。
一方、残りの２つのドロワーのデザインは情報の階層というよりは、メニューやコマンドの表示、非表示の切り替えであることを強く感じます。
情報の取り扱い方に適した見た目のデザインがあるのかもしれません。
この辺りは感覚的なものか、何かしらのルールがあるのかなどは今後も注目してみたいと思います。
以上です。
ドロワーボタンをデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「崩壊3rd」のガイドラインを確認したところ、ゲーム実況の配信、動画投稿に関しては許諾されている旨の記載はありました。
ネットワークサービスにおける著作物の利用に関するガイドライン
主な参照箇所を抜粋します。
個人であるお客様が「崩壊学園」、「崩壊3rd」及び「原神」「未定事件簿」からキャプチャーした映像及びスクリーンショットした静止画（以下「本著作物」といいます。）を利用して創作された動画や静止画を、適切な動画や静止画の共有サイトに投稿（実況を含む）し、又は収益化することに対して、当社らは、以下の遵守事項を遵守いただいている限りにおいては、著作権侵害を主張いたしません。
以下は確認したガイドラインページのキャプチャです。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
