カエレバ･ヨメレバのデザインを見直してクリック率を上げる逆転の発想

ブログでアフィリエイトをしている人にとって、必須ツールの1つが「カエレバ」「ヨメレバ」です。当サイトでも活用させていただいております。開発者のかん吉様には感謝申し上げます。

amazonや楽天だけでなく、yahooショッピングや7netなど、一度に複数のアフィリエイトができる点はとても便利ですが、ユーザビリティの観点からわたしなりの考えのもと見直すことにしました。

アフィリエイト先の選択肢を徹底的に絞る

こちらが「カエレバ」をデフォルトで表示したときのブログパーツで、一度に7つのアフィリエイトをすることができます。

1. Amazon
2. 楽天市場
3. Yahooショッピング
4. 7net
5. ベルメゾン
6. セシール
7. 価格.com（※サイトへのリンクのみ）

1つの商品を紹介するとき、それを「買いたい！」と思った人にとって、複数の購入先が提示されているのは一見便利に思えますし、アフィリエイトをする側にとっても、購買意欲の高い人を取りこぼさずに済むように思えますよね。

そのため、すべての会社のアフィリエイトIDを取得して表示しているサイトもあるかと思います。

でも、これって本当に有効なのでしょうか？

わたしの考えるアフィリエイトのあり方は、

でしゃばり過ぎない程度に、さらっと紹介すること。

たくさん選択肢があると、どこを使おうか、どこが一番便利か、どこが一番安いか、などとあれこれ考えてしまいませんか？

つまり、買い手のために良かろうと思って用意した複数の選択肢が、逆に買い手を迷わせ、ストレスを与えてしまっている可能性があるとわたしは考えました。

そこでわたしは、カエレバのアフィリエイト先としての選択肢を3つに絞ることに。

1. Amazon
2. 楽天市場
3. Yahooショッピング

この3つの大手ネットショップで大半のネットユーザをカバーできると思います。

もちろん、3つに絞るということは、この3つとも使わない購買予定者を取りこぼすことになるわけですが、大多数の人にストレスを与えるよりも、気持ちよくクリックしてもらえるようにすべきだと考えたわけです。

同様の考えから、ヨメレバについても選択肢を最小限に絞りました。

ヨメレバもデフォルトでは、最大8つのアフィリエイト先を設置することができます。

書籍には紙媒体と電子書籍に分けられますが、電子書籍のKindleはAmazonが、楽天koboは楽天が手掛けているので、わざわざ紙媒体と電子媒体でそれぞれのリンクを設置するのは少しくどいように思いました。

そこで、ヨメレバについては、書籍大手の2つに絞ることにしました。

1. Amazon
2. 楽天市場

カエレバでは3種類、ヨメレバでは2種類と徹底的に選択肢を絞った分、あれこれ迷わずに、シンプルに選んでもらえることを期待したいと思います。

ボタンデザインを見直す

カエレバもヨメレバもデフォルトはシンプルなテキストリンクとなっているため、cssを使ってボタンデザインにカスタマイズしているサイトが多いと思います。

アフィリエイト先を絞った分、ボタンにはある程度主張をしてもらったほうがいいと考えました。

そこで、Amazon、楽天、Yahooショッピングの3種類でボタンデザインしたのがこちら。（画像はキャプチャです）

PCでの表示デザイン

スマホでの表示デザイン

ボタンデザインで工夫した点は以下のとおりです。

• 各サイトのテーマカラーを使う
• 最近の流行を取り入れ、フラットな角丸ボタンにする
• マウスオーバー時にボタン色を変化させ、動きを作る
• クリックしやすいよう、適度な余白をもたせて配置する
• PCの場合は記事幅の60%程度で圧迫感のないようにし、スマホの場合は95%程度にしてクリックしやすいようにする

選択肢を絞ったおかげで、色付きボタンにしても圧迫感を与えることなく、モバイルユーザにはクリックしやすいボタンデザインにできました。

ボタンの文字を見直してスムーズに誘導する

皆さんはボタン内の文字をどうしていますか？

カエレバ、ヨメレバには、ボタン内のテキストには「リンク先サイト名」のあとに「〜で探す」といった文字をつけ足すことができます。

つけ足すことのできる文字には、

• ～で購入
• ～で探す
• ～で調べる
• ～で見る
• ～で最安値を探す
• ～で検索
• ～でチェック
• ～で最安値をチェック

と8種類（ヨメレバは6種類）が用意されています。

文字をつけ足さずに、各サイト名だけとすることもできますが、ボタンデザインの基本は「迷わず誘導する」ことです。

そのボタンを押して次に何をするのか、何をしてもらいたいのか、を伝えなくてはなりませんが、サイト名だけだと、それを伝えるには弱すぎることでしょう。

また、ボタンを押そうとしている人は、その時点では購買意欲が高いとも言えないため、「･･･で購入」では、少し押し売り感が強くなってしまいます。

これら以外であれば、購買意欲が低い人でも、とりあえずクリックして「商品の詳細を調べてみよう」という気持ちになれますし、ボタンを押して自分が何をするのか、といったアクションがわかりやすくなります。

少しでも安く購入したいという消費者心理を考えると、「〜で最安値を探す」「〜で最安値をチェック」が良さそうに思えますが、ボタンの幅に収まる字数を考えた結果、シンプルな「〜で探す」をわたしは選択することにしました。

商品の魅力が伝わる画像サイズを選ぶ

紹介する商品や書籍などの画像サイズは皆さんどうしていますか？

カエレバ･ヨメレバでは、商品画像を「大」「中」「小」から選択することができます。

この写真は、商品画像の「小」と「中」を比較したものですが、やはり「小」の画像だと商品のディテールが伝わらない感じですよね？

あなたが自信を持って紹介する商品であるならば、小さい画像で控えめに宣伝するよりも、ひと目見ただけで商品のディテールが伝わる大きさが理想だと思います。

商品によっても画像サイズは違いますが、わたしは画像サイズは「中」か「大」を選ぶようにし、それを想定してボタンサイズやレイアウトも考えています。

まとめ

今回のカエレバ・ヨメレバのデザイン見直しは、たくさんの間口を設けて、少しでも取りこぼしがないように･･･としてきた浅はかな考えを見直し、サイトに訪れてくれた人たちにとって、ストレスなく次のアクションを起こしてもらえることを念頭に考えてみましたがいかがだったでしょうか？

• アフィリエイトリンクの選択肢は複数用意して取りこぼしを減らす
• アフィリエイトリンクボタンは主張し過ぎないようシンプルなデザインとする
• アフィリエイト商品画像は主張し過ぎないよう控えめな大きさにする

といった考えが一般的かと思いますが、常識にとらわれず、時には逆転の発想をすることで、これまでには得られなかった別の結果がもたらされることもあろうかと思います。

さて、どんな結果が出るか楽しみですね。

CSSデザインを学べるおススメ本

cssを用いたwebデザインの基礎から、プロが使うページレイアウトやボタンなどのパーツデザインまで、Web制作者が必ず知っておかなくてはならないCSSの情報が詰まった一冊です。

プロとして恥ずかしくない　新・CSSデザインの大原則

posted with ヨメレバ

大藤 幹,北川 貴清,きむらあつとし,境 祐司,高橋 としゆき,錦織 幸知,長谷川 広武,矢野 みち子 エムディエヌコーポレーション 2015-07-02

Amazonで探す

楽天ブックスで探す

カスタマイズCSSコード

参考までにcssコードを載せておきます。自己責任のうえご活用ください。（※amazlet風-2（cssカスタマイズ用）を選択してご利用ください）

.kaerebalink-box,
.booklink-box {
	border-radius: 4px;
	box-shadow: 1px 1px 3px 1px #ddd;
	padding: 15px;
	overflow: hidden;
	margin: 50px 0;
}
@media screen and ( min-width: 640px ){
.kaerebalink-box,
.booklink-box {
	margin: 50px 15px;
}
}
.kaerebalink-image,
.booklink-image {
	margin-right: 20px;
	float:left;
}
.kaerebalink-info,
.booklink-info {
	overflow: hidden;
}
.kaerebalink-name a,
.booklink-name a{
	font-size: 18px;
	text-decoration: none;
}
.kaerebalink-powered-date a,
.kaerebalink-powered-date,
.booklink-powered-date a,
.booklink-powered-date {
	font-size: 12px;
	margin-top: 5px;
	color:#444;
	margin-bottom:10px;
}
.kaerebalink-link1,
.booklink-link2 {
	font-size: 18px;
	margin-top:30px;
}
.shoplinkamazon,
.shoplinkrakuten,
.shoplinkyahoo {
	width: 75%;
	text-align: center;
	margin: 15px 0;
}
.shoplinkamazon {
	background-color:#ff9900;
	border: 1px solid #ff9900;
	border-radius: 6px;
}
.shoplinkrakuten {
	background-color:#bf0000;
	border: 1px solid #bf0000;
	border-radius: 6px;
}
.shoplinkyahoo {
	background-color:#4070ff;
	border: 1px solid #4070ff;
	border-radius: 6px;
}
.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkyahoo a {
	text-decoration: none;
	display: block;
	padding: 5px 0;
	color:#fff;
}
.shoplinkamazon a:hover{
	background-color:#ffad33;
}
.shoplinkrakuten a:hover{
	background-color:#cc3333;
}
.shoplinkyahoo a:hover{
	background-color:#668dff;
}

/* Xperia8以下のスマホを想定 */
@media only screen and (max-width: 420px) {
.kaerebalink-image,
.booklink-image {
	margin: 0 auto;
	margin-bottom: 20px;
	float: none;
}
.kaerebalink-image img,
.booklink-image img {
	display: block;
}
.shoplinkamazon,
.shoplinkrakuten,
.shoplinkyahoo {
	width: 95%;
	margin: 10px auto;
}
.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkyahoo a {
	padding: 10px 0;
}
}

/* 非表示設定 */
.kaerebalink-detail {display:none;}
.booklink-detail {display:none;}

.shoplinkrakuten img,
.shoplinkamazon img {
	display: none;
}