ちょっと洒落たリンクバナーリボンを作ってみました。


クリエイティブ性の高いサイトを掲載している Awwwards のリンクバナーリボンがかっこいいので真似て作ってみました。Twitterとfacebookのカラーを使ったものを取り急ぎ。
実際に3つ並ぶと微妙な印象。
掲載方法はHTML上にdivで囲んだリンク+CSS+画像

HTML
<div id=”掲載したいエリアを指定するID”>
<a href=”リンク先” target=”_blank”>リンク名</a>
</div>
CSS
#掲載したいエリアを指定するID{
top:80px;
right:0px;
width:60px;
display:block;
position: fixed;
z-index:100;
}
#掲載したいエリアを指定するID a{
background-image:url(バナーのリンクパス);
background-position:0px 0px;
background-repeat:no-repeat;
display:block;
float:left;
width:68px;
height:102px;
text-indent:-9999em;
overflow:hidden;
}

といった感じで設置。

効果的なバナー広告って・・・

今SNSで広告掲載しているものも作るときに考えたこと。
如何に押させるか。それをだまして押させるのか、
意味を理解させて押させるのか。
今回は騙さず、理解できる文言と押せそうなデザインで行ってみた。
ちなみに前回は目に留まる文言。
結果は好調。
情報量で勝負するよりもバナーは直感でわかるかが重要らしく、目立たせるためにある工夫をしてみたところ、それもクリックに一押ししているらしい。
とにかくほかのものより目立つ+何なのかを明白にした。
作るのにそれほど手間も時間も変わらないバナー。
しかし、作るものによってクリック数やCNVが大きく変わるのもバナー。
意外におくが深い・・・