他社と差をつける!マーケティング×デザインでワンランク上のUI /UX改善 NEW

2021.01.14
#マーケティング#デザイン#UI/UX

1. マーケターがデザインの知識を身に付けるべき理由

かつてはデザインに関する知識は、デザイナーだけにあれば良いとされていました。しかし、マーケターが自社サイトで成果を出すためには、必ずデザインの知識が必要になります。
なぜなら、88%のユーザーはサイト上で悪い体験をした後、そのサイトに再訪しないというデータがあるためです。

ユーザーエクスペリエンスがマーケティングにとって重要である理由 図1:ユーザーエクスペリエンスがマーケティングにとって重要である理由
出典: https://www.webfx.com/blog/marketing/user-experience-matters-marketing/

この資料は、アメリカでWebマーケティングを専門としているWebFX社が発表した、優れたUI /UXに含まれるさまざまな要素と、UI /UXがマーケティングの目標と戦略にどのように影響するかが記されたデータです。

さらに、このデータは下記も示しています。

  • サイトの第一印象の94%がデザインに関連している
  • サイトの信頼性の75%は、サイト全体のデザインによって判断される

つまり、ユーザーに信頼してもらい、自社サイトのファンになってもらうためには、たとえマーケターであってもデザインについて十分な検討をしなければならないということです。

そうでなければ、たとえばコンテンツマーケティングを実施しようとして、有益な情報を顧客に提供しようとしても、デザインが理由で内容を読んでもらえなかったり、せっかく作ったコンテンツにたどり着いてもらえない、などの事態が起こってしまう可能性があります。これでは多大なリソースを使ってコンテンツを作成しても、見てほしい顧客に見てもらえないということになり、当然成果も上がりません。
しかし、実際は多くのマーケターが自社サイトのデザインをどう定義すればいいかについて、悩んでいるのではないでしょうか?

悩んでいる人が多いからこそ、マーケターがデザイン能力を身に付けることができれば、他社と大きな差をつけることができます。

マーケティング視点でデザインを考えることは、ユーザーの体験価値(UX)の向上につなげ、最終的にユーザーをCV (コンバージョン)に導くための近道になります。

2. マーケティング視点でデザインを考える3つのメリット

メリット1.ビジネスの目的に合致した「正しいWebデザイン」ができる

ここ数年で経営に対するデザインの重要性に注目が集まっています。デザイナー向けのプロトタイピングツールを提供するInVisionが24産業、77カ国、2,200社を対象に実施した調査結果によると、70%の企業が「積極的に経営に対してデザインを活用している」と回答し、さらに全体の3/4の企業が「デザインによって製品やサービスの品質が向上した」と回答していることがわかりました。

ただしデザインは、ただ見た目のきれいさなどを追求していくと、きれいにすることに意識が集中してしまい、サイトの方向性が気づかないうちに、本来の目的からそれてしまう場合があります。マーケティング視点でデザインを考えれば、ゴールがはっきりしているので、ビジネスの目的にきちんと合ったデザインを作り出すことができます。

InVisionによるデザイン成熟度モデル 図2:InVisionによるデザイン成熟度モデル
出典: https://www.invisionapp.com/design-better/design-maturity-model/

メリット2.デザイン検討の段階で、ビジネスの課題が見えてくる

特にデザイン改修の際には、サイトを立ち上げた当初と目的や企業にとってのサイトの立ち位置、業界の状況が大きく変わっている場合があります。その際にきちんとマーケティング視点でデザインを検討してから制作を進めると、デザイン以外の課題や方向性の修正点などが見えてくる場合があります。

デザイン検討の段階で、ビジネスの課題が見えてくる

メリット3.デザインに「説得力」が生まれる

例えば外部に依頼したデザインに関する意見が社内で割れたときや、上司からデザイン変更の要望があった場合に、なぜこの場所にこの要素があるのか、なぜこの情報が配置されているのか、説明が必要な場面も多いと思います。

その際に、マーケティング視点から根拠を提示することができるようになります。そうすることで、デザインへの説得力が生まれます。

アート思考からのデザインアプローチではなく、このように、デザインをマーケティング視点から考える手法は、実は昔から根強くあります。

たとえば、デザイン思考(※)も、ユーザーやビジネスのニーズなどを基盤に設計していくという点では同じ考えであり、Googleなどの多くの企業が取り入れています。

スタンフォード大学にあるHasso Plattner Institute of Design 図3:スタンフォード大学にあるHasso Plattner Institute of Design(通称d.school)にて撮影( https://dschool.stanford.edu/

デザイン思考については、2019年に編集部のチームでアメリカのd.schoolに訪問しておりますので、別途ご紹介いたします。
※デザイン思考:デザインの思考方法と手法を活用して、ビジネスの課題を解決するアプローチのこと

3. 実際にマーケティングをデザインに活用してみる

マーケティングをデザインに活かすにはさまざまな方法がありますが、今回の記事では第一歩として、デザインに活用できるペルソナ・カスタマージャーニーマップを作成する方法についてご説明します。
ペルソナ・カスタマージャーニーマップは、見た目のデザインだけでなく、サイトとして重要なUIUXを高めることにも役立ちます。

3-1. ペルソナ・カスタマージャーニーマップを作成してユーザー像を明確にする

■ ペルソナ作成

ペルソナ作成の方法や無料テンプレートのダウンロードは以下の記事からご確認ください。
【テンプレート付き】実践版!オウンドメディア戦略におけるペルソナ設定手法 NEW

デザイン・UIUX改善のためにペルソナを作成する場合には、単純にユーザー視点に立って考えるのではなく、具体的なユーザー像を絞った上で考える必要があります。作成したユーザー像をもとに「どんなことをすれば価値のある体験をしたと感じてもらえるか?」と考えることで、明確な判断基準を持つことができ、UXを効率的に高めることが可能です。

■ カスタマージャーニーマップ作成

UXの向上を図るためには顧客とのタッチポイントを正確に把握し、適切なタイミングでサービスを届ける必要があります。このタッチポイントを明確にするのがカスタマージャーニーマップです。
Webサイト内におけるユーザーの行動や、Webサイトに訪問するまでの行動など、あらかじめ予測を立てることで、顧客に最適な体験を提供することが可能になります。
以下では、既存サイトのリニューアルをする際のカスタマージャーニーマップ作成において、マーケティング×デザインの観点からポイントをご説明します。

カスタマージャーニーマップの基本的な考え方や、テンプレートのダウンロードは以下の記事からご確認ください。
【テンプレート付き】カスタマージャーニーマップ作成方法と3つの事例を解説

<ポイント1>サイトの目的に応じてフェーズを設定する

既存サイトを改善する場合、まず既存サイトのカスタマージャーニーマップを作成します。作成する上で、特に重点的に検討する必要があるのが、フェーズの部分(横軸)になります。この部分の細かさや名称は、自社商品やサービスの目的、設定したペルソナによって大きく変わります。

フェーズを決める際に重要になるのが、サイトの目的を再確認することです。
たとえば、BtoCのアパレルメーカーのECサイトのカスタマージャーニーマップを作成する場合、購入もしくは購入後のリピート化や他者との共有(口コミ、SNSへの投稿)までをゴールとして設定するケースが多いと思います。しかし、BtoBの法人向け会計ソフトを紹介するサイトの場合は、会員登録をしてサービスを利用してもらう、またはその後も継続的に利用してもらえるようなサイトにすることがゴールとなる場合が多いです。

顧客にどんな状態になってほしいのかを想定し、そこに至る行動をプロットしてから、カスタマージャーニーマップの範囲を決定していきましょう。

カスタマージャーニーマップテンプレート

<ポイント2>ユーザーの行動を具体的に書き起こす

既存サイトのカスタマージャーニーマップの「状態」の行にペルソナの行動を書き込んでいきます。
「Webで検索した」「問い合わせをした」など、想定されるペルソナの行動を考えながら埋めていきましょう。これにより、現在のサイトに訪問しているペルソナの動きを可視化することができるようになります。
そして、行動を見ながらどの部分に問題があると考えられるか、改善の余地があるかを見つけていきます。
作成していく中で、サービスを提供する側の目線として「ここでこの行動をとって欲しい」という理想が出てきてしまうことがあるかもしれません。しかし、ここでは現時点でのサイトの問題点を発見するために、あくまで理想ではなく現実を書き込んでいくようにしてください。

<ポイント3>ユーザーの気持ちになって現在のサイトの良い点、悪い点を洗い出す

実際のペルソナの立場になって、サイトを利用する上で良い点、悪い点をユーザー心理の観点から洗い出していきます。

例えば、「安い買い物ではないから、他の商品と比較して検討するために一旦一覧画面に戻りたいと思ったのに、会員登録画面に遷移してしまって『ストレスに感じた』」「Webには疎いけど、メニューがわかりやすいから目的のページに簡単に遷移できて『嬉しい』」など、<ポイント2>で考えたペルソナの行動に合わせたユーザーの感情を「マインド」の行に書き出します。
このとき、ペルソナに近い人に依頼してユーザーインタビューを実施するのもひとつの手段です。「この部分を押すときにどんなことを考えているか」「どの機能が使いづらいと感じるか」「ここがこうなっていたらいいのに」などをできるだけヒアリングし、顧客の体験に共感を深めることで、改善すべき点が少しずつ見えてきます。

カスタマージャーニーマップの作り方や無料テンプレートのダウンロードは以下の記事からご確認ください。
【実践版】オウンドメディア戦略におけるペルソナ・カスタマージャーニーマップ設定手法

上記を意識してカスタマージャーニーマップを作成することで、デザイン段階でのブレが生じにくくなり、よりターゲットを離脱させないWebサイトに近づけることができます。

4 ペルソナ・カスタマージャーニーマップから考えるデザイン改善の例

下記は、Web上で採用管理ができるサービスサイトの改善で、ペルソナ・カスタマージャーニーマップを作成・活用した例です。作成したことにより見えてきたサイト上の問題点と、その改善策をご紹介します。

問題点① 登録後のTOP画面で次に起こすべきアクションがわからない

カスタマージャーニーマップ一部抜粋図4:カスタマージャーニーマップ一部抜粋

改善策:チュートリアルボタンのデザイン変更

チュートリアルはすでにありますが、ボタンが英語表記でかつアイコンなども無く、色も背景と同化しており分かりづらい状態でした。ペルソナは、今までの採用管理に苦労している多忙な採用担当者を想定しています。そのため、できるだけ短時間でサービスを使いこなせるようになりたいと考えており、「とりあえずいろいろ押して試してみよう」というよりは「すぐに活用したい」という気持ちであることが考えられました。デザイン変更の案としては、「チュートリアルが表示される」ということが探さずとも一目でわかるデザインに変更することが効果的であると判断しました。

チュートリアルのデザイン変更図5:チュートリアルのデザイン変更

問題点② 下層ページに遷移しないと現在の採用状況が分からない

カスタマージャーニーマップ一部抜粋図6:カスタマージャーニーマップ一部抜粋

こちらのサイトでは、採用管理ツールとして受信メール件数、エントリー者数など、さまざまなデータが管理できるようになっています。既存サイトの仕様では、TOPはスケジュール管理がメインになっており、他の情報はサイドナビから下層ページに遷移することで確認できるようになっていました。
たとえば、「選考が始まるまでのやりとりを担当する人」「選考開始から最終選考までを担当する人」のように、各フローで細かく分業化がされている場合はこの仕様でもあまり問題はないかと思います。しかし、ペルソナは3人しかいない採用チームに所属している想定のため、1人で全ての範囲を担当する、つまり全てのデータを把握する必要があると考えられました。その場合、現在の仕様では採用状況の全体を把握するには、何度もクリックして各ページに遷移しなければならず、それがユーザーにとってストレスに感じる可能性があるということが、カスタマージャーニーマップによって見えてきました。
そこで、アクセスしてすぐ、TOPページを見ただけで現在の採用状況がわかるようなパネルの設置と導線を追加するデザインに変更しました。

TOPページの構成変更図7:TOPページの構成変更

このように、ペルソナ・カスタマージャーニーマップをもとにデザインを作成すると、サイト内の具体的な問題点や、改善箇所が見えてきます。
今後新規サイトの立ち上げや、既存サイトのデザインのリニューアルをする際には、ペルソナやカスタマージャーニーマップの作成を実施し、マーケティングの視点からUXの向上を検討することをお勧めします。

現在トランスコスモスでは、BtoBコンテンツマーケティング施策を成功に導くための「マーケティング講座」のうち第1回を無料で実施しております。全5回を受講いただくと、ワークショップによってカスタマージャーニーマップが完成します。

お問い合わせ