コンポーネントには高さがある!?-エレベーションについてまとめてみた-
こんにちは、アジケの新卒デザイナーのKbです。今回はコンポーネントなどの高さを表現する方法である「エレベーション」について、その表現方法や注意点についてまとめました。
現在、私は社内サイトの改修を行なっています。その過程で、自分は優先度を視覚的に表現することが苦手だと実感しました。特に先輩からのフィードバックを通じて、エレベーションの表現が大きな課題であることに気づきました。
そこで、自分の学びを深めるためにもエレベーションの表現方法や注意点について記事にまとめてみました。
今回書く内容は、GoogleのMaterial Design 3 を主に参考にしています。
ご興味ある方は読んでみてください！
改修中のサイトはこちら↓（現在徐々に公開中）
エレベーションとは
Elevation is the distance between two surfaces on the z-axis
エレベーションとはコンポーネントなどの画面上での高さを表現する手法、およびその高さの度合いを指します。
全てのサーフェスやコンポーネントにはエレベーションがあり、サーフェスの色を変えたり、影をつけて表現されます。
エレベーションはなぜ重要か
UIやWebデザインでは、ユーザーが直感的に「この画面で何が重要なのか」を理解できることが求められます。この時、情報の優先度を適切に表現することが重要ですが、その際にエレベーションを適切に表現することでユーザーの直感的な理解を助けることができます。
例えば、最も優先度の高い情報であるCVボタン等は、画面上で最も目立つ必要があります。この場合、CVボタンのエレベーションを1番高く設定することで、画面上でユーザーに最も近い位置にあるように見え、視覚的に目立つ要素として認識されます。
このように、情報の優先度を表現する際にエレベーションはとても重要です。
エレベーションの表現方法
エレベーションの主要な表現方法は「❶面同士の色調（トーン）に差をつける」、「❷影をつける」、「❸オーバーレイを使う」の3つです。
❶面同士の色調（トーン）に差をつける
面同士の色調に差をつけることでも、エレベーションを表現することもできます。この際はコントラストを取ることが重要となります。コントラストが低いと、重なっているコンポーネントの識別が難しくなるからです。
また色の役割を決め、それを守ることも重要です。
例えば、画面の背景に利用している色を、エレベーションが上であるはずコンポーネントに利用すると物理的におかしい画面構造になってしまいます。
私はサイトのデザインの際に、事業紹介資料のカードの色にグレーを使用したところ、「グレーは下の方にある色のはずだから、カードに使ってはいけない」とFBをもらいました。
下記画像のお役立ち資料エリアのように、サイト内で背景にグレーを使っているエリアがいくつかあったためです。
❷影をつける
ドロップシャドウを付けることで、高さにレベルをつけつつエレベーションを表現することができます。
例えば、下の画像のように範囲が狭く尖った影は面との距離が近く見え、範囲が広く柔らかい影は面との距離が離れて見えます。
ただ全てのエレベーションを影で表現すると、うるさい印象になります。
Google Material Design 3では、影の使い方は「Less is More」という考えを推奨しています。高さのレベルは最低限に抑えることで、ユーザーの注意を惹きやすくなるUIにすることができるらしいです。
私はサイトのデザインを進める中で、ナビゲーションを作成する際に影の扱いの難しさを実感しました。
上記のような縦のナビゲーションを作成してました。初期段階では、ドロップシャドウをなんとなく強調度を高めるために使用していました。
そのため、画面上からかなり浮き上がったような印象になっていました。これに対し先輩から、「シャドウが大きすぎる。シャドウは扱いが難しいデザインなので細かい調整が必要」というフィードバックをいただきました。
そのアドバイスをもとに細かく修正を重ねた結果、適切な強調度を持つ自然なシャドウ表現に仕上げることができました。
❸オーバーレイを使う
強調させたい箇所以外をオーバレイを挿入して暗くすることで、明るい箇所が前に出ているように見えて強調することができます。
今回、サイトをデザインした時は使用しなかった表現なので、いつか使ってみたいです。
エレベーションの注意点
1. 優先順位を考える
エレベーションをつける前に、まずはきちんと情報の優先順位を考える必要があります。情報の優先順位を考えずに要素に影などつけると、情報として優先順位が低いものが1番手前にあるように見えたりして、使いづらいUIになってしまうことがあります。
2. 影でエレベーションをつけすぎない
先ほども書きましたが、画面内にたくさんの高さのレベルがあると、ごちゃごちゃした印象になってしまいます。また、1番強調させたいものが目立たなくなってしまうこともあります。
優先順位決定後に、画面をどのような階層構造にするのか考えながら、要素ごとにエレベーションをつけることが重要です。また、そのルールはサイトやアプリ内で一貫している必要があります。
まとめ
今回はコンポーネントなどの高さを視覚的に表現するエレベーションについてまとめました。
調べているうちに、「ここまで細かく決める必要があるのか！」と、その奥深さや難しさに改めて気付かされました。
今後は学んだことを活かして、ユーザーが直感的に使えるようなUIをデザインを目指して精進したいと思います。
最後までお読みいただき、ありがとうございました！
＜アジケってどんな会社？を3分でお伝えします＞
＜数字で見るアジケ紹介 〜こんな社員が働いています〜＞
▼アジケのカルチャーを知りたい方｜アジケのカルチャーデック
▼アジケの事業内容と今後の展望を知りたい方｜アジケの事業紹介