Twitterはこちら仕事依頼はこちら

追尾と相性が良い【CVボタンデザイン】マイクロコピー付きでコンバージョン率をあげる

CVボタンデザイン

CVボタンを作ります!

作成するCVボタンがこちら。

  • 簡単5分登録
  • 別途料金は発生しません


無料
公式HPはこちら

リンク先:https://www.google.com/

現在キャンペーン中!終了まで残りわずか!

PCで見てる方はスクロールしてサイドバーもご覧ください!

追尾ウィジェットに全く同じHTMLを入れてます。

注意
  • HTMLに不慣れな方は難しいかもしれません。
  • 追尾は対応してるWordPressテーマのみ使えます。

WordPressユーザー向けに書いてますがそれ以外でも使えると思います。

では早速作り方を見ていきましょう。

マイクロコピー付きCVボタンの作り方

手順は以下の通りです。

手順

STEP1:CSSをコピペ

CSSをコピペしていきます。

メモ

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

CSSが反映されない場合はスーパーリロード(Ctrl+F5orShift+F5)してください。

Copy
/************************************
** CVボタン
************************************/
.p-cv-btn-wrap *{
	margin:0 !important;
	padding:0 !important;
	box-sizing: border-box;
}
.p-cv-btn-wrap{
	background:#f7f7f7;
	padding:1.5em !important;
	margin: 0 0 2em !important;
	font-size:16px;
	line-height:1.8;
}
.p-cv-btn-wrap ul,.p-cv-btn-wrap a,.p-cv-note{
	max-width:350px;
	margin: auto !important;
	border:none;
}
.p-cv-btn-wrap ul li{
	font-weight:500;
	list-style:none;
	font-size:0.9em;
	position:relative;
	padding-left:1.5em !important;
}
.p-cv-btn-wrap ul li:before{
	font-family: "Font Awesome 5 Free";
	content: "\f00c" !important;
	font-weight:600;
	color:#1d89b5;
	position:absolute;
	left: 0 !important;
	top: 0 !important;
	width: 0 !important;
	height: 0 !important;
}
.p-cv-btn a{
	color:#fff;
	text-decoration:none !important;
	background:#90c231;
	border-bottom: solid 4px #61841f;
	padding: 0.5em 1em !important;
	border-radius: 7px;
	margin: 0.3em auto !important;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.p-cv-btn:hover{
	opacity:0.9;
}
.p-cv-btn a:active {
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	border-bottom: none;
}
.p-cv-btn .p-cv-em{
	font-size:0.9em;
	line-height: 1.3;
	text-align:center;
	font-weight:600;
	display:block;
	color:#90c231;
	background:#fff;
	padding: 5px 10px !important;
	margin: 2px 10px 0px 0 !important;
	border-radius: 30px;
	min-width: 55px;
	max-width: 80px;
}
.p-cv-btn .p-cv-text{
	font-size:0.9em;
	font-weight: 600;
	color:#fff;
	letter-spacing: 1px;
	border-left: 1px solid #fff;
	line-height: 25px;
	margin: 0.6em auto 0.6em 0 !important;
	padding: 0 0.6em 0 1em !important;
}
.p-cv-btn i,.p-cv-btn svg{
	color:#fff;
	min-width:22px;
}
.p-cv-url-wrap{
	font-size: 0.8em !important;
	max-width: 350px;
	margin: 0 auto 0.5em !important;
	display: block;
}
.p-cv-url-wrap a{
	color: #1a0dab !important;
	text-decoration:underline !important;
}
.p-cv-btn-wrap .p-cv-note{
	font-size:0.9em;
	border: 1px solid #90c231;
	margin-top:0.5em !important;
	padding:0.5em 1em !important;
}
.sidebar .p-cv-btn-wrap{
	background:#fff;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
/*320px以下*/
@media screen and (max-width: 320px){
	.p-cv-btn-wrap{
		padding:1em !important;
	}
}

FontAwesomeのアイコンが□になってしまう人はバージョンが異なります。バージョンが5.0以下の方はCSSを変更してください。

Before

.p-cv-btn-wrap ul li:before{
	font-family: "Font Awesome 5 Free";

After

.p-cv-btn-wrap ul li:before{
	font-family: "FontAwesome";

JINを使ってる方はCSSを2箇所変更してください。

1箇所目:Before

.p-cv-btn-wrap ul li:before{
	font-family: "Font Awesome 5 Free";
	content: "\f00c" !important;

1箇所目:After

.p-cv-btn-wrap ul li:before{
    font-family: 'jin-icons' !important;
    content: "\e90b" !important;

2箇所目:Before

.sidebar .p-cv-btn-wrap{
	background:#fff;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}

2箇所目:After

#sidebar .p-cv-btn-wrap {
    background: #fff;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.18);
}

ボタンのメインカラーを変える

.p-cv-btn a {
    color: #fff;
    text-decoration: none !important;
    background: #90c231;
    border-bottom: solid 4px #61841f;

ここの#90c231がカラーコードなので変更してください。

下の暗い部分は#61841fのカラーコードを変更してください。

箇条書きの色を変える

.p-cv-btn-wrap ul li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f00c" !important;
    font-weight: 600;
    color: #1d89b5;

ここの#1d89b5を変えてください。

ちなみにアイコンを変えたければf00cを変更すればOKです。アイコンはfontawesomeの公式から探せます。

下の枠線の色を変える

.p-cv-btn-wrap .p-cv-note {
    font-size: 0.9em;
    border: 1px solid #90c231;

ここの#90c231を変更してください。

STEP2:HTMLをコピペ

入れたい記事にHTMLをコピペします。

Copy
<div class="p-cv-btn-wrap">
<ul>
<li>簡単5分登録</li>
<li>別途料金は発生しません</li>
</ul>
<p class="p-cv-btn">
<a href="https://www.google.com/">
<span class="p-cv-em">無料</span>
<span class="p-cv-text">公式HPはこちら</span><i class="fas fa-chevron-circle-right"></i>
</a>
</p>
<p class="p-cv-url-wrap">リンク先:<a href="https://www.google.com/">https://www.google.com/</a></p>
<p class="p-cv-note">現在キャンペーン中!終了まで残りわずか!</p>
</div>

必要なマイクロコピーだけ選んでお使いください。

URLを載せる人はリンクがボタンとURL二つあるので設定を忘れずに。


クラシックエディタを使ってる方はテキストエディターに切り替えてHTMLをコピペしてください。

グーテンベルクの方はカスタムHTMLブロックにコピペしてください。再利用ブロックに登録しておけば、いつでも使えるようになります。

STEP3:必要であれば追尾ウィジェットにコピペ

PCの閲覧者が多いサイトでは追尾ウィジェットに貼るのもオススメです。

特定の記事に表示させるにはプラグイン「Widget Options」を使えばOK。

ちなみにCocoon利用者はプラグインがなくても使えます。

ウィジェットの表示を制御する方法
個々のウィジェットを「表示させたい場所」のみに表示させる表示設定機能の紹介です。表示設定機能を利用することで、表示条件を制御できます。

「Widget Options」の使い方については下記サイト等をご覧ください。

ウィジェットの表示条件を指定できるプラグイン「Widget Options」
ウィジェットの表示条件を指定したい!ってときどき思いませんか?いや、WordPressをいじっていると、必ずその時が来るはず。仕事でWordPress関連のものを請け負っても、「○○の時だけ表示したい...

投稿一覧から記事IDを調べて、その記事だけ表示にすればOKです。

ウィジェット増えまくるのがデメリット!

ウィジェットにHTMLを貼り付けるのでもいいですがショートコードを作成すると楽です。

これもWordPressテーマによってはデフォルトで機能がついてるかと思います。

  • Cocoon:アフィリエイトタグ
  • SWELL:ブログパーツ

WordPressテーマに機能がない場合はグーテンの再利用ブロックを使うか、プラグインを使いましょう。

ショートコードプラグイン

好きな方でOK!

どっちも使ったことないのでオススメはわかりません!

以上です!

活用例を紹介!

  • 売上が14倍になった企業のエピソード!
  • 今すぐつかえる刺さるキャッチフレーズ
  • やってはいけないNGコピーも


必読
Amazonで確認する

リンク先:https://www.amazon.co.jp/

劇的に売れる1行がつくれる!読み手の買いたいスイッチをONにしよう!

  • 見てもらう、買ってもらう、共感してもらう
  • 全てに効くネット文章術


必読
Amazonで確認する

リンク先:https://www.amazon.co.jp/

コピーを書いたことがない、でも、もっと商品を売りたい人におすすめ!

画像を入れたい人へ

活用例のように画像を入れたい人はHTMLとCSSを少し追記します。

HTML

Copy
<div class="p-cv-btn-wrap">
<div class="p-cv-btn-img"><a href="リンクURL"><img src="画像URL" width="横幅"></a></div>
<ul>
<li>簡単5分登録</li>
<li>別途料金は発生しません</li>
</ul>
<p class="p-cv-btn">
<a href="https://www.google.com/">
<span class="p-cv-em">無料</span>
<span class="p-cv-text">公式HPはこちら</span><i class="fas fa-chevron-circle-right"></i>
</a>
</p>
<p class="p-cv-url-wrap">リンク先:<a href="https://www.google.com/">https://www.google.com/</a></p>
<p class="p-cv-note">現在キャンペーン中!終了まで残りわずか!</p>
</div>

追記したのは2行目です。

横幅は200pxのように書いてください。

画像URLはメディア画像リンクをコピーからコピーできます。

CSS

下記CSSを追記してください。

Copy
.p-cv-btn-img{
	margin:0 auto !important;
	text-align:center;
	max-width:350px;
	display:block;
}

コメント

  1. こんにちは。
    いつも素敵なカスタマイズ、ありがとうございます!

    こちらはA8などの改変できないASPのリンクタグを貼って使う方法はありますでしょうか。
    よろしくお願いいたします。

    • >ききさん

      返信遅くなりまして申し訳ございません。

      ボタン化可能なタグでしたら使えます!
      HTMLの知識が多少ないと難しいかと思います。

ページトップへ