導線設計はサイト制作に非常に重要！問い合わせ(CV)につなげるための導線設計とは

Webサイトにおいて導線設計は問い合わせの増加のカギを握ると言っても過言ではありません。しかし、適切にCTAボタンを配置できていないと問い合わせが増えるどころか、Webサイトの離脱率があがってしまう原因になります。

そこで、今回の記事では導線設計が考えられたWebサイトを参考に、問い合わせにまでつながる導線設計を紹介します。

Webサイトにおける導線設計を知るためには、「導線」と「動線」の概念を知らなくてはいけません。そこで、ここでは導線と動線について紹介しながら、導線設計の目的について紹介します。

まずWebサイトにおける導線とは、「Webサイトの目的地まで誘導するためにデザインされている線」のことです。導線を設計してユーザーがあらかじめ目的地にまで動きやすいように誘導してあげることで、最短でゴールまでたどり着けるようにします。

例えば、何か商品を販売することを目的としているWebサイトの場合、商品を購入できる問い合わせフォームにまで導線を設計してあげるのが一般的です。その際に、商品までの道のりが困難であればあるほどユーザーは面倒だと感じて、離脱してしまいます。

そのため、問い合わせボタンまでの過程を最短で設計することによって、ユーザーが離脱するのを防ぎます。導線を設計する際にはページ単位の設計はもちろんのこと、ページ遷移の設計までするのが一般的です。

導線と似た概念として「動線」という言葉があります。導線がユーザーのために作られたデザインであれば、動線はその導線の結果だと思ってください。つまり、動線とはユーザーがWebサイトをどのように動いたのかを表したものです。

実際にユーザーが動いた経路を確認することで、ユーザーがどのような経路をたどるのかを分析可能です。分析したデータをもとに導線を設計することで、より問い合わせが増える改善施策を導入しやすくなります。

動線を確認するためには、ヒートマップツールなどの利用がおすすめです。ヒートマップツールではユーザーがどのようにWebサイトを動いているのかを可視化してくれます。そのため、ヒートマップツールで「動線」を可視化し、得た情報をもとに「導線」を設計するのが一般的です。

導線設計をする最大の目的は、自社サイトが持っているゴールにまでユーザーをスムーズに到達させることです。せっかくWebサイトを制作したとしても、ユーザーが迷子になってしまうようなデザイン設計であれば、ユーザーは離脱してしまいます。

特にWebサイトは気軽に訪問できる代わりに離脱しやすい性質を持っていますので、ユーザーを困らせないための導線を設計する必要があります。もし、離脱率があがっている場合は導線設計をあらためて見直し、導線をデザインし直す必要があるかもしれません。

つまり、導線の設計はユーザビリティを満たして、満足度の高いWebサイトにするための第一歩ともいえるでしょう。

導線設計はマーケティンング設計の一部に位置します。

広告施策やSEO施策によりWebサイトに誘導したターゲットをCV（コンバージョン）する必要がありますが、導線設計が優れていると、CVR（コンバージョン率）が向上します。

広告施策のROASを改善するために、導線設計の最適化も行われることになります。

導線設計はWebサイトのデザインにおいて重要なポイントです。ここでは、導線設計がなぜWebサイトにおいて重要なのかを紹介します。

導線設計はユーザーが問い合わせまで困らないために設計されているのが一般的です。もし、導線設計がされていなければ問い合わせまでの道のりがわからずに、ユーザーが困ってしまうかもしれません。

すると、困ったユーザーは問い合わせ先にたどり着くのを諦めて、Webサイトから離脱してしまいます。インターネットの統計情報を発表している「internet live stats」によると、世界中にあるWebサイトの数は2022年2月時点で19億を超えるといわれています。

以上のように19億もあるWebサイトのなかで、ユーザーがわざわざ導線を設計していないWebサイトを閲覧し続ける可能性は低いです。ユーザーの離脱率を低下させるためにも、導線を設計する必要があります。

企業が運営しているホームページの最大の目的は、問い合わせまでつなげることでしょう。例えば、ECサイトであれば「商品購入の問い合わせ」まで、商品を紹介しているWebサイトであれば「商品を紹介している資料」までユーザーを導きたいはずです。

しかし、導線を設計していなければ、上記のような問い合わせにまでつながらない可能性が高いです。なんとなく問い合わせボタンを配置しているだけでは、CVR（問い合わせする確率）が高まることはありません。

そのため、問い合わせを増やすためにも、「動線」をもとに導線設計をしているWebサイトが多いです。

問い合わせ件数を増やすためには、ユーザーが滞在しやすいようなサイト設計にする必要があります。特にユーザーが滞在しやすいWebサイトの特徴としてあげられるのが、導線が設計されているWebサイトです。

例えば、ユーザーが自分自身の「導線」を確認できるように、ナビゲーションシステムを導入するのも1つの手段でしょう。ナビゲーションとは、自分がいるページがWebサイトにおいてどこの階層に該当するのかを確認するシステムです。

階層を確認できるようにするだけでもページの全貌がわかりやすくなり、滞在時間の底上げにつながります。

導線の設計はどのデバイスであっても、適切に表示されている必要があります。特に近年ではスマホからの流入を考慮した導線設計が必須です。

総務省が発表している「令和3年　情報通信白書のポイント」によると、インターネットを閲覧する際にスマホを利用する割合は68.3％になっています。パソコンを利用したインターネット利用よりも17.9％も高い結果になっていますので、今やほとんどの人はスマホを利用してインターネットを利用しているといえるでしょう。

そのため、スマホでも問題なく表示されるレスポンシブデザインが考慮された導線設計が必要です。

導線設計を改善は、動線の課題を分析すると上手くいきます。優先的に行う動線を分析する方法を3つお伝えします。

基本的にはGoogleアナリティクスを使い分析していきましょう。

閲覧数が最も多いページと、導線のスタート地点になっているページを把握しましょう。導線のスタート地点になっているページは、Googleアナリティクスでは「ランディングページ」として表示されています。

閲覧数が多いページとランディングぺージは上位は大抵の場合同じページです。

多い順から優先して改善を考えていくのが効率的です。

直帰率と離脱率は混同される場合がありますので、違いについて完結に解説します。

直帰率は、サイトに訪問したユーザーが、別のページに遷移せずに離脱した確率を示しています。

離脱率は、サイトに訪問したユーザーが、対象のページを最後にサイトから離脱した確率になります。

直帰率が高いページは、ターゲットのニーズを満たしていない場合もありますが、導線が弱いために遷移されていないもあります。

トップページやランディングページなどのCV目的のページの離脱率が、他のページよりも高いのはあまり良くありません。

直帰率・離脱率は導線設計のために参考になるデータですので、よく分析をしましょう。

行動フローを見れば、ユーザーがどのようにページを移動しているかを、図と数値で確認できます。行動フローは導線設計の改善に役立ちます。

LPやトップページから、問い合わせやショッピングカードに遷移してもCVせずに離脱する場合、問い合わせページやショッピングカートの問題があるので、最適化が必要です。

ユーザーの行動フローを見ることで、導線設計に加え、ターゲットのニーズも分析できるようになります。

導線設計の改善を行うときは、必ず行動フローは見るようにしましょう。

問い合わせまでつなげるための導線を設計するためには5つのコツがあります。これから紹介する5つのコツを参考にして、問い合わせにつながるような導線を設計するようにしてください。

ユーザーにとって見やすいコンテンツは問い合わせ件数が向上しやすくなります。ユーザーが情報を見つけやすいコンテンツになっているかどうか確認する際には、ヒートマップツールを利用するのがおすすめです。

ヒートマップツールではコンテンツ内のユーザーの行動が可視化できます。特にヒートマップツールのなかでも、ユーザーがクリックしている部分を分析するようにしてください。本来意図していない箇所がクリックされているようであれば、改善の余地があります。

意図せずクリックされている箇所に問い合わせボタンを組み込むことで、ユーザーが情報を見つけやすくなり、問い合わせ件数が増える可能性が高まります。

Webサイト内で問い合わせにまでつなげるためには、ユーザーの興味関心をひきつける必要があります。そして、ユーザーに興味を持ってもらうためには、サイト内にストーリー性を持たせることが大切です。

例えば、Webサイトにストーリー性を持たせるテクニックとして「AIDAの法則」という法則があります。AIDAの法則は以下の構成で成り立ちます。

以上のような法則を利用してWebサイトにストーリー性を持たせると、問い合わせにまでつながる可能性があります。

ユーザーの行動の先回りした導線を設計することも大切です。ユーザーの行動遷移を確認するためには、Googleアナリティクスなどの解析ツールが役に立ちます。

例えば、Googleアナリティクスではユーザーの行動を可視化できる「行動フローレポート」を確認できます。行動フローではユーザーがWebサイトを訪問してから離脱するまでの流れを確認できるため、サイト全体の導線設計を改善可能です。

もし目的ページにまでユーザーがたどり着いていないようであれば、目的ページのコンテンツを強化してみてください。

現在、想定しているターゲットの目線で回遊を想定していくことも重要です。

ターゲットの特徴により回遊する流れや、閲覧するコンテンツも変わっていきます。 た設定しているペルソナがあれば、ペルソナが訪問したと想定して、回遊を考えてみましょう。

問い合わせ件数を増やすためにはCTAボタンを定期的に配置するのが効果的です。CTAボタンとはユーザーに行動喚起してもらうためのボタンのことで、Webサイト上の「お問い合わせはこちら」などのボタンが該当します。

例えば、ページ下部にいくにつれてページの離脱率が高まるのがWebサイトの特徴です。そのため、ページ下部にCTAボタンを設置していてもクリックしてもらえない可能性があります。

対策としては以下の位置にCTAボタンを設置してみるとよいでしょう。

ユーザーはページに訪れて最初の3秒で以下の内容を判断するといわれています。

以上のことをわずか3秒のあいだにユーザーは判断するため、ページの最初に表示されるファーストビューでは、端的にWebサイトのメリットやコンセプトなどを伝えなければいけません。

ファーストビューでユーザーの心を掴めれば後のコンテンツも読んでもらえますので、結果的に問い合わせ件数の増加にもつながります。そのため、ファーストビューに注力していない場合には、あらためてファーストビューを改善するのがおすすめです。

ナビゲーションメニューも様々なパターンがあり、最近ではハンバーガータイプとアコーディオンタイプがとても多くなっています。

以前は、スマホのみをハンバーガータイプにするパターンが多かったのですが、最近ではPCサイトもハンバーガータイプにするケースも増えています。

ナビゲーションデザインもトレンドがあるので、見直しすることで効果が出てくることもあります。

サイト内検索は、カテゴリー選択や売り上げ順などの「条件検索」で検索するものと、名称を入力してテキスト検索する場合の「指名検索」があります。

条件検索は、商品・サービスの特定、ベネフィット、売上順、おすすめ順、価格など、細分化をすると検索しやすくなり、目的のぺージにたどり着きやすくなります。

しかし指名検索で注意すべきは「表記ゆれ」です。

表記ゆれとは、例えば、「リンゴ」の情報があるとします。リンゴだけでも「リンゴ」「りんご」「林檎」と3種類の書き方があります。

どの書き方で入力したとしても、同じ「りんご」を表示させることが、表記ゆれの対策になります。

ここからはターゲットを考えて導線が設計されているWebサイトを3つ紹介します。実際のWebサイトを参考にすることで、自社サイトへの改善策も生みやすくなるでしょう。

Hubspotはコンテンツマーケティングの情報を発信している会社です。HubspotのWebサイトへの訪問者数は月間で700万人を超え、11言語を[6] 超える言語に対応しているグローバルなWebサイトとしても知られています。

そんなHubspotではユーザーが好きなタイミングでマーケティング資料をダウンロードできるようになっていて、効果的な導線が設計されています。特にファーストビューで「無料で始める/デモを申し込む」というCTAボタンが設置されていて、ユーザーの行動喚起を即座に促すように導線が設計されている点は参考にすべきでしょう。

また、サービスを紹介しているコンテンツの真下にもCTAボタンを設置しているのも特徴的です。CTAボタンの設置先にはさらにサービス内容の深掘りがされていて、ユーザーが「もっと知りたい」という気持ちにも先回りして対応しています。

案内されたサービスの概要では無料のお試しプランと有料のプランが案内されていて、いずれにせよ行動がしやすいページ設計がされています。まさにコンテンツを試してみたいというユーザーに対して導線が設計されているWebサイトといえるでしょう。

ニトリは家具家電を中心に販売している企業で、通信販売以外にもデコホーム事業やショッピングモール事業などさまざまな事業を展開しています。そんなニトリではカンパニーサイトを基軸として、複数のWebサイトを展開しているのが特徴です。

特にニトリが注力しているWebサイトは、カンパニーサイトとECサイトでしょう。事業を紹介しているカンパニーサイトのファーストビューでは、右上にニトリのECサイト「ニトリネット」に誘導するようなCTAボタンが設置されています。

ニトリは感染症拡大の影響で店舗が30店舗[7] も閉店するなか、オンラインで買い物ができるニトリネットに誘導するCTAボタンは、売上を得るのに効果的でしょう。

また、実店舗への集客機会を逃さないために、「実店舗検索」のCTAボタンも設置されています。オフラインとオンラインのどちらの顧客も逃さないようなデザインになっているため、ニトリ商品を購入したいユーザーを明確にターゲットにした導線を設計しているといえるでしょう。

トヨタシステムズはトヨタグループに属している、ITソリューションを提供している会社です。特にモビリティ分野でのIT技術に特化しています。そんなトヨタタイムズのサービス紹介ページはAIDAの法則にのっとってストーリーが構成されているのが特徴的です。

まずは公式サイトのどの部分がAIDAに該当するのかを紹介します。

以上のようなWebサイトにストーリーを持たせるためのお手本のような展開をしています。サービスをダウンロードするまでの手順に関しても明確な導線でデザインされていますので、多くのWebサイトのお手本になるでしょう。

また、ホームページのファーストビューでは、スライドショーによって多くの情報を掲載しているのも特徴的です。情報が豊富になりがちなカンパニーサイトにおいては、ファーストビューにスライドショーを採用することで、伝えられる情報がコンパクトかつ端的にまとめられるのでおすすめです。

Webサイトにおいて問い合わせが増える導線を設計するためには、以下のポイントが大切です。

導線設計を考えてWebサイトを制作するには、検証結果をもとに何度も改善することが大切です。一回の施策ではまず問い合わせ件数が増えることはないと思い、何度もトライ＆エラーを繰り返しましょう。