クリックボタンの特徴、色、クリック率の高いボタンを作る方法について、事例を元に解説し、まとめました。
緑色のボタンは本当にクリック率が高いのか、など様々な仮説や調査データに基づき、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万人しか見込めなかったと想定されている。
その結果、オバマ側が得たもの
オバマ側が得たもの１：A/Bテストをしたことで、メール会員数が288万人増えた。
会員登録してくれた人の10%程度がボランティアスタッフとして協力者となった。
オバマ側が得たもの２： A/Bテストをしたことで、ボランティアが28万8,000人増えた
オバマ側が得たもの３： A/Bテストをしたことで、寄付金が6,000万ドル増えた
実際、会員登録してくれた人は平均21ドル寄付したのである。
そこで、「AFFINGER6で作るコンバージョン率を高めるボタンのアイディア」をご紹介していくね 。
クリックボタンの特徴はコレ！（カスタマイズ案１２選）
クリックボタンの特徴１：「緑（進めを意味する）ボタン」に変更する
クリックボタンの特徴２：「立体的なボタン」に変更する
クリックボタンの特徴３：「購入する」という表記を「公式サイトへ行く」に変更する
クリックボタンの特徴４：「〇〇についてはこちらから」に変更する
クリックボタンの特徴５：「さらに詳しく」と変更する
クリックボタンの特徴６：「購入する」という表記を「無料体験はこちらから」と変更する
パターン１
パターン２
オバマ公式サイトの改善例：「寄付する」を「貢献する」に変更で10%コンバージョン率アップ！
「Donate(寄付する)」と「Contribute(貢献する)」の２種類の行動を促すフレーズのテストでは、「Contribute(貢献する)」の方が、10%コンバージョン率の改善が見られた。
クリックボタンの特徴７：「＞＞」（リンクマーク）をつける
クリックボタンの特徴８：「たった5分で簡単」とマイクロコピーを書き添える
クリックボタンの特徴９：「今すぐ無料体験してみる」とマイクロコピーを書き添える
今すぐ無料体験してみる！
クリックボタンの特徴１０：「さらに詳しく」と「購入はこちらから」ボタンをを併用する
クリックボタンの特徴１１：「Amazonの公式ショッピングサイト」の理論に基づき、「自社のイメージカラー」に合わせた色を採用する
アマゾンのショッピングサイトの例１：「カートに入れる」と「今すぐ買う」を併用パターン
アマゾンのショッピングサイトの例２：「カートに入れる」単体パターン
AFFINGER6ならこんな感じ。
パターン１
パターン２
パターン３
パターン４
パターン５
無料資料請求はこちらからAFFINGER6のボタンを自分ののサイトでも使ってみたい人はこちらから
クリックボタンの特徴１２「オバマの公式サイト」の理論に基づき、「家族の写真」を併用し「さらに詳しく」のボタンを設置する
AFFINGER6ならこんな感じ。
パターン１
パターン２
今回はアフィリエイトで収益化アップ、コンバージョン率アップに繋げる、アフィンガー5ボタンカスタマイズの方法とそのアイディアについて解説しました。
アフィリエイトのリンクを貼る時、クリック率は非常に大切な指標となっている。
実際、「普通のテキストリンク」よりも「ボタン」にするだけで20%以上クリック率が伸びると言われている。
今回の内容をまとめると
・緑のボタンは確かにコンバージョン率は高い
・あなたのサイトの色に合わせてボタンの色を考える必要が
・ボタンの色をブランドのイメージカラーに合わせるのもあり
・ボタンに添えるマイクロコピーは重要である
・「購入する」ではなく「さらに詳しく」のように表記を変え、読者がクリックするハードルを下げる工夫が必要である
AFFINGER6で、ボタンをカスタマイズすることで効果的に収益化を図っていこう。
AFFINGER6についてさらに詳しく知りたい人はこちらから
※こんなボタンがとっても簡単に作れるよ
次回もよろしくね by プロゆき
