ユーザビリティ向上のポイントは？ しっかり理解するUI/UXの基礎

近年よく耳にするようになったUI/UXとはどのようなものなのでしょうか。「漠然とわかっているものの、はっきりとした違いがわからない」「何を意識して改善していったら良いのか、方法の検討がつかない」という方も多いかもしれません。

この記事では、ビジネスでアプリ開発、Webデザインに携わっている方に向けて、UI/UXの基礎知識と、ユーザビリティを向上させるために大切なコツやポイントを解説しますので、ぜひ参考にしてください。

UI/UXとは？ それぞれの違いを解説

UIとUXは、似ているためわかりにくいと感じる方が多いようです。まずは、それぞれの違いを解説していきましょう。

UIとUXの違い

UXとUIはこの記事でも記載しているように「UI/UX」とまとめて使われることが多いため、意味を混同している、ふたつをセットで認識していてそれぞれの意味がわからないという方も少なくありません。

UIはUXに含まれる要素のひとつで、各UIの完成度が高ければ高いほど、優れたUXになると言われています。UIはUXのクオリティを左右する重要な要因と言えるでしょう。

UI（ユーザー・インターフェイス）とは？

UIは、User Interface（ユーザー・インターフェイス）の略です。インターフェイスは日本語だと「境界線」や「接点」と訳しますが、UIは言葉の通り「Webサイトやオンラインサービス、アプリケーション等とユーザーをつなぐ接点」を意味しています。ユーザーとサービスやプロダクトの間をつなぐものになるため、見た目はもちろん、操作性や機能性などユーザーの目に触れているものはすべてUIと言えるのです。

例えばWebサイトであれば、パソコンやスマートフォンなどから閲覧しているページのレイアウト、配色、フォントの種類やサイズ、情報量、操作性など、画面上で見ることができるさまざまな情報です。サイトのUIが優れていると、見た目や印象が良いだけでなく、ユーザーがストレスを感じることなく操作が可能になります。

UX（ユーザー・エクスペリエンス）とは？

UXは、User Experience（ユーザー・エクスペリエンス）の略です。エクスペリエンスは「体験」や「経験」を指しており、サービスやプロダクトを通して得られるすべてのユーザー体験という意味になります。UXには「見た目がきれい」「操作性が良い」といった表層的なことから、「窓口の対応が良かった」「他の商品と比べて使いやすい」といったサービスや品質に関わるものまで、お客様がそのサービスや商品を通して感じるさまざまな体験が含まれます。

UI/UXが求められる理由

UIやUXが求められるようになった理由のひとつにIoT（Internet of Things）の普及が挙げられます。さまざまなものがインターネットにつながるようになり、外出先から家電を操作したり、手軽に情報を取得できたりするようになりました。インターネットが生活の一部となりつつある昨今では、誰もが使いやすいUIや、快適さや便利さといったUXが求められているのです。

また、ユーザーの目的にあった使いやすいUIのサービスや商品を用意することで、結果的にUXが向上します。そしてUXが向上すれば、そのサービスや商品を「また使おう」「誰かに共有したい」と感じるようになり利用率がアップします。

物や情報が過多になっている現状を考えると、ユーザーから選んでもらう、あるいはリピートしてもらうためには優れたUIやUXが必須といっても過言ではありません。

成功するUI/UXデザインの5つのポイント

では成功するUI/UXとはどのようなものを指すのでしょうか？ 例えば、サービス提供者が「おしゃれなデザインにしよう」と考えて設計しても、ユーザーが「使いにくい」と感じてしまっては成功とは言えません。ここでは、優れたUI/UXデザインを設計するコツを5つ解説します。

1. ゴールとペルソナの設定

まずは「どのようなユーザーに」「どのような体験をして欲しいのか」を決めておくことが重要です。

サービスや商品を利用するユーザーのターゲット層（年齢や性別だけでなく、職業、居住地、家族構成、趣味、休日の過ごし方、年収など）の属性をリアルに設定することで、デザインの方向性やユーザーのリテラシーに合った設計が可能になります。

例えば、若い世代であればおしゃれなデザインが目を惹くかもしれません。ビジネスシーンを想定しているのであれば、シンプルで落ち着いた雰囲気が適しているでしょう。高齢者向けであれば、フォントを大きく、操作性をより簡単にする必要があります。優れたUIやUXを目指すためには、デザイナーの好みではなく、届けたいターゲットユーザーに適していることが大切です。

そして、それらのユーザーに「どのような体験をして欲しいのか」という最終的なゴールも重要です。商品を購入して欲しいのか、資料請求をして欲しいのか、体験をして欲しいのかなど、どのようなアクションを求めているのかを事前に決めていきましょう。

ユーザーのペルソナやゴールが不明確なまま設計を進めていくと、UIやUXのデザインが中途半端になりかねません。

2. デザインの4原則を意識してわかりやすいデザインに

「デザイン＝おしゃれ、センスが良い」というイメージを持つ方もいるかもしれませんが、見た目だけが美しいのでは意味がありません。そのサービスや商品が目指す目的を達成できるものこそが、優れたデザインと言えます。そのためには「デザインの4原則」を意識してUIを設計することが大切です。

Webサイトを例に、デザインの4原則を詳しく見ていきましょう。

（1）近接

関連する情報を整理してグループ化し、異なる情報は少し離して配置することが大切です。大切なのはどの情報をグルーピングするかという点。ひとまとめにして見せるべき要素を近づけることで、より読みやすく、情報が伝わりやすいレイアウトになります。

（2）整列

文字や画像を整列させることで、全体の統一感を出しましょう。要素が規則正しく並んでいることにより、視線の流れがコントロールでき、見るべき順序がわかりやすくなります。

（3）反復

同じ要素を同じデザインで繰り返すことで、情報に一貫性を持たせることも大切です。見出しやヘッダー、CTA（Call To Action、行動喚起）のように各ページで反復している情報を把握し、同じデザインで繰り返し表示させることによりユーザーの混乱を防ぐことができます。

（4）対比

フォントの大きさや色に差をつけることで、メリハリをつけて強調したい情報を明確にしましょう。情報に優先順位をつけて対比させることで、ユーザーが理解しやすくなります。

3. ユーザーの使用イメージを検証

優れたUI/UXとして成功するためには、そのサービスや商品を利用するユーザーが、設定したゴールまでストレスなくたどりつけることが重要です。そのため、ユーザーが使用するシーンを徹底的に想像してください。

顧客が商品やサービスに接触してからゴールである購入や利用までたどりつくまでに、どのように考え、どのように行動したかという一連の流れを「カスタマージャーニー」と呼びます。例えば商品を購入するまでに、ユーザーは調査や比較といった下調べ、購入のきっかけになる決め手との遭遇、購入の手続きなど複数のプロセスが存在しています。さまざまなカスタマージャーニーを想定し、ユーザーの目線に立つことで、ユーザーが求めているものが明確になっていくわけです。

4. 主役はユーザーで

UI/UXを設計する際の主役は、デザイナーでなくユーザーです。デザインにこだわりすぎて、視認性が悪い、直感的に操作できないのでは意味がありません。欲しいものや情報、使いたいサービスへスムーズにたどりつけないと、ユーザーは諦めて離脱してしまうことがあります。そのため、主役であるユーザーにとって、ベストな状態になるよう設計していくことが大切です。

5. ユーザーテストを実施

ターゲットユーザーが、想定したカスタマージャーニーをたどって、無事に設定したゴールまで到達することができるのかを実際にテストしてみることも大切です。そのためには、ターゲット層と似たモニターに対してテストを行い、インタビューしてみましょう。ユーザーテストを繰り返し行うことで、課題や問題点が明らかになり、より良いUI/UXになります。

なお、WebサイトであればGoogleが提供しているGoogle Analytics（グーグル・アナリティクス）のようなツールを利用することでユーザーテストが可能です。

6. SEOとUXの関係を考慮する

検索エンジンからWebサイトへ訪れる人を増やすための施策として知られるSEO（Search Engine Optimization、検索エンジン最適化）ですが、検索結果の上位に表示されるためにキーワード選定、構成や記述を工夫している方は多いでしょう。そのようなSEO対策のひとつとして、実はUXをより良くしていくことも重要になります。

Google社は2021年6月、「ページエクスペリエンス」（ユーザーにとって利便性が高いページか否か）を図る指数を検索結果の表示順位に影響させると発表しています。コンテンツの表示速度や、目の不自由な方向けの読み上げ機能に対応しているか、さまざまなデバイスに対応させたレスポンシブデザインになっているかなど、ユーザーファーストの設計になっているかという点が重要視されるようになったのです。つまりUI/UXを高めることは、結果的にSEO対策にもつながります。

UI/UXを改善するポイント

では、実際にUI/UXを改善していくためには、どのような点に注意していくのが良いのでしょうか。改善してく上で重要な5つのポイントを紹介します。

1. 検証を繰り返す

UI/UXは、一度設計したら終わりというものではありません。定期的にユーザーテストを行ってフィードバックを反映させたり、分析ツールを活用して効果計測を行ったりして、検証を繰り返しましょう。こまめにPDCAを回していくことで、よりユーザーに寄り添ったUI/UXになっていきます。

2. データを用いて定量的に改善を行う

UI/UXを改善していく上で、「好き・嫌い」や「使いやすい・使いにくい」といったユーザーが感じた定性データを参考にすることが多いかもしれません。しかし定性的な情報だけでなく、顧客満足度や売り上げのような定量的な数字もしっかりと取り込んでいきましょう。

ユーザーから評価が高くても、自社が定めた目的が達成できていなければ意味がありません。そのため、定量データを用いて、定期的に改善を行っていくことも大切です。

3. UI/UXデザインの対象となるサービスをとことん知る

自社のサービスや商品について、とことん知る必要があります。もちろん、他社の類似サービスや商品と比較することも大切です。自社の商品やサービスとの違いはもちろん、視野性や操作性などUIやUXの部分でも比較していきます。

対象となるサービスや商品を詳しく知ることで、より優れたUI/UXを設計できるようになります。

4. ユーザーの視点に立つ

人によって好みや感じ方が異なるため、どれだけ工夫をしたとしても万人受けするデザインや操作性にすることは難しいでしょう。しかし、そのサービスや商品をアピールしたいユーザーのペルソナを定めることは可能です。

まずは自社のサービスや商品を使って欲しい年代や趣味、ライフスタイルなどを絞り込み、そのペルソナのニーズや特徴をしっかりと理解していくことが大切です。そして、ターゲット層であるユーザーの視点に立ち、彼らが快適だと思えるUIにすることで、より質の高いUXが提供できます。

5. 実現したいゴールを明確に設定する

サイトへの訪問者を増やしたいのか、購入してもらい売り上げをアップさせたいのか、資料請求してもらいたいのか、リピートしてもらいたいのかなど、ゴールはそのときによって異なります。そのため、まずは実現したいゴールを明確に設定してください。

目的とゴールを明確にし、それに合わせたUI/UXを設計するのが理想的です。

Googleが提唱するUXの指標【Core Web Vitals】

Googleは、Web上におけるUX向上を目指して「Core Web Vitals（コアウェブバイタル）」を提唱しています。以下で紹介する3つのポイントをクリアしていれば、ユーザー体験の質が向上するだけでなく、検索エンジンの表示ランキングにも良い結果を及ぼすかもしれません。

1. Largest Contentful Paint（LCP）：ラージェスト・コンテントフル・ペイント

LCPは「最大コンテンツの描画」という意味で、Webページが表示されるまでの表示速度を測る指標です。ブラウザ上で最も大きなコンテンツ（画像や動画などのグラフィック、テキストを含むブロックレベル要素などメインとなるコンテンツ）が表示されるまでの時間が短いほどUXが良いと評価されます。

LCPの値は2.5秒未満だと良好ですが、2.5～4秒だと要改善、4秒以上かかると遅すぎるという判定となり、ページ評価が低くなります。

2. First Input Delay（FID）：ファースト・インプット・ディレイ

FIDは「初回入力遅延」という意味で、ユーザーが第一印象として感じるサイトの反応速度を測る指標です。ユーザーがページ内で最初にボタンやリンクを押した際に、表示されるまでにどれくらいの時間がかかったかを計測しており、値が小さいほどUXが良いと評価されます。

0.1秒未満だと良好ですが、0.1～0.3秒未満は改善が必要、0.3秒以上だと遅すぎるという判定となり、ページ評価が低くなります。

3. Cumulative Layout Shift（CLS）：キュムラティブ・レイアウト・シフト

CLSは「累積レイアウト変更」という意味で、ページ読み込み中にレイアウトが崩れないなど視野要素の安定性を示す指標です。例えば、Webサイト閲覧中にテキストが先に読み込まれ、画像が時間差で表示されるためにページ内のコンテンツがずれる現象を体験した方もいるかもしれません。

CLSは画面上でどのくらいの領域がずれたか、どれくらいの距離をずれたかの2つの数値を掛け合わせて決められており、値が0.1未満だと良好ですが、0.1以上0.25未満は要改善、0.25以上だとずれが大きすぎるということになり、ページ評価が低くなります。

UI/UX改善に役立つCore Web Vitalsのまとめ

Googleが提唱するUXの指標「Core Web Vitals」をご紹介しました。LCPは読み込みのスピード、FIDはレスポンシブ、CLSは読み込み時のレイアウトの安定性と、どれも快適なサイトづくりに重要なポイントばかりです。Core Web Vitalsの値を改善していくことは、結果的にUI/UXの向上につながります。

Core Web VitalsはGoogleサーチコンソールの「ページエクスペリエンス」から現状を確認できますので、気になるポイントがあった場合は改善していきましょう。改善の際には、ここまでに紹介した「成功するUI/UXデザインのコツ5選」や「UI/UXを改善するポイント」をしっかりと踏まえていくことが大切です。