Web副業/転職スキルを学ぶ 適職診断×人気転職先

【爆売れ・特徴12・クリックボタン】クリックされやすいボタンの特徴・色

『週刊転職』編集長:かわちゃん

『週刊転職』副マガ.jpを運営しております。編集長の「かわちゃん」です。 かわちゃんの経歴:GREE(SEOコンサル)→TECH CAMPにてAIエンジニアの勉強をする→ByteDance,inc(TikTok)→『週刊転職』を運営中! 「新時代を創る、副業から転職へ」。をコンセプトに、25歳〜39歳前後の会社員の心に寄り添い、質の高い情報を発信中! どうぞよろしくお願いいたします。

クリックボタンの特徴、色、クリック率の高いボタンを作る方法について、事例を元に解説し、まとめました。

緑色のボタンは本当にクリック率が高いのか、など様々な仮説や調査データに基づき、AFFINRE5(WordPress有料テーマ)でクリックされやすいボタンの特徴、色、カスタマイズ案について詳しくお伝えしていきます。

「クリックされやすいボタンの特徴や作り方」について悩んでいる人は必見の記事内容となっています。

私が調査した、「オバマ大統領公式サイトのボタンの事例」や「 Firefoxの緑のボタンの事例」などを取り上げ、

この記事を読み終わった頃には、あなたにぴったりなボタンのカスタマイズ方法、クリック率の高いボタンの特徴などをお学び、「今回の調査から導き出したボタンレシピ」をもとにすぐ実践することができます。

AFFINRE5で作る、クリックされやすいボタンはどういったものなのかまとめたので、ぜひお楽しみください。

・クリック率の高いボタンの色を知りたい人へ

・クリックされやすいボタンの特徴を知りたい人へ

・AFFINGER6でMC ボタンカスタマイズの方法を知りたい人へ

・クリックされやすいボタンをアフィンガー5で作る際の注意点を知りたい人へ 

かわちゃん(週刊転職・編集長)

【本記事の信頼性】かわちゃんから読者の皆様へ

1:複数のIT企業でのインターン(SEO・マーケティング)をする傍ら、現場の社員の悩みを観察し得られた本音や知見

2:権威性の高い(副業/ブログ/クリックされやすいボタンにまつわる)調査データ

3:私(ビジネスマンのお悩みコンサル)の体験談、鋭い視点や本音

等に基づき、かわちゃん(私)が責任を持って「高品質で専門性の高い記事」を執筆しています。

ぜひ、『副業マガジン』で、あなたのお悩みをどしどし検索してみてください。

読者の皆様の夢の実現を、後押しできることを大変嬉しく思っています。

↓↓タップで飛べる目次

クリックボタンの特徴・色が判明!

まずは、AFFINGER6における、「カスタムMCボタン」(立体的なボタン)の作り方を説明していくね。

とっても簡単でした。

今回は実例として、上のようなボタンを作っていくよ。

左のプラスを押して→クラシックを選択!

次に、タグ→カスタムボタン→MC ボタン→グリーンの順で

文字列が出てくる

アフィリエイトボタンを作る時、赤い文字のところをカスタマイズしていくことで、あなたなりのオリジナルなボタンが出来上がるよ。

文字の色や背景の色については以下のコードリストを参照

>>文字や背景の色のコードリストはこちらから

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

こんな感じで出来上がり。

続いて、AFFINGER6のカスタムボタンを用いて、どのようにして「クリック率」「コンバージョン率」を高めていくか、様々な研究事例をもとに解説していくね。

あの大企業も「緑のダウンロードボタン」を採用!クリックボタン

最近、Firefoxをダウンロードするときに表示されるボタンが緑色基調に統一されるようになった。

これは偶然ではない。

企業のイメージカラーでもない。

調査の結果、この色の場合がもっともダウンロード数が多かったことが理由になっていると「Firefox is Green - Blog of Metrics」で報告されている。

参考:https://blog.mozilla.org/metrics/2009/06/19/firefox-is-green/

Firefoxのダウンロードボタンの色とダウンロード数、クリック数に関する調査記事によれば、緑色のボタンが一番ダウンロードされ、クリック数もダウンロード数もたかったという事実が判明した。

今回の調査分析を担当しているMozilla Metricsはwww.mozilla.comにおいて1週間ごとにFirefoxダウンロードボタンの色を変更して、ダウンロードにどういった違いがでるかを調査したという。

訪問者の数から実際にダウンロードを実施した割合は76.5%から77.3%と、どの色でもほとんど違いがないが、訪問者数には次のような違いがあったとされている。

・緑のボタン(930,752)

・青のボタン (256,344)

・紫のボタン (255,894)

・橙のボタン (255,811)

また、国内最大規模のオンラインソフトウェア流通サイトVectorも

緑バナーボタンに変更している。

緑色というのは、「平和、安全、自然、爽やか、健康、癒し」という印象を与えている。

反対に赤は、「怒り 危険 」を暗示し、赤いバナーを見ると人はクリックをためらう傾向がある。

赤色ボタン vs. 黄色ボタン vs. 緑色ボタン vs. 青色ボタンなど様々な色テストがなされている中、全体的に「緑色」のボタンが勝っていることも多いという事実がある。

たしかに、赤色は注目させる色ではあるが、申込ボタン、CTAボタンというのは読者を次のステップに進ませる(押させる)ものである。

よく考えると、世界中のどこに行っても、信号機はまったく同じ色である。

赤色は「止まれ」、緑色は「進め(次の行動に移せ)」である。

一方で Amazon の公式ショッピングサイトのように自社のイメージカラーをボタンにそのまま採用しっているしてコンバージョン率を上げるという考え方もある。

したがって、確かに緑のボタンはコンバージョン率が高いかもしれない。

しかし、「自社のブランドイメージカラーやサイトのデザイン」の中で、その色が目立つ、マッチしているかにも注意した上で、コンバージョンボタンを考える必要がある、と言えるのではないだろうか。

コンバージョンボタンとはまず初めにコンバージョンボタンとは何か説明して行くね。

クリックボタン・CTAボタンとは

CTAとは、Web サイトに訪れた人に対し資料請求や無料ダウンロードなどを促し、「読者に次のアクションを起こしてもらうためのボタン」のことである。

CTAとは、コールトゥアクション(CTA)。

別名、コンバージョンボタンとも言われている。

CTAボタンのデザインや設置位置等を工夫することで、クリック率、コンバージョン率、資料請求や無料ダウンロード成約率に影響するのである。

そこで今回は、AFFINGER6でコCTAボタンに一工夫加えるには、どうすれば良いのか。

この記事は、私なりに編み出した、AFFINGER6で作るCTAボタンレシピを今回はまとめたものである。

AFFINGER6で、具体的にどうすればコンバージョン率の高いボタンを作ることができるのか説明していくね。

オバマ氏の公式サイトのボタン例:「さらに詳しく」クリックボタンがコンバージョン率が最も高かった!

オバマに限らず、インターネットが普及した現在、どの候補者も選挙期間中の「WEB改善」に力を入れている。

オバマ大統領誕生に貢献したA/Bテストの事例

2007年12月ごろに実際にテストが行われたのはオバマ氏の公式サイト。(現在はかなりデザインが変わっている)

参考:

How Obama Raised $60 Million by Running a Simple Experiment

このサイトでのコンバージョンに当たるものは「SIGN UP」というメール会員への登録である。

寄付を呼びかけたり、ボランティアの選挙スタッフを集めたりする上で、支援者のメールアドレスの獲得は非常に重要であったといわれている。

シロカー氏は、このサイトのトップページのメインビジュアルとコンバージョンボタンでそれぞれ下記のパターンを用意し、A/Bテストを行った。

・メインビジュアル:画像3パターン、動画3パターンの計6パターンを用意

・コンバージョンボタン:ラベルの文言を変更した計4パターンを用意

ラベルを変更した4パターンを用意し調査。

ボタン

パターン1(オリジナル):SIGN UP「会員登録」

パターン2:SIGN UP NOW「今すぐ会員登録」

パターン3:JOIN US NOW「今すぐ参加する」

パターン4:LEARN MORE「もっと詳しく」

全24パターンのうち、今回のテストでもっともコンバージョン率が高かったのは、以下のパターンであった。

・パターン2(画像の特徴):家族と一緒に写っている写真

・パターン4(ボタンの特徴):LEARN MORE「さらに詳しく」の組み合わせが1位となった。

コンバージョン率(メール会員登録率)は11.6%となり、オリジナルのパターンの1.4倍を記録した。

また、選挙活動中のメール会員登録数1,000万人を記録した。

一方で、A/Bテストをしていない場合には712万人しか見込めなかったと想定されている。


その結果、オバマ側が得たもの

オバマ側が得たもの1:A/Bテストをしたことで、メール会員数が288万人増えた。

会員登録してくれた人の10%程度がボランティアスタッフとして協力者となった。

オバマ側が得たもの2: A/Bテストをしたことで、ボランティアが28万8,000人増えた

オバマ側が得たもの3: A/Bテストをしたことで、寄付金が6,000万ドル増えた

実際、会員登録してくれた人は平均21ドル寄付したのである。

そこで、「AFFINGER6で作るコンバージョン率を高めるボタンのアイディア」をご紹介していくね 。

クリックボタンの特徴はコレ!(カスタマイズ案12選)

クリックボタンの特徴1:「緑(進めを意味する)ボタン」に変更する 




クリックボタンの特徴2:「立体的なボタン」に変更する 


AFFINGER6

クリックボタンの特徴3:「購入する」という表記を「公式サイトへ行く」に変更する

クリックボタンの特徴4:「〇〇についてはこちらから」に変更する

クリックボタンの特徴5:「さらに詳しく」と変更する

クリックボタンの特徴6:「購入する」という表記を「無料体験はこちらから」と変更する

パターン1

無料体験はこちらから

パターン2

オバマ公式サイトの改善例:「寄付する」を「貢献する」に変更で10%コンバージョン率アップ!

「Donate(寄付する)」と「Contribute(貢献する)」の2種類の行動を促すフレーズのテストでは、「Contribute(貢献する)」の方が、10%コンバージョン率の改善が見られた。

クリックボタンの特徴7:「>>」(リンクマーク)をつける

クリックボタンの特徴8:「たった5分で簡単」とマイクロコピーを書き添える

AFFINGER6

さらに詳しく

※たった5分で簡単にスタート

クリックボタンの特徴9:「今すぐ無料体験してみる」とマイクロコピーを書き添える 

AFFINGER6についてさらに詳しく

今すぐ無料体験してみる!

AFFINGER6

クリックボタンの特徴10:「さらに詳しく」と「購入はこちらから」ボタンをを併用する

さらに詳しく

クリックボタンの特徴11:「Amazonの公式ショッピングサイト」の理論に基づき、「自社のイメージカラー」に合わせた色を採用する

アマゾンのショッピングサイトの例1:「カートに入れる」と「今すぐ買う」を併用パターン

アマゾンのショッピングサイトの例2:「カートに入れる」単体パターン

AFFINGER6ならこんな感じ。

パターン1

さらに詳しく

パターン2

パターン3

割引キャンペーンはこちらから

パターン4

転職サイトに無料登録はこちら

パターン5

無料資料請求はこちらから

AFFINGER6のボタンを自分ののサイトでも使ってみたい人はこちらから

クリックボタンの特徴12「オバマの公式サイト」の理論に基づき、「家族の写真」を併用し「さらに詳しく」のボタンを設置する 

AFFINGER6ならこんな感じ。

パターン1

さらに詳しく

パターン2

さらに詳しく

AFFINGER6

今回はアフィリエイトで収益化アップ、コンバージョン率アップに繋げる、アフィンガー5ボタンカスタマイズの方法とそのアイディアについて解説しました。

アフィリエイトのリンクを貼る時、クリック率は非常に大切な指標となっている。

実際、「普通のテキストリンク」よりも「ボタン」にするだけで20%以上クリック率が伸びると言われている。

今回の内容をまとめると

・緑のボタンは確かにコンバージョン率は高い

・あなたのサイトの色に合わせてボタンの色を考える必要が

・ボタンの色をブランドのイメージカラーに合わせるのもあり

・ボタンに添えるマイクロコピーは重要である

・「購入する」ではなく「さらに詳しく」のように表記を変え、読者がクリックするハードルを下げる工夫が必要である 

AFFINGER6で、ボタンをカスタマイズすることで効果的に収益化を図っていこう。

AFFINGER6についてさらに詳しく知りたい人はこちらから 

AFFINGER6についてさらに詳しく

※こんなボタンがとっても簡単に作れるよ

次回もよろしくね by かわちゃん 

↓無料【内向型適職診断テスト50】2021年おすすめの転職先は〇〇〇〇。

内向型の適職診断・人気転職先は〇〇〇〇。

>>内向型「適職診断テスト50」を始める!

※21年最新!内向的な友人25人に直接聞いた【人気転職先シート】無料特典付き。
※たった1分で完了。

↓人気カテゴリーを見る!

『週刊転職』編集長:かわちゃん

『週刊転職』副マガ.jpを運営しております。編集長の「かわちゃん」です。 かわちゃんの経歴:GREE(SEOコンサル)→TECH CAMPにてAIエンジニアの勉強をする→ByteDance,inc(TikTok)→『週刊転職』を運営中! 「新時代を創る、副業から転職へ」。をコンセプトに、25歳〜39歳前後の会社員の心に寄り添い、質の高い情報を発信中! どうぞよろしくお願いいたします。

  • この記事を書いた人
  • 最新記事

『週刊転職』編集長:かわちゃん

『週刊転職』副マガ.jpを運営しております。編集長の「かわちゃん」です。 かわちゃんの経歴:GREE(SEOコンサル)→TECH CAMPにてAIエンジニアの勉強をする→ByteDance,inc(TikTok)→『週刊転職』を運営中! 「新時代を創る、副業から転職へ」。をコンセプトに、25歳〜39歳前後の会社員の心に寄り添い、質の高い情報を発信中! どうぞよろしくお願いいたします。

人気記事を読む!

1

この記事を読むと分かること 卒業生の体験談に基づく、マケキャンの評判、口コミ、強みが分かる。 マケキャンの転職保証のしくみ、転職先のWebマーケティング会社、注 ...

2

この記事を読むあなたへ(デジプロはこんな人におすすめ) デジプロで、Webマーケティング、広告運用を実践的に学びたい人 デジプロ、マケキャン、テックアカデミー等 ...

3

この記事を読むあなたへ HSP繊細な会社員10人に聞いた、使ってよかった「転職エージェント、転職サイト」がわかる。 HSP繊細な人こそ、転職エージェントを使うこ ...

-Web副業/転職スキルを学ぶ, 適職診断×人気転職先