【2024年版】「UI」「UX」とはどういう意味？その関連性やトレンドも紹介

2024.04.24　Posted by Design team

Webデザイン

みなさん、こんにちは。ウェブラボデザイナーチームです。
Webデザインに必ずくっついてくる「UI」と「UX」。なんとなくは知っているけど、割と多いのではないでしょうか。
今回はWebデザインのトレンドや豆知識などを交えながら、「UI」と「UX」の基本とここ数年のUI、UX、Webデザインの変化についてご紹介します。

「UI」とは

UI はユーザーインターフェース（User Interface）の略称です。
Webサイトやアプリにおいてはユーザーが閲覧、操作できる画面周りのことです。Webサイトのアイコンデザインやレイアウト、文字のデザインなどがUIにあたります。インターフェースとは「接点」を意味する言葉で、主にパソコンやスマートフォンなどを指し、後述するUX（体験、経験）に繋げる役割があります。
ユーザーインターフェース以外にもハードウェアインターフェース、ソフトウェアインターフェースがあり、何と何を繋ぐかによって呼び方が異なります。似ている単語ですので混同しないよう注意しましょう。

ハードウェアインターフェース
デジタル機器（パソコン、スマホなど）同士を繋ぐ部分を指します。USB Type-CケーブルやAppleのLightningケーブル、などが代表的な例です。

ソフトウェアインターフェース
アプリケーション同士、またはオペレーティングシステム※とアプリケーションソフトの間でデータのやり取りをするための手順や形式を指します。サイトに表示されるGoogleマップが代表的な例として挙げられます。
※オペレーティングシステム
コンピューターを制御・利用するために必要な、基本的なソフトウェアおよびそのプログラム。Windows・macOS・UNIX・Linuxなど。「OS」とも呼ばれる。

「UX」とは

UX はユーザーエクスペリエンス（User Experience）の略称です。
Webサイトやアプリケーションを通して得られる「体験」や「経験」です。ショッピングサイトで商品を購入する際に「使いやすい！」、「分かりやすい！」、その逆で、「ボタンが押しづらい」、「分かりにくい」などの感覚的な体験も全てUXです。Webサイトやアプリケーションの評価に直接関わってくるので、ユーザーの動きや気持ちを考えながらデザインし、ポジティブな感情を与えることが大切です。
例えば、大手ショッピングサイトのAmazonは3クリック以内でユーザーが求めている商品にたどり着けるよう設計していると言われています。ショッピングにおいて、色々物色するのも楽しみの一つですが、「この商品が欲しい！」と訪れてくるユーザーがすぐにたどり着けるような仕組み作りは双方にメリットがありますね。

また、サイト内の体験だけではなく、「注文から自宅に届くまでの迅速さ」、「問い合わせに対するレスポンスが丁寧」、「商品のクオリティが高い」などの体験もUXに含まれるため、サイト外の体験も意識する必要があります。

UIとUXの関連性について

UXを意識しながらUIを考える必要があります。UIがユーザーとの接点で、UXがWebサイトやアプリケーションを利用する際のすべての体験なので、UIはUXに含まれます。

見た目重視でUIをデザインしUXを蔑ろにして進めてしまうと、本来ユーザーにとって必要な表示や機能を削ってしまい、見た目は良いけど使いにくいWebサイトやアプリケーションになってしまいます。
逆にボタンや機能を詰め込んだとしても、情報が整理されていないため、分かりにくくなってしまいます。特にスマートフォンは画面が小さく、パソコン以上に情報の整理が大切になってくるため、UIUXのバランスが崩れてしまうのは致命的です。

ここ数年のUI、UX、Webデザインの変化

ハンバーガーメニュー

初めはスマートフォン用にグローバルナビゲーションを格納、表示させるために作成されたデザインですが、急速なスマートフォンの普及による利用時間の増加により、1、2年程前からパソコンでもハンバーガーメニューを採用するWebサイトが増えてきています。パソコンで採用しても特に不自由なく使用できる程、ユーザーの中で、右上のボタン＝グローバルナビゲーションが一般的化してきています。

モバイル特化型サイト

こちらもスマートフォンの普及により、増えてきた形式で、パソコンとスマートフォンでほとんどレイアウトを変えず表示しているWebサイトです。パソコン表示では画面のサイドにグローバルナビゲーションや、ユーザーを飽きさせないよう装飾があるサイトが主流になっています。このようなサイトはレスポンシブ対応がしやすく、制作側の負担が軽減されますが、内容の見せ方の自由が効くパソコン表示のメリットが失われているようにも思えます。

詳しく解説している記事もありますので、ぜひご一読ください。

https://www.weblab.co.jp/blog/creator/13402.html

BentoUI

お弁当箱のようなグリッドで要素を構成したレイアウトのデザインを指します。Windows 8で採用されたメニュー画面、ホーム画面の構成がBento UIの先駆けと言われています。
Appleが製品発表会で採用したことにより、主に海外で少しずつ増えてきています。レスポンシブに対応しやすく、情報の整理がしやすいため、分かりやすいデザインにできます。

こちらも詳しく解説している記事がありますので、ぜひご一読ください。

https://www.weblab.co.jp/blog/staff/design/15080.html