一言でUIUXといってもそこにはさまざまな工程があり、それらを一つずつしっかりと積み上げていかないと最適なUIUXは完成されません。
基礎がちゃんとしていない土地に家を建ててしまうと倒壊のリスクがあるように、UIUXも適切な順を追うことで基礎となる部分を構築していく必要があります。
そもそもUIとUXの違いを知っていますか?
UIとUXの違いから振り返ってみます。
まずUIとは「ユーザーインターフェイス」のことで、ユーザーの目につくもの「見た目」を指します。これはホームページやアプリだけでなく、サービス・プロダクト全てに言えることです。
次にUXですが、こちらは「ユーザーエクスペリエンス」の略です。具体的には、ユーザーがサービスやプロダクトを通じて得られる体験のことを指します。
UXという大きな土台の上にUIという一部の要素があると考えれば筋が通ります。
UXの5段階モデルとは?
前述の通りUXの中にUIという一部のパーツがありますが、UIUX改善を実施する上での行程として基礎となるのがまさにUXとなるわけです。
そのUXを考えていく上で大切なのが、「UXの5段階モデル」というものです。
以下順を追って解説していきます。
(1)戦略
このフェーズにおいてまずすべきこととしては、自社のサービス・プロダクトはどんな目的を持っているのか。そしてそれを求めているユーザーはどんな人で、その人たちはどんなボトルネックを抱えているのか(ニーズを持っているのか)を考える必要があります。
1. 自社プロダクト・サービスの目的設定
マンダラートやリーンキャンバスを用いてプロダクトやサービスの思いを言語化します。これにより、自社は自身が提供するサービス・プロダクトを利用してユーザーにどのような体験を得て欲しいのか(ウォンツ)を把握していきます。
2. ペルソナ・カスタマージャーニーマップ設計
次に1で設定した目的を持ったプロダクト・サービスを求めているユーザー像(ペルソナ)を描いていきます。目的が複数ある場合は、その数だけペルソナを作る必要があります。その際、何故ペルソナは自社のプロダクトやサービスを必要としているのかを考えることが大切です。(ニーズの把握)
ペルソナはデモグラフィック*1、サイコグラフィック*2の軸で作成していきます。
次に、そのペルソナがどんなストーリーに沿って自社のプロダクトやサービスを利用するに至るのかを描いていきます。これをカスタマージャーニーマップとして、どのタイミングでどういったモチベーションのユーザーが自社のサービス・プロダクトにタッチするのかを設計していきます。
ペルソナはあくまでのペルソナなので、全く同じ属性の人間だけがユーザーとなるわけでは有馬sん。年齢も性別も違うユーザーであっても、行動パターンが同じであればペルソナと同じカスタマージャーニーを辿って自社サービス・プロダクトがはまることも考えうるので、行動起点で考えるようにしましょう。
*1 世代・年齢、性別、居住地域、学歴、家族構成、所得、職業(職種、勤務地、肩書)など
*2 リテラシー(ITリテラシーなど)、ライフスタイル(インドアタイプなど)、パーソナリティ(性格)、消費行動(衝動買い派など)、趣味、志向など
3. マーケット調査
ペルソナとカスタマージャーニーマップができたら、この設計に当てはまるユーザーが自社の狙う(置かれている)マーケットにおいて実在するのかを調査するフェーズに移ります。
具体的な手法としては、オンラインでのユーザーアンケートや対面でのデプス調査を行うことが理想的です。
(2)要件
次の要件フェーズでは、戦略を満たす最低限の機能や情報コンテンツを探し出す作業に入ります。
1. 必要な情報をブレスト
ここではステイクホルダー全員の意見を集約した方が、リリースがスムーズに進みます。プロダクトオーナー、UXデザイナー、UIデザイナー、マーケター、エンジニア、グロースハッカー・・・
みんなでマインドマップを用いたブレストを行うことで、どんな機能や情報が必要なのかを洗い出していきましょう。
2. 必要な機能の決定
情報の洗い出しの際には情報フレームとユーザーニーズを分けて考えていきましょう。例えば、シミュレーションコンテンツが必要な機能であると判断した場合、情報フレームは「インプットされた情報に合った回答を出し分けるコンテンツ」であり、ユーザーニーズは「複数の組み合わせの中から自身に合った情報を知れるようにする」こととなります。前者は機能になりますが、後者はそのニーズを解決できる機能を考えていく必要があります。
(3)構造
ここまできたら、あとは具現化していく作業に入ります。(2)で設計した最低限の機能や情報コンテンツをユーザーが発見しやすい構造は何なのかを設計していきます。
1. 情報設計
ここではユーザーに分かりやすく情報を伝えるためのプライオリティをつけていきます。自身が知りたい情報、コンテンツはどのページのどこにあるのかがユーザーにしっかり理解してもらえないとユーザーはすぐに離脱してしまうため、ユーザに分かりやすく情報を伝えて、お探しの情報まで辿り着きやすくしてあげるための見せ方を構築していきます。
具体的には、ユーザーが持つ「思い込み」である潜在的意識(UIUXではメンタルモデルともいいます)に沿った情報整理を行うべく、カードソーティングと呼ばれる手法(ブレストによって分類整理)や重要な情報事項の頭文字をとったLATCHで整理する手法(ジャンルによる整理)を用いて、情報を整理していきます。
整理する際はマインドマップ化することでより視覚的な理解が進むでしょう。
2. インタラクションデザイン
情報設計ができたら、次にその情報とユーザーが接するWEBサイト内の機能(ギミックやCTAボタンなど)を何を、いつ、どうやってユーザーに触れさせるかを考えてきます。
(4)骨格
このフェーズでは情報をデザインしていきます。ここまでに挙げ出してきた情報を過不足ないように並べていきます。
1. インターフェースデザイン
インタラクションデザインで検討した機能を
(5)表層
最後にヴィジュアルデザインの設計を行なっていきます。このフェーズにきて初めて具体的な見え方が出てきます。
Contact
まずはDX戦略の打ち手について壁打ちしませんか?