KOBITブログ

優れたUXを設計するための戦略:ペルソナ法とストーリーボード

この記事は約 6分 で読めます。

%e3%83%9a%e3%83%ab%e3%82%bd%e3%83%8a%e3%81%a8%e3%82%b9%e3%83%88%e3%83%bc%e3%83%aa%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89

UI/UXについて理解を深め、優れたUI/UXを持ったWebサイトを構築するためにお送りする本連載。
第一回から第三回までは、UI/UXの基本として、「良いUI/UXとは何か」「UIとUXの違い」「SEOとUI/UXの関係」についてそれぞれご紹介しました。

第四回となる今回からは、実践編として、UXに優れたサイトを実際に作成するための方法についてご紹介していきたいと思います。

「UI/UXを知り、優れたWebサイトを構築する」連載一覧

第一回:良いUI/UXとは何か?Amazonと楽天に見るユーザー体験の違い

第二回:UIとUXはどう違う?UXの基本と、優れたUXを構成する7つの要素

第三回:SEOからSXOへ?SEOとUI/UXの関係

UXを設計するための5つの要素

優れたUX(ユーザーエクスペリエンス)を設計するには、利用される文脈に基づき、利用者の目的が達成されるよう、統制のとれたサイト構築が必要です。

UIとUXはどう違う?UXの基本と、優れたUXを構成する7つの要素では、優れたUXを構成する要素としてUseful(役立つか)、Valuable(価値があるか)などを紹介しましたが、その優れたUXの定義を達成するための実践的な方法として、Jesse James Garrettが定義したユーザーエクスペリエンスの要素をご紹介します。

抽象的なレベルから具体的なレベルまで一貫したサイト構築ができるよう、Jesse James Garrettは図のようにUXを構成する5つの要素を提案しました。

 jesse-james-garrett%e3%81%8c%e5%ae%9a%e7%be%a9%e3%81%97%e3%81%9f%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e3%82%a8%e3%82%af%e3%82%b9%e3%83%9a%e3%83%aa%e3%82%a8%e3%83%b3%e3%82%b9%e3%81%ae%e8%a6%81%e7%b4%a0

参考:https://2016.uxdaystokyo.com/article/five-stages-thet-makeup-the-ux.html

ここからは、この5つの要素を設計するために行うべき施策について順を追って解説していきます。

要素①:戦略

サイトの目的、ユーザーの需要を定義する

UXの良し悪しは文脈によって決まります。企業向けのサイトなのにも関わらず、消費者を想定してUXを設計しても意味がありません。

どのような顧客層がどのような状況でサイトを訪問するのか、そして、そのWebサイトを通して、どのような目的を果たしたいのかを定義します。ユーザーにとっての目的と同様に、自社にとっての目的も重要です。誰に何を提供したいか、どのくらいの予算で成果として何を追求するのかを決定する必要があります。

UXの「戦略」を策定する際に有用な手法が、いくつか提案されてきました。ここでは3つの手法を紹介します。

ペルソナ法

ペルソナとは、製品・サービスにとって最も重要で象徴的なユーザーモデルを意味します(参考:http://smmlab.jp/?p=20107)。あたかも実際に存在するかのように、具体的なプロフィールを作成し、その仮想的なユーザーを満足させられるよう、UXの戦略を立案します。

ペルソナに含まれる要素としては、氏名・年齢・性別・居住地・職業・勤務先・年収・家族構成・生い立ち・身体的特徴・性格的特徴・人生の目標・ライフスタイル・価値観・趣味嗜好・消費行動・メディアとの接し方・商品を購入する理由・購買への関わり方などが挙げられます。

ペルソナを設定するには、根拠となる統計データや過去のサイト訪問データなどが参考になるでしょう。このような具体的な利用者像を設定すると、サイト構築に関わる担当者全員で認識が共有できるというメリットがあります。

%e3%83%9a%e3%83%ab%e3%82%bd%e3%83%8a%e3%81%ae%e4%be%8bペルソナの例

カスタマージャーニーマップ

ユーザーがWebサイト上で目的を達成するまでに、ユーザーとWebサイトは様々な情報をやり取りします。サイトを訪問すればランディングページが提示され、ユーザーは商品を検索したり、資料請求を行ったりする行動を取ります。求めている情報が得られなければ、不満を抱くかもしれません。その後、商品購入に至ったり、ユーザーサポートへ連絡したりするでしょう。

そもそもWebサイトを訪問する前には、どのような行動をとっていたのでしょうか。日常生活で何らかの不足や欲求を抱き、何らかのニーズを感じていたのでしょう。テレビで関連商品を見かけたのかもしれませんし、ソーシャルメディアで同じ悩みを抱えていた友人がアドバイスをくれたのかもしれません。

Webサイトを訪問する前から、Webサイトの中で目的を達成するに至るまでのユーザーが抱く「思考」「感情」、そして「行動」を一連の物語形式で記述するのがカスタマージャーニーマップです。前述のペルソナを用いて、どのような接点でどのような情報を提供すれば、ユーザーの不満を解消し、満足できる体験を与えられるかを定義します。

%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%83%bc%e3%82%b8%e3%83%a3%e3%83%bc%e3%83%8b%e3%83%bc%e3%83%9e%e3%83%83%e3%83%97%e3%81%ae%e4%be%8b%e3%80%82%e3%83%95%e3%83%aa%e3%83%9e%e3%82%a2%e3%83%97%e3%83%aaカスタマージャーニーマップの例。フリマアプリの場合。

ストーリーボード

カスタマージャーニーマップと同様に、ユーザーが抱くであろう感情や行動をまとめるもので、漫画のようにコマ割りをつけるのが特徴です。ユーザーの立場にたって場面ごとに分析を進めるので、簡単に表現が可能です。

また、後の工程で画面デザインを検討する際にも、文脈と画面仕様を結びつけて検討できるため、使い勝手が良い資料となります。

%e3%82%b9%e3%83%88%e3%83%bc%e3%83%aa%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89%e3%81%ae%e4%be%8bストーリーボードの例 

まとめ

UXを設計するための5つの要素のうち、最も大切で、最も先に考える必要があるのが戦略です。どんなユーザーにどんな体験をしてもらいたいのか、というコンセプトは誰でも持っていると思いますが、そのコンセプトを数行でまとめてしまうのではなく、詳細までしっかりと考え、イメージを固めていくことが大切です。

ユーザーの輪郭がはっきりすればするほど、サイトの輪郭もはっきりし、良いUI/UXの形も浮かび上がってくるでしょう。

次回は2つ目と3つ目の要素について説明します。

 

次の記事優れたUX設計のための要件と構造:情報アーキテクチャとインタラクションデザイン

優れたUX設計のための要件と構造:情報アーキテクチャとインタラクションデザイン


CATEGORY:

さあ、KOBITをスタートしよう。