良きユーザ体験を実現する『ユーザエクスペリエンス(UX)』とウェブデザイン|ウェブ部

良きユーザ体験を実現する『ユーザエクスペリエンス(UX)』とウェブデザイン

Webサイト構築
UXアイキャッチ

デザインとは、ただ見映えを整えるだけのことを指すわけではありません。「わかりやすさ」「使いやすさ」「美しさ」をバランスよく構築することです。それらを構築するのに重要な考え方の1つとしてユーザ体験(以下UX)があります。

この記事では、UXの概念と、ウェブ制作において多用される「UXデザイン」を実現する上で重要なステップについて解説します。

UXデザインとは

■「UX」とは何か?「UXデザイン」とは何か?

「UX」とは、「ユーザエクスペリエンス」の略です。主に、プロダクト・サービスを使用する際の、ユーザの印象や体験をいいます。
では「良いユーザ体験」とは、どういったことを指すでしょうか?
例えば、『高級レストラン』の場合は「厳選された食材」や「高級レストランという空間で得られる非日常感」、それらが作り出す特別な体験をすることを指します。また、『ファストフード店』の場合は、「短時間で簡単な食事をする」ことを指します。
「食事をする場所」という点では「高級レストラン」も「ファストフード店」も同じカテゴリーに分類できます。しかし、「どういう体験をしたいか」という視点で見ると、「食事をする場所」でも、まったく違う空間(場所)となります。

このような「どういう体験をしたいか」という考えを設計・企画(デザイン)することを「UXデザイン」と言います。
「誰」が「どんな体験」をすることで、「どういった価値」を得るのか?UXデザインを工夫することで新たな顧客価値を生み出し、そこで得られた顧客満足が次世代のブランドを形成していくことにつながると考えます。

UXに関してはこちらの記事にも詳しく記載があります。

UX評価と定量分析、併用するアクセス解析のススメ。

■「UI」とは何か?「UIデザイン」とは何か?

「UX」と似た言葉で「UI」という言葉があります。この2つの言葉はよく混同されます。「UX」を知る上で「UI」は重要な概念ですので、「UI」についても簡単に説明します。

「UI」とは、「ユーザインターフェース」のことで、プロダクトそのものや製品外観・サービスなど、ユーザの視覚に触れるすべての情報のことです。例えば、ウェブサイトにおけるUIとは、デバイスに表示されるナビゲーションや、クリックするためのボタン、入力フォームなど、サイト上で必要な要素やパーツのことを指します。つまり、機能やコンテンツをいかに「便利」で「わかりやすく」、そして「正確」に操作できる機能を提供できるか?がUIを充実させる重要なポイントです。
ユーザがどういった目的・経緯で、そのプロダクトやサービスを使うか?全体的なアプローチが「UXデザイン」であるのに対して、その中で実際に触れる部分を設計するのが「UIデザイン」です。

■UXデザインとUIデザインの関連性

UIデザインを意識して作られたパーツの使い勝手や、欲しい情報へのアクセス性などによって抱く体験・感情がUXです。どんなに使いやすくデザインされたUIでも、時と場合を考慮しなければユーザにとっては良い体験にはなりません。
UIデザインはUXデザインのクオリティを左右する重要な要素のひとつです。

ウェブにおけるUXデザインとは

ウェブサイトにおけるUXデザインを考える前に、まず、ウェブにおけるUXデザインの要素を理解しておきましょう。
最良のUXデザインを実現するためには、7つの要素が必要であるとされています。情報アーキテクチャ論の先駆者であるピーター・モービル氏が「Semantic Studios」の中で、このように公開しています。

(1)Useful(役に立つ・有用)
(2)Usable(使いやすい・便利)
(3)Findable(探しやすい・見つけやすい)
(4)Credible(信用できる・信頼)
(5)Accessible(アクセスしやすい)
(6)Desirable(好ましい)
(7)Valuable(価値がある)

次に、①~⑦について、解説します。

※参照:User Experience Design(Semantic Studios):http://semanticstudios.com/user_experience_design/

UXハニカム構造

■良いデザインの定義 -7つのハニカム構造について

(1)Useful(役に立つ・有用)

サイトへ訪問するユーザのサービスについて「もっと知りたい」「パンフレットを資料請求したい」といったニーズに応えられているか?

<具体例>
サイトへ訪問する新規ユーザ数は増えているが、(キャンペーンのような)ユーザが満足する情報や利益が少ないため、サイトへのリピート率が低くなっている。

<改善案>
市場調査、ユーザアンケート、アクセス分析、検索キーワード分析、競合分析を主としたターゲットとするユーザニーズの把握。

(2)Usable(使いやすい・便利)

ユーザがストレスを感じることなく価値ある体験ができているか?また、ユーザビリティーの高く使い勝手が良いサイトであるか?

<具体例>
商品画像やバナーが多数あるとユーザの購買意欲をかきたてる効果があるが、デザインや本文構造にメリハリがないため、どういったコンテンツ内容か?が理解できずサイトから離脱してしまう。

<改善案>
直感的UI設計。ユーザテスト・ヒューリスティック分析による課題把握。

(3)Findable(探しやすい・見つけやすい)

ユーザが閲覧したいコンテンツへスムーズに誘導できているか?また、検索エンジンで見つけやすいか?

<具体例>
コンテンツやレイアウト、カテゴリーが増えるにつれて乱雑になり、「どこ」に「どのような」情報があるのか?すぐに理解できずコンバージョンにつながらない。

<改善案>
ユーザテスト・ヒューリスティック分析による課題把握。カテゴリーや階層を整理した構造設計の見直し。SEO対策。サイト内検索の実装と正確な情報提供。

(4)Credible(信用できる・信頼)

ユーザがサイトにある情報を信憑性が高いと信じ、安心してサービスを利用できているか?

<具体例>
企業情報・プライバシーポリシーなどが未記載で信用できない。

<改善案>
企業情報などの情報発信元やサイトポリシー・プライバシーポリシーの明記。フォームのSSL対応。

(5)Accessible(アクセスしやすい)

「誰」でも「どんな環境」でもアクセスできる状態であるか?

<具体例>
テキストが小さく、コントラストが低く読みにくいので、閲覧時にストレスを感じる。通信回線が弱くWebサイトが表示できない。スマホやタブレットだとサイトを閲覧できない。

<改善案>
色弱の方に配慮したカラーユニバーサルデザイン。閲覧補助機能の実装(音声自動読み上げなど)。文字サイズ・背景色変更機能などの実装。

(6)Desirable(好ましい)

ユーザがポジティブな興味や関心をもてるブランドイメージ、アイデンティティが形成されているか?

<具体例>
ユーザが不快に思う配色やデザインなので興味や関心が持てずにいる。また、ブランドイメージから外れたコンテンツ内容なので好感がもてない。

<改善案>
ユーザアンケートの実施。ブランドイメージが伝わるデザイン設計。ユーザが好感のもてるためのエモーショナルデザイン。

(7)Valuable(価値がある)

ユーザにとって価値あるコンテンツやサービスを提供できているか?

<具体例>
「安心なセキュリティ」「シンプルで見やすいデザイン」「利用性ある情報が欲しい」「広告バナーの撤去」など、ユーザの全体的要望がコンテンツ・サービスに反映されていない。

<改善案>
より価値を高めるためのゴール設定や構造設計、コンテンツやデザイン設計などの見直しと改善。

ウェブでUXデザインを考える

では、どのようにしてウェブサイトでUXデザインを進めていけばよいでしょうか?
大切なことは「ゴールを明確にする」と「ユーザになりきる」の2点に尽きます。
ユーザがウェブサイトを見たとき、「どんなアクションをするのか?」「どういったことをしたいのか?求めているのか?」を想像し、ユーザの興味・関心や家族構成、リテラシーなどを加味した上で、実際に自分がその立場だったらどうするのか?をユーザになりきってデザインします。

よりユーザに寄り添ったカタチで表現するためには、次のようなデザインプロセスが求められます。

■ユーザになりきってペルソナを作る

具体的ユーザ像を可視化することはUXデザインにおいて大事な要素です。その中で「ペルソナ」が果たす役割は、とても大きいです。
「ペルソナ」とは、プロダクト・サービスの典型的なターゲットとなるユーザ像のことです。実在するかのような詳細なプロフィールを盛り込み、ユーザがどういう行動をするかを予測することで、活きたデータとして様々なシチュエーションに利用できます。
例えば、ターゲットを「バリバリ働く30代前半女性」としても、それだけでイメージする人物像は多岐に渡ります。性格や趣味などを盛り込んだ詳しいプロフィールを作ることで、チーム間からクライアントまで、ユーザイメージを統一できます。そして、サイト導線を考える上でも、人物像を考慮した説得力のあるデザイン設計ができるようになります。

○ペルソナシートの一例ペルソナシート例

ペルソナを作成するには、まず一般公開されている情報や、顧客と接点が多い営業担当者などから話を聞き情報を集めます。それらの情報から「顔写真」「名前」「年齢」「職業」「家族構成」「趣味」などの基本的な情報から、「最終的なゴール」「テクノロジーに対するリテラシー」「フラストレーションに思っていること」など、ペルソナを定義する項目別にペルソナシートに書き出します。その際注意する点は、人物の行動パターンに目を向けることよりも、その行動に至るまでの思考過程(その行動を行った動機や理由)について考えることです。
ペルソナを定義すると、ユーザのアクションや心情に対して理解を深め、ターゲットユーザが「どういう行動」や「考え」を経て、ウェブサイトを利用し行動するのか?ユーザの「ストーリー」を考えることができます。

■ゴールを明確にするカスタマージャーニー

ユーザが購入など目的の達成に至るプロセスを「カスタマージャーニー」といいます。ユーザに寄り添い、満足度を高める方法を検討するためによく使われており、近年注目されています。

ペルソナを作成し、ユーザが「どのように商品やブランドに関心を持ち、購入意欲を喚起されて購買や登録などに至るのか」、ユーザの行動や心理を時系列的に可視化したものを「カスタマージャーニーマップ」と言います。ユーザの属性や行動特性、その時々の感情など、ゴールに至る一連の行動を「見える化」するツールといえます。

ユーザの行動プロセスを明確にすることで、プロセスごとにユーザにあったアプローチ方法を考えることができます。「カスタマージャーニーマップ」では、「体験」が「期待値」を上回る状態をキープすることがとても重要です。

そして、「カスタマージャーニーマップ」を作成することで、ユーザの利用体験を分析し、課題や問題点を洗い出し可視化することができます。

▼こちらのページにカスタマージャーニーマップについて詳しく解説しております。

どう作る?どう使う?カスタマージャーニー

まとめ

UXというワード自体は、日々進化を続けており、2~3年後には違うものに変わっているかもしれません。しかしプロダクトを通じてどんな体験や経験を得られるか?つまり、UXを目的やゴールにすること自体は、クリエイティブに関わる限り変わらないでしょう。
ウェブデザインも同じで、「ユーザ視点」をもって、企画立案から構造・コンテンツ・デザイン設計などすべてにおいてユーザ第一を追及し、具現化することで優れたUXデザインを実現できるでしょう。
ユーザはウェブサイトを利用する上で、「信用」と「安心」を確認できない限り、プロダクトやサービスそのものの素晴らしさを十分に理解することはできません。そのため、まずは「ユーザの安心感・信頼感の確保」ということを考え始めていきましょう。

関連記事