Webデザイン関連の仕事において重要なポジションを占めるUI（ユーザーインターフェース）。UIデザインが施された商品やサービスとそうでないものとでは、ユーザーのサービス利用率や定着率に明らかに差が出てくるでしょう。
こちらではユーザビリティに大きな影響を及ぼすUIについて解説し、またUIと関連性のあるUX（ユーザーエクスペリエンス）やCX（カスタマーエクスペリエンス）についても説明いたします。
目次
UIとは？UXとの違い
UIとUXは似ている言葉としてよく一緒に取り上げられます。ニュアンスとしては似ていますが、単語の意味と内容は異なります。以下でそれぞれ解説いたします。
・ UIとは
・ UIには視覚情報だけでなく操作性も含まれる
・ UXとは
・ UXにはUIが含まれる
関連記事：【UI/UXとは？】それぞれの意味や違い、デザインの改善方法まで解説
UIとは
「UI」は「User Interface（ユーザーインターフェース）」の略で「顧客接点」という意味になります。インターフェースは「接点」という意味で、UIにおける接点とは「ユーザーが目にするすべての情報」となります。
インターフェースには3種類ある
インターフェースは大きく分けて以下の3種類があります。
・ ハードウェアインターフェース
・ ソフトウェアインターフェース
・ ユーザーインターフェース
ハードウェアインターフェース
ハードウェア間の異なる媒体をつなぐ役割を果たします。いわゆる「USB」「HDMI」「Bluetooth」などがそれに該当します。
ソフトウェアインターフェース
異なるソフトウェアやアプリケーション間をつなぐ役割を果たします。「OS」「API」「Plug-in」などがそれに該当します。
ユーザーインターフェース
ユーザーと商品やサービスをつなぐ役割を果たします。いわゆるWebサイト上に表示されるボタンやフォント、画像、そしてデザイン、レイアウトなどがそれに該当します。
UIには視覚情報だけでなく操作性も含まれる
ユーザーインターフェースの場合は主に、Webサイトやスマートフォンのアプリケーションなどが対象となるため、これら媒体の画面上に映る全ての視覚情報が「UI」となります。
そしてその視覚情報における操作性もUIに含まれます。例えば「ボタンがクリックしやすい」「画面をスクロールしやすい」「文字を入力しやすい」などが挙げられます。
UXとは
一方「UI」と並んでよく聞かれる言葉として「UX」があります。「UX」は「User Experience（ユーザーエクスペリエンス）」の略で「顧客体験」となります。
ユーザーがその商品やサービスを使用したことにより、どのような「体験」を得ることができたのかを表します。
当然ながらユーザーの満足度が高かったり、よい体験を得ることができたりすれば、UXの評価も高くなります。
またユーザーが商品を購入する前の企業の対応や、商品を購入した後のサポート体制などもUXに含まれます。
UXにはUIが含まれる
UIとUXは、似たような言葉としてよく取り上げられますが、実際無関係ではなくUXの一部にUIが含まれます。
その理由として、円滑な操作性や質の高いデザインなどUIが快適に機能するからこそ、顧客体験であるUXも高い評価が得られる、という関係性があるからです。
例えば、
・ フォントは大きすぎず小さすぎず読みやすい
・ ボタンの大きさもちょうど良くクリックしやすい
・ 情報はきっちり整理整頓され、カテゴリーが整然と並んでいる
・ ページが軽くアプリケーションなどがイメージ通りサクサク動作する
・ 写真や画像などの表示速度が早い
こういったサイトはUIが良く、ユーザーに好まれるWebサイトとなります。
つまりUIが快適である場合、ユーザーはストレスなく利用でき、また目標が達成しやすくなるのです。
結果として顧客体験も良くなり、UXの評価が高くなることにつながります。
UIが求められる理由
UIが求められる理由としては以下が挙げられます。
・ IoT化が進んでいるため
・ 大手企業一強時代の終焉
・ カスタマーエクスペリエンス重視の高まり
IoT化が進んでいるため
UIにおける円滑な操作性や質の高いデザインが求められている背景には「急速なIoT化」が進んでいることが挙げられます。
IoTは「Internet of Things」を略した言葉で「モノのインターネット」という意味になります。
インターネットが普及する以前は単独で機能していたさまざまな「モノ」を、インターネットにつなげることにより、人とモノが離れていても操作ができるようになりました。
例えば「外出先から自宅のWebカメラを通して室内を見る」「インターネットを経由して違う部屋の家電製品を操作する」など、人とモノが離れた場所にあっても、インターネット経由で遠隔操作ができるようになったのです。
そこで求められるのが、子供から高齢者まで、誰でもIoT製品を簡単に、かつ快適に操作できるようにするためのUIデザインになります。
いくら優れたIoT製品でもUIが悪く操作が困難であれば、製品自体が使えないものになってしまいます。そうならないために、優れたUIデザインが必須なのです。
大手企業一強時代の終焉
インターネットの普及に伴い、ユーザーは商品やサービスを競合他社のものと、簡単に比較検討ができるようになりました。つまり、必ずしも大手企業のものだけが売れ続けるという結果にはならなくなってきたのです。
資本力が弱い中小企業の商品やサービスであっても、ユーザーに気に入られたり、自分にとって必要だと感じたりしてもらえれば、ユーザーはその商品やサービスを選択する可能性は高いのです。
そこで重要なポジションを占めるのが「UI」です。ユーザーに選択してもらえた商品やサービスを分かりやすく快適に利用してもらうためには、UIをよくすることが必要不可欠です。
UIが悪く操作が困難であったり、難しくて使いこなせなかったりした場合は、ユーザーは目標を達成することができず、他社のものに乗り換えてしまいます。
商品やサービスをユーザー自身が取捨選択できるようになった昨今において重要なのは「UIでいかに快適な操作が行えるか」なのです。
CX（カスタマーエクスペリエンス）重視の高まり
UIとUXの関係性を更に包括的に評価するファクターとして「CX（カスタマーエクスペリエンス）」があります。
CXも意味としては「顧客体験」となり、UXと言葉的には同じとなります。しかしCXとUXの違いは「ユーザーとのタッチポイントの対象数」にあります。
例えば「購入前の企業の対応（UX）」「商品やサービスの使いやすさ（UX）」「購入後のサポート（UX）」をそれぞれひとつずつのUXとするならば、これらすべてのUXを総合的に評価したものがCXとなります。
イメージとしては以下のようになります。
■UX（購入前）+UX（利用）+UX（購入後）=CX（総合）
商品やサービスそのものの品質だけでなく、購入前や購入後におけるUX評価も、売れ行きを左右する要因となり得ることから、CXを意識した包括的な戦略が必要となっているのです。
関連記事：注目を集めるカスタマーエクスペリエンス（CX）の意味とは？向上のための施策
UIデザインに必要とされている要素
UIデザインに必要とされている要素とは、主に以下の内容となります。
・ 分かりやすいページ構成
・ 読みやすく整理されている情報
・ 煩わしくない使い心地
分かりやすいページ構成
分かりやすいページ構成はパッと見で、どこに何が配置されているかが把握できるうえ、ユーザーがページ内で迷いにくくなります。
リンクが張ってあるのか否か分からないような画像やフォント、ボタンなのかただのイラストなのか区別がつかないデザインなど、分かりづらい要因を排除するだけで非常にすっきりとしたページになります。
読みやすく整理されている情報
読みやすく整理されている情報は、ユーザーがWebサイト内において、目的の情報にたどり着きやすくなります。
するとユーザーは他の情報もついでに探すようになり、Webサイト回遊率が良くなります。連鎖的にWebサイトの滞在時間も長くなり、結果として検索エンジンからの評価が高くなります。
煩わしくない使い心地
ユーザーが煩わしく思う要因を排除できれば、非常にUIデザインのよいWebサイトとなります。
例えば以下はユーザーが煩わしいと感じる例になります。
・ 画像の表示が遅い
・ クリックしてからページの移動までに時間がかかる
・ リンククリック後の挙動が予想と違う
など
リンクが張ってあることが一目で分かり、なおかつそれをクリックすることで狙った情報のあるページに思い通りサクサク飛ぶ、このようなWebサイトとなれば理想的です。
UIデザインを行うには
上述でも解説したように、UIデザインは単なる視覚的な良さだけを表現するWebデザインとは違い、ユーザビリティを考慮する必要があります。
そのためUIデザインに関する原則に則りデザインを行っていきます。UIデザインをうまく行うためには以下を実行します。
・ ユーザー分析、ペルソナ設定を行う
・ 原則に則ったUIデザインを意識する
・ デバイスごとに最適化する
ユーザー分析、ペルソナ設定を行う
UIデザインにおいて、非常に重要なポイントとして挙げられるのが「ターゲットを明確にする」ことです。
いくらUIデザインの手法やノウハウを活用して媒体を作り込んだとしても、万人受けの媒体に仕上げることはほぼ不可能です。
商品やサービスを利用している、または利用することを考えているユーザーのみにターゲットを絞り、その人たちが快適に使用できればそれで良いのです。
そのためにはユーザーがどのような機能を求め、どのような情報を欲しているのかユーザー分析をしっかり行い、ペルソナにより詳細なユーザー像を設定していきます。
関連記事：マーケティングに欠かせないペルソナの設定 なぜ必要か？どうやるのか？
原則に則ったUIデザインを意識する
単なるWebデザインであれば、様々な手法や見せ方があり、その人のセンスや感性、経験などが活かされる側面もあります。しかしUIデザインにおいてはベースとなる原則があり、それに則って構築していく必要があります。それが以下の4項目です。
・ 近接
・ 整列
・ 対比
・ 反復
関連記事
・黄金比ってなに？デザインを思考する上で欠かせない概念を徹底解説！
・マーケティングにおける視覚デザインの活用－海外論文の知見から―【上智大学 外川拓准教授 連載 第3回】（黄金比の形状は売上を増加させるか？）
近接
近接は関連性の高い要素ごとに、それぞれ情報を分けてグループ化することです。情報がグループ化され分けられていると、同じ情報量でも乱雑に配置されているときと、そうでないときでは、ユーザーはより多くの内容を把握できるようになります。
整列
整列では要素ごとに情報を配置するルールを決め、ユーザーに分かりやすく整然と情報を並べていきます。
「近接」において関連性の高い要素ごとに情報を分けて配置しますが、それでもまだ単に分けて配置するだけでは、ユーザーが知りたい情報にたどり着きづらく、快適なUXとなるには程遠いのです。
そこで「整列」において、情報を整然とレイアウトすることにより、ユーザーの混乱を極力抑え、目的の情報までたどり着きやすくすることができます。
対比
対比ではWebページの視覚部分におけるメリハリをつける工程となります。
デザインの原則でコントラストとも言われますが、フォントなどに大小や強弱をつけることにより、強調したい内容とそうでない内容を区別して伝えることができます。
ページ内のフォントがすべて均一で表示されている場合、統一感こそ出るものの、伝えたい内容が伝わりづらいため、ユーザーが著者の意図を汲み取りにくくなるという側面があります。
そこでフォントにメリハリをつけ、見出しの配置などを工夫することで強調したい情報を端的に伝えることができます。
反復
反復では「近接」「整列」で整えたレイアウトを、同一パターンによりWebサイト全体で繰り返し表示させていきます。
同一パターンを繰り返すことで、ユーザーはその構成に慣れWebサイト内で混乱したり、迷ったりすることが少なくなります。
デバイスごとに最適化する
ユーザーが活用する主なデジタルデバイスはPCだけでなく、スマートフォンやタブレットなどもあります。
PCで最適だったUIデザインがスマートフォンやタブレットでは崩れて表示されることもあるのです。
デバイスに応じてレイアウトを都度考慮し、場合によっては「AMP（Accelerated Mobile Pages）」を導入するなどの施策を考えます。
関連記事：
・レスポンシブの意味とは。Webデザイン上で気を付けること
・AMPの意味とは！Googleが求めるページスピードについて解説します！
まとめ
UIデザインは単なる視覚的なWebデザインではなく、ユーザビリティが考慮されている必要があります。
UI評価が高くなればUX評価も高くなり、引いては商品やサービスの総合的なCX評価も高くなることにつながります。
UIデザインを行う際にはしっかりと原則に則ったデザインを意識するようにしましょう。
