“とりあえずUI改善”からの脱却。リサーチから見えるUXデザインの改善ポイント

Webサイトのリニューアルをすることになり、Webデザインを変えてみたものの、離脱率やCV率などの指標に改善が見られない。せっかく新機能を実装したのに、ユーザーに受け入れられず使ってもらえていない……。このような状況に陥っていたりしませんか？

本記事では、UXの基本的な概念をはじめ、UXデザインが重要な理由、 UXデザインの基本プロセス、WebサイトのUX改善で行うべきリサーチ手法などを解説します。

そして、トランスコスモスのUX改善事例も交えながら「UX改善へのロードマップ」をわかりやすくご説明します。ぜひ最後までお読みください。

UXとは？

Webデザインを語るうえで欠かせない概念に「UX」というものがあります。なんとなくはわかるものの、はっきりとは理解できていないという方も多いのではないでしょうか？

UXとセットで語られることの多いUIと比較しながら、UXとUIそれぞれの用語と違いを解説します。

UXとUIの違い

・UX＝User Experience（ユーザーエクスペリエンス）

UX（ユーザーエクスペリエンス）とはユーザー体験の総称で、「製品やサービスの利用を通じて得られるすべての体験」のことです。

たとえば、Webサイトで製品を購入する場合、ユーザーがサービスや製品を認知し、購入、使用した後に「また購入したい」「良い製品だった」と感じるまでの一連のプロセスで生じる感情や体験を指します。

・UI＝User Interface（ユーザーインターフェース）

UIとは、サービス・プロダクトとユーザーをつなぐ「接点」のことです。

Webサイトの場合、ボタン・アイコン・レイアウト・配色・フォント・イメージ画像など、ユーザーが直接触れて操作する部分や視覚的なデザインを指します。

UXデザインとは？

では、「UXデザイン」とはどういう意味でしょうか？

UX（ユーザー体験）は、一人ひとりのユーザーに対して「こう感じてほしい」と直接コントロールできるものではありません。

ユーザーの状況やニーズに合わせて適切な仕組みや環境を設計し、ユーザーが自然と価値のある体験を得られるように導いていくことが重要です。

つまり、UXデザインとは、情報の流れを整理する・操作を直感的にする・感情に響く要素を取り入れるなど、ユーザーが自然と価値のある体験を得られるよう、体験を支える構造や接点を丁寧に設計することです。

UXを構成する要素「UXハニカム」

UXデザインの考え方を整理し、構成要素を視覚的に示したフレームワークとして、ピーター・モービル氏が提唱した「UXハニカム」をご紹介します。

「UXハニカム」 は、UXを支える7つの要素を体系化した構造モデルです。ユーザーが感じる価値（Valuable）を中心に、UXを構成する6つの要素が配置されています。

・Webサイトにおける6つの要素

1）Useful：役に立つ
情報やサービスがユーザーのニーズを満たしている。

2）Usable：使いやすい
ストレスを感じることなく直感的に操作可能。

3）Findable：探しやすい・見つけやすい
迷うことなくコンテンツにたどり着けるナビゲーション。
検索エンジンからも見つけやすい設計。

4）Credible：信頼できる
情報の信ぴょう性・信頼性がある。

5）Accessible：アクセスしやすい
障害を持つユーザーや高齢者なども含めて、誰もが利用しやすいWebサイトになっている。

6）Desirable：好ましい
好感が持てるデザイン設計やブランドイメージ。

この6つの要素がバランスよく満たされていることで、ユーザーにとって価値のある体験を生み出すWebサイトになるのです。

WebサイトにおいてUXデザインが重要な理由

ユーザーが企業やブランドと接触するチャネルは、Webサイト・SNS・アプリ・実店舗など多様化しています。

複数のタッチポイントにおいて、ユーザーが一貫した体験を得られるようにWebサイトを設計する必要があります。

適切なUXデザインをもとに設計したWebサイトでは、以下の効果が期待できます。

①CV率（コンバージョン率）の改善
ユーザーが迷わず行動できる導線設計やデザインにより、商品購入や問い合わせなどのコンバージョン率が向上する。

②離脱率の低下
使いにくいサイトはすぐに離脱されるが、UXを適切に設計することで、滞在時間が延び、ページの閲覧数も増加する。

③ SEOへの影響
Googleはユーザー体験を重視しており、ページの読み込み速度や視認性など、UXが良いサイトは検索順位にも良い影響がある。

④ブランド価値の向上
一貫したデザインやメッセージは、ブランドイメージを強化し、企業やサービスに対する信頼感が高まる。

このように、よりよいUXを提供することは、CV率（コンバージョン率）やROI（費用対効果）の改善、さらには顧客ロイヤリティを高めることにもつながります。

よくある失敗パターン：UI先行型のWebサイトリニューアル

事業会社がWebサイトをリニューアルする際、よくある失敗パターンとして挙げられるのが、「UI先行型リニューアル」です。

・失敗パターン
【その1】
ビジュアルの刷新で当初は満足していたが、離脱率やCV率などの指標に改善が見られない。

【その2】
社内要望の寄せ集めの反映に留まり、ユーザーにとっては不便でストレスを感じるものになってしまった。

【その3】
なんとなく「デザインが古いように感じる」というだけで闇雲にリニューアルを進めてしまった。

【その4】
新しい機能を実装したが、ユーザーに受け入れられず使ってもらえない。

・失敗の原因は、UXの軽視とリサーチ不足
なぜこのようなことが起きてしまうのでしょうか？

その原因は、UXを十分に考慮していない点と、リサーチが不足している点に他なりません。戦略を立てることなく、思いつきでWebサイトを作ってしまっていると言えるでしょう。

WebサイトリニューアルにおけるUXデザインの基本プロセス

Webサイトリニューアルにおいて、UXデザインの基本プロセスとなる「UXの5段階モデル」についてご紹介します。

UXの5段階モデル

UXの5段階モデルとは、ジェシー・ジェームズ・ギャレット氏が提唱したUXを設計するためのフレームワークです。フレームワークは、5つの段階で構成されています。

戦略（Strategy）：ビジネス・顧客ニーズの理解・目的、ゴールの設定
要件（Scope）：コンテンツ・機能要件の定義
構造（Structure）：全体構造と導線の設計
骨格（Skeleton）：情報設計・レイアウト設計
表層（Surface）：ビジュアル、グラフィック、モーションの設計・実装

上記5段階を戦略→要件→構造→骨格→表層の順番で進めていきます。

この順番からもわかるように、UXの5段階モデルの「表層」にあたるUI （ビジュアルデザイン）は、最後の工程です。UIの制作に進む前に、最初の「戦略」段階でしっかりと戦略設計をする必要があります。

たとえUIが優れていたとしても、戦略設計が曖昧なままでは課題の本質を解決することはできません。

UXの5段階モデルにおける戦略設計

戦略設計はすべての土台となるための最も重要なプロセスです。

マーケティングリサーチで現状の課題やターゲット、競合について明らかにしたうえで戦術を立てることがUXデザインの改善につながります。

・Webサイトリニューアルにおいて最初にやるべきこと
Webサイトをリニューアルするにあたって、最初にやるべきことは以下の3点です。

・現状を把握し、ターゲットを明確にする。
・競合と比較する。
・あるべき姿と実現したいゴールを明確にする。

上記3点を行うために、3C分析を行います。

3C分析とは、「顧客（Customer）」「競合（Competitor）」「自社（Company）」の3要素を軸にして市場環境を分析するフレームワークです。

顧客（Customer）分析
・現在のWebサイトの主な利用者像を明確にする。
・ユーザーが抱えている問題と課題の把握をする。
・ユーザビリティにおける課題を把握する。

競合（Competitor）分析
・競合はどこかを明確にする。
・競合で実施しているマーケティング施策を把握する。
・競合の強み/弱みを把握する。
・競合の市場シェアを把握する。

自社（Company）分析
・自社サイトの強みと弱みを把握する。
・自社のブランドイメージやユーザーからの印象を把握する。
・自社で実施しているマーケティング施策の整理を行う。
・自社の強み/弱みを把握する。
・自社が届けようとしている体験価値は何かを見出す。

3C分析を行うには、マーケティングリサーチが必要です。

マーケティングリサーチには様々な手法があり、業界特性に応じたアプローチが求められます。詳しくはぜひこちらをご覧ください。

WebサイトのUX改善で行うべきリサーチ手法

トランスコスモスには、マーケティングリサーチやUXデザインの専門家が在籍しています。幅広い業界での豊富な知識を活かして、これまで多くのお客様企業のUX改善をサポートしてきました。

ここでは、その具体的な事例とともにUX改善で行うべきリサーチ手法をご紹介します。

Webサイトの課題を抽出する手法①ヒューリスティック分析

Webサイトの構造的な問題や設計上の改善点を専門的な視点から抽出する場合は、ヒューリスティック分析が有効です。UXハニカムの考え方をベースにWebの専門家が多角的に分析し、Webサイトを評価します。そうすることで、ユーザー視点では気づきにくい潜在的な課題を体系的に洗い出すことができます。

トランスコスモスは株式会社リオと連携し、UXハニカムにおける6つの評価基準をもとにWebサイトの評価を行います。

評価結果レポートの一例：株式会社リオ様「DESIGN α」

明らかになった課題を整理・分析するため、ヒューリスティック分析で抽出した問題点と改善策をマッピングします。これにより、改善の方向性を把握できるようになります。

次に、問題の種別や改修の難易度に応じて優先度を設定する「プロブレムマトリクス」を活用します。そうすることで、着手すべき課題の順序を明確にすることができます。

プロブレムマトリクスの一例：株式会社リオ様「DESIGN α」

・ファッション業界 大手企業様：ECサイトのケース

ファッション業界の大手企業様が運営するECサイトにおいて、ヒューリスティック分析を行ったところ、特に店舗検索ページで以下のような課題が見つかりました。

上記3点の他、ヒューリスティック分析によって合計60個以上の課題が明らかになりました。

明らかになった課題については、改善の順序と方法を整理したうえでプロブレムマトリクスに落とし込み、課題解決に向けた具体的なアクションを明確化することができました。
また、改善に向けてプロジェクト全体の足並みを揃えることにもつながりました。

Webサイトの課題を抽出する手法②ユーザビリティテスト

Webサイトの操作性やユーザーの行動にもとづく具体的な課題を把握するには、ユーザビリティテストが有効です。

実際のユーザー操作を観察することで、ナビゲーションの迷いや入力フォームの使いづらさといった不便を感じている点を具体的に把握できます。

このように、具体的な課題を発見しやすいことがユーザビリティテストの強みです。

ユーザビリティテストを実施して明らかになった課題の改善点を整理し、優先順位をつけることで、課題解決に向けた次のアクションを明確にすることができるでしょう。

・大手メーカー様：Webサイトのケース

大手メーカー様はWeb戦略の方針を策定する過程において、以下の2点についてすでに把握されていました。

・アクセスログ解析により判明する課題
・ユーザーの行動傾向

しかし、「なぜこのような行動をとるのか」「どの要素がユーザーにネガティブな印象を与えているのか」といった、課題の背景やユーザー行動の動機が可視化できていないことが課題でした。

そこで、スピードとコストの両面を重視し、当社ならではの工夫として自社社員を対象にユーザビリティテストを実施しました。実際のユーザーに限りなく近い操作環境を再現する必要があるため、以下のステップで進めました。

STEP1
事前にアンケートを実施し、被験者に偏りがないようにスクリーニングを行う。

STEP2
被験者の特性をペルソナシートに落とし込み、事前インタビューを行うことでユーザー像を明確化。

STEP3
ユーザビリティテストを実施。事前に作成した調査項目書に沿って、被験者がWebサイトを閲覧・操作。
被験者には思考発話※しながら閲覧・操作をするよう依頼。思考発話を聞きながら、被験者の手元の動きや操作手順などを並行して目視確認し、インタビューも交えながらテストを進行。
※思考発話：考えたことや思っていることを独り言のように口に出すこと

STEP4
ユーザービリティテストから得た課題をプロブレムマトリクスを用いて整理。ユーザー視点での問題（有効性・効率性・満足度の観点）と問題の発生頻度を評価軸とし、優先度を設定。

STEP5
具体的な改善策を明示。

STEP6
改善策を具現化したコンセプトデザインの提案。

ユーザビリティテストを通じて、使いにくさなどの「機能面」と、使っていて不安やストレスを感じるといった「感情面」の両方の課題を把握することができました。

これにより、Webサイトをより使いやすく、より心地よくするための具体的な改善点が明確になりました。

UX改善へのロードマップ

これまで解説してきたように、UXデザインを改善するには適切なリサーチをしたうえで、その結果をもとに戦略設計を行うことが重要です。

UXの5段階モデルに沿って、「戦略」から「表層」まで一貫性を保ちながらWebサイト制作を進めること。それこそが、UXデザインの改善に効果を発揮します。

ただし、Webサイトはリニューアルして終わりではありません。継続的にPDCAサイクルを回しながら改善を重ねていくことが大切です。

トランスコスモスは「具体的にどうすべきか」まで丁寧にサポート

一般的な調査会社では、調査からレポート作成までが主な対応範囲でしょう。

しかし、トランスコスモスではその先の改善施策の立案や、理想的なUXデザインに至るまでのプロセスを一貫してサポートします。

マーケティングリサーチやUXデザインの専門家が、幅広い業界にわたる豊富な知見と経験を活かしながら対応。調査結果をもとに、具体的な改善提案から実装支援までワンストップで伴走します。

まとめ

UXの基本的な概念から、UXデザインの基本プロセス、WebサイトにおけるUX改善へのアプローチ、さらにUX改善へのロードマップまでを解説しました。“とりあえずUI改善“から脱却するには、以下のポイントが重要です。

・UXとUIの違いを理解する。UXは「ユーザー体験」であり、UIはサービス・プロダクトとユーザーをつなぐ「接点」。

・UXを構成する要素「UXハニカム」を踏まえたうえで、「UXの5段階モデル」に沿ったプロセスで開発を進める。その中でも戦略設計が最も重要。

・戦略設計をするにあたっては、マーケティングリサーチによる現状の課題やターゲット、競合について明らかにする必要がある。そのうえで戦術を立てることが、適切なUX改善につながる。

トランスコスモスは製造・金融・不動産・観光・飲食・その他サービス業など、あらゆる業界に精通し、お客様企業のDX（デジタルトランスフォーメーション）パートナーとして、最適なUX改善を多数お任せいただいております。

UX改善でお困りの場合は、ぜひトランスコスモスにご相談ください。

関連コンテンツ

業務システムにおけるUIUX改善

トランスコスモスでは、WebサイトやアプリのUIUX改善に加え、企業や組織が生産・販売・在庫管理などの主要業務を効率的かつ効果的に遂行するための業務システムに対しても、UIUX改善を行っています。

コールセンター業務の効率化を目的としたコールトラッキングシステムのリニューアルや、工事物件管理ポータルサイトの改善など、実績が豊富。詳しくは以下のページをご覧ください。

※本記事は株式会社リオ様の許可のもと掲載しています