Webサイトを使用してマーケティングを展開する場合、「遷移」はとても重要な要素の一つとなります。コンバージョンにつなげるためのWebサイトの設計・見直しをする際には、Web解析ツールなどで遷移率を読み解いて、そのデータを活用していかなければなりません。
本記事では、Webサイト・ページの「遷移」について説明をするとともに、遷移の具体的な確認方法や、遷移率を上げるための対策を徹底解説します。Webサイトの遷移率について知りたい人や、遷移率が低くて悩んでいる人、対策方法が知りたい人は、ぜひ本記事を参考にしてください。
目次
遷移とは？
以下では遷移について解説します。
● 「遷移」の読み方と一般的な意味とは
● Webにおける遷移とは
「遷移」の読み方と一般的な意味とは
「遷移」は「せんい」と読み、「移り変わること」もしくは「移り変わり」という意味になります。また「推移」や「移すこと」といった意味で使用される場合もあります。もともと遷移の「遷」自体に「元の場所から離れて別の場所に移る」「よそへ移っていく」という意味があります。
Webにおける遷移とは
Webにおける遷移とは、Webページに掲載されているリンクをたどって、Webサイト内のページを移動していく行為を指します。「ページ遷移」とも表現されることが多く、Webに関する広いジャンルで使用されている用語です。
ページ遷移について学ぶことで、Webサイトのユーザー解析の理解を深めることができますので、より良いWebサイトの作成やコンバージョンの獲得にもつながるでしょう。
HTMLを使ったページ遷移の方法
ページ遷移のやり方には様々な方法がありますが、ここではHTMLを使った方法について解説します。
● aタグを使う方法
● inputタグを使う方法
● buttonタグを使う方法
aタグを使う方法
aタグのhref属性にパスを指定することで、他のWebページへ遷移させることができます。ただし、送信フォームや次ページに進むためのボタンなどには使用できませんので覚えておきましょう。
| 絶対パスで指定する場合 |
| <a href=”https://ドメイン名/”>テキストリンク（ここをクリックして遷移先へ移動）</a> |
| 相対パスで指定する場合 |
| <a href=”階層/ドメイン名/フォルダ名/ファイル名”>テキストリンク（ここをクリックして遷移先へ移動）</a> |
inputタグを使う方法
inputタグは主にユーザーからデータを受け取るためのフォーム用の部品を作成する要素です。上述したaタグで使用できない送信フォームや次ページに進むためのボタンなどは、こちらのinputタグを使用して設定を行います。
例えば「input type=”button”」と記述すれば、他のWebページへ遷移できるボタンとして機能させることができます。また、同じく「input type=”text”」と記述すると単一行の入力欄が作成できます。他にも「checkbox」「color」「email」など様々な型があります。以下では、他のWebページへ遷移させるためのボタンを作成するサンプルコードを紹介します。
| inputタグでの記述 |
| <input type=”button” onclick=”location.href=’●●●.html'” value=”ここをクリックして●●●.htmlへ移動”> |
同じ機能にinputタグでフォーム送信用ボタンが作成できる「submit」などもありますが、CSSにおけるデザインに限界があるためデザインの自由度が高いbuttonの方がおすすめです。
buttonタグを使う方法
buttonタグはWebページ上にボタンを作成するタグです。buttonタグは閉じタグがあるため子要素が持てます。そのため、閉じタグの無いinputタグで作成するボタンよりも更にデザインの自由度が高くなります。
他のWebページへ遷移するためのボタンをはじめ、問い合わせや申込みなどのフォームへの入力内容を送信するボタンまで幅広く作成できます。以下ではWebページ上にボタンを作成するためのサンプルコードを紹介します。
| buttonタグでの記述 |
| <button type=”属性” name=”名前” value=”値”><font>ボタンに入れる文字</font></button> |
※
・属性＝「submit」「reset」「button」
・名前＝ボタンの名前を指定
・値＝ボタンに割り当てる値を指定（送信される文字列を指定）
遷移とその他の言葉の違い
ページ遷移を学ぶにあたって、「遷移」だけではなく、関連する用語も把握して区別することが重要です。遷移に関する言葉の意味と、関連語には下記のようなものが挙げられます。
● 遷移率とは？
● 回遊率とは？
Webサイトを作成する際、遷移率や回遊率を理解し、それらを意識すると、閲覧数が増えて目的を達成しやすくなります。それぞれ順番に解説します。
遷移率とは？
遷移率とは、該当するWebページを閲覧したユーザーが、そのページに掲載されているリンクをたどって別のページに飛んだ割合を示す言葉です。遷移率が高いWebページを作成できれば、そのWebページにユーザーが興味を持ったということとなり、その分だけコンバージョンにつなげられます。
裏を返せば、Webページを閲覧しているユーザーが、ブラウザバックをして離脱（ページから離れる）してしまう割合が高いほど、遷移率は低いということになります。
回遊率とは？
回遊率とは、Webサイト全体において、ユーザーが1回の訪問につき閲覧したPV（ページビュー）数の平均値を指します。回遊率は「PV数÷訪問数」という計算式で求めることができます。
回遊率が高いWebサイトとは、訪問数に対してPV数が多いサイトのことです。つまり、ユーザーが1つのページで離脱せず、ページを遷移し、1回の訪問で様々なページを閲覧しているということです。
回遊率が高いWebサイトほど、ユーザーに対する訴求力が高く、コンバージョンにつながる確率も高くなると考えられています。
関連記事：PV（ページビュー）とは！UUやセッションとの違いも合わせて解説！
遷移に関連するその他の言葉
Webの遷移について理解を深めるために知っておきたい言葉として以下があります。
● コンバージョン
● 導線
コンバージョン
「コンバージョン＝CV」とは日本語に訳すと、変換や転換、切り替えといった意味の名詞になります。Webマーケティングにおいては主に「成果」の意味合いでよく使われます。いわゆるユーザーの行動が成果に変換されるイメージから、こういった使い方がされています。
成果とは当該Webページにおける目標の達成を意味し、各々企業によって目標達成の捉え方は異なります。商品やサービスが売れることを成果に設定している企業もあれば、資料やサンプルのダウンロードをもって成果としている企業もあります。
また、単なる問い合わせや面接の約束のみを成果にしている企業もあります。企業によってそれぞれ成果とするところが異なることから、CVという一律の指標が使われています。
導線
導線とはユーザーを目的の場所まで誘導するルートのことを言います。例えば「LP＝ランディングページ」において、入り口からゴールである着地点までを一本の線に見立て、その線上にコンテンツをストーリー立てして配置していくことで、ユーザーが途中で離脱しないように着地点まで誘導します。
いわゆるストーリーテリングと言われる手法で、ストーリーに引き込むことでユーザーをゴールである着地点まで無意識のうちに誘導します。このようなユーザーを誘導するルートのことを導線と呼んでいます。
Webサイトの平均遷移率は？
Webサイトの平均遷移率は、業界や扱う商材、サイトの種類などによって大きく異なります。業界別のおおよその直帰率（1ページのみのセッション）としては、下記の表が目安になるでしょう。
| 業界 | 平均的な直帰率 |
| 不動産 | 44.50% |
| ショッピング | 45.68% |
| 金融 | 51.71% |
| IT関連・サービス | 62.24% |
| 飲食 | 65.62% |
出所：Bounce Rate Benchmarks: What’s a Good Bounce Rate, Anyway?
この表から、業界ごとに直帰率がかなり違うことが分かります。例えば、飲食業界のWebサイトの場合は、ユーザーが目的とするメニューや店舗の情報が見つかればそこで離脱をするため、ページ遷移はせずに回遊率は低くなります。
一方で、不動産やショッピングなど、ユーザーが消費をするためにあらゆる情報収集を必要とする業界のWebサイトでは、ページ遷移をする確率が高くなり、直帰率・離脱率も低くなる傾向にあるのです。
以上のことから、業界ごとのページ遷移の性質と照らし合わせて、Webサイトの大まかな遷移率の目標を設定し、ページごとに導線を工夫しましょう。
関連記事：
・直帰率とは？離脱率との違いと目安、改善方法をわかりやすく解説します
・セッションとは！意外に認識を間違う意味や計測方法を解説！
Webサイトの遷移はなぜ重要なのか？
Webサイトを設計する際、遷移について考えることはとても重要です。その理由は、下記の通りです。
● コンバージョンさせるページに遷移させないと売上が上がらないため
● 遷移率（回遊率）が高いとSEOで評価されるため
それぞれ詳しく解説します。
コンバージョンさせるページに遷移させないと売上が上がらないため
Webサイトの最も重要な目的として、購入・契約や問い合わせなどのコンバージョンにつなげることが挙げられます。
どんなにアクセス数が多くても、ユーザーをコンバージョンさせるページに導かないと、売上が上がらない可能性があるのです。コンバージョンさせるページにユーザーを導くためには、ページの導線を工夫したり、コンテンツを充実させてユーザーを引き込んだりして、遷移率を上げる必要があります。
関連記事：コンバージョンレート（CVR）とは！マーケ担当なら知っておきたい計算方法や改善方法！
遷移率（回遊率）が高いとSEOで評価されるため
回遊率に関しても言えることですが、遷移率が高いWebサイト・ページは、SEOで評価される可能性が高くなる（検索エンジンで上位表示されやすくなる）という特徴があります。
SEOで高く評価がされれば、PV・セッションを含めた各種数値の増加やそれによってユーザーの母数を増やすことにつながります。人目につく機会が増えれば、コンバージョン獲得の可能性はさらに高まるでしょう。
Webサイトの遷移はどのように確認する？
Webページの遷移を確認するためには、Googleアナリティクスを活用しましょう。Googleアナリティクスを使用した遷移率の確認方法は、下記の手順で行います。
1. Googleアナリティクスのナビゲーションサマリーを開く
2. ページごとの遷移を確認する
それぞれの項目について、詳しく解説します。
1.Googleアナリティクスのナビゲーションサマリーを開く
まずは、Googleアナリティクスの項目「ナビゲーションサマリー」を開きましょう。「行動」の項目から「サイトコンテンツ」→「すべてのコンテンツ」を選択すると、Webサイトの全てのページにおける遷移率が確認できます。
ナビゲーションサマリーの項目では、遷移率だけではなく、PV数や離脱率など、Webサイト運営において重要な数値も分かるため、他の数値も併せて確認しましょう。
2.ページごとの遷移を確認する
ナビゲーションサマリーでは、ページごとの遷移を確認できます。重要視するべきポイントとしては「コンバージョンさせるページへの遷移率はどれくらいか」が挙げられます。
コンバージョンさせるページへの遷移率が低い場合は、「ページとページの間の導線が悪い」「コンテンツの質が悪い」などの要因が考えられます。ナビゲーションサマリーで確認できる遷移率に手応えがない場合は、サイトやページの設計や見直しが必要になるでしょう。
Webサイトの遷移率が低い原因
遷移率が良くない要因としては、ユーザーが遷移先のページを閲覧するメリットを感じていない、などの可能性が考えられます。
例えば、リンクテキストやリンクボタンなどのUIがわかりづらい、ユーザーがタップやクリックをしたくなるようなリンクのタイトルや文言ではない、ページに訴求力がなくユーザーの興味をそそらないなど、ユーザーが離脱してしまう要因がないかを見直す必要があります。
遷移率が低いことを把握していながら、何も対策しないのは悪手です。遷移率が低い要因を洗い出して改善ができれば、コンバージョンの確率も高くなるでしょう。遷移率に手応えがないと感じたら、必ず要因がどこにあるかを考えて、Webサイトを見直してください。
関連記事：UI（ユーザーインターフェース）とは？意味や役割、UIデザインのポイント
Webサイトの遷移率を上げる方法
遷移率が低い場合には、何かしらの対策を打つ必要があります。しかし、Googleアナリティクスが提示する数値は、具体的に何が原因で遷移率が低く、どうすれば遷移率が上がるかまでを読み解くのは難しいです。
そのため、Webサイトの遷移率を上げる方法を一通り試す必要があります。Webサイトの遷移率を上げる方法としては、下記のような例が挙げられます。
● 内部リンクの文言を見直す
● コンバージョンに至るクッションページを用意する
● 新規記事を作成し、ユーザーの悩みを深堀りして解決する
それぞれ順番に解説します。
内部リンクの文言を見直す
まずは、サイト内の別のページへリンクする文言を見直しましょう。ユーザーが閲覧しているページと、リンクの文言が関連するかは、遷移させる上で非常に重要です。
ユーザーが、見たい・読みたいと思えるページだと思わせる文言をリンクテキストとして記載すれば、タップやクリックにつなげられ、遷移率が向上する可能性は高まります。
関連記事：SEOを意識しポイントを押さえたライティングとは？
コンバージョンに至るクッションページを用意する
各ページにいきなりコンバージョンするページへのリンクを掲載すると、ユーザーは情報不足だと感じてしまうかもしれません。
コンバージョンするページへすぐに導くのではなく、ユーザーにとって商品や商材がどれだけ魅力的な存在か、どれだけユーザーのメリットになるのかを、他のWebページを用いて十分に証明する必要があります。
そのため、ユーザーの満足度を上げるのに役に立つコンテンツや、情報を整備したクッションページを用意しましょう。クッションページを用いてユーザーを満足・信頼させることができれば、ユーザーがコンバージョンする可能性は高まります。
新規記事を作成し、ユーザーの悩みを深堀りして解決する
Webサイトのコンテンツが不足していると、扱う商品や商材への信頼はなかなか高められず、Webサイト全体の満足度も上がりません。
そこで、新規記事を作成してコンテンツを充実させましょう。商品や商材の説得力をコンテンツによって高め、ユーザーの好奇心を満たすことで、遷移率は向上し、コンバージョンの確率も高められます。
また、ユーザーの悩みを深堀りして解決することで、ユーザーがコンバージョンに至らない要因を先回りして防ぐこともできます。新規記事を作成した際は、遷移率を上げるために関連記事のリンクの見直しもしましょう。
関連記事を多く増やして、ページとページの導線を多く持てば、それだけユーザーの回遊率も上がります。まずは、ユーザーを離脱させないWebサイト作りを目指すことが重要です。
関連記事：コンテンツの正しい意味合いを理解しましょう！良質なコンテンツとは何か
導線を見直す
遷移率を上げる施策として導線を見直すことも有効です。Webサイトにおいて、ユーザーの離脱率が高い原因の一つに「分かりづらいWebサイト構成」が挙げられます。つまりWebサイト内が全体的に整理されておらず、どこにどのようなコンテンツがあるのかが分からない状態です。
このような場合は、ユーザーがWebサイト内で迷い目的のコンテンツまで辿り着くことができません。こういったWebサイトは往々にして導線が確保されておらず、ユーザビリティも芳しくない傾向にあります。
そういったことから、Webサイト内を整理してコンテンツに導線を持たせることも遷移率を上げる有効な施策となります。
遷移を増やすためにはハードルが低いコンバージョンの仕組みを用意しよう
コンバージョンには、商品の購入や問い合わせ、資料ダウンロードなど、様々な種類がありますが、ユーザーにとってハードルが高いと感じるコンバージョンを設定するのは避けたほうがいいでしょう。
例えば、コンバージョンが電話相談だけの場合ですと、電話にハードルを感じるユーザーも多いため、接触する機会の損失が増え、ページの遷移も減ってしまいます。一方で、メールフォームによる資料請求や問い合わせなどは、電話による問い合わせよりも気軽に行えますので、コンバージョンしやすいと言えるでしょう。
以上のように、コンバージョンの種類を増やしたり、ハードルの低いコンバージョンを用意したりすることで、ページの遷移率も向上する可能性が高まります。
関連記事：CTA設計・見直しでコンバージョン率を改善する方法
アニメーションでページ遷移を工夫してみよう
ページ遷移でアニメーションを使うメリットやデメリット、アニメーションの種類などについて解説します。
● ページ遷移にアニメーションを使うメリット
● ページ遷移にアニメーションを使うデメリット
● ページ遷移のアニメーションの種類
● ページ遷移のアニメーションをつくる方法
ページ遷移にアニメーションを使うメリット
ページ遷移にアニメーションを使うメリットとしては以下が挙げられます。
● ユーザー惹きつける効果がある
● 自社商品やサービスの宣伝に利用できる
ユーザー惹きつける効果がある
Webページが遷移する際にアニメーションが表示されることでユーザーを惹きつける効果が生まれます。そして仮に遷移に少々時間がかかったとしても、アニメーションに注視させることによって離脱率を低く抑える効果も期待できます。
自社商品やサービスの宣伝に利用できる
ページ遷移の際に、自社の商品やサービスをアニメーションとしてユーザーに見せることができれば、宣伝効果が期待できます。
また、化粧品や宝石、バッグなどの世界観やイメージが大切なブランド品である場合は、Webサイトのデザインと連携させることで、独自の演出を施すこともできます。
ページ遷移にアニメーションを使うデメリット
● Webページの表示速度が遅くなる可能性がある
● 内容を詰め込みすぎると意図が伝わりづらくなる
Webページの表示速度が遅くなる可能性がある
ページ遷移にアニメーションを取り入れると容量が増えて、ページの読み込み速度が遅くなる可能性があります。Webページの表示速度において3秒ルールというものがあり、アクセスしてから3秒が経過するとユーザーがストレスを感じて、得てして離脱率が高まることが知られています。
参考：公益財団法人日本電信電話ユーザー協会 ICT活用/電話応対教育でビジネスを成功に導く
アニメーションをユーザーに見せたいがために、表示速度が遅くなって離脱率が高まってしまうという本末転倒な結果にならないように気をつける必要があります。
内容を詰め込みすぎると意図が伝わりづらくなる
ページ遷移の際にアニメーションが表示される時間はほんの僅かです。そのため、あれもこれもと内容を詰め込みすぎると、最後まで表示されないばかりか、複雑になってユーザーにアニメーションの意図が伝わりづらくなります。
ページ遷移でアニメーションを取り入れるときは、表示させたい内容を厳選してシンプルな構成にする必要があります。
ページ遷移のアニメーションの種類
ページ遷移アニメーションには以下の種類があります。
● フェードイン
● フェードアウト
● スライドイン
● 動画挿入
フェードイン
フェードインとは暗い画面から明るい画面へ徐々に変わっていくことで期待感を演出する手法です。主にアニメーションの最初で使われます。
フェードアウト
フェードアウトはフェードインと逆で、明るい画面から暗い画面、もしくは画面に写っている内容を徐々に薄れさせていくことで終了を予見させる手法です。主にアニメーションの最後で使われます。
スライドイン
スライドインは画像をスライドさせて画面に滑り込ませる手法です。上下左右、もしくは斜めからスライドさせて表示させます。
動画挿入
動画挿入は遷移画面内に動画を埋め込む手法です。アニメーションの中に更に動画を埋め込むことでプロフェッショナルな演出を醸し出すことができます。
しかしながら、往々にして容量が増加する可能性が高く、表示速度が著しく低下する場合もあります。この手法を導入する際は何回かテストを行い、表示速度が低下していないかを確認する必要があります。
ページ遷移のアニメーションを作る方法
ページ遷移のアニメーションを作る方法としては以下があります。
● CSSを使う方法
● javascriptを使う方法
CSSを使う方法
CSSはシンプルなアニメーションを作成する場合に適した方法です。例えば、文字の大きさや色を変化させる、背景を何種類も交互に表示させる、場所や配置を変更させるなど、簡単な動きを付けたい場合などが挙げられます。
JavaScriptを使う方法
一方、JavaScriptは凝ったアニメーションを作成する場合に適した方法です。例えば、人物や物体に動きを持たせる、動きやスピードに緩急をつける、停止させたり巻き戻したりする、などアニメーションを細かく制御したい場合などが挙げられます。
まとめ
本記事では、Webサイトにおける遷移について解説しました。Webサイトのコンバージョン率を上げるには、Webサイトの中で遷移がしやすくなっているか、コンバージョンにつながるコンテンツが用意されているのか、を見直す必要があります。
その際に、遷移率や離脱率を意識することで、Webサイト内の導線が適切か、ユーザーに訴求できているかが分かります。
Googleアナリティクスを活用して、コンバージョンさせるページにどれだけのユーザーが遷移しているかを確認することで、Webサイト全体の改善に役立てることができます。ぜひ本記事を参考にして、多くのコンバージョンを生むWebサイト作りに励んでください。
