Webサイトの導線設計の作り方【コンバージョンが増加するサイト設計が理解できます】

企業のWeb施策を成功させるには「導線設計」が必須です。

ユーザーにとって使いやすいWebサイトを設計できれば、集客やコンバージョン獲得にもつながります。

しかし、自社Webサイトの「導線設計」を考える上では、

『導線設計は具体的に何をすればいい？』
『導線と動線の違いがわからない』
『導線設計の作り方を知りたい』

上記のような課題が生じるかと思います。

本コラム記事では、企業のWebサイト担当者様へ向けて「導線設計の定義」「導線と動線の違い」「導線設計の作り方」「動線分析のやり方」を紹介しています。

Webサイトにおける導線設計とは

導線設計とは、Webサイトの目標に向けて「どのようにユーザーを目標地点まで誘導するか」を考えることです。

たとえば、自社Webサイトの目標が「商品購入」であれば、トップページから商品ページを閲覧して「商品購入画面」に誘導するのが導線設計となります。

Webサイト全体の導線だけではなく、Webページ内のコンテンツをどんな順序でみてもらいたいかを考えるのも導線設計です。

動線とは

動線とは、実際にユーザーがWebサイト上を移動した経路です。

動線を分析するとユーザーの動きを把握できるので、導線設計に生かせます。

ただし、動線はユーザーの動きを分析するだけではなく、どのような心理状態で行動したかも重要です。

導線と動線の違い

導線と動線の違いは下記の通りです。

▼スマホの場合は横にスクロールしてご覧ください

理想的な導線設計には、ユーザーがどのように移動したか（動線）を分析する必要があります。

Webサイトの導線設計が重要な理由

Webサイトの導線設計が重要な理由を紹介します。
下記内容を理解してから導線設計を実行しましょう。

ユーザーエクスペリエンスの向上

導線設計すると、ユーザーエクスペリエンスが向上します。

ユーザーエクスペリエンスが向上すると、目標達成までのスピード改善や、コンテンツのクオリティ向上にもつながります。

たとえば、導線設計が明確になっていると、ナビゲーションメニューやリンクを適切な場所に配置できます。

また、ユーザーがWebサイト上で目標を達成する過程で、迷いがなくなるため、自社にとって大きなメリットになるでしょう。

Webサイトの設計が容易になる

導線設計すると、Webサイトの設計が容易になります。

Webサイトを開設するうえで、導線設計の工程を飛ばす方もいるかと思いますが、これは非常に危険です。

導線設計がないWebサイトだと「コンバージョンが獲得できない」「離脱率が高い」といった問題が発生します。

その度に、修正が発生するのでWebサイトの完成までに多くの時間を費やすでしょう。

しかし、初期段階から導線設計しておけば、このような問題も発生しないので、結果的にWebサイト設計が容易になります。

動線分析が重要な理由

続いて、動線分析が重要な理由についてみていきましょう。

Webサイト上の課題が発見できる

動線分析を実施すると、Webサイト上の課題が発見できます。

たとえば、あるWebページの離脱率だけが高かった場合、ユーザーは『次にどのWebページを見てよいかわからない』といった問題が発生している可能性があります。

このデータを導線設計に生かせば課題が解決でき、離脱率軽減が可能です。

正しいユーザーニーズを把握できる

動線分析を実施すると、正しいユーザーニーズを把握できます。

動線分析では「ユーザーがどのWebページをよく閲覧しているか」が分析できるので「ユーザーに一番閲覧されているWebページ」と「自社が一番みてほしいWebページ」のズレがないか確認できます。

たとえば、自社では「商品・サービス概要ページ」を見てもらいたいが、よく閲覧されているのが「Ｑ&Ａページ」だったと仮定しましょう。

「Ｑ&Ａページ」がよく閲覧されているということは「商品・サービス概要ページ」の情報量が足りない可能性も考えられます。

この結果を元に「商品・サービス概要ページ」の情報量を増やせば、ユーザーニーズに答えられます。

導線設計で重要な5つ要素

導線設計で重要な5つの要素について、みていきましょう。

導線設計では、主に下記５つの要素を活用します。

1. コンテンツデザイン
2. 直感的で関連性のある内部リンク
3. コンバージョンボタン
4. 行動を促すナビゲーション
5. Webサイト内部の検索機能

１.コンテンツデザイン

導線設計で重要な要素の１つ目は、コンテンツデザインです。

コンテンツデザインは、ユーザーがWebサイトに訪問したときに、最初に認識する要素です。

たとえば、クリックしないと「ナビゲーションメニュー」が表示されないコンテンツデザインを取り入れたとしましょう。

ユーザーはWebサイトを訪問した瞬間に次の移動先を探すことがあるので、わかりにくいコンテンツデザインは最初の段階で離脱する可能性が高くなってしまうということです。

２.直感的で関連性のある内部リンク

導線設計で重要な要素の2つ目は、直感的で関連性のある内部リンクです。

内部リンクは、ユーザーの利便性を高めるだけではなく、SEO内部対策としても有効になります。

内部リンクでは、関連するコンテンツを接続して、ユーザーをいかに離脱させないかが重要です。

ユーザーがコンテンツを閲覧する上で、疑問が発生する可能性があれば、その解決策が提示されているコンテンツの内部リンクを設置しましょう。

３.コンバージョンボタン

導線設計で重要な要素の3つ目は、コンバージョンボタンです。

コンバージョンボタンは「申し込みはコチラ」「商品購入」などのWebサイトで目的を達成するための要素です。

問い合わせ獲得が目的であれば、ユーザーがコンテンツを閲覧する上で『もっと詳しい話が聞きたい』と思った段階で、すぐにコンバージョンボタンをクリックできる配置が必要になります。

また、Webサイトによっては、コンバージョンボタンを常に固定して、いつでもコンバージョンを獲得できるようにしている場合もあります。

４.行動を促すナビゲーション

導線設計で重要な要素の4つ目は、行動を促すナビゲーションです。

導線設計では、ユーザーにわかりやすく情報を提供するために「どこに」「どんな」ナビゲーションを配置するか考える必要があります。

また、ナビゲーションといっても下記のような種類があります。

▼スマホの場合は横にスクロールしてご覧ください

自社コンテンツ内容やユーザーの利便性を考慮した上で、ナビゲーションを選定してみましょう。

５.Webサイト内部の検索機能

導線設計で重要な要素の5つ目は、Webサイト内部の検索機能です。

内部の検索機能とは、Webサイト内のコンテンツを「フリーワード」や「カテゴリ」から検索できる機能です。

必ず必要な機能ではありませんが、自社Webサイトのコンテンツ量が多い場合に活用されるケースが多いと覚えておきましょう。

Webサイトの導線設計の作り方を５STEPで紹介

Webサイトの導線設計の作り方を５STEPで紹介します。

1. ビジネスの目標とユーザーの目的を明確にする
2. ユーザーの流入経路を把握する
3. 流入経路別のユーザー行動を考える
4. ユーザーが必要とする情報を特定する
5. 適切な情報を適切なタイミングで提示する

下記手順を参考に、導線設計してみましょう。

【STEP①】ビジネスの目標とユーザーの目的を明確にする

はじめに、ビジネスの目標とユーザーの目的を明確にします。

▼スマホの場合は横にスクロールしてご覧ください

「ビジネスの目標」「ユーザーの目的」は、ズレがないように設定するのがポイントです。

たとえば、Webサイト上で、洗車製品販売を「ビジネス目標」とします。

この場合、ユーザーの目的は『自家用車をきれいにしたい』ですが、この中には『自分で洗車したい』『誰かに洗車してもらいたい』の２つのニーズが存在するので、下記のように定義してください。

• ビジネス目標＝洗車製品を販売
• ユーザーの目的＝自家用車を自分できれいにしたい

ユーザーの目的を具体的に設定するのがポイントです。

【STEP②】ユーザーの流入経路を把握する

次は、ユーザーの流入経路を把握します。

導線設計では、ユーザーがWebサイトに流入するポイントを理解しなくてはいけません。

Webサイトには下記のような流入経路があります。

▼スマホの場合は横にスクロールしてご覧ください

ユーザーが自社Webサイトをどのように見つけることが多いのか決定しましょう。

【STEP③】流入経路別のユーザー行動を考える

次は、流入経路別にユーザー行動を考えます。

ECサイトで子供服を販売している場合のユーザー行動を例に紹介します。

■検索エンジンからの流入の場合

1. 検索エンジンからECサイトのトップページに訪問
2. サイト内検索に「子供服」とキーワード入力する
3. 検索結果から複数の製品を比較
4. 選択した製品をカートに入れる
5. 支払い
6. ECサイトを閉じる

上記のようにユーザー行動を明確にすると、導線設計の基本が完成します。

ユーザーの流入経路が複数になる場合は、それぞれのユーザー行動を明確にしていきましょう。

【STEP④】ユーザーが必要とする情報を特定する

次は、ユーザーが必要とする情報を特定します。

導線設計では、ユーザーニーズを理解する必要があります。

まずは下記項目を明確にしてみましょう。

• Webサイトに訪問するユーザーは、どんなニーズをもっているか
• なぜユーザーは、その商品やサービスを求めるのか
• 商品やサービスについて、どのような質問があるか
• コンバージョンを獲得するには、どんな情報を記載すべきか

これらの情報を明確にするには、ユーザーへのアンケート調査などが有効です。

【STEP⑤】適切な情報を適切なタイミングで提示する

最後に、適切な情報を適切なタイミングで提示します。

多くのWebサイトでは、トップページで「コンバージョン」をすぐに要求しがちですが、ユーザーは情報が不十分な状態ではアクションを起こしません。

ユーザーがコンバージョンに向かって移動する各コンテンツで、最適な情報を提示して、コンバージョン直前で購買意欲がピークに達するように、導線設計する必要があります。

STEP③で解説した流入経路別のユーザー行動を参考にして、各Webページ内でユーザーが何を求めているかを考えながら、各コンテンツを最適化していきましょう。

動線分析のやり方【Googleアナリティクス】

導線設計ができたら、次は動線分析を実施します。

動線分析で課題がみつかれば、それを導線設計に反映させましょう。

動線分析では「Googleアナリティクス」を活用します。

流入経路を把握

出典：Googleアナリティクス

Googleアナリティクスの「集客」→「概要」から流入経路を確認してみましょう。

指標の詳細は下記の通りです。

▼スマホの場合は横にスクロールしてご覧ください

Googleアナリティクスのデータと、事前に導線設計で予測した流入経路にズレがないか確認しましょう。

ズレが大きい場合は、再度、流入経路別のユーザー行動を考える必要があります。

Webページ別の閲覧数を分析

出典：Googleアナリティクス

続いて、Webページ別の閲覧数を分析しましょう。
Googleアナリティクスの「行動」→「概要」から各Webページの閲覧数が確認できます。

自社が一番ユーザーに見てもらいたいWebページをしっかりと閲覧されているか確認しましょう。

出典：Googleアナリティクス

「ページURL」をクリックすると、各Webページを詳細に分析できます。
ここで分析すべき指標は下記２つです。

▼スマホの場合は横にスクロールしてご覧ください

導線設計した各Webページの「平均ページ滞在時間」と「離脱率」を分析しましょう。

ユーザーがコンバージョンに達するまでの過程で「平均ページの滞在時間が短い」または「離脱率が高い」Webページがあれば、至急改善が必要と判断できます。

導線設計する上でのポイントは３つ

最後に、導線設計する上で重要なポイントを３つ紹介します。

• 色を賢く使う
• ファーストビューの重要性を理解する
• 分析と改善を繰り返す

色を賢く使う

導線設計では、Webサイトの各コンテンツに対して、色を賢く使いましょう。

たとえば、コンバージョンボタンの色は、コンバージョン率に大きな影響を与えるといわれています。

Webサイトの「DMix.ca」によると「緑色のボタン」「赤色のボタン」どちらのコンバージョン率が高いかテストしたところ、赤色のボタンのコンバージョン率が３４％も高くなったそうです（※）。

ただし、この結果はWebサイト全体の配色によっても変わってくるので、自社でもABテストを実施して、最適な色を選定する必要があります。

※参考：UX Dilemma: Red Button vs. Green Button| SitePoint

ファーストビューの重要性を理解する

導線設計を成功させるには、ファーストビューの重要性を理解する必要があります。

ファーストビューは、Webサイトに訪問したユーザーがスクロールせずに、一目で見ることができる範囲です。

ファーストビューは、直帰率に大きく影響するといわれています。

そのため、どんな優れた導線設計ができていても、ファーストビューが最適化されていないとコンバージョンは獲得できません。

しかし、ファーストビューでユーザーに伝えたいことが明確になっていれば、直帰率も軽減し、コンバージョンまでユーザーを導けます。

分析と改善を繰り返す

導線設計を成功させるには、分析と改善を繰り返す必要があります。

導線設計は、一度設計して終わりではありません。

定期的に動線分析を実行し、課題がないかをチェックして、導線に反映させる必要があります。

ユーザーニーズは時代とともに変化を続けているので、これに対応できるよう分析と改善を実施していきましょう。

まとめ

Webサイトの導線設計の作り方について紹介しました。

Webサイトの導線設計が重要な理由は下記の通りです。

• ユーザーエクスペリエンスの向上
• Webサイトの設計が容易になる

動線分析が重要な理由は下記の通りです。

• Webサイト上の課題が発見できる
• 正しいユーザーニーズを把握できる

導線設計で重要な要素は下記５つです。

• コンテンツデザイン
• 直感的で関連性のある内部リンク
• コンバージョンボタン
• 行動を促すナビゲーション
• Webサイト内部の検索機能

Webサイトの導線設計は下記５STEPで作成します。

1. ビジネスの目標とユーザーの目的を明確にする
2. ユーザーの流入経路を把握する
3. 流入経路別のユーザー行動を考える
4. ユーザーが必要とする情報を特定する
5. 適切な情報を適切なタイミングで提示する

今回のコラム記事を参考にして、Webサイトの導線設計を見直しましょう。

また、当サイト「ビズサイ」ではホームページ制作サービス（サブスクリプション）を提供しています。

ビズサイでは、ホームページの目的に合わせて３種類のプランを用意しており、お申込みから公開まで最短５営業日でホームページ制作ができます（詳しくはこちら）。