UIは画面上に画像を並べて表示するものなので、基本的には平面での表現になります。
しかし、その平面上でも立体感を出す工夫をすると様々なメリットがあります。
UIで立体感を出すメリット
平面上でも立体感を出すことで、以下のようなメリットがあります。
- 可能なアクションが分かりやすくなる
- 現実に即した表現により直感的なUIになる
- UIの階層が分かりやすくなる
可能なアクションが分かりやすくなる
まず、立体感を出すことで平面のみの時よりも、ユーザーができるアクションが分かりやすくなります。
例えば下の画像のようにボタンが配置されている場合、平面よりも立体の方が「ボタンであること」「押せること」が伝わりやすいですよね。
現実に即した表現により直感的なUIになる
現実世界はもちろん3D（立体）です。
できる限りその現実世界に即した表現をすることで、直感的なUIになります。
先ほどのボタンの例でも分かるように、立体だと「押すことができそうだ」と直感的に感じ取れます。
さらに、押している間は押し込んだように平面的に表示することで、現実に即した分かりやすいフィードバックをユーザーに与えることができます。
UIの階層が分かりやすくなる
UIには階層があります。
「背景はロゴ画像の背面にある」「ボタンのテキストはボタン画像の前面にある」のようなもので、描画順を指定することによって表現しています。
この描画順は基本的にはユーザーに伝える必要はありません。
しかし、UIの階層を分かりやすく表示すべき場合はあります。
例えば、ダイアログを出す場合。
ダイアログは他のUIよりも前面に表示されているはずです。
ただ、ダイアログを平面的に表示してしまうと「画面の前面にダイアログが表示されている」ということが伝わりづらく、直感的ではなくなってしまいます。
とは言ってもほとんどの人はダイアログが前面に存在していることは理解できるでしょうが、子供に見せてみたりすると案外理解できていなかったりするそうです。
ありがちな例では、ダイアログ表示中に「なぜダイアログ外にあるボタンが押せないの？」とストレスを与えてしまう可能性があります。
そこで、ダイアログと背景との間に奥行きを表現することで、ダイアログが前面に表示されているということが分かりやすく伝わります。
UIに立体感をつける方法
それでは、実際に立体感をつける方法について。
主なものとして、以下の4つが挙げられます。
- 厚みをつける
- 光と陰を表現する
- 影を落とす
- 背景をぼかす
厚みをつける
まずは画像に厚みをつける方法。
先ほど挙げたボタンの例でも、厚みをつける方法によって立体感を出しています。
シンプルなボタンであれば厚みをつけるのは簡単で、
- ボタンの表面の画像を作成する
- 表面画像を複製して背面に置き、少し下にずらす
- 色を少し暗くする
だけで作ることができます。
また、押している最中はボタン画像も押し込まれたように平面になるのが好ましいです。
押下時の画像も作るのは簡単で、
- 下にずらした画像の位置に、表面の画像を移動させる
- 先ほどのボタン画像と同じサイズで書き出し（上部には余白スペースがある）
だけです。
UnityであればButtonコンポーネントのTransitionという項目を「Sprite Swap」にすることで、押下時に別の画像を表示するように設定することができます。
光と陰を表現する
光と陰を表現することで立体感を出すことができます。
光は左上か上側から当たる想定であることがほとんどです。
簡単に言えば、光が当たる側の輪郭付近は明るく、反対側の輪郭付近は暗くすることで光と陰を表現できます。
影を落とす
先ほどは「陰」の話で、今回は「影」です。
「陰」はその物体の光が当たらない部分が暗くなる状態で、「影」はその物体によって光が遮られた部分が暗くなる状態です。
つまり、シンプルなボタンの場合「陰」はボタンの内側、「影」はボタンの外側にできるもの。
場所は陰と同様、光の方向とは反対側にできます。
影のみをつける場合には、真上（手前）からの光源を想定して全方向に影をつけることも多いですね。
先ほど挙げたこちらのダイアログの例も、全方向に影を落としています。
この画像の例では分かりやすくするためにかなり極端に影をつけています。
このように影をつける表現は「ドロップシャドウ」と呼ばれます。
背景をぼかす
最後に背景をぼかす方法。
こちらは開発環境によっては実装が少し面倒ですが、見た目がかなりリッチになります。
iOSでありがちなやつ。
背景をぼかすことによって遠近感が生まれ、手前にあるダイアログなどの位置関係が直感的に分かるようになります。
Unityで実装する方法の例を紹介のみしておきます。
まとめ
今回はUIで立体感を出すメリットと、その方法をまとめてみました。
- 立体感のあるUIはUXの向上につながる
- 立体感を出すには厚みや陰影をつけたり、背景をぼかしたりする
コメント