Webサイト制作の成功確率を高める「UXデザイン」とは?

エンジニアはモノづくりが好きな人が多いですし実際に楽しいものです。

ただ私自身がそうだったのですが、つくり手側の都合やスケジュールの都合で設計している時が正直ありました。
しかしエンドユーザーに広く使ってもらえるプロダクトを作るためにはユーザーの理解が欠かせません。

そこで今回のテーマとなる「UXデザイン」の工程が重要になってきます。

UXデザインとは?

デザインというとビジュアル的な工程をイメージされる方が多いかと思いますが、UXデザインとはUX(ユーザー体験)を設計=デザインすることを指します。
今回は「ペルソナ」「構造化シナリオ法」「プロトタイピング」「ユーザービリティテスト」について解説しますが、いずれもユーザー(利用者)を深く理解することが必要です。

Webでは全世界のユーザーに使ってもらえるのがメリットとはいえ、どのサービスでも使ってもらいたいターゲット層は存在しますよね。
そのターゲットとして獲得したい人物像と、とるであろう行動をあらかじめ分析しておくことは、ユーザーに寄り添った改善施策や設計を考えるきっかけになりますし、ユーザーについて言語化しておくということは制作側の関係者間で共通の認識がもてるようになるため、UX(ユーザー体験)を意識した企業文化が根付いていく事が期待できます。

ペルソナとシナリオでユーザー理解を深める

ワイヤーフレームで画面設計する前に、まずはどのようなユーザーがWebサイトを利用するのか人物像(ペルソナ)を絞り込み、その人物にとってのWebサイトの使い方(シナリオ)を考える必要があります。
ペルソナとはWebサイトを利用する典型的なユーザーの人物像を具体的に書き表したものです。

ペルソナ無しにはUXデザインは出来ない、ペルソナ無しにWebサイトは作れない、と言っても過言ではないくらい重要です。

続いてシナリオの検討ですが「構造化シナリオ法」という方法では「価値のシナリオ」「行動のシナリオ」「操作のシナリオ」の順番で記述していく事で、設計者側の先入観にとらわれないユーザー体験が設計できるようになります。それぞれ記述する内容は下記になります。

【価値のシナリオ】ペルソナの本質的な欲求に注目し、それを実現する最小限のシナリオを記述
【行動のシナリオ】価値のシナリオをもとにユーザーがどんな行動をしていくのか肉付けするよう記述
【操作のシナリオ】Webサイトの画面名やボタン名をあげながら行動のシナリオに伴う具体的な操作を記述

最終的に仕上がったシナリオは第三者の目をとおし、率直な指摘をもらいつつ客観性を保つようにしましょう。

プロトタイピングで設計の出戻りを防ぐ

次にプロトタイピングではいきなり完成版をつくることを目指さず、最小限でプロダクトの試作版(プロトタイプ)を作り、関係者の理解と合意を得ながら徐々にアップデートしていきます。
もっとも簡単な方法としては手書きでワイヤーフレームを作成して、それをブラウザに見立てて操作していく「オズの魔法使い」と呼ばれるユーザビリティ評価を実施することです。

ただクライアントワークの場合ですと、手書きのワイヤーフレームは提示しずらいと思いますので、プロトタイプを作成できるツール「Prott」もご紹介します。
プロトタイピングツールは様々あり「figma」や「InVision」といった海外製品が有名ですが、「Prott」は国産のため日本語で使えるのがメリットです。
機能は制限されますが無料で使えるプランもありますので、これからUXデザインを始める方にはオススメです。

プロトタイピングは一見手間が増えるように感じますが、完成版とはほど遠いプロトタイプであっても、実際に作ってみると分かることは非常に多いですし、やっておくと後工程への出戻りが減りますので、長期間かけて作るプロダクトは特にやっておくことをオススメします。

ユーザビリティテストで起こりうる問題を発見

ユーザビリティテストではWebサイトのリニューアルの必要性や課題を分析するのに実施します。
想定顧客に近い属性のユーザー(被験者)を呼び、実際にWebサイトを使うところを観察して課題を洗い出していきます。
ここで重要なのが「使う人」「状況」「タスク」を設定することで、どれか一つでも異なってしまうと、ユーザビリティの良し悪しが変わってきます。

「使う人」「状況」「タスク」の例※ほぼ私です笑

【使う人】外で子どもと遊ぶ時間がなかなか作れない40歳男性
【状況】ネットニュースで運動能力が著しく発達するゴールデンエイジ期を知る
【タスク】「スポーツ 習い事」でネット検索して周辺地域の習い事を探す

予算上、ユーザーを呼ぶことができない場合は自身で実施する手法もあります。
上記のような使う人、状況、タスクが設定できていれば、使う人になりきってWebサイトを操作することでターゲットユーザーに起こりそうな問題を発見できます。

このようにみずからが評価する方法を「専門家評価」とよび、ユーザーになりきって評価する方法を「認知的ウォークスルー」といいます。
ただし、評価する人と実際のユーザーのスキルや文化が大きく異なる場合は、実際のユーザーに近い人を呼ぶようにしましょう。

まとめ

UXデザインが上手くできてくると、ビジネスとしての離陸が見えてきますし、運用保守の効率化などエンジニアリングの側面からも検討すべき課題がきっと出てくることでしょう。
アーキテクチャから考え直さないといけない場合もあるかと思いますが、そうなったら今度はエンジニアとして成長できるチャンスです。
今回ご紹介したステップで作ることによって成功確率を高めることができます。
まずはユーザーに愛されるWebサイトを作るために、UXデザインから取り組まれてはいかがでしょうか(^^)