UIは顧客とプロダクトの接点、UXは顧客体験を表す言葉です。
Webサイトやランディングページで集客できていても、コンバージョンにつながっていない場合、原因は使いにくいサイトにあるかもしれません。そんな課題を解決するのが、UI/UXです。
コンバージョンにつながるUI/UXを設計するためには、まずはUIとUXの違いなどを理解する必要があります。本記事では、UI/UXの違いやWebで重要な理由、改善ポイントと改善例まで解説します。
マーケティング活動で重要なリスティング広告。現状実績を改善し、さらに成果を伸ばすことに苦戦しているマーケティング担当者は多いです。弊社ではリスティングAIを活用した、まったく新しいご提案が可能です。
目次
UIとUXは字面がよく似ているため混同されますが、意味は異なります。結論から伝えると、UIは使いやすさを表し、UXはプロダクトを通して得られる体験や感情です。
上の画像の例で言えば、UIはケチャップであり、UXはケチャップを使うことで得られる料理の楽しさなどの経験です。以下では、UIとUXについて、具体例を用いながら解説します。
UI（User Interface）とは：
顧客とプロダクトの接点を示す言葉。
例えば、Webサイトのデザインや操作性、フォントなど顧客が視覚する全ての情報をUIと言います。もっと身近な例で言うと、料理を食べる際に使う箸やフォークなどもUIです。
UIにも良い悪いがあります。良いUIとは、特定の顧客がスムーズに目的を達成できるものです。例えば、スープにフォークを出しては、顧客はスープを食べるという目的を達成できません。これは悪いUIと言えます。
一方、文字数が多いWebブログの上部に目次を設定することで、顧客はすぐに必要な情報にたどり着けます。これは良いUIです。
このように顧客とプロダクトをつなげるUIは、使いやすさに大きくかかわってきます。
UX（User Experience）とは：
製品やサービスを通して顧客が得られる体験のこと。
優れたUXの代表例として、スターバックスが挙げられます。スターバックスは、コーヒーや洗練された接客を通して、顧客に少しリッチな体験を提供しているのです。
UXは、以下の4つに分類できます。
- 予期的UX：体験する前に予想する経験
- 一時的UX：実際に体験する
- エピソード的UX：特定のひとつの体験を内省する
- 累積的UX：体験全体を回想する
つまり、UXとは顧客が製品を触れる前から後まで感じる全ての体験のことです。
UIとUXは異なる意味の単語ですが、切り離して考えてはいけません。その理由は、UIを改善することにより、UXが向上する可能性があるからです。
例えば、Webサイトのページ読み込み速度を改善したり、欲しい情報にたどり着くまでの導線をスムーズにしたりすると、顧客の体験は向上します。
しかし、必ずしもUIが良ければUXも良いとは限りません。どれほど使い勝手に優れたECサイトであっても、肝心の取り扱い製品が悪ければ、UXは高まりません。
UIはUXを構成する一要素ではありますが、UI以外の要素に問題があれば、優れたUXの実現は難しいです。UX設計をする際は、俯瞰的な視点を持つことが重要になります。
WebサイトのUXを最適化すれば、コンバージョンの向上につながります。Webサイト運営で数字ばかり追ってしまうと、アクセス数は多いにも関わらず、コンバージョン率の低い結果となってしまうのです。
例えば、ホワイトペーパーのダウンロードを目的にランディングページを運用したとしましょう。ダウンロードを促すCTAをページ下部のみに設置すると、顧客は何度もスクロールする不便が生じます。途中で興味関心が失せて、離脱する顧客も出てくるでしょう。
SEO対策も同様です。Googleは2021年6月にページエクスペリエンスアップデートを開始し、以下3つの指標をランキング要因に追加しています。
- LCP：読み込み速度
- FID：インタラクティブ性
- CLS：ページコンテンツの視覚的安定性
これらを向上させれば、顧客体験（UX）が向上します。従来、Webサイト運営ではコンテンツが重要視されてきました。しかし、どれほど素晴らしいコンテンツを制作しても、UXが悪いと顧客は離れてしまいます。
今はコンテンツと同様に、UIの改善を繰り返し、優れたUXをデザインしなければいけません。
UIとUXについての理解を深めたところで、Webサイトの具体的な改善例をご紹介します。
リスティング広告の運用でランディングページへの流入はあるものの、コンバージョン率が低いことに課題を抱えているとします。Googleアナリティクスやヒートマップツールで分析したところ、下記の問題があると判明しました。
- ファーストビューにCTAがない
- スクロールしなければホワイトペーパーの中身を確認できない
- ページ下部までスクロールする顧客は数少ない
つまり、ホワイトペーパーの中身を確認してからダウンロードしたい顧客が一定数いるにも関わらず、ページ最後までスクロールしなければ中身の確認ができないという不便が生じていました。
この課題を解決するために、CTAの設置位置を変えた複数のランディングページを用意し、ABテストを実施します。結果、CTAを固定するパターンが最適だと分かり、デザインに反映したところコンバージョン率が改善しました。
SEO対策で丁寧に作り上げたものの、上位表示されていない記事があります。
Googleアナリティクスで詳細確認すると、離脱率が高くセッション時間が短いことが判明しました。さらにヒートマップツールで分析したところ、ユーザーの大半がファーストビューで離脱していると分かったのです。このことから、以下の仮説を立てます。
- ファーストビューで読む意欲が失せている
- その理由は漢字の比率が多いから
この仮説にもとづいて、コンテンツ内のひらがなと漢字の比率を7：3になるように調整したところ、離脱率とセッション時間が改善され、SEOランキングも上昇しました。
これからのSEO対策では、コンテンツ内容のほか、漢字とひらがなの比率や内容の階層化、図表の活用などのデザイン面も意識してUXを高める必要があります。
UI/UXの改善に興味がある一方で、何から手を付ければいいのか分からない方もいるでしょう。そこで以下では、リソースがなくてもできるUI/UXの改善ポイントを解説します。
UIとUXの主役は顧客です。顧客理解を深め、顧客が抱える悩みや課題を特定することからUI/UXの改善がスタートします。顧客ニーズを把握しなければ、制作者の主観が入ったUXデザインとなってしまいます。
例えば熱量たっぷりに1万文字以上の記事を制作したとしても、顧客がすぐに必要な情報にたどり着けないのならば、それは制作者の自己満足です。
UXの本質は、他者の気持ちや行動を具体的に想像したうえで、快適な体験を届けられるようにすることです。CRMやGoogleアナリティクスなどのツールを使い、顧客行動や情報を分析し、顧客理解を深めましょう。
ユーザーテストとは：
顧客に実際にプロダクトを使用してもらっている様子を観察し、可能な限り多くの課題を発見する手法。
ユーザーテストを実施すれば、客観的な評価を得られるため、効率よくUI/UXの改善につなげられます。
ユーザーテストを実施するリソースがない場合は、サービスに携わっていない社内の人にサービスを使用してもらうのも有効です。
また、ランディングページやオウンドメディア、ECサイトなどの場合は、Googleアナリティクスやヒートマップツールの活用も有効です。特にヒートマップツールは、ページに訪れた顧客の詳細な行動を可視化できるため、有効な課題の発見につながります。
オウンドメディアやランディングページなどにCTAを設置しているのなら、まずは設置場所を確認してみてください。
CTAは関連ページやページ下部のみに設置する企業が多いです。しかし、主要ページのファーストビューにも設置すると、コンバージョン率が向上する確率が高いです。労力や時間はかからず、大きな効果を見込めるため、ぜひCTAの設置場所は見直してみてください。
UIは顧客と製品サービスの接点であり、UXは製品サービスを通して得られる体験のことです。類似製品があふれる現代では、優れたUXを提供して、顧客に選ばれ続ける必要があります。
Webサイト運営でも同様で、UI/UXを改善することでコンバージョン率の最適化へとつなげられます。まずは、訪問からコンバージョンまでの一連の流れを顧客視点で体験し、摩擦がないか確認しましょう。また、Googleアナリティクスとヒートマップツールを活用し、UXの分析と改善を繰り返してください。
マーケティング活動で重要なリスティング広告。現状実績を改善し、さらに成果を伸ばすことに苦戦しているマーケティング担当者は多いです。弊社ではリスティングAIを活用した、まったく新しいご提案が可能です。
アドフレックス・コミュニケーションズ公式アカウントです。
アドフレックス・コミュニケーションズ公式アカウントです。
