WEB担当者の発注前のお困りごと解決します。
（）
利用者の体験は画面の外にあり、さまざまな接点を通して企業やサービスに触れ「理解」「判断」「行動」しています。UXを設計するにあたり、体験全体を見渡し、その流れを捉え、接点ごとの役割を理解し精度を高めていくことが重要です。
今回は、自治体Xの観光情報サイトを仮事例に、鳥の目・魚の目・虫の目という3つの見方を通して、体験がどのように「流れ」「つながり」「循環」していくかを見ていきます。
※ここで扱うUXは、ユーザビリティテストやABテストなどの個別手法ではなく、体験全体の構造と流れを捉えるための設計と視点です。
この図は、私たちが開発したフレームワーク「ボーダレスマップ」です。
オンラインとオフライン両方の視点から全体を俯瞰して、利用者の体験がどのような流れの中で生まれているかを捉えるためのものです。UXを設計する際は、このようなプレームワークを使い体験全体を考えていくと効果的です。
Webリニューアル、そのまま進めて大丈夫ですか？
戦略的な判断軸が、プロジェクトの成否を左右します。
利用者がどのような接点を通して企業やサービスに触れているかを見る視点です。検索、SNS、広告、紹介、営業活動、問い合わせ対応なども含めて、どの接点がどの役割を持ちどうつながっているかを考えます。この視点を持つことで、部分ごとの改善にとどまらず、体験全体の中でどこに課題があり、どのようにつなぐ必要があるかが見えてきます。
先ほどのボーダレスマップは、この視点で利用者の接点全体を俯瞰して捉えるためのものです。
利用者がどのような順序で企業やサービスに触れ、「理解」「判断」「行動」していくかを見る視点です。どの接点に触れたかだけでなく、その前後で何を受け取り、どこで次の行動につながるかという流れを考えます。この視点を持つことで、接点ごとの良し悪しだけでは見えにくい、途中の滞りや離脱のポイントが見えてきます。
ボーダレスマップでは、利用者の体験を流れとして捉え、認知から行動、その後の体験までを追って考えることができます。
利用者が実際に触れる接点の中で、何がどのように見え、どう受け取られるかを見る視点です。SNSやブログ、ホームページなど各接点の中身、つまり見出し、導線、文言、UI、情報の順序など、理解や判断に影響する細かな要素をひとつずつ確認していきます。
この視点を持つことで、全体の流れの中で生じている違和感や迷いを、具体的な改善点として考えやすくなります。
ここでは、自治体Xの観光情報サイトを仮事例として、鳥の目・魚の目・虫の目という3つの視点を通してUX設計を考えます。
自治体Xの課題は、旅行者がSNSや検索を通して観光スポットの情報に触れる機会はあるものの、観光に必要な情報にたどり着きにくく、次の行動にもつながりにくいことです。この事例を通して、体験全体をどう捉え、どこに課題を見つけ、どのように改善へつなげていくかを見ていきます。
自治体Xの観光情報は、旅行者との接点が「SNS」「観光情報サイト」といったオンライン接点から、「地域の飲食店」「アンテナショップ」といったリアルな接点まで複数に分かれています。このとき鳥の目では、それぞれの接点がどのような役割を持ち、体験全体の中でどうつながっているかを見ます。
たとえば、SNSは興味を持ってもらう入口、観光情報サイトは行き先や過ごし方を比較する場、地域の飲食店やアンテナショップは現地の魅力や地域らしさに触れる接点、といった役割が考えられます。ここで接点同士の役割が曖昧だったり、つながりが弱かったりすると、旅行者は地域の情報を断片的に受け取ることになり、体験全体としての魅力が適切に伝わりません。
次に魚の目では、旅行者がどのような流れで観光情報に触れ、「理解」「判断」「行動」していくかを見ます。
たとえば、「アンテナショップでイベントを知る → QRでSNSをフォロー → 定期的な配信で期待が高まる → 公式サイトで詳しく知る → 現地を旅する」という流れです。この視点では、その前後で何を受け取り、どこで次の行動につながるかを考えます。そうすると、体験の途中でどこに滞りがあり、どこが行動への分かれ目になっているかが見えてきます。
最後に虫の目では個々の接点を最適化されているかを見ていきます。旅行者が実際に体験する場面、ひとつ例にあげるなら「公式サイト」の中でのUX設計です。
イベントの魅力が見出しや写真で伝わっているか、開催日時やアクセス情報がすぐ分かるか、現地での行動につながる導線が用意されているかなどです。この視点では、見出し、導線、文言、UI、情報の順序など、理解や判断に影響する細かな要素をひとつずつ確認していきます。全体の流れを通して、個々の接点を最適化することで、旅行者は必要な情報を適切に受け取り、次の行動へと進んでいくことになります。
（具体的な施策についてはこれまで四視点UX設計で解説してきたのでそちらの方もご覧ください。）
先の章では事例を使い「鳥の目」「魚の目」「虫の目」3つの目で見てきました。次はこの3つの視点を交えボーダレスマップを使い自治体XのUXを設計してみましょう。
旅行者が最初に地域の存在や魅力に触れる接点を考えます。検索やSNS、広告、オウンドメディアといったオンラインに加え、アンテナショップやイベントなどのオフラインも含まれます。
このフェイズでは、興味を持ってもらうことが役割になります。あわせて、その興味を次の接点へどうつなぐかが重要になります。
興味を持った旅行者が、行き先や過ごし方を考えます。公式サイトを中心に、どの情報をもとに判断するのかを整理します。このフェイズの役割は、旅行者の期待を高めつつ不安や迷いを減らすことです。
それにより旅行者が「ここに行ってみよう」と決めることができます。
旅行者が実際に行動に移る場面です。宿や交通機関の予約、アトラクションのチケットの購入など行動に直結するための導線を設計します。
このフェイズでは、迷わず次の行動へ進めることが役割なので、その場で判断できる情報が揃っているかが重要になります。
現地での体験や、その後の広がりを考えます。イベントや交流といった現地での体験に加えて、顧客フォロー、情報発信、顧客管理など、その後の関係づくりも含まれます。
このフェイズで重要なのは、体験者の満足度を高めるだけで終わらせず、ファンとして継続的につながる状態をつくることです。さらに、そのファンが情報を広げたり、周囲に薦めたりすることで、新たな認知活動へつながっていきます。
この循環まで含めて設計することが、ボーダレスマップにおける体験フェイズの重要な役割です。
WebサイトのUXを考えるときにも重要になるのは画面の外にある背景（接点の流れ）です。利用者が複数の接点を通して企業やサービスに触れ、理解し、判断し、行動する流れ全体を捉えていくことが重要です。
今回は自治体Xの観光情報サイトを仮事例に、3つの視点とボーダレスマップを通して体験全体を見ていきました。接点ごとの役割や流れ、一連のつながりを捉え、その体験が次の認知を生む循環まで含めて設計すること。それが、私たちが提唱する実践的UX設計です。
「ボーダレスマップ」を用いた上流設計については
Web・システム開発の上流設計支援をご覧ください。
更新は
SNSnoteでお知らせしています。