アフィリエイトのコンバージョンを高めるかもしれないボックスとボタン(CSS)

アフィリエイトサイトを作る時、LPの画像をどれかいいのを貼って、あとは見出しつけて、文章だぁ〜〜〜〜〜っと書く ってしていませんか? 僕もそんな感じです。

けど今よりもコンバージョンが上がるページが簡単に作れたらいいですよね〜。

閲覧ユーザーからみても、ストレスがかからないので、より欲しい情報がゲットしやすいですよね。

そこで、今日はアフィリエイト向けに使えそうなデザインをCSSで作りました。特にスマホからのコンバージョンを意識しています。ただ海外サイトからパクって改造しただけなんですけどね・・・。

今回、2つご用意しました。

1つは、商品特徴をH3見出し付きで紹介するボックス

もう一つは、ボタンをスマホで押しやすく右下に配置したボックス

ではどうぞ。



商品特徴からの〜続きを見るボックス

商品特徴 その1 大きくなる

商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。

続きを見てみる

※続きを見てみるボタンは、シンプリィシティのCSSを利用しているので、他のワードプレステーマでは表示されません。適当に代用してください。
HTMLコード

<div class="gbox">
<div class="info">
<h3 class="text-center">商品特徴 その1 大きくなる</h3>
<p>商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。<br />
<br />
</p>
<p><a class="btn btn-green btn-l btn-hand-o-right" href="#" rel="nofollow">続きを見てみる</a></p>
</div>
</div>

CSSに下のコードを追加します。

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

.gbox {
    border: 2px solid #da4033;
    border-radius: 3px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    padding: 10px 25px;
    display: block;
    margin-top: 60px;
}
.info h4 {
    font-size: 26px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.info > p {
    color: #717171;
    font-size: 16px;
    padding-top: 10px;
    text-align: justify;
}

パクり元はこちら
http://bootsnipp.com/snippets/featured/box-material-design

スマホで押しやすい丸い続きを見るボタン

商品特徴 その2 小さくなる

商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。

HTML

<div class="gbox2">
<h3 class="text-center">商品特徴 その2 小さくなる</h3>
<p>商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。商品特徴の説明を載せます。</p>
<button class="g-circle">続きを読む</button></div>

CSSはこれ

.gbox2{
	border: 2px solid #dd5347;
    border-radius: 2px;
    padding: 10px 30px 120px 30px;
    display: block;
    position:relative;

}

.g-circle {
	box-shadow: 2px 4px 0 2px rgba(0,0,0,0.1);
	border: .5em solid #E84D0E;
	font-size: 1em;
	line-height: 1.1em;
	color: #ffffff;
	background-color: #e84d0e;
	margin: auto;
	border-radius: 50%;
	height: 8em;
	width: 8em;
    position: absolute;
    right: 0;
    bottom: 0;
	border-color: #ff7536;
}
.g-circle:hover {
	color:#ffffff;
    background-color: #e8170e;
	text-decoration: none;
	
}
.g-circle:visited {
	color:#ffffff;
    background-color: #e84d0e;
	text-decoration: none;
	
}

パクリ元
http://bootsnipp.com/snippets/featured/circle-button-with-3d-shadow-and-hover-effect

まとめ

いかがでしたでしょうか?

スマホで見て、出来るだけ目が止まりやすいようにボックスに枠をつけて、アレンジしやすいように中身はシンプルにしています。ボタン部分がポイントですが、幅100%ボタン と 右下丸ボタン と両方スマホでも押しやすい&興味を持ちやすいように工夫してみました。

がんちゃんのおすすめアフィリエイト塾

アフィリエイトを1年やってきて感じることは、先生や師匠がいる環境が大事ってこと。
アフィリエイトのノウハウも大事だけど、心の支えになってくれる友人たち、先生、師匠の存在はとても大切です。

僕の場合、友人にアフィリエイト塾AMCを紹介してもらい今は無料会員として、たまに各地セミナーに遊びにいって交流しています。

トレーニングジムと同じでジムに1人で行く人は意外と続かない。しかし仲間と行くと継続率が高くなります。アフィリエイトも仲間が増えるとアフィリエイトを辞めてしまうことはほぼなくなるでしょう。

続ければ必ず成果が出るアフィリ。僕のおすすめアフィリエイト塾は、AMCです。
もしAMCに申し込みされた方がいらっしゃったら、AMCのSNSで「がんちゃん」で日記書いていますのでご一報ください。
色んなご相談にお答えいたします。

→ アフィリエイト塾AMC申込み

シェアしてくれるとチョーうれしいです!

フォローする