デザイン初心者必見!ユーザーを思い通りに誘導できるUI・UX設計の基本

突然ですが、皆さんが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広告でコンバージョン数を最大化する7つの極意をプレゼント!

「Web広告マーケティング大全」
(無料・PDFでのダウンロード)

2018年9月発行の書籍「コンバージョンを最適化する7つの極意」の元となった、電子書籍「Webマーケティング大全」を無料でダウンロードいただけます。
(PDF・全161ページ)

無料でPDFファイルをダウンロードする
(全161ページ)
Web公告マーケティング大全
マーケ脳社長
マーケ脳社長

リスマガ編集長の長橋真吾公式twitterにて最新情報配信中!

Web広告の最新情報、成功事例/Webマーケティング組織の作り方/サイト設計、ランディングページ構築/コンテンツマーケティング全般/セミナー集客、セミナー販売/ビジネスモデル設計/ビジネスシーンの悩み解消など、リスマガでは取り扱えない、現場の最前線情報をお送りしています。

登録QRコード

QRコード
現場の最前線情報を配信中、長橋真吾twitterをフォローする

登録QRコード

QRコード

関連記事一覧