ワードプレスでは簡単にボタンを設置することができます。
クリックされることが目的と言えるワードプレスのボタンには、クリック率や成約率を上げる色やデザインはあるのでしょうか?
こちらでは、ワードプレスのボタンの作り方やリンク設定、デザインについて解説したいと思います!
ワードプレスのボタンの作り方とリンク設定
ワードプレスでは、シンプルなデザインから、おしゃれなデザインまで様々な種類のボタンを作成することができます。
ボタンの作り方
ワードプレスのブロックエディタでは、標準で「ボタン」ブロックが用意されています。

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

作成したボタンでは、「塗りつぶしor輪郭」、色、枠線などの項目を設定することができます。
ブログのデザインに合わせて、デザインを選ぶようにしましょう!
基本的にボタンは、「クリックされること」を目的としています。
そのため、記事内の他の要素の中に埋もれてしまわないよう、ある程度目立たせる必要があります。
よほどシンプルなデザインのブログでない限り、「塗りつぶし」がおすすめです。
ただ、ボタンの文言をしっかりと読んでもらいたい場合は、「輪郭」を選ぶのもありです!
リンクの設定

ボタンのリンク設定も、通常のテキストに対するリンク設定と同じような手順でできます。
リンク先が、「外部のサイト」であるならば、「新しいタブで開く」にチェックを入れておきます。
リンクには「rel属性」を設定することができます。
「rel属性」とは、「リンクでつながれた記事同士の関係性」を示す値です。
これまで、広告リンクには「nofollow」を指定することが一般的でした。
「nofollow」を設定することで、リンク先の記事に対してGoogleが評価しなくなり、アンカーテキストも評価しません。
ただ、新しく「sponsored」というrel属性が追加されました。
「sponsored」は、広告系のリンクに使います。
「sponsored」属性も、基本的には「nofollow」と同じ働きをします。
従って、現在はまだ、「sponsored」を使う必要性はありません。
ただ、推奨されている項目ではあるため、今から対処しておいても損はありません。
ワードプレスでクリック率が上がるボタンの色とは
ワードプレスでクリック率が上がるボタンの色はあるのでしょうか?
結論からいうと、全てに当てはまる「正解の色」というのはありません。
強いていうならば、「ブログに集まるユーザーの年代や性別、趣味や趣向に合わせてボタンの色を変える」のが正解です。
ちなみに、Mozilla Firefoxの調査によると、ダウンロード数が最も多かった色というのは「緑色」だとされています。
かといって、ブログ全体で緑色を使っているデザインの中で、緑色のボタンを使ってしまうと、他の要素に埋もれてしまいます。
前述したように、ボタンは「クリックされること」を前提としています。
こういった場合は、緑色の補色を使うなどして目立たせた方が効果的です。
したがって、ボタンの色に画一的な正解はないと言えるのです。
色だけに関わらず、クリック率や成約率を高めるためのボタンのデザインというのはあるのでしょうか?
クリック率と成約率を高めるボタンのデザイン
ここで、成約率(CV)を高めるボタンについて解説したいと思います。
ボタンを構成する要素
まず、ボタンを構成する要素は、以下の通りです。
ボタンは、設置してみてから効果測定をして、随時改善をしていくことが大切です。
その上で、上記の4つの要素の組み合わせを変えることで、反応の変化を評価します。
評価基準もいろいろな要素がありますが、基本的にはクリック率→成約率の順番で改善をしていきます。
ボタンの色
ボタンの色は、周囲の色と対比する「補色」を選ぶようにします。
補色とは、互いの色を最も目立たせる色の組み合わせです。
また、色のイメージを考えることも効果があります。
色のイメージからすると、「赤・オレンジ・緑」などが、ボタンに向いています。
ボタンの文言
ボタンの文言では、次のようなことを意識することがポイントです。
ボタンをクリックするという行為は、思っている以上に心理的なハードルが高いものです。
ユーザーがボタンをクリックしやすくするために、「マイクロコピー」と呼ばれる文言をボタンの近くに配置することも効果的です。
例えば、次のような文言があります。
ユーザーの感情を高ぶらせるような文言を選びます。
ボタンの配置場所と数
ボタンの配置場所も、クリック率や成約率に関わる重要な要素です。
従来であれば、ボタンの配置場所は、「記事の上部」「記事の真ん中」「記事の下部」の3箇所です。
しかし、最近では、ユーザーが膨大な情報に触れることによる「広告疲れ」の影響があり、1記事に3箇所の広告リンクは不快感を与えてしまう可能性があります。
そのため、ボタンの配置場所や数においても、記事ごとに精査することが大切です。
ポイントとしては、「熟読されるエリア」に配置することです。
一般的に、ブログの記事をユーザーは全て上から下まで読んでいません。
自分に必要な部分だけを読んでいます。
その熟読されるエリアに、適切にボタンを配置することでクリック率と成約率を上げることが期待できます。
熟読されているエリアを把握するのに、「ヒートマップ」が役立ちます。
無料でも使えるものがありますが、より厳密に効果測定をするためには、有料のヒートマップを使うことをおすすめします!
サイズと形
まず、大前提として、「ボタンだと認識できる形と大きさにすること」が重要です。
ボタンに影をつけたり、グラデーションを使うことで、「これはクリックできる」と認識してもらいやすくなります!
また、周囲にも複数のボタンやリンクがある場合は、「成約に直結するボタン」を最も目立つようにします。
ただ、あまりにも目立ちすぎると「広告感」が強まり、ユーザーの「広告疲れ」を誘発してしまいます。
このあたりは、効果測定を随時行って、適切なボタンの形とサイズを探していくしかありません。
ワードプレスのボタンのリンク設定!成約率を上げる色は?のまとめ
ワードプレスでは、次の手順で簡単にボタンを作成することができます。
リンクを設定するときは、外部サイトの場合は「新しいタブで開く」にチェックを入れておきます。
ボタンには次のような要素があります。
ボタンの色は、「緑色」が最もクリックされるとう調査結果もありますが、基本的には、記事ごとに効果測定を行い、適切な色を選びます。
文言を使って、「ボタンを押す心理的なハードル」を下げるように心がけます。
最後までご覧いただき、ありがとうございました!
緑・・・77.3%
紫・・・76.9%
青・・・76.7%
黄・・・76.5%