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