最近は3Dがメインコンテンツになっているゲームが非常に多くなってきました。
UI自体は平面が多く3Dを入れている立体的なUIはなかなか少ないかと思います。
今回はUIパーツを3Dにしたら…と言う話しではなく、フラットなUIにも奥行きを意識して作ると表現のバリエーションが増えるとので記事にしました。
ユーザーにより自然な体験を与えるにはどうすればいいのか、既視感あるイメージは何かを考え、それに近づけるようとすると、奥行きと言うのは欠かせないものではないかと考えています。
ちなみに、もしもUIが3Dだったらどう見えるのか
そんなサンプルも作成して見ました。
The 3Dと平面っぽい3D
3D感強いもの
これはThe 3Dでよほど世界観に合わない限り扱いが非常に難しいですね。
UIなのにもしかしたらゲームに馴染みすぎてしまって押せるか押せないのかわからないように見えてしまいます。
フラットな3D
UIとしては影のないフラットな3Dがいいですね。
最初の3Dと比べると落ち着きます。
基本は２D、しかし、奥行きがあって広がりあるで、と言う感じ
UIは表示する順番を決めてはいますが、奥行きは考えないことが多いと思います。
しかし、ダイアログだけは手前に出ている感じを演出するので、実はちゃんと奥行きを作り出そうとしています。
フラットデザインはフラットデザインで良くて、XとY軸だけでもいいのですが、奥行きも視野に入れることでフラットデザインもまた違う角度で見せることができます。
ダイアログは手前に飛んできている
ダイアログが出ると、まぁなんとなく背面をぼかしたり暗くしたりしているかと思いますが、
そもそも奥から手前に飛んできているため、ピントを合わせる動作を入れるなら背面はぼかしてあげると良いかと思います。
そんなに手前に飛んでくるのかと言うこともありますが、より人の感覚に近づけます。
画像のダイアログはやたら奥行きをついたウインドウですが、わかりやすく強調しています。
3Dアニメーションは目立つ
立体的なUIパーツやアニメーションは、見たことないアプリを作りたいから奇抜なUIで3Dにしてみよう！ということをやると苦労する、またはユーザーから嫌がられるゲームになってしまうこともあるかと思います。
他にも拡張性の難しさや、イベント開催時の統一感をとることなど、難易度は非常に高くなると思います。
3Dになるということは情報量も増えるのと、目立ちすぎてしまうことから、目的を持って取り入れ、他のUIを壊さないアニメーションになることを意識して作成したいですね。
奥行き感あるフラットな演出
冒頭でも話した、奥行きを意識したデザインアニメーションは上くらいのイメージのことを指しています。
デザイン自体はフラットで、アニメーションで若干の奥行きを表現してあげる、そうするとユーザーは指でスワイプできるのでは？と思える可能性が高くなります。
説明しなくても見ればわかる、そんな体験を奥行き一つで与えられる可能性があるので、X,Y軸だけの考えから奥行きを入れたアニメーションも考えてみてはいかがでしょうか。
ちなみに、Z軸いじり倒せということでもないです。
意識を一つ追加してより表現の幅が増えるといいなという考えです。
自分も基本スケールで奥行き感演出することが多いですね！
さらに、奥行きのあるUI演出についての記事も書きましたので、よろしければこちらもご覧ください。
ここまで読んでくださりありがとうございました！
ご意見ご感想はお問い合わせホームから、またはTwitterからお願いします！
