テキストリンクの色によってページ／セッションなどの数値に違いが生まれるのか

「 訪問してくれたユーザにもっと多くのページを見て欲しい。。。」

ホームページを運営している企業の担当者の方にとっては、切実な問題で誰もが抱く当然の思いです。

この記事では、そんなお悩みの一つの手助けとなる内容となっています。なぜなら、当社のブログ内でテキストリンクの色を2週間ずつ変え、実際にテストした結果を基にしたブログとなっているからです。

記事の中でどのようにテストを行ったのか、また実際にどのような結果が得られたのかを具体的にお伝えしていきます。

このブログを読んでいただければ、大きな修正をすることなくちょっとした修正で、良い結果を残す知識を得ることができます。

本題に入る前の前提の話として

先程触れましたが、ホームページを運営している企業の担当者の方にとって、訪問してくれたユーザに少しでも多くのページを見て欲しい、少しでも長く滞在して欲しいと思うのは当然のことだと思いますが、例えばページビュー数（PV数）が多いこと、平均セッション時間が多いことなどは、絶対的にそれが良いことだとは言いきれません。

なぜなら、サイトの構成が複雑でユーザが迷っていてPV数が増えているだけだったり、関連ページへ遷移するための適切なボタンやテキストリンクがないためにユーザが探しているからセッション時間が長くなっているだけということも考えられるからです。

とは言っても、一般的な傾向としてはPV数が多いほど、平均セッション時間が長いほど、それだけユーザが興味を持ってくれている、ユーザにとって役に立っているホームページだと言えます。

そのようなことから、ユーザに必要とされるコンテンツを提供することはもちろんですが、いかに関連ページやお問い合わせなどのページへ遷移させるかという導線設計にも気を配る必要があります。

この導線設計において重要なテキストリンクの色によって、ユーザがサイト内を回遊する動きに変化があるのかということについて掘り下げていきます。

テスト前のテキストリンクの色と下線設定の状況

当社ではアクセントカラーにオレンジを使用していますが、基本的にサイト全体のカラーとしては、白と黒で構成されているため、テキストリンクも全体のトーンに合わせて黒にしていました。

黒は他のテキストと同じ色になるため、文中でリンクだと認識できるようテキストリンクの文字には、下線を入れる設定にしていました。

テスト前の状況としては、上図のような状況でした。

テキストリンクのテスト内容

今回行ったテストは以下になります。

• 既存の黒に加え、Google ウェブマスター向け公式ブログで使用されている青（#4184F3）と当社アクセントカラーのオレンジ（#ff7f00）の3つの色の比較
• すべての色でテキストリンクには下線を設置
• 「黒 vs 青」「黒 vs オレンジ」「青 vs オレンジ」でそれぞれ比較
• 期間はそれぞれの色で2週間表示して比較
• ブログ記事内のみでテスト
• 比較した指標は、「ページ／セッション」「平均セッション時間」「離脱率」「直帰率」の4つ

「ページビュー数」は、テスト期間内にたまたまSNSなどからの流入が増えたなどの外部要因によって大きく数値が変わり、テキストリンクの色がどう影響するかという効果を測定するという今回の目的から逸れてしまうので外しています。

テキストリンクのテスト結果

結論

結論からお伝えてすると、青とオレンジとの間での優位性は見られませんでしたが、「黒 vs 青」「黒 vs オレンジ」の場合においては結果に大きな差が現れ、色を付けたテキストリンクの方が良い結果をもたらしました。

「黒 vs 青」は青が優位

• ページ／セッション：40.8% 改善
• 平均セッション時間：47.44% 改善
• 離脱率：26.34% 改善
• 直帰率：8.36% 改善

「黒 vs オレンジ」はオレンジが優位

• ページ／セッション：36.45% 改善
• 平均セッション時間：251.30% 改善
• 離脱率：33.48% 改善
• 直帰率：17.56% 改善

平均セッション時間は、たまたま数名の方が長く滞在したなど、何らかの異常値が含まれていると思われます。

「青 vs オレンジ」では明確な優位性はない

• ページ／セッション：3.09%（青が優位）
• 平均セッション時間：138.26%（オレンジが優位）
• 離脱率：9.70%（オレンジが優位）
• 直帰率：10.03%（オレンジが優位）

平均セッション時間は、先程述べたように何らかの異常値を含んでいる可能性があり、参考にならないと考えられます。その他の項目で確認すると、青が優位になる項目と、オレンジが優位になる項目があり、「どちらかが明らかに優位性がある」とは言えないという結論に達しました。

まとめ

テキストリンクの文字もサイト全体のデザインに合わせて黒にしていましたが、テキストリンクの色一つで大きく数値が変わることが分かりました。

改めて黒と青とオレンジを見比べて見たいと思います。

こうして見比べると、黒は下線を引いていてもぱっと見てテキストリンクがどこにあるか分かりづらいです。逆に青やオレンジの色をつけると、ぱっと見ただけでどこがテキストリンクが分かりやすいと感じるのではないでしょうか。

また、株式会社WACUL 副社長の垣内さんも下記のようにおっしゃっているのを見つけました。

大幅なレイアウト変更などがなく、修正レベルとしては比較的やりやすいものでありながら、「ユーザが使いやすくなる＝数値が改善する」ので、もし黒のテキストリンクを使用している場合は前向きに検討してみることをオススメします。

また、既にテキストリンクに色をつけている場合でも、よりクリックされる色というものが見つかるかもしれないので、色々テストをしてみるのもありだと思います。

「日々の仕事」ブログではホームページ制作の現場において実際の出来事や気づきなどのお役立ち情報を発信していますので、ぜひ他の「日々の仕事」も合わせてご覧ください。
他の「日々の仕事」はこちら