WordPress

ワードプレスのボタンのリンク設定!成約率を上げる色は?

ワードプレスのボタンのリンク設定!成約率を上げる色は?

ワードプレスでは簡単にボタンを設置することができます。

クリックされることが目的と言えるワードプレスのボタンには、クリック率や成約率を上げる色やデザインはあるのでしょうか?

こちらでは、ワードプレスのボタンの作り方やリンク設定、デザインについて解説したいと思います!

ワードプレスのボタンの作り方とリンク設定

ワードプレスでは、シンプルなデザインから、おしゃれなデザインまで様々な種類のボタンを作成することができます。

ボタンの作り方

ワードプレスのブロックエディタでは、標準で「ボタン」ブロックが用意されています。

上記のように、簡単にボタンを作ることができます。

  1. 「ボタン」を選択
  2. ボタンに文言を入力
  3. リンクの設定

ワードプレスのボタンの設定

作成したボタンでは、「塗りつぶしor輪郭」、色、枠線などの項目を設定することができます。

ブログのデザインに合わせて、デザインを選ぶようにしましょう!

基本的にボタンは、「クリックされること」を目的としています。

そのため、記事内の他の要素の中に埋もれてしまわないよう、ある程度目立たせる必要があります。

よほどシンプルなデザインのブログでない限り、「塗りつぶし」がおすすめです。

ただ、ボタンの文言をしっかりと読んでもらいたい場合は、「輪郭」を選ぶのもありです!

リンクの設定

ワードプレスのボタンのリンク設定

ボタンのリンク設定も、通常のテキストに対するリンク設定と同じような手順でできます。

リンク先が、「外部のサイト」であるならば、「新しいタブで開く」にチェックを入れておきます。

リンクには「rel属性」を設定することができます。

「rel属性」とは、「リンクでつながれた記事同士の関係性」を示す値です。

これまで、広告リンクには「nofollow」を指定することが一般的でした。

「nofollow」を設定することで、リンク先の記事に対してGoogleが評価しなくなり、アンカーテキストも評価しません。

ただ、新しく「sponsored」というrel属性が追加されました。

「sponsored」は、広告系のリンクに使います。

リンク先の記事で収益が発生する場合や、掲載広告、バナー広告などが当てはまります。

「sponsored」属性も、基本的には「nofollow」と同じ働きをします。

従って、現在はまだ、「sponsored」を使う必要性はありません。

ただ、推奨されている項目ではあるため、今から対処しておいても損はありません。

ワードプレスでクリック率が上がるボタンの色とは

ワードプレスでクリック率が上がるボタンの色はあるのでしょうか?

結論からいうと、全てに当てはまる「正解の色」というのはありません。

強いていうならば、「ブログに集まるユーザーの年代や性別、趣味や趣向に合わせてボタンの色を変える」のが正解です。

ちなみに、Mozilla Firefoxの調査によると、ダウンロード数が最も多かった色というのは「緑色」だとされています。

緑・・・77.3%

紫・・・76.9%

青・・・76.7%

黄・・・76.5%

かといって、ブログ全体で緑色を使っているデザインの中で、緑色のボタンを使ってしまうと、他の要素に埋もれてしまいます。

前述したように、ボタンは「クリックされること」を前提としています。

こういった場合は、緑色の補色を使うなどして目立たせた方が効果的です。

したがって、ボタンの色に画一的な正解はないと言えるのです。

色だけに関わらず、クリック率や成約率を高めるためのボタンのデザインというのはあるのでしょうか?

クリック率と成約率を高めるボタンのデザイン

ここで、成約率(CV)を高めるボタンについて解説したいと思います。

ボタンを構成する要素

まず、ボタンを構成する要素は、以下の通りです。

  • 文言(コピー文)
  • 配置場所とボタンの数
  • サイズと形

ボタンは、設置してみてから効果測定をして、随時改善をしていくことが大切です。

その上で、上記の4つの要素の組み合わせを変えることで、反応の変化を評価します。

評価基準もいろいろな要素がありますが、基本的にはクリック率→成約率の順番で改善をしていきます。

ボタンの色

ボタンの色は、周囲の色と対比する「補色」を選ぶようにします。

補色とは、互いの色を最も目立たせる色の組み合わせです。

また、色のイメージを考えることも効果があります。

赤・・・熱い、危険、派手、情熱的

オレンジ・・・明るい、元気、かわいい、親しみやすい

緑・・・安らぎ、落ち着き、癒し、爽やか、安全

青・・・冷たい、冷静、知的、信頼、誠実

紫・・・高貴さ、神秘的、やさしさ、女性的、大人

色のイメージからすると、「赤・オレンジ・緑」などが、ボタンに向いています。

ボタンの文言

ボタンの文言では、次のようなことを意識することがポイントです。

  • どういったページに移動するのかを明確にする
  • ボタンを押す心理的ハードルを和らげる効果

ボタンをクリックするという行為は、思っている以上に心理的なハードルが高いものです。

ユーザーがボタンをクリックしやすくするために、「マイクロコピー」と呼ばれる文言をボタンの近くに配置することも効果的です。

例えば、次のような文言があります。

無料

30秒で完了!

期間限定!

ユーザーの感情を高ぶらせるような文言を選びます。

ボタンの配置場所と数

ボタンの配置場所も、クリック率や成約率に関わる重要な要素です。

従来であれば、ボタンの配置場所は、「記事の上部」「記事の真ん中」「記事の下部」の3箇所です。

しかし、最近では、ユーザーが膨大な情報に触れることによる「広告疲れ」の影響があり、1記事に3箇所の広告リンクは不快感を与えてしまう可能性があります。

そのため、ボタンの配置場所や数においても、記事ごとに精査することが大切です。

ポイントとしては、「熟読されるエリア」に配置することです。

一般的に、ブログの記事をユーザーは全て上から下まで読んでいません。

自分に必要な部分だけを読んでいます。

その熟読されるエリアに、適切にボタンを配置することでクリック率と成約率を上げることが期待できます

熟読されているエリアを把握するのに、「ヒートマップ」が役立ちます。

無料でも使えるものがありますが、より厳密に効果測定をするためには、有料のヒートマップを使うことをおすすめします!

サイズと形

まず、大前提として、「ボタンだと認識できる形と大きさにすること」が重要です。

  • ボタンに影をつける
  • グラデーションを使う

ボタンに影をつけたり、グラデーションを使うことで、「これはクリックできる」と認識してもらいやすくなります!

また、周囲にも複数のボタンやリンクがある場合は、「成約に直結するボタン」を最も目立つようにします。

ただ、あまりにも目立ちすぎると「広告感」が強まり、ユーザーの「広告疲れ」を誘発してしまいます。

このあたりは、効果測定を随時行って、適切なボタンの形とサイズを探していくしかありません。

ワードプレスのボタンのリンク設定!成約率を上げる色は?のまとめ

ワードプレスでは、次の手順で簡単にボタンを作成することができます。

  1. 「ボタン」を選択
  2. ボタンに文言を入力
  3. リンクの設定

リンクを設定するときは、外部サイトの場合は「新しいタブで開く」にチェックを入れておきます。

ボタンには次のような要素があります。

  • 文言(コピー文)
  • 配置場所とボタンの数
  • サイズと形

ボタンの色は、「緑色」が最もクリックされるとう調査結果もありますが、基本的には、記事ごとに効果測定を行い、適切な色を選びます。

文言を使って、「ボタンを押す心理的なハードル」を下げるように心がけます。

最後までご覧いただき、ありがとうございました!