や
表現

UI(ユーザーインターフェース)

User Interface

利用者と製品・サービスが接する境界面。画面・操作・表示など、人がシステムとやり取りするための見た目と仕組みの層を指す。

意味

UI(ユーザーインターフェース)とは、利用者と製品・サービスが接する境界面を指す。画面の見た目、ボタンや入力の配置、文字や色による表示など、人がシステムとやり取りするための接点そのものを表す。

しばしば体験(UX)と対で語られるが、UIは体験を成り立たせる具体的な表現層にあたる。良いUIは操作の意図を素直に伝え、迷いや誤りを減らすが、それ単体ではなく体験全体のなかで意味を持つ点に注意がいる。

ブランド表現の視点では、UIは接点ごとの印象を担う。色や書体、余白や動きの一貫性が、機能を超えて「そのブランドらしさ」を感じさせる要素になる。

成り立ち

インターフェース(interface)は「境界面」を意味する語で、計算機科学の分野で人と機械の接点を指して用いられてきた。グラフィカルな画面操作の普及とともに、UIという略称が実務に定着した。

UI(ユーザーインターフェース)とUX / CX / BXの違い

UIは利用者が触れる面そのものであり、体験の側の概念は触れた結果として相手に起きることを指す。前者は作り手が直接設計できるが、後者で設計できるのは条件までで、実際に起きるかどうかは相手の側にある。作れるものと、起こることの違いにあたる。

見分けの目安は、良し悪しを誰が言えるかにある。画面の作りは図面の上で議論できるが、体験の側は触れた人の反応にしか現れない。UIを直したのに体験の指標が動かないとき、原因は画面の外にある工程や約束のほうに残っていることが多い。

UX / CX / BXの項へ →

UI(ユーザーインターフェース)とルックアンドフィールの違い

ルック&フィールは見た目と手触りが与える印象の総体を指す言い方で、UIは操作を成立させる構造まで含む。印象は整っているのに手数が多い画面は珍しくなく、その状態で動いているのは前者だけになる。印象と構造は同時に良くも悪くもならない。

実務では、レビューが印象の側に寄りやすい。色や余白は誰でも意見を言えるが、構造の適否は使う場面を具体的に想定しないと判断できないためである。指摘が印象の話にばかり集まっていないかを見ると、議論が扱えている範囲が分かる。

ルックアンドフィールの項へ →

使いどころ

「UIを見直して操作を分かりやすくする」といった形で、接点の見た目や操作の設計を対象とする場面で用いられる。体験(UX)と区別しつつ、その具体層として語られることが多い。

実務でのチェックポイント

  • 同じ意味の操作が画面ごとに違う名前になっていないか、主要な導線を並べて確かめる。
  • 取り消せる操作と取り消せない操作が、見た目で区別できるかを見る。同じ形なら、誤操作は使う側ではなく設計の側の問題になる。
  • 直近の改修の理由を、印象の更新か操作上の詰まりの解消かに仕分ける。前者ばかりなら判断材料が社内の好みに寄っている。
  • 自社の画面から名称を外し、他社のものと並べて社内の人に見せる。判別できないなら、表現層は共有の型に埋もれている。

よくある誤解

UIを体験の下位に置き、体験を語れば画面の話は後で済むという順序で扱われることがある。実際に受け手が最初に触れるのは画面であり、そこで生じた詰まりは、上流で決めた体験の意図をそのまま上書きしてしまう。上下の関係ではなく、同じ接点で同時に働いている二つの層として扱うほうが実態に合う。

一貫性をすべて同じ形にすることだと解する誤りも根強い。同じ意味の操作が同じ形をしていることには効果があるが、結果の異なる操作まで同じ形に揃えると、利用者は区別する手がかりを失う。揃える対象は形そのものではなく、形と意味の対応のほうになる。見た目の統一が進むほど、この取り違えは見つけにくくなる。

よくある質問

UIとUXはどちらを先に決めますか?

順番というより、決める対象が違うと捉えるほうが進めやすい。何を達成させたいかが定まらないうちは、画面の良し悪しを判断する基準が持てない。一方で具体的な画面に落とさないと、体験の想定が成立するかも確かめられない。行き来しながら精度を上げる作業になる。

デザインシステムがあればUIの品質は保てますか?

揺れは収まる。だが収まることと、良い画面であることは重ならない。部品の色や余白が規定どおりでも、その場面に要らない選択肢を並べたり、次に何をすべきかが読めない順序で置いたりすることはできる。規定に沿った画面は、規定違反として指摘されないだけで、迷わず進めるかどうかは何も約束していない。守られているかは点検で分かるが、通じているかは人が使うところを見ないと分からない。

流行の見た目に合わせるべきですか?

操作の型と、表現の調子を分けて考えるとよい。多くの人が既に覚えている操作の型から外れると、理解の手間が増えるだけで得るものが少ない。一方で色や書体の調子まで周囲に合わせると、機能は満たすが自社だと分からない画面になる。合わせる層と外す層を分ける。

この用語を、デザイン実務から読む

この項目は、ブランディング支援会社 Highlite Inc. 編集部が執筆・監修しています。
← 用語集の一覧へ