ただのリンクをボタン風にしてクリック率を上げる方法

リンク広告を設置する場合、ただリンクを置くだけだとクリック率はあまり高くありません。だからクリック率を高めるには工夫が必要です。

例えばその方法の１つがリンクをボタン風にする方法。

リンクがボタンになっていると目立つし、なんか押したくなりますよね。

そこで ただのリンクを目立つボタン形式のデザインにする方法 を紹介します。

CSSコピペでリンクをボタン風に改造することができるので、クリック率が低くて悩んでいるなら試してみてください。

リンクをボタン形式にする利点

リンクをボタン形式にする利点は「読者の目を引きクリックする確率が高くなる」ということです。

例えば次のようなただの青色テキストで下線が引いてあるだけのリンクとボタンの形状をしたリンクボタンがあった場合、どちらの方が目につくでしょうか。

恐らくほとんどの人はリンクボタンの方に目が行くと思います。

もちろんボタンにしたから クリック率が急上昇する みたいな単純な話ではありませんが、ボタン形式にすると読者の興味を引くことができます。

さらにボタンを押したときのアニメ効果をつければ、さらに興味を引くことが可能です。

リンクボタンの作り方

リンクボタンを作るにはCSSを使ってボタン形式にスタイルを適用します。

ここでは丸形の立体的なボタンを作ってみます。

１．まず次のように 普通にリンクタグ を定義

<a href="xxx" class="btn">リンクボタン</a>

２．そしてリンク要素に対して次のCSSを適用

.btn
{
  background-color: #F55;
  box-shadow: 0px 12px 0px #a00;  
  border-radius: 10px; 
  border-bottom-left-radius: 12px; 
  border-bottom-right-radius: 12px; 
  border-bottom: 1px solid #F00;
  border: none;
  padding: 15px 80px; 
  font-size: large;
  text-decoration:none;
  display: inline-block;
}

このCSSを適用したリンクは次のような立体的なフラットボタンになります。

border-radius: 10px; 

そしてボタンを立体的に見せるために box-shadowプロパティ を指定しています。

box-shadow: 0px 12px 0px #a00;

box-shadowプロパティは要素に影をつける効果があり、このプロパティに渡す値は順に次のような意味を持ちます。

• １つめの値
  水平方向の影のオフセット値。正の値を指定すると右に、負の値を指定すると左に影がつく
• ２つめの値
  垂直方向のオフセット値。正の値を指定すると下に、負の値を指定すると上に影がつく
• ３つめの値
  影のぼかし距離。０を指定すると影がくっきりした長方形になる
• ４つめの値
  影の色

ここではbox-shadowに下方向に12px伸びるくっきりとした影をつけることでボタンを立体的に見せています。

これが基本的なリンクボタンの作り方です。

ボタンをグラデーションさせる

さらにリアリティのあるボタンにするにはボタンにグラデーションをかけます。

グラデーションをかけるには先ほどのCSSコードを次のように書き換えます。

.btn
{
  background: linear-gradient(to left, #F11, #F55); 
  box-shadow: 0px 12px 0px #a00;  
  border-radius: 12px; 
  border-bottom-left-radius: 12px; 
  border-bottom-right-radius: 12px; 
  border-bottom: 1px solid #F00;
  border: none;
  padding: 15px 80px; 
  text-decoration:none;
  font-size: large;
  display: inline-block;
}

backgroundプロパティにlinear-gradient関数を渡しています。

linear-gradient関数は要素の背景に対して線形グラデーションをかける関数で次のような引数を持ちます。

linear-gradient(方向, 開始色, 途中色, 終了色)

方向には次の２つの値が渡せます。

• 角度
  単位(deg)付きの角度。0を指定すると下から上にグラデーションする
• to + [方向を表すキーワード]
  toに加えてrightやleftなどの方向を表すキーワードを渡す。例えばto rightなら左から右にグラデーションする。とれる値は[left]、[top]、[right]、[bottom]

そしてその後に色を定義します。途中色は何色でも置けて開始色と終了色は必須です。

グラデーションさせたボタンは次のような見た目になります。

フラットなボタンに比べてよりリアリティが出ていると思います。ボタンをグラデーションさせるかはサイトがフラットデザインかそうでないかで使い分けるといいと思います。

ボタンにアニメーションを追加する

リンクをボタン形式にするならその動作もボタンに合わせた方が自然です。

例えば ボタンを押したら凹む（へこむ）みたいな感じで

その場合は・・・リンク要素のactive疑似クラスに次のようなスタイルを記述します。

.btn:active
{
    box-shadow: 0px 0px 0px #a00; 
    transform: translateY(9px);
}

active疑似クラスは要素がクリック・タッチされたときに適用される疑似クラス。

この疑似クラス内でまず box-shadow を無効にして下部分の影を消しています。ただそれだと影が消えるだけなので押したという感じがしません。

そこで transformプロパティ に translateY という要素をY方向に移動させる関数を渡し、垂直方向下に9pxだけ移動させています。

実際にどういう動作をするかは次のボタンをクリックしてみてください。

See the Pen CSSだけでクリックできる立体ボタン by kaz1503 (@kaz1503) on CodePen.dark

リンクをボタン化するときの注意点

最後に重要なことを書き忘れていたので補足

ここで紹介したリンクを改変してボタン化するというやり方・・・実はこの方法を使ってはいけない場面があります。

それがアフィリエイトリンクをボタン化する、という場合

次記事で解説したようにASPによってはタグ改変は規約違反になってしまいます。

アフィリエイトリンク改変はどこまでOK？主要ASPの見解まとめ

アフィリエイトリンクを取得して貼り付けるときリンク改変していいかの判断に迷うことはありませんか？ここでは８つの主要ASPがリンク改変にどういう見解をしているのかと改変OKな範囲についてまとめました。

fukuro-press.com

2019-04-27 22:05

何が許されて何がアウトなのかの基準についてはAPSで違うものの、大抵のASPだとリンクタグの改変はアウトな所が多いですね。

ただしリンクタグの改変がNGなだけであって、リンクタグに直接手を加えないのであればボタン化しても問題ありません。

参考記事 : アフィリエイトリンクをボタン化する時に注意すべき２つのこと

詳しいやり方については上記事で解説したので気になる方はご覧ください。

まとめ

以上リンクをボタン形式にする方法について解説しました。

こういうちょっとした工夫でクリック率が高まることもあるのでクリック率が低くて悩んでいる方は試してみるといいかもしれません。