突然ですが、皆さんがWebページを制作する目的は何ですか？
商品を買ってもらうためでしょうか？資料を請求してもらうためでしょうか？
どんな方でも、何かユーザーにこうしてほしいというゴールがあってWebサイトを作っているのではないでしょうか？
Webページ上で、ユーザーを思い通りにゴールまで誘導するために欠かせない概念の1つに「UX/UI」という概念があります。
「UI」「UX」という言葉を聞いたことはあるけどよく分からない！という方のために、それぞれの違いや設計のポイントを解説していきます！
目次
UIとUXの違い
UIとは、User Interface（ユーザーインターフェース）の略で、ユーザーがPCとやり取りをする際の入力や表示方法の仕組みのことを指します。
一方UXとは、User Experience（ユーザーエクスペリエンス）の略で、UIによって得られるユーザー体験のことを指します。
これだけでは分かりにくいので、UIとUXの具体的な例をそれぞれ挙げながら違いを解説していきます。
UIは、ユーザーとシステムの橋渡しとしての接点
UIは、ユーザーとコンピューターの間の橋渡しをするための接点と捉えると分かりやすいのではないでしょうか。
例えばパソコンでは、クリックやドラッグなどで操作を可能にするOSやソフトウェアがUIです。また、クリックやテキスト入力をするためのマウスとキーボードもUIにあたります。
UXとは、ユーザーの感情まで含めた体験
UXとは、UIを通してシステムに触れた結果、ユーザーが感じた感情や体験のことを指します。例えば、あるホームページを訪れたユーザーは、
・文字が読みやすい
・デザインがキレイ
・どこから購入すればいいのか分かりにくい
・読み込み速度が遅くイライラする
といった感情を抱くことがあります。このように、システムを利用する中で、ユーザーが感じたことの全てがUXとされます。
つまり、ユーザーによい体験（UX)をしてもらうためには、優れたUIが必要ということになります。そのため、UIとUXは別のものを指していますが、お互いに密接に関わりあっているということですね。
では、優れたUIとはどのようにデザインをすれば良いのでしょうか。その鍵は、ユーザーにどんな体験をしてほしいのか、UXの設計にあります。
UXデザインからUIデザインを考えよう
UIは、UXという大きな括りの中の1つの手法でしかありません。そのため、UIの部分しか考えずにデザインをすると、ユーザーの感情を無視した設計になってしまいます。まずは、どんなUXをユーザーに感じてほしいのかを明確にしてからUIを設計しましょう。
たとえば、Webページ制作であれば、「どんなUXを感じてほしいのか」ということには、「商品購入」「問い合わせ」といったコンバージョンになる行動をとってほしいということも含まれるでしょう。
ユーザーにコンバージョンしたいという気持ちになってもらうためには、そもそもユーザーはどのような気持ちでWebページを訪れたのかということも考えなくてはなりません。コンバージョンというゴールに対して、サイト訪問時のユーザーの気持ちとどのような乖離があるかが把握できないと、ゴールまで到達させるための道筋が引けませんよね。
このように、ユーザーにとって欲しい行動から逆算されたデザインがUXデザインとなります。では、UXやUIはどのように高めていけばよいのでしょうか。
UI、UXを高めるために必要なこと
Webページにおいて、ユーザーに思い通りの行動を取ってもらうためには、優れたUIとUXが必要だということが分かりました。次は、UIやUXを高めるためのポイントを解説していきます。
ユーザーにどうしてほしいかから逆算する
まずは、サイト内でどんな行動をしてほしいのか、サイトを見た結果、ユーザーにどうしてほしいのかを明確にしましょう。お問い合わせの電話をかけるのか、予約メールの送信なのか、商品購入なのか、サイト回遊なのか･･･といったように、サイトにおけるゴールは色々あります。
このゴールがぼやけてしまっていると、ゴールに到達させるための設計もぼやけてしまい、思った通りの結果を得ることができません。
ユーザーはどんな人か、ペルソナ像を設定する
UI、UXを高めるためには、ユーザー目線でデザインを設計することが大切です。ユーザー目線になるには、その人がどんな人なのかといったペルソナ像を設定することが必要です。年齢や性別、家族構成や趣味嗜好など、できるだけ細かくペルソナ像を捉えていきましょう。
ペルソナの設定や、ペルソナマーケティングについてはこちらから↓
ペルソナはどんな気持ちか考える
ペルソナはどんな人か？目の前にその人が見えてくるくらい、明確に設定ができたでしょうか？次は、そのペルソナは、どんな気持ちでサイトを訪れたのかを考えてみましょう。
ペルソナは、普段どんな情報を信じて行動をしていますか？どんなキーワードで検索をしてあなたのサイトを見つけたのでしょうか？どんなサイトを見てからあなたのサイトに辿り着いたのでしょうか？
普段の行動やサイトに至るまでの経緯から、ペルソナが「どういうサイトの使い方をするのか」「何をしたいのか」を、自分がその立場に立っていたらどうするかという視点から考えて見ましょう。
ペルソナにとっての使いやすさとは何か考える
ここまでで考えてきた、誘導したいゴール、ペルソナの属性や気持ちをふまえて初めて、どんなシステムがユーザーにとって使いやすいのかというUIの部分を設計することができます。
例えば、
「他のところをクリックして迷わないように、ボタンは購入ボタンだけ設置しよう」
「ユーザーはこの情報を知りたくて検索しているから、このコンテンツを目立たせよう」
といったような設計ができてきます。
まとめ
UIとUXの意味や、それぞれの違いは理解できたでしょうか？
このように、ユーザーの気持ちに寄り添って考えることが、UI、UXを高めるコツです。そして、UI、UXを高めることで、サイトの中でユーザーに思い通りの行動を取ってもらえるようになります。
ペルソナにどうなってほしいか、ペルソナはどんな気持ちでWebサイトを閲覧しているのかを定め、ユーザーをゴールへと誘導できるデザインを設計していきましょう！
また、ユーザーをゴールへと導くためのデザインには、コンセプトがとても重要です。
デザインコンセプトの重要性について、詳しくはこちらから↓
デジタルアスリート株式会社
ウェビナーマーケティング部 プロデューサー
新卒でWebコンサルタントとして入社し、約1年後に入社前からの夢だったコピーライターに転身。
現在はコピーライティング、Web制作ディレクション、コンテンツマーケティングをメインとして担当し、Webマーケティング全体を支援するプロデューサーとして活動中。
休日はひたすら漫画を読んでいるか、1人カラオケか、Twitterをやっています。
Twitterが好きすぎて、社内のTwitterイベントを企画してしまいました。
言葉の可能性を信じ、「お客様のサービスの価値が最大限伝わるライティング」を追求し続けています。
コメント