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

  • 2018.7.3
  • 2,710 Views

突然ですが、皆さんが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サイトを閲覧しているのかを定め、ユーザーをゴールへと誘導できるデザインを設計していきましょう!

また、ユーザーをゴールへと導くためのデザインには、コンセプトがとても重要です。
デザインコンセプトの重要性について、詳しくはこちらから↓

デジタルマーケティングの知見と人脈を深めるコミュニティ

デジタルアスリートCAMPは、各社のデジタルマーケティングに関わる人や経営者、幹部の方が集まり最新の知識や人的交流を促進するコミュニティです。最新のデジタルマーケティングの情報提供や対談、勉強会を通して知見や人脈を深め、実践力を高める事が出来ます。

  • 最新のデジタルマーケティングナレッジの公開
  • 専門家やサービスのレビューと紹介
  • リアル&オンラインの参加者同士の交流

コメント

カテゴリー別記事

デザイン

成約率を高め売上につなげる

Webデザインの基本から最新のノウハウまで公開

無料資料ダウンロード

 

1,800社以上の支援実績に裏づけされた
『LPO大全』(実行手順シートつき)

1,800社を支援する中で気づいた『LPO』の重要性と正しい手順・ノウハウを公開します。

資料ダウンロード

 

【リスマガ限定】出版したばかりの
代表長橋の書籍『第一章』を無料プレゼント!
DX時代のデジタルマーケティング攻略本

10年間の中小企業支援実績から導くノウハウ、最新の対応策をまとめました。

資料ダウンロード

 

YouTube動画マーケティングがわかる
企業チャンネル最新攻略法

YouTubeで企業チャンネルが成功するために実践した施策を公開します。

資料ダウンロード

 

労務費・外注費・経費を削減して売上アップ
専門チームを外部で育てるラボ型のWebチーム

経費を削減して売り上げアップする方法を無料で公開!

資料ダウンロード

MAIL MAGAZINE

               

最新のマーケティング情報をお届け。デジタルアスリートのメルマガでしか手に入らない情報を受け取りましょう。

岡野歩美

デジタルアスリート株式会社 コピーライター 最終面接で代表陣を前に自作ポエムを披露したところ、度胸を買われ新卒で株式会社リスティングプラス(現・デジタルアスリート株式会社)に入社。リスティング広告のコンサルタントを経験した後、セールスコピーライターに転身。現在はオウンドメディアのディレクター兼SEOライターとして活躍中。休日は専らTwitterと漫画アプリの閲覧に勤しんでいる。

記事一覧を見る

X

潜在層を熱狂的ファンに
引上げ、LTVを高める!
「5つの顧客育成フロー」

2025年には3兆円市場に到達するWeb広告市場。顧客の獲得競争が激しくなる中で、一部の企業がすでに構築している“「見込み客」が自動で生まれ続ける5つの仕組み"について解説しました。

無料でPDFファイルをダウンロードする