UI・UXって何が違うの?Webサイトの注目ポイントと改善の進め方

Webサイトの制作や改善では、UI・UXが重要だとよく言われます。使いやすいサイトを作らなければいけないという意味であることは分かるけれど、両者はいったいどういう違いがあるのかよく分からないという担当者もいるかもしれません。「UI・UX」とひとくくりに語られることが多い用語ですが、もちろんそれぞれ別の言葉です。それぞれをどう捉え、どのようにデザインすべきか解説します。

UI・UXの意味

最近はUI・UXとひとくくりにされることが多い用語ですが、UIはUser Interface(ユーザーインタフェース)の略、UXはUser Experience(ユーザーエクスペリエンス)の略です。

ユーザーインタフェースという言葉は、Webサイトに限らず、昔からさまざまな分野で使われていました。例えばパソコンであれば、ユーザーインタフェースはキーボードやマウスです。つまり、機械やシステムを人間が使うための、「接点」や「取次役」のことを表す言葉がユーザーインタフェースです。Webサイトであれば、Webサイトの内容やサービスをユーザーに理解させ、利用させる、さまざまな要素のことをUIと言います。「見た目に分かりやすい」「どこをクリックすれば何ができるか分かりやすい」「クリックしやすい」状態なら、良いUIだということになります。

一方、ユーザーエクスペリエンスという言葉は、比較的最近になって使われ始めました。UIがある特定のシステム、例えばWebサイトのコンテンツ自体の見やすさ/使いやすさに注目しているのに対して、UXではユーザー体験全体を改善させようという考え方が重視されるようになったのです。例えば、ページ自体は見やすいけれど、目的を達成するために何度もクリックして結局たどり着けないといった場合、UXに問題があると言えるでしょう。

また最近では、Webサイトだけではなく他のチャネルも含めた体験の心地良さまでデザインしようという企業もあります。例えば商品自体の品質、商品が手元に届くデリバリーの品質、購入後のサポートなどまで含めて、顧客体験全体を向上させてユーザー満足度を上げようということです。言い換えれば、「いかに見やすく、使いやすくするか」と考えるのがUI、「いかに自社や自社商品を好きになってもらうか」と考えるのがUXと言うこともできるでしょう。

WebサイトのUXを決める要素

WebサイトのUXは、ユーザーがWebサイトを見つけるところから、目的を達成するところまでをデザインしなければなりません。要素としては、以下のようなものがあります。

アクセスしやすさ

いつでも、どこでも、誰でも見られるアクセスしやすさが必要です。具体的には、

  • スマホ対応しているか
  • 全ての世代に読みやすい文字の大きさか
  • ウェブアクセシビリティ規格に準拠しているか

といったことが挙げられます。また、「見つける」に注目すれば、

  • ブランド名で検索順位が1位になっているか

も重要です。

Webサイトの見やすさ

見やすいWebサイトのためには、

  • レイアウト
  • クリック要素の大きさや分かりやすさ

といった見た目のデザインだけでなく、

  • 内容の正確さ
  • 表示の軽快さ

も重要です。表示に時間がかかるとユーザーをイライラさせてしまうので、いくら美しいデザインにしても意味がありません。

Webサイトの使いやすさ

Webサイトの使いやすさとは、ユーザーが簡単に目的を達成できるかということです。そのためには、

  • ナビゲーションが明確か
  • 情報が適切にグルーピングされているか
  • 入力フォームが最適化されているか

といったことが重要です。何度もクリックしてサイト内をウロウロしなくても目的が達成できるよう、分かりやすいナビゲーションや適切な情報構造、FAQページの整備が必要です。また、情報をカテゴリ分けする以外に、検索窓を設置する方法もあります。

入力フォームでは、ユーザーの手間を減らし、より短時間で正確に入力を完了できるようにしなければなりません。例えば、住所を自動入力する、エラーはどこが間違っているかを明確にするなど、「面倒」「よく分からない」といったストレスをなくす必要があります。

その他、Webサイトを安心して使うためには、

  • しっかりとセキュリティ対応しているか

も重要です。

UXの観点では、良いサイトとは、目的を達成できるサイトのことです。美しい/かっこいいデザインでも、目的を達成できないWebサイトは良いサイトではありません。

Webサイト改善の進め方

UXの観点でWebサイトを改善するには、次のようなステップで進めていきます。

(1)達成すべき目的を明確にする

自社のWebサイトで、ユーザーにどのような行動を起こしてほしいか(どうなってほしいのか)をあらかじめ明確にしてWebサイトを構築することが必須ですが、それがあやふやであれば、そこから固めていきましょう。Webサイトのタイプによって、自社の情報を正確に知ってもらいたいのか、Webサイトで商品の購入やサービスの申し込みをしてほしいのか、ブランドや商品のファンになってもらいたいのかなど、さまざまな目的があるはずです。

(2)ユーザー像を明確にする

ペルソナやカスタマージャーニーマップもWebサイトを制作するときにあらかじめ設定しておく必要がありますが、明らかになっていなかったり、想定とずれがあったりするようなら、もう一度検討しましょう。

(3)課題を洗い出す

目的とユーザー像が明確になったら、課題を洗い出します。アクセスログなどを見ればすぐに分かる場合もありますが、きちんと考えて作ったはずなのにうまくいっていないということもあるでしょう。そのような場合は、顧客満足度モデルを使ってチェックしていきましょう。「狩野モデル」「UXハニカム」「UXピラミッド」などいくつか種類がありますが、例えばUXピラミッドでは、UXを以下のように評価します。

レベル1:Functional(Useful)=機能的である(ちゃんと使える)

レベル2:Reliable=信頼できる

レベル3:Usable=使いやすい

レベル4:Convenient=便利である

レベル5:Pleasurable=楽しい・心地よい

レベル6:Meaningful=価値がある

さらにこれらのレベルを2分し、以下のように評価します。

Task=目的達成可能(レベル1~3)

Experience=心地良い体験(レベル4~6)

自社のWebサイトがユーザー体験をきちんとデザインできているかどうかを、これらに照らし合わせて確認しましょう。

(4)αテスト、βテスト

課題を改善するためにWebサイトを変えて、いきなり本番環境でユーザーに公開するのではなく、改善はテストをしながら進めましょう。社内の別の部署の人に試してもらうだけでも、新たな気づきが見つかることもあります(αテスト)。もし可能なら、気心の知れた取引先や募集したβテスターで、本番公開前のユーザーテストをやってみるといいでしょう。それで問題なく動作することが確認できたら、本番環境に展開します。

UIとUXを最適化した「良いサイト」を作る

良いWebサイトのためには、個別の使いやすさに注目するUIの最適化だけでなく、ユーザーの体験全体を最適化するUXに注目しなければなりません。また、見やすい/使いやすいだけでなく、目的が達成できることが良いWebサイトの条件です。