イケメンが微笑みかけてくれるイケメンボタンを作ってみた

クリック率が高過ぎるボタンデザイン


Warning: Undefined variable $content in /home/c9099599/public_html/dstrikes.net/wp-content/themes/cocoon-child-master/tmp/content.php on line 76
この記事は 約6 分で読めます。

ども!でびきんです。

イケメンって女性の癒しですよね

いや 癒しだと思うんですよ!忙しい日常に追い回されて疲れ切って荒んだ心を癒してくれる唯一のオアシス!

それこそが

イケメン!!

の存在価値だと思うんです。

スポンサーリンク

イケメンボタンがあれば世界中の女性が幸せになれるかも?!

と言うわけで作ってみましたイケメンボタン!

と言うのも、このツイートを見て超おもいつきでこの記事を書いてみただけだったんですが、ネタの1つにでもなれば幸いです。

イケメンに微笑んで貰う

と言うわけで

 

ただの画像リンクを入れてみただけなんですけど、これちょろっとプログラミングを入れてみる事でもうちょっと工夫出来ると思うんですよね
例えば、3回に1回だけブサメンが出てくるとか・・・・

<?php 
// ここにいくつかのイケメン画像を格納しておいて 
$img[] = 'イケメン画像URL'; 
$img[] = 'イケメン画像URL'; 
$img[] = 'イケメン画像URL'; 
$img[] = 'イケメン画像URL'; 
$choose = rand(0,count($img)-1); 
$ikemen = $img[$choose]; ?>
<a class="btn btn-deep btn-l" href="<?=$ikemen?>">イケメンに微笑んで貰う

いや。。。ブサメンが出てきたら癒しにならないし、世界を救えないですね。

全然おもしろくないですね・・・すみません

 

でも、これだけは言えます!この記事のイケメンボタンのクリック率はほぼ100%に近いのではないかと・・・

クリック率が上がるボタンの秘密とは

上記の例では何故クリック率が100%に近かったのでしょう?
これは本投稿を見ている方のほぼ全ての方がこのイケメンボタンが100%クリックされているだろう事は理解出来ていると思います。

何故ならこの『イケメンボタン』には

  1. イケメンの微笑みが見られる期待感がある
  2. ボタンを押せば何か楽しめそう
  3. 記事のタイトルとボタンが連動している
  4. ボタンがこの記事のメインになっている

そうです、この記事を見に来た人のペルソナが、イケメンの微笑みが見たい全ての人が対象となっているから、ほぼ100%のクリック率があるだろうと思いました。

そしてこの投稿を読んでいる読者も100%クリックする為に訪問している事が分かります。

クリック率を上げるための要素

クリックして欲しいボタンやリンクのクリック率を上げる為には以下の要素があります

  1. リンク先に期待させる
  2. 目立つボタンで視線を釘づけにする
  3. クリックの先に目的がある
  4. 再生ボタンを付ける
  5. クリック出来る事を認識して貰う

リンク先に期待させる

リンク先に期待させるには、リンクボタンやテキストの前の文章で、リンク先にはこんな物があるんだぞー凄いんだぞーと、リンクの先に何があるか、そしてそれを利用すると利益が得られたり知識が得られると事を説明すると読者は『リンク先にメリットがある』と認識して貰えクリック率UPが見込めます。

具体的なリンク例としては
・クリックして半額クーポンをゲット!
衝撃の映像を見る!※今回のイケメンボタンはこれ!
・ホテル代を半額にする手順

目立つボタンで視線を釘づけにする

目立つボタンとは何か?と言う事になると思いますが、画面いっぱいのソレしか押せないボタンでは確かにソレしかないからクリックはされるかも知れませんが、それでは意味がありませんよね。
●誘目色(ゆうもくしょく)で目立たたせる
誘目色とは刺し色的な使い方をした明らかに目立つ色の事です。
誘目色ゆうもくしょく左図は誘目色の簡単な例ですが、普段人の目は左上から情報を得始めようとしますが、右下に誘目色の赤い丸がある事で自然と赤い丸に目が行ってしまいます。
こう言った、視線を釘づけにしてしまう色の事を誘目色(ゆうもくしょく)と言います。
これは良く広告バナーなどで目立つように考えて作られた物を良く目にしていると思います。
本来読み進めている場所ではないのに、サイドバナーに目が行ってしまったりします。
視線を誘導してクリックして貰うのが目的だからです。
誘目色は非常に強い目立つ効果を発揮しますが、1つの画面に2か所3か所と多数設置してしまった場合には効果が半減するだけでなく、読者の気が散ってしまい文章を落ち着いて読んで貰う事が出来なくなり、その結果、CVの成果も落ちてしまう事になりますので、使いどころをきっちりと見極めて使う必要があります。

リンクの先に目的を作る

そもそも読者がリンクをクリックするのは何故でしょうか?
『そこに目的があるから』です。
ブログでリンク先の説明に期待を持たせ、登録はこちらから とする事でクリック率を上げる最も一般的な方法だとは思いますが、いかにしてクリック率を上げるか?と言う所は文章力に掛かっています。

再生ボタンを付ける

再生ボタンを付ける再生ボタンを付けるだけで、クリック率が3倍~10倍になったと言う報告はよくある話です。私も未だによく分かりませんが再生ボタンを付けると何故かクリック率が爆上がりするのです。

アダルトサイトや動画サイトであれば全ての動画に再生ボタンが付いているので、それほどでもないとは思いますが、普通のサイトに再生ボタンを設置するとかなりの確率でクリックされています。

クリックだけを目的とする場合は再生ボタンでも良いですが、実際に動画じゃない物に再生ボタンを設置すると言うのは『ダマシリンク』になりますので、気を付けて使う必要があります。

クリック出来る事を認識して貰う

これが意外に大事な事です。
クリック出来ると認識して貰う事は『当たり前』の事ですが、テキストリンク色を『青系』以外の色にしてしまうと以外にもクリック率が大きく下がると言うデータが出ています。
クリックが分からないサイト
例えば上記のようなサイトだとどうでしょう?
どこがクリック出来るポイントか分からないですよね?
デザインやブランドイメージを優先し過ぎたサイトはクリック出来る部分が分かりにくくなると言うデメリットがあります。
いくらデザインに拘ったとしても、利便性が掛けてしまったのでは意味がありません。
例外として超有名ブランドのサイトなどでは、ユーザビリティよりもブランド色を全面的に押し出しているサイトが多いですが、あれは直販売が目的ではなく、テレビCMのように商品のデザイン性や機能性をアピールする事に目的があります。

その結果としてクリックして貰うよりも商品の良さやデザインを伝える為にユーザビリティよりもデザインやブランドイメージを前面に押し出している結果なのです。

まとめ

クリック率をあげる為の色々を説明させて頂きました。
スグに出来るような物から、いや・・・これは中々出来ないぞ?と言うものもあったと思います。
Webディレクションの一環として最低限知っておきたい知識だと思います。
特に誘目色やボタンデザインを選ぶ際の参考にはなったかと思います。
元々この記事については、イケメンボタンを作ってネタにしたかっただけなのです・・・(笑

コメント