用語集

Glossary

エレベーション

エレベーションとは

エレベーションとは、UIデザインにおいて、画面上の要素がどの高さ・階層にあるように見えるかを表す考え方です。

スマートフォンアプリやWebサービスの画面は平面ですが、カード、ボタン、モーダル、ナビゲーションなどの要素に影や重なりをつけることで、前後関係や情報の優先度を表現できます。

たとえば、画面の上にダイアログが浮かび上がって表示されると、ユーザーは「いまはこの内容を確認する必要がある」と理解しやすくなります。

このように、UI上の要素に階層を与え、視覚的に整理する考え方がエレベーションです。

エレベーションとシャドウの関係

エレベーションを表現する代表的な方法が、シャドウです。

シャドウを使うことで、要素が背景から少し浮いているように見えます。
その結果、ユーザーはその要素が他の情報よりも前面にある、または現在の操作対象であると感じやすくなります。

ただし、エレベーションはシャドウだけで決まるものではありません。

エレベーションの表現には、次のような要素も関係します。

要素の重なり
影の濃さ
影の広がり
背景とのコントラスト
余白
境界線
角丸
配置
アニメーション

つまり、シャドウはエレベーションを表現するための手段のひとつです。
エレベーションは、画面全体の階層構造をユーザーに伝えるための設計概念といえます。

UIにおけるエレベーションの具体例

UIでは、要素の役割に応じてエレベーションを使い分けます。

UI要素	エレベーションの役割
カード	情報のまとまりを背景から分ける
ボタン	操作できる要素として認識しやすくする
固定ヘッダー	画面上部に固定された領域として見せる
フローティングボタン	主要な操作を前面に出す
モーダル	現在もっとも優先すべき操作や確認を示す
ドロップダウン	一時的に開いた選択肢を示す
トースト通知	補足的な通知を一時的に表示する

エレベーションを適切に使うことで、画面内の情報に優先順位が生まれます。

ユーザーは、どの情報がまとまりなのか、どの要素が前面にあるのか、いま何を確認すべきなのかを理解しやすくなります。

エレベーションとアフォーダンスの関係

エレベーションは、アフォーダンスとも関係があります。

アフォーダンスとは、ユーザーが「押せそう」「入力できそう」「選べそう」と自然に理解できる行動の可能性を示す考え方です。

たとえば、少し浮いて見えるボタンは、ユーザーに「押せそう」という印象を与えます。
カードに影がついていると、「このカードは選択できる」「詳細を開けるかもしれない」と感じることがあります。

このように、エレベーションは操作可能性を伝える手がかりにもなります。

ただし、すべての浮いている要素が操作できるわけではありません。
装飾として影を使いすぎると、ユーザーは何が押せるのか判断しにくくなります。

そのため、エレベーションはアフォーダンスやシグニファイアとあわせて設計する必要があります。

エレベーションとシグニファイアの関係

シグニファイアとは、ユーザーに「何ができるか」「どう操作すればよいか」を伝える手がかりです。

エレベーションは、シグニファイアの一部として機能することがあります。

たとえば、次のような表現です。

影のあるボタンによって、押せることを伝える
前面に表示されたモーダルによって、確認が必要なことを伝える
浮いたカードによって、選択できる情報ブロックであることを伝える
重なりによって、背面の画面よりも前面の操作が優先されることを伝える

エレベーションは、見た目に奥行きを出すだけの表現ではありません。
ユーザーに画面の構造や操作の優先順位を伝えるための重要な手がかりになります。

エレベーションを設計するメリット

エレベーションを適切に設計すると、UIには次のようなメリットがあります。

情報のまとまりがわかりやすくなる
画面内の優先順位が伝わりやすくなる
操作対象を認識しやすくなる
モーダルや通知などの一時的な要素を理解しやすくなる
複雑な画面でも構造を把握しやすくなる
デザインシステムとして一貫性を保ちやすくなる

特に、複数の機能を持つアプリや業務システムでは、画面内の情報量が多くなりがちです。

エレベーションを設計することで、情報を単に並べるのではなく、ユーザーが理解しやすい階層として整理できます。

デザインシステムにおけるエレベーション

デザインシステムでは、エレベーションを個別の画面ごとに感覚で決めるのではなく、ルールとして定義することがあります。

たとえば、次のように階層を整理します。

階層	用途の例
Elevation 0	背景と同じ階層
Elevation 1	通常のカードや情報ブロック
Elevation 2	操作可能なカードやボタン
Elevation 3	固定ヘッダー、メニュー
Elevation 4	モーダル、ダイアログ、重要な通知

このように定義しておくことで、デザイナーやエンジニアが共通の基準でUIを作ることができます。

また、シャドウをデザイントークンとして管理すれば、プロダクト全体で一貫した階層表現を保ちやすくなります。

エレベーションは、見た目の装飾ではなく、UIの構造を伝えるための設計ルールです。

医療ヘルスケア領域におけるエレベーション

医療ヘルスケア領域のUIでは、情報の優先順位を正しく伝えることが重要です。

患者向けアプリや医療従事者向けシステムでは、健康情報、服薬情報、検査結果、予約情報、注意喚起、相談導線など、重要度の異なる情報が同じ画面に表示されることがあります。

このとき、すべての情報を同じ強さで見せると、ユーザーは何を優先して確認すべきかわかりにくくなります。

エレベーションを使うことで、次のような整理が可能になります。

重要なアラートを前面に出す
入力中のフォームを明確にする
詳細確認用のモーダルを他の情報より上位に見せる
タップ可能なカードと表示のみの情報を区別する
画面内の情報ブロックを整理する
ユーザーが次に取るべき行動を理解しやすくする

医療ヘルスケア領域では、ユーザーが不安や緊張を抱えながら画面を操作する場面もあります。

そのため、過度な立体感や装飾で目立たせるのではなく、テキスト、色、余白、アイコン、ラベルなどと組み合わせて、落ち着いて理解できるUIを設計することが重要です。

エレベーション設計で注意すべきこと

エレベーションを設計する際には、次の点に注意が必要です。

影を装飾として使いすぎない
階層の数を増やしすぎない
重要度と見た目の強さを一致させる
押せる要素と押せない要素の表現を混同しない
背景とのコントラストを確認する
ダークモードやアクセシビリティにも配慮する
デザイントークンとしてルール化する

エレベーションは、画面に奥行きを与えるためだけの表現ではありません。
ユーザーが画面の構造を理解し、次に何をすべきかを判断するための重要な情報設計です。

まとめ

エレベーションとは、UI上の要素がどの階層にあるかを視覚的に示す考え方です。

シャドウや重なりを使うことで、カード、ボタン、モーダル、通知などの要素に前後関係や優先順位を与えることができます。

また、エレベーションはアフォーダンスやシグニファイアとも関係しています。
要素が浮いて見えることで、ユーザーは操作可能性や重要度を感じ取ることがあります。

特に医療ヘルスケア領域では、情報の優先順位をわかりやすく伝え、安心して操作できる画面を設計することが重要です。

エレベーションは、単なるシャドウ表現ではなく、UIの構造と行動の流れを支えるための設計要素です。

UI/UXデザイン支援のご相談

メディエイドでは、医療ヘルスケア領域のアプリやWebサービスにおいて、情報の優先順位や画面構造が伝わりやすいUI設計を支援しています。

患者向けアプリ、PHRアプリ、医療従事者向けシステムなどのUI/UX改善や新規サービス設計については、以下よりご相談ください。

▶ 医療ヘルスケア領域のUI/UXデザイン支援コンサル