WEBデザイン WEB制作

【事例あり】UXとは?UIとの関係もわかりやすく解説!【DX時代】

SHARE

自社サイトに携わっていると、もっと使いやすいサイトにしたいと思うことがあるでしょう。しかし「UX」や「UI」などといった用語が登場し、難しく感じる方もいるのではないでしょうか。
そこでこの記事では、
  • UXとは何か
  • WEBにおける重要性
  • UXを向上させるための方法
  • 優れた事例
について解説していきます。
本記事を読むことで、UXの意味やサイト改善の方法についてわかるので、よりユーザーが使いやすいサイトになります。ぜひ参考にしてください。

UXとは?UIとの違いは?

UXとは一体どんなものなのでしょうか。また、UXについて取り上げると、必ずと言ってもいいほど「UI」も取り上げられます。
  • UXの意味
  • UIとの違いや関係性について
    そこでこの章では、上記2つの観点からUXについて解説していきます。

    UXの意味

    UXとは「User Experience」(ユーザーエクスペリエンス)の略称で、「顧客体験」と訳されることが多いです。つまり、WEBページやアプリを利用することでユーザーが獲得する体験を意味しています。
    例えば、ユーザーがあるECサイトを利用したとき、商品の検索から購入までスムーズに進められたとしましょう。するとこのユーザーは「またこのECサイトで買い物したいな」と思うはずです。こうしたプロセスを総称してUXと呼びます。

    UIとの違い・関係性

    UXとUIは、簡単に言うと規模が異なっています。両者の違いは、以下の通りです。
    UX商品やサービスを利用することで獲得するユーザーの体験
    UI商品やサービスとユーザーの接点
    UIとは、「User Interface」(ユーザーインターフェース)の略称で、「顧客接点」と訳されます。具体的には、WEBページやアプリで使用するフォントやメニューの設計など、外観を意味します。
    例えば、採用サイトに「事業内容」「社員インタビュー」「採用情報」「企業情報」などといったナビゲーションメニューが設置されているのを見たことがあるでしょうか?ナビゲーションメニューは、ユーザーがよりスムーズにサイトを回遊するために考えられたものです。こうした工夫も、UIの1つです。
    こうした特徴から、UIはUXの一部だと言えます。厳密には「UI=UX」とは言えませんが、UIを工夫することで優れたUXを設計できるのです。
    ここで、国内で最も利用されているチャットアプリ、LINEを例にUIとUXの関係について考えてみましょう。

     

    出典:LINE

     

    LINEでは、タイムライン順にトーク履歴が表示されるというUIが利用されています。また、送信時間や「既読」「未読」といったステータスが分かるので、相手の状況をすぐに理解できるのです。
    この設計により、ユーザーは誰とどんなやり取りをしていたのか、時系列で把握できます。こうしたUIは、ユーザーに「使いやすい」「楽しい」といったUXを与え、瞬く間に利用者を獲得していきました。
    このように、UIとUXには密接な関係があるのです。

    WEBにおけるUXの重要性は?

    では、なぜWEBにおいてUXが重要だとされているのでしょうか。それは、以下のように2つのメリットがあるからです。
    • ユーザーに考えさせないサイトになる
    • ユーザーニーズを落とし込める
      ここからは、それぞれのポイントについて解説します。

      ユーザーに考えさせないサイトになる

      1つ目の理由は、ユーザーに考えさせないサイトになるからです。多くのユーザーは「分からない」という状態にストレスを感じてしまいます。
      例えば、サービスの申し込み画面でエラーが発生したものの、どの項目にミスがあるのか分からなくてイライラした経験はないでしょうか?
      このように分からない状態が続くと、ユーザーはサイトを離脱してしまいます。こうした特徴から、「考えさせない」というのはユーザーが快適に利用するためにも重要なポイントとなるのです。

      ユーザーニーズを落とし込める

      もう1つの理由は、ユーザーニーズを落とし込めるからです。サイト運用を続けていくには、ユーザーが求めている情報がないといけません。もしサイトを利用していて求めているような反応がなかったら、すぐに別のサイトに乗り換えてしまうでしょう。
      例えば、大手通信キャリアのサイトでは、トップページにiPhoneの購入ページへのリンクが設置されています。これはそのキャリアのユーザーのうち、iPhoneを利用したいユーザーが一定数存在しているからです。もしiPhoneを購入できるページが見つからなかったら、購入できないのだと勘違いして別のキャリアに乗り換えられてしまうかもしれません。
      このように、ユーザーニーズを取り入れることは、長くWEBサイトを運用していくには必要なことなのです。

      UX向上のための手順・ポイント

      UXを向上させるには、以下のような3つのステップが必要です。
      1. ターゲットの把握
      2. ユーザビリティテストの実施
      3. 競合サイトとの比較
        ここからは、それぞれのステップについて解説していきます。また後半ではUXを向上させるためのポイントについても触れていきます。

        ターゲットの把握

        初めに、どんなユーザーが自社サイトを利用しているのかターゲットを把握しましょう。ターゲットを決めることで、どんな点を改善するべきなのか目的が見えてきます。
        そこで、ターゲットを把握するために以下の要素を明確にしていきましょう。
        • 年齢
        • 性別
        • 家族構成
        • 職業
        • エリア
        • サイトを利用する目的
          例えば、電力会社が運営するサイトのユーザーなら、以下のように埋めることができるでしょう。
          • 年齢…30代
          • 性別…男性
          • 家族構成…4人家族
          • 職業…営業職
          • エリア…都内在住
          • サイトを利用する目的…月々の電気代を抑えたい
            施策を考える上で、ターゲットを明らかにするのは重要なポイントです。

            ユーザビリティテストの実施

            ターゲットが明確になったら、ユーザビリティテストを実施しましょう。ターゲット設定の段階でサイトを利用する目的を考えましたが、「生の声」を聞かない限り、ユーザーの本当のニーズは分かりません。
            そこで、サイト改善においては以下のようにユーザビリティテストを実施すると効果的です。
            1. ユーザーにWEBサイトを利用してもらう
            2. ユーザーの行動を観察する
            3. 問題点を指摘してもらう
              初めに、ターゲットとなるユーザーにWEBサイトを利用してもらいます。その間、担当者はユーザーのマウスや目の動きなどを観察しましょう。
              そして一通り回遊したら、サイトの問題点を指摘してもらいます。この時、「どこが使いにくかったか」「どうして使いにくかったのか」「どんなデザインだったら使いやすかったのか」などと深堀していくことが重要です。
              ユーザビリティテストのポイントは、バイアスをかけないことです。意図した方向へ導いたりしないよう、フラットな状態で説明しましょう。

              競合サイトとの比較

              ユーザーニーズとサイトのギャップを把握したら、競合サイトと比較していきましょう。競合サイトによっては、自社サイトがカバーできていないニーズを取り込んでいる場合があります。
              また、競合サイトを研究することで、今まで気が付かなかったニーズを発見できることもあるでしょう。まずは同じジャンルのサイトから初め、続いて利用者数の多いサイトもあわせて比較してみてください。

              UXを向上させるためのポイント

              優れたUXを目指すには、以下の6つのポイントを押さえておきましょう。
              • ユーザーにとって価値のあるものにする
              • 分かりやすいものを目指す
              • 使いやすい設計にする
              • ユーザーが好むデザインに仕上げる
              • 信頼されるデザインにする
                まず、商品やサービスを利用してもらうには、前提としてユーザーにとって価値がないといけません。「また使いたい」「快適に利用できた」と思わせるようなサービスを目指しましょう。
                加えてどんなサービスでも、分かりやすさは重要です。特にWEBサイトの場合、説明書をじっくり読まないと理解できないような設計では絶対に利用してくれません。初めて訪れたサイトでも感覚的に利用できるようなサイトが理想的です。
                分かりやすさの延長に、使いやすさがあります。使いやすいサイトに仕上げれば自ずとユーザーはリピーターになるでしょう。一度ではなく、何度も使ってくれるようなサイトを目指します。
                また、見た目の印象も大切です。ユーザーが好まないデザインだと、一目で「なんか違うな」と思い離脱されてしまいます。ユーザーの年齢層や性別、興味・関心などをリサーチし、どんなデザインが好まれているのか知りましょう。
                そして、サイトは信頼されるものでなくてはなりません。いくらかっこいいサイトだったとしても、頻繁にエラーが発生したり、リロードするたびに英語表記に変わってしまったりするようなサイトでは、信頼してもらえません。ユーザーが安心して利用するためにも、システム面にも注意を払いましょう。

                優れたUXの事例

                ここまでUXを向上させる方法について解説していきました。では、WEBサイトにおいて優れたUXとはどのようなものを指すのでしょうか。ここからは、UXが優れているWEBサイトを3つご紹介します。

                Google

                出典:Google
                Googleは世界で最も利用されている、言わずと知れた検索エンジンです。Googleのトップ画面は検索ボックスのみが設置されていて、シンプルなデザインが画期的だと言われています。
                そんなGoogleですが、トップ画面以外にも工夫が見られます。例えば、Googleで検索をしたとき、上記の画像のようにURL以外の項目が表示された経験はないでしょうか?
                これは「スニペット」と言い、ユーザーが検索結果ページに遷移しなくても情報を得られるよう追加された機能です。スニペットにより、ユーザーはこれまで以上に素早く問題を解決できるようになりました。こうした工夫もUX向上に貢献しています。
                また、Googleではスニペットをはじめとし、様々なアップデートが頻繁に行われています。これはユーザーがより快適に検索することを目的としていて、こうした姿勢こそがUX向上に欠かせない考え方であるとも言えるでしょう。

                Skype

                出典:skype
                Skypeはビデオ通話やWEB会議で利用されるビデオツールです。Skypeはパソコンでもスマートフォンでもアプリをダウンロードできるのですが、ブラウザからアカウント登録をしないで利用できるのをご存じでしょうか?
                昨今ではSkype以外にも様々な通話アプリがあります。会社によってメインで使用しているアプリが異なっているので、その都度ダウンロードしていては手間がかかってしまいます。
                そこでアカウントなしで利用できるツールがあると、どんな相手ともスムーズに会議ができるようになります。主催者側にとっても、わざわざアカウントを用意してもらう手間をとらせないので、快適な利用体験が得られるのです。

                Amazon

                出典:Amazon
                Amazonは世界的なECサイトで、在宅時間が増えた昨今では国内外問わず多くのユーザーが利用しています。
                AmazonのWEBページが優れているのは、トップページで商品を掲載していないという点です。Amazonでは膨大な商品を取り扱っていますが、選択肢が多いとユーザーは何を購入すればいいのか悩んでしまいます。場合によっては、かえって何も購入できないこともあるでしょう。
                こうしたストレスをなくすために、Amazonではユーザーが自ら検索するような設計を採用しています。さらに、商品カテゴリーのプルダウンは、背景のトーンを下げることでユーザーが検索に集中できるようなデザインになっています。
                このように、AmazonのWEBページはユーザーが快適な購入体験ができるような工夫が取り入れられています。

                まとめ

                現在進行中のDX時代において、ターゲットが欲しいものを提供することは必須です。そしてそれらは、簡単に使えること、つまり迷わず使えることも大きな要素です。
                多くのユーザーに自社サイトを利用してもらうには、UXを改善する必要があります。
                そのためには、ターゲットのニーズを把握することから始めましょう。ニーズとサイトの現状のギャップを埋めていくことで、より優れたUXにしていくことができます。
                そして、競合サイトのUIやUXを研究することも効果的です。
                今回ご紹介したポイントや事例を参考に、ぜひサイト改善に努めてみてください。

                この記事の監修者

                倉永豊光

                株式会社トモガラ代表取締役社長。WEBサイト制作の上場会社で営業職を経験後、外資系のスタートアップ広告代理店にてWEBコンサルティングに従事。その後ベンチャー企業の新規事業立ち上げを責任者として2社経験し独立。得意領域はWEBマーケティング全般とWEBサイト制作。 今までWEBサイト制作に携わった数は大手、上場企業、官公庁含めて累計1,000件以上。

                今すぐ問い合わせる

                まずはトモガラに無料相談
                03-5962-0575
                受付時間
                平日10時〜19時

                関連記事

                PAGE TOP