UI/UXとは？違い・関係性や設計ポイントをわかりやすく解説

UI（ユーザーインターフェース）とは、ユーザーと製品・サービスとの接点のことです。UX（ユーザーエクスペリエンス）とは、ユーザーが製品・サービスから得られる体験のことを指します。

Webサイトの制作者や運営者は、UI/UXと耳にする機会も多いでしょう。

本記事では、UIとUXの違いや関係性をわかりやすく解説します。また、UI/UXの設計ポイントも紹介するため、参考にしてください。

UI/UXの違いや関係性とは？

まずは、UI / UXについて解説していきます。

UIとは？

UIとは、「製品やサービスと、利用しているユーザー間の接点」です。
UI自体はWEB業界限定の言葉ではなく、

・受話器のボタン
・パソコンのキーボード
・ゴミ箱のフタ
など、ユーザーが触れるもの（操作したりするもの）すべてを指します。

WEBデザインの場合は、
・WEBサイト中のフォントデザイン
・WEBサイト中にあるリンクボタン
・WEBサイト背景のベースデザイン
など、ユーザーがWEBサイトから得られるあらゆる情報がUIとなります。

UXとは？

UXとは、「ユーザーが製品やサービスから得られる体験」を指します。

UXもUIと同じくWEB業界固有の言葉ではなく、
・受話器のボタンが押しやすくて、使いやすい
・パソコンキーボードの打ち心地がよく、くせになる
・ゴミ箱のフタが工夫されていて、ごみを簡単に入れられ楽だ
など製品やサービスを使ってユーザーが感じたことはすべて含まれます。

WEBサイトの場合は、
・アニメーションつきで迫力があり、見ていてわくわくする
・リンクボタンが大きく判別しやすく、スマホでも押しやすい
・フォントが見やすく、つい記事に見入ってしまった
などがUXです。

UIとUXの関係性

UIとUXの関係性を一言で言うと、「UXを左右する大きな要素の一つがUI」です。

たとえばWEBサイトのUIデザインにおいて、フォントが細くて見えにくいと「文章が見づらい」となってUX満足度が落ちてしまいます。逆にお年寄りなどにも見えやすいよう工夫されてるユニバーサルフォントなどを用いれば「文章文字がきれいで、しかも見やすい」となり、UX満足度が向上します。

UIデザインがユーザーに寄り添ったものであればあるほど、WEBサイトから得られるUX満足度は向上します。UX満足度を向上させたい場合は、UIデザインに気を遣ってWEBサイトを制作しましょう。

WEBデザイナーは基本としてUI / UXについてよく理解しておく必要がありますが、WEBデザインに直接かかわっていないWEB担当者の方はあまり意識していないかもしれません。

しかし、UI / UXはWEB業界にかかわっている以上理解しておかないと、WEBデザイナーと意思疎通が取れないなどトラブルの元になる可能性があります。
「理解がいまいちできていなかった」という場合は、ぜひ今のうちに理解を深めておきましょう。

UI/UXの設計ポイント

ここからは、UI / UXのデザイン設計のポイントをご紹介していきます。

UI/UXを考える際の前提条件

WEBサイトのUI / UXを考える際は、次の2点をよく確認してください。

・伝えたい情報、ターゲットを明確に（ペルソナの設定）
・ペルソナの行動、得られる体験を想像する

伝えたい情報やターゲットを明確に（ペルソナの設定）

WEBサイトを設計する前に、まずは伝えたい情報やターゲットユーザーなどを明確にしておきましょう。設計をよく考えないでWEBサイト制作を行い失敗する例などもあるのでおろそかにしないでください。
重要なのは、自社目線だけでWEBサイトを作らないことです。WEBサイトを設計する前には情報を発信したいターゲットユーザー、つまり「ペルソナ」を設定する必要があります。

ペルソナ設計では
・職業
・世帯構成
・趣味

など、ユーザーの細かい属性を含めてターゲットユーザー設定を行っていきます。

ペルソナの行動や得られる体験を想像する

ペルソナ設計が終わったら、次はWEBサイトによりユーザーの行動がどう変化し、どんな体験が得られるのかなどを想像してみましょう。なるべく具体的に思い浮かべられると、マーケティングの際役立ちます。

ペルソナ設定と行動、体験想像の事例

ここでは、ペルソナ設定と行動、体験想像の事例を3つご紹介していきます。

事例①
・サービス：新しい旅行予約サービス
・ターゲット：還暦を過ぎた方
・ペルソナ：60〜70代、妻と2人暮らし、趣味で旅行を楽しんでいるが、インターネットでの旅行予約に興味を持つ方
・行動・結果：今まで電話で旅行予約していたが、インターネットに不馴れな層でも分かりやすくて見やすいサイトデザインにより簡単にWEB上で予約が完了。電話に代わりサイト利用頻度が高まる。

事例②
・サービス：新展開する安い飲食チェーンの紹介サービス
・ターゲット：若い男性
・ペルソナ：20代、昼食は外食希望で、すぐに食べられるおいしくて安い飲食店を探している方
・行動・結果：付近に安い飲食店がなかったが、新しくチェーン店が近くにオープンしたことをWEBサイトで知る。メニュー紹介で詳細な画像が掲載されており分かりやすく、クーポン機能で安く来店して食事できたのでこれからもサイトを使っていきたい。

事例③
・サービス：IoTに関する情報を発信して、自社製品のコンバージョンへつなげるメディア
・ターゲット：ビジネスマン
・ペルソナ：30〜40代、中小企業中間管理職でIoTサービスによる業務効率化などの担当を任されている方
・行動・結果：IoTとは何か、そして今のトレンドなどが読みやすく紹介されていた。サイトに余計な機能は一切なく、それでいて文の調子も面白くWEBサイトを運営している企業のIoT製品に興味を持った。

UI/UXを設計する際の具体的なチェック項目

ここからは、ユーザーの希望にこたえられるUI / UX設計の際ポイントになる項目をご紹介していきます。

・そのページに関連するコンテンツの導線に問題がないか
・画面内の各要素に適切な余白があるか
・レイアウトにばらつきがないか
・機能が正しく伝わるようになっているか
・ボタンの位置が適切か
・簡潔で適切な見出しがつけられているか（目次の設置）
・動画や音楽が自動再生されないか
・必要以上にページの遷移が多くないか
・ローディングに時間がかかる場合、進行度を示しているか
・そのままでは意味の伝わらないアイコンを使用していないか（きちんと注釈があるか）

そのページに関連するコンテンツの導線に問題がないか

WEBサイトの場合、たとえばある記事に関連記事リンクを貼ってそこから遷移してくる流入を狙う場面も多いと思います。この際、動線に余計なものがなくて分かりやすいかが重要になります。
たとえば極端な話、IoTについての記事に食品に関するリンクを貼るのは動線がおかしいですよね。関係のないコンテンツリンクをページ内に貼るのは「SEO」上も悪い影響が出るので、絶対にやめましょう。

画面内の各要素に適切な余白があるか

現在のWEBデザインは、「適度な余白をサイトデザイン上に設ける」ことが主流になっています。情報を詰め込みすぎず、ゆったりと余裕を持たせることで、洗練された感じが出るからです。

・見出しと本文の間
・ページ内容と関連リンク欄
・文字間

各部分に、それぞれ広すぎず狭すぎない余白を適度に設けると、見やすさもアップしUI / UX向上にもつなげられます。

デザインテイストにばらつきがないか

WEBサイト内のデザインテイストにばらつきがないか、よく確認しましょう。

同じ内容のWEBサイト内では背景デザインなども含めてレイアウトを統一し、「何がどこにあるか」がわかるようにし、回遊を妨げないようにしましょう。ページ内でフォントデザインが唐突に変わっていないかなど、ユーザーを疲れさせてしまうデザインになっていないか、確認しながらを作業を行いましょう。

機能が正しく伝わるようになっているか

UXを考えたUIデザインは、各要素を見てその機能がすぐ分かるようになっています。

たとえば
・画像が拡大してはみ出るときは、スクロールバーが大きく表示される
・下に「1/2」というような表記があり、今のページが分かるようになっている
・ボタンはベースデザインと対照的な色になっており、存在がわかりやすい

このように、ページ内各機能がすぐ伝わるようにデザインを行うのもポイントになってきます。

ボタンの位置が適切か（押しやすい位置に設計されているか）

WEBサイトにおいて、「CTA（コール・トゥ・アクション）」へユーザーを誘導するボタンの役割は重要です。そのため、ボタンの位置が適切かもWEBサイトの成功可否に影響してきます。
たとえばページが長いのに最後にしか次の操作に移るためのボタンがないのは、操作しにくさにつながります。この場合ボタンを固定する、文章のまとまりごとにボタンを用意するなどの対応が必要です。
他にも押しやすいように具体的にどんなアクションが起きるかボタンに記載するなど、ボタンを操作する際の細かい気配りもデザイン上必要になってきます。

簡潔で適切な見出しがつけられているか（目次の設置）

特に記事メディアの場合、簡潔で適切な見出しが本文に記載されているかはポイントです。

たとえば

・将来私たちの生活を大きく変える？それとも変えない？AIとは

よりも

・将来私たちの生活を大きく変える！AIで注目すべき3つのポイント

のほうが論点が分かりやすく、分かりやすいタイトルになります。
タイトル以降の見出しや小見出しも、内容が分かるようにつけていきましょう。
また導入文前後に、目次を設置する方法は多くのメディアで採用されています。目次設置により時間がないユーザーも概要（アウトライン）が分かり、読みたいところだけを閲覧したりできるからです。

動画や音楽が自動再生されないか

WEBサイトで勝手に動画や音楽が再生されると、ユーザーの意図に反する場合があるので、おすすめできません。演出上自動再生を行うメディアもありますが、読み込み速度のダウンにつながり、ユーザーの離脱を招く可能性があります。
コーポレートサイト関係のメディアの場合はなるべく自動再生機能をオフにし、任意で再生ができるよう設定しておきましょう。

必要以上にページの遷移が多くないか

求めているページにたどり着くまでに何度もページを遷移する必要があると、ユーザーが疲れて途中離脱してしまう危険性があります。できる限り、訪問したページで情報が完結していると良いでしょう。

ローディングに時間がかかる場合、進行度を示しているか

ユーザーのインターネット環境などによっては、ローディングに時間が掛かることもあります。ローディング時間が短いのが一番ですが、時間が長くなってしまう場合にはユーザーに「読み込み時間が掛かった」と認識されないよう、進行度を画面で示してみましょう（ローディング用の回転アニメーションといっしょに、読み込み進捗度を％で表示するなど）。

そのままでは意味の伝わらないアイコンを使用していないか

スマホ登場初期は、アプリという概念が新しかったため「スキューモーフィズム（実際に存在するものを元にアプリアイコンなどを制作する）」が主流でした。つまりユーザーに意味の伝わらないアイコンなどを使うとユーザビリティ低下につながるので、アプリ制作側も分かりやすいよう対応したのです。

スキューモーフィズムの例として、たとえば写真撮影のアプリでカメラに似せたアイコンを採用するという手法があります。Webサイトでも同じように、ファイルアップロード用のボタンにはファイルのアイコンを入れるなど、ユーザーが混乱しにくい工夫を施しましょう。
自社にしか意味の分からないアイコンなど、ユーザーファーストの観点からよろしくないものはなるべく削除しましょう。
ただしスキューモーフィズムが「フラットデザイン（イラスト調のシンプルなデザイン）」にとって代わられたように、アイコンなどのトレンドも変化しています。WEBデザインは一回制作して完成というわけではないので、UX向上のためにもぜひ改善を行っていってください。

ユーザーファーストでUIとUXを考えよう

今回はUIとUXとは何か、そしてUI / UXを考えたデザイン設計のポイントをご紹介してきました。
UIデザインをUXの観点からよく考ええて行うことが重要です。ユーザー目線を忘れずにWEBサイト設計を行いましょう。
ただし、たとえばECサイトの場合は商品の発送速度もUXに関係してくるなど、UIデザイン以外にもUX向上のために注意すべき点はいくつかあります。ぜひUIデザインや他の要素を総合的に考えながら、UXを向上させていってください。

執筆者：ヒトノート編集部

株式会社ヒトノテのオウンドメディア、WEBマーケティングの学習帳「ヒトノート -Hito note-」の編集部。

監修者：坪昌史

株式会社ヒトノテの代表取締役CEO。 エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。