【CSS】コピペで簡単！クリック率を劇的に上げる「ボタン」デザインの作り方

こんにちは。岐阜の拠点から、今日もWeb制作とブログ運営のリアルな情報をお届けする当ブログです。

前回の「吹き出し」の実装で、記事の表現力がグッと高まったかと思います。ロードマップ第6弾となる今回は、ブログの「成果」に直結する超重要パーツ、「ボタン」のカスタマイズです。

アフィリエイトリンクやお問い合わせページへの誘導（CTA）において、テキストリンクよりも視覚的に目立つボタンは必須です。しかし、ただの平坦な四角いボタンでは読者のクリックを十分に誘発できません。

今回は、思わず押したくなる「立体的な動き（ホバーエフェクト）」と、視線を集める「キラッと光るアニメーション」を、管理しやすいシンプルなCSSで実装する方法を解説します。

See the Pen コピペで簡単！クリック率を劇的に上げる「ボタン」デザインの作り方 by 広瀬和哉 (@lpvcfdes-the-styleful) on CodePen.

【コピペでOK】立体的に沈み込むボタンデザイン

まずは基本となる、影（box-shadow）を使った立体的なボタンです。マウスカーソルを乗せた時（ホバー時）に影が消えて下に沈み込む動きをつけることで、「押せる」という感覚を読者に伝えます。

1. 追加CSSに貼り付けるコード

/* ボタンを中央揃えにするための親要素 */
.btn_wrap {
    text-align: center;
    margin: 2em 0;
}

/* 立体的なボタンの基本デザイン */
.btn_link {
    display: inline-block;
    background-color: #ff9800; /* アフィリエイトで効果的なオレンジ */
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    padding: 1em 3em;
    border-radius: 50px; /* 丸みを持たせて親しみやすく */
    box-shadow: 0 5px 0 #cc7a00; /* 下部の立体的な影 */
    transition: all 0.2s ease; /* 動きを滑らかにする */
}

/* マウスを乗せた時（ホバー時）の動き */
.btn_link:hover {
    transform: translateY(5px); /* 影の分だけ下に移動 */
    box-shadow: none; /* 影を消すことで押し込んだように見せる */
    color: #fff;
}

【応用編】視線を集める「キラッと光る」アニメーション

さらにクリック率（CTR）を高めたい特単案件や、絶対に見てほしいキラーページへの誘導には、CSSアニメーション（@keyframes）を使ってボタンに光が走るエフェクトを追加するのが効果的です。

2. 追加CSSに追記するコード

先ほどの .btn_link のコードの下に、以下のコードを追記してください。

/* 光るアニメーション用の追加設定 */
.btn_shine {
    position: relative;
    overflow: hidden; /* はみ出した光を隠す */
}

/* 光のライン（斜めの白い帯）を作る */
.btn_shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 20px;
    height: 200%;
    background: rgba(255, 255, 255, 0.4); /* 半透明の白 */
    transform: rotate(45deg); /* 斜めにする */
    animation: shine 3s infinite; /* 3秒ごとに繰り返す */
}

/* 光が左から右へ移動するアニメーション */
@keyframes shine {
    0% { left: -50%; }
    100% { left: 150%; }
}

記事作成画面（HTML）での使い方

カスタムHTMLブロック等を使用して、リンク（aタグ）を <div class="btn_wrap"> で囲みます。光るエフェクトを使いたい場合は、クラス名に btn_shine を追加（半角スペースで区切る）するだけです。

<!-- 通常の立体ボタン -->
<div class="btn_wrap">
    <a href="アフィリエイトリンクやURL" class="btn_link">詳しく見てみる</a>
</div>

<!-- キラッと光る立体ボタン -->
<div class="btn_wrap">
    <a href="アフィリエイトリンクやURL" class="btn_link btn_shine">お得に申し込む</a>
</div>

カスタマイズのポイント：ボタンの色選び

ボタンの色は、ブログのテーマカラーに合わせるのも良いですが、「緑（安心感・無料登録）」や「オレンジ（活力・購入・お得）」など、読者の心理に働きかける色を選ぶとコンバージョン率が上がりやすい傾向があります。現場のWeb制作でも、目的に応じて色を使い分けています。

次回はいよいよ最終日。ここまで作成してきた装飾をスマートフォンでも完璧に表示させるための「スマホ対応（メディアクエリ）」の基本を解説します。