【CTAボタンデザイン例】シンプルで効果的なCTAボタンの作り方

CTA（Call to Action）ボタンは、サイト訪問者に購入や資料請求、問い合わせなどのアクションを促す要素です。
コンバージョン率に大きく影響を与えるため、効果的なデザインが不可欠であり、訪問者にわかりやすい行動指示を伝えることで目標達成率の向上を図ります。
本記事では、CTAボタンのデザイン基本要素や具体例をサンプルコード付きで解説します。

CTAボタンデザインの基本要素

CTAボタンデザインの基本要素は主に4つあります。

1.色とコントラスト

2.サイズと形状

3.配置とスペース

4.テキストとメッセージ

それぞれの基本要素について順に紹介します。

1.色とコントラスト

CTAボタンは、サイト全体のデザインと調和しつつも目立たせる必要があります。
背景色とのコントラストを考慮して、クリックしたくなる色を使用するのがポイントです。

多くのサイトでは、青や赤、オレンジなどの心理的に目を引く色が使用されています。
たとえば、青は信頼感、赤は緊急感を引き出し、訪問者の注意を引くことが期待されます。

2.サイズと形状

大きすぎるボタンは視覚的に圧迫感を与え、小さすぎると見逃される可能性があるため、適切なサイズが必要です。
また、形状にも工夫を加えることで視認性が高まり、四角形や丸みのある形状、矢印付きボタンなどが効果的です。

3.配置とスペース

CTAボタンは、画面の中心やメインコンテンツの近くなど、ユーザーの視線が集まりやすい位置に配置すると効果的です。
加えて、ボタン周りに適度な余白を確保することでボタンが埋もれず、より目立たせることができます。

テキストとメッセージ

ボタンに表示するテキストは、シンプルで明確に行動を指し示すものであるべきです。
具体的には「今すぐ購入」「詳細はこちら」など、簡潔で直感的なメッセージが推奨されます。

訪問者に行動のメリットが伝わるよう、ターゲットユーザーのニーズを意識した表現を心がけましょう。

CTAボタンデザイン例

CTAボタンデザイン例を4つ紹介します。

これら順に紹介します。

1.シンプルで効果的なボタン

複雑な装飾を避け、シンプルなデザインで視覚的にすぐ目に留まるボタンが好まれます。
視線の誘導がスムーズで、迷わずクリックしやすいボタンが理想です。

サンプル

今すぐ購入する

サンプルのポイント

カラーとフォント: CTAボタンの色をコントラストの高いカラー（オレンジ系）に設定し、フォントは視認性の高いサイズ・太さで設定しています。
ホバー効果: ホバー時に背景色が少し暗くなり、サイズが微妙に大きくなることで、視覚的な変化を与えています。
フォーカス状態: フォーカス時にアウトラインを表示し、キーボード操作でも認識しやすくしています。

サンプルコード

CSS

/* ボタン全体のスタイル */
.cta-button01 {
  display: inline-block;
  padding: 12px 24px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #ff6f61; /* コントラストの高いオレンジ系の色 */
  border: none;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* ホバー時のエフェクト */
.cta-button01:hover {
  background-color: #ff4a3b; /* 少し暗めのオレンジで反応 */
  transform: scale(1.05);
}

/* フォーカス時のスタイル */
.cta-button01:focus {
  outline: 3px solid #ff8c74;
}

/* ボタン全体のスタイル */

.cta-button01 {

display: inline-block;

padding: 12px 24px;

font-size: 18px;

font-weight: bold;

color: #fff;

background-color: #ff6f61; /* コントラストの高いオレンジ系の色 */

border: none;

border-radius: 4px;

text-align: center;

text-decoration: none;

transition: background-color 0.3s ease, transform 0.2s ease;

}

/* ホバー時のエフェクト */

.cta-button01:hover {

background-color: #ff4a3b; /* 少し暗めのオレンジで反応 */

transform: scale(1.05);

}

/* フォーカス時のスタイル */

.cta-button01:focus {

outline: 3px solid #ff8c74;

}

HTML

<a href="#purchase" class="cta-button01">今すぐ購入する</a>

1	<a href="#purchase" class="cta-button01">今すぐ購入する</a>

2.目立つ色やアニメーション効果

視覚的に変化をつけるために、ホバー時の色変更や軽微な動きを加えるアニメーションが効果的です。
マウスをボタンに重ねると、少し色が変わるなどのアニメーションは訪問者の注目を集め、クリック意欲を高める効果が期待できます。

サンプル

申し込む

サンプルのポイント

ホバーアニメーション: ホバー時にボタンが少し浮き上がるようなアニメーションを加え、影の効果も強めています。
光のエフェクト: ボタンをホバーすると光がサッと流れるため、視覚的なアクセントになりながらも過剰に動かない優しいエフェクトです。

サンプルコード

CSS

/* ボタン全体のスタイル */
.cta-button02 {
  position: relative;
  display: inline-block;
  padding: 12px 28px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #3a8ef1; /* 目立つ青色 */
  border: none;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
}

/* ホバー時のエフェクト */
.cta-button02:hover {
  transform: translateY(-3px); /* 少し持ち上がる動き */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
}

/* キラリ光るエフェクトの設定 */
.cta-button02::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%; /* 初期位置を左外に */
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  transform: skewX(-20deg); /* 光に斜めの角度をつける */
  transition: opacity 0.3s;
}

/* ホバー時に光のエフェクトをスライド */
.cta-button02:hover::before {
  left: 100%; /* 右から左に流れるように移動 */
  transition: left 0.5s ease;
}

/* ボタン全体のスタイル */

.cta-button02 {

position: relative;

display: inline-block;

padding: 12px 28px;

font-size: 18px;

font-weight: bold;

color: #fff;

background-color: #3a8ef1; /* 目立つ青色 */

border: none;

border-radius: 5px;

text-align: center;

text-decoration: none;

overflow: hidden;

transition: transform 0.3s ease, box-shadow 0.3s ease;

box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);

}

/* ホバー時のエフェクト */

.cta-button02:hover {

transform: translateY(-3px); /* 少し持ち上がる動き */

box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);

}

/* キラリ光るエフェクトの設定 */

.cta-button02::before {

content: '';

position: absolute;

top: 0;

left: -100%; /* 初期位置を左外に */

height: 100%;

width: 100%;

background: rgba(255, 255, 255, 0.5);

transform: skewX(-20deg); /* 光に斜めの角度をつける */

transition: opacity 0.3s;

}

/* ホバー時に光のエフェクトをスライド */

.cta-button02:hover::before {

left: 100%; /* 右から左に流れるように移動 */

transition: left 0.5s ease;

}

HTML

<a href="#action" class="cta-button02">申し込む</a>

1	<a href="#action" class="cta-button02">申し込む</a>

3.視覚的な要素を使う

矢印アイコンやチェックマークを加えることで、ボタンに視覚的な方向性を持たせると、より訪問者の興味を引きやすくなります。
ボタンの視認性を高め、訪問者の行動を導くための工夫です。

サンプル

今すぐ購入

サンプルのポイント

アイコンの追加: Font Awesomeを使用して、ショッピングカートアイコンをボタンに追加しました。
これにより、CTAボタンの内容が直感的に伝わります。
グラデーション背景: 鮮やかなオレンジと赤のグラデーション背景で、視覚的に目立つデザインにしています。
ホバー効果とシャドウ: ホバー時にボタンが少し浮き上がるようなアニメーションと影をつけ、立体感を演出しています。

サンプルコード

CSS

/* ボタン全体のスタイル */
.cta-button03 {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(45deg, #ff7a18, #ff3c3c); /* グラデーション背景 */
  border: none;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ボタンホバー時のアニメーション */
.cta-button03:hover {
  transform: translateY(-3px); /* 持ち上がる動き */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
}

/* アイコンのスタイル */
.cta-button03 i {
  margin-right: 10px;
  font-size: 24px; /* アイコンサイズ */
}

/* ボタン全体のスタイル */

.cta-button03 {

display: inline-flex;

align-items: center;

padding: 12px 24px;

font-size: 18px;

font-weight: bold;

color: #fff;

background: linear-gradient(45deg, #ff7a18, #ff3c3c); /* グラデーション背景 */

border: none;

border-radius: 8px;

text-decoration: none;

box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);

transition: transform 0.3s ease, box-shadow 0.3s ease;

}

/* ボタンホバー時のアニメーション */

.cta-button03:hover {

transform: translateY(-3px); /* 持ち上がる動き */

box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);

}

/* アイコンのスタイル */

.cta-button03 i {

margin-right: 10px;

font-size: 24px; /* アイコンサイズ */

}

アイコンフォントの導入（headに挿入）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

1	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

HTML

<a href="#action" class="cta-button03"><i class="fa fa-shopping-cart"></i> 今すぐ購入</a>

1	<a href="#action" class="cta-button03"><i class="fa fa-shopping-cart"></i> 今すぐ購入</a>

4.心理学的アプローチ

「残りわずか」や「限定数あり」など、訪問者の緊急性や希少性を刺激する言葉を使うことで行動を促す効果があります。
見逃すことの不安、FOMO（フォーモ）「Fear of Missing Out」心理を利用し、行動を後押しするデザインが有効です。

サンプル

限定今すぐ購入 – 限定セール中！

サンプルのポイント

限定のバッジ: 「限定」というバッジを追加し、商品の特別感を強調しています。
訪問者に対して「すぐに行動しなければならない」という心理を刺激します。
緊急性のある色: ボタンには視覚的に緊急性を連想させる赤系の色を使用しています。
ホバーエフェクト: ボタンにホバー時の色の変化と浮き上がりを加え、インタラクティブでクリックしやすいデザインにしています。

サンプルコード

CSS

/* ボタン全体のスタイル */
.cta-button04 {
  display: inline-block;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #d9534f;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* ボタンホバー時のアニメーション */
.cta-button04:hover {
  background-color: #c9302c;
  transform: translateY(-3px);
}

/* 限定のバッジ */
.cta-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  background-color: #e5a03e;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border-radius: 50%;
}

/* ボタン全体のスタイル */

.cta-button04 {

display: inline-block;

padding: 15px 30px;

font-size: 18px;

font-weight: bold;

color: #fff;

background-color: #d9534f;

border: none;

border-radius: 5px;

text-decoration: none;

box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);

position: relative;

transition: background-color 0.3s ease, transform 0.3s ease;

}

/* ボタンホバー時のアニメーション */

.cta-button04:hover {

background-color: #c9302c;

transform: translateY(-3px);

}

/* 限定のバッジ */

.cta-badge {

position: absolute;

top: -10px;

right: -10px;

padding: 5px 10px;

background-color: #e5a03e;

color: #fff;

font-size: 14px;

font-weight: bold;

border-radius: 50%;

}

HTML

<a href="#action" class="cta-button04"><span class="cta-badge">限定</span>今すぐ購入 - 限定セール中！</a>

1	<a href="#action" class="cta-button04"><span class="cta-badge">限定</span>今すぐ購入 - 限定セール中！</a>

種類別CTAボタンデザイン例

種類別CTAボタンデザイン例を3つ紹介します。

1. 購買CTAボタン

2. 登録・リード獲得用CTAボタン

3. SNSシェアやフォロー誘導のCTAボタン

これら順に紹介します。

1. 購買CTAボタン

購入やカート追加を促すためのボタンです。
たとえば、「今すぐ購入」「カートに追加」といった具体的な行動を示す言葉と目立つ色使いを推奨します。

サンプル

カートに追加

サンプルのポイント

アイコン付きデザイン: Font Awesomeのfa-shopping-cartアイコンを使用し、購買行動をすぐに連想させる視覚的なヒントにしています。
目立つ配色: 背景色に緑系のカラーを使用し、購買行動を促進するカラーリングにしています。
ホバーエフェクト: 色の変化と浮き上がるアニメーションを加え、クリックの誘導を強化しています。

サンプルコード

CSS

/* 購買CTAボタンのスタイル */
.purchase-button {
  display: inline-flex;
  align-items: center;
  padding: 15px 25px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #28a745;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* アイコンのスペース */
.purchase-button i {
  margin-right: 10px;
  font-size: 20px;
}

/* ボタンホバー時のアニメーション */
.purchase-button:hover {
  background-color: #218838;
  transform: translateY(-2px);
}

/* 購買CTAボタンのスタイル */

.purchase-button {

display: inline-flex;

align-items: center;

padding: 15px 25px;

font-size: 18px;

font-weight: bold;

color: #fff;

background-color: #28a745;

border: none;

border-radius: 8px;

text-decoration: none;

box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);

transition: background-color 0.3s ease, transform 0.3s ease;

}

/* アイコンのスペース */

.purchase-button i {

margin-right: 10px;

font-size: 20px;

}

/* ボタンホバー時のアニメーション */

.purchase-button:hover {

background-color: #218838;

transform: translateY(-2px);

}

アイコンフォントの導入（headに挿入）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

1	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

HTML

<a href="#add-to-cart" class="purchase-button"><i class="fa fa-shopping-cart"></i> カートに追加</a>

1	<a href="#add-to-cart" class="purchase-button"><i class="fa fa-shopping-cart"></i> カートに追加</a>

2. 登録・リード獲得用CTAボタン

メールマガジンの登録や会員登録など、情報収集を目的とするCTAボタンです。
フォーム入力に誘導する前に配置し、目立つ色やわかりやすいメッセージで関心を引きます。

サンプル

メール登録

サンプルのポイント

アイコン付きデザイン: Font Awesomeのfa-envelopeアイコンを使用して、メール登録の意味を視覚的に強調しています
コントラストカラー: ボタンには青系のカラーを採用し、目立つ色合いにしています。
ホバー効果: 背景色が暗くなりボタンが浮き上がるエフェクトで、クリックの誘導を強化しています。

サンプルコード

CSS

/* 登録CTAボタンのスタイル */
.signup-button {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* アイコンのスペース */
.signup-button i {
  margin-right: 8px;
  font-size: 20px;
}

/* ボタンホバー時のアニメーション */
.signup-button:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}

/* 登録CTAボタンのスタイル */

.signup-button {

display: inline-flex;

align-items: center;

padding: 12px 20px;

font-size: 18px;

font-weight: bold;

color: #fff;

background-color: #007bff;

border: none;

border-radius: 8px;

text-decoration: none;

box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);

transition: background-color 0.3s ease, transform 0.3s ease;

}

/* アイコンのスペース */

.signup-button i {

margin-right: 8px;

font-size: 20px;

}

/* ボタンホバー時のアニメーション */

.signup-button:hover {

background-color: #0056b3;

transform: translateY(-2px);

}

アイコンフォントの導入（headに挿入）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

1	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

HTML

<a href="#signup" class="signup-button"><i class="fa fa-envelope"></i> メール登録</a>

1	<a href="#signup" class="signup-button"><i class="fa fa-envelope"></i> メール登録</a>

3. SNSシェアやフォロー誘導のCTAボタン

SNSでの拡散やフォローを促すボタンで、訪問者がクリックしやすいよう、サイト内での視認性を意識した配置やデザインを意識します。

サンプル

サンプルのポイント

アイコンボタン: 各ボタンにはFont AwesomeのFacebook、X（旧Twitter）、Instagramのアイコンを使用、ただしTwitterからリブランドされたXは黒板太字（Blackboard bold）フォントに上書き修正しています。
ブランドカラー: SNSごとに固有のカラーを使用して視覚的に判別しやすくしています。
ホバー効果: ホバー時に拡大するエフェクトを採用し、視覚的にクリックを促すデザインです。

サンプルコード

CSS

/* SNSボタンコンテナのスタイル */
.social-buttons {
  display: flex;
  justify-content: center; /* 横方向の中央寄せ */
  gap: 10px;
  text-align: center; /* テキストの中央揃え（念のため） */
}

/* SNSボタンの共通スタイル */
.social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: #fff;
  font-size: 24px;
  border-radius: 50%;
  text-decoration: none;
  transition: transform 0.3s ease;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}

/* SNSごとのカラー */
.facebook { background-color: #3b5998; }
.x { background-color: #000; } 
.instagram { background-color: #e1306c; }

/* Twitterから現行のXロゴに上書き修正 */
.fa-twitter:before {
  content: 'U+1D54F';
  font-family: sans-serif;
  font-weight: bold;
}

/* ホバーエフェクト */
.social-button:hover {
  transform: scale(1.1);
}

/* SNSボタンコンテナのスタイル */

.social-buttons {

display: flex;

justify-content: center; /* 横方向の中央寄せ */

gap: 10px;

text-align: center; /* テキストの中央揃え（念のため） */

}

/* SNSボタンの共通スタイル */

.social-button {

display: inline-flex;

align-items: center;

justify-content: center;

width: 50px;

height: 50px;

color: #fff;

font-size: 24px;

border-radius: 50%;

text-decoration: none;

transition: transform 0.3s ease;

box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);

}

/* SNSごとのカラー */

.facebook { background-color: #3b5998; }

.x { background-color: #000; }

.instagram { background-color: #e1306c; }

/* Twitterから現行のXロゴに上書き修正 */

.fa-twitter:before {

content: 'U+1D54F';

font-family: sans-serif;

font-weight: bold;

}

/* ホバーエフェクト */

.social-button:hover {

transform: scale(1.1);

}

※当サイト環境の制限問題により、黒板太字フォントが記事掲載できないため、Twitterから現行のXロゴに上書き修正、contentの対象文字はUnicode (U+1D54F)で記載しております。
もし実装する際は黒板太字フォントの「X」に変換してください。
Xロゴ文字参考：「Twitter」改め「X」のロゴはUnicodeの「U+1D54F」らしい

アイコンフォントの導入（headに挿入）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

1	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

HTML

<div class="social-buttons">
  <a href="https://facebook.com" class="social-button facebook" target="_blank"><i class="fab fa-facebook-f"></i></a>
  <a href="https://x.com" class="social-button x" target="_blank"><i class="fab fa-twitter"></i></a>
  <a href="https://instagram.com" class="social-button instagram" target="_blank"><i class="fab fa-instagram"></i></a>
</div>

</div>

まとめ

CTAボタンのデザインは、コンバージョン率の向上に不可欠な要素です。
色やサイズ、配置、メッセージの各要素を効果的に組み合わせることで、ユーザーのアクションを促すボタンを作成できます。

なお、少しの違いでも訪問者の反応が変わることが多いため、定期的なA/Bテストを推奨します。
訪問者に最も効果的なデザインを見極めることができます。

適切なデザインツールも活用しながら、日々の改善を続けていきましょう。
無料で使えるWebサイトアイコン5選

CTAボタンデザインの基本要素

1.色とコントラスト

2.サイズと形状

3.配置とスペース

テキストとメッセージ

CTAボタンデザイン例

1.シンプルで効果的なボタン

サンプル

サンプルのポイント

サンプルコード

CSS

HTML

2.目立つ色やアニメーション効果

サンプル

サンプルのポイント

サンプルコード

CSS

HTML

3.視覚的な要素を使う

サンプル

サンプルのポイント

サンプルコード

CSS

アイコンフォントの導入（headに挿入）

HTML

4.心理学的アプローチ

サンプル

サンプルのポイント

サンプルコード

CSS

HTML

種類別CTAボタンデザイン例

1. 購買CTAボタン

サンプル

サンプルのポイント

サンプルコード

CSS

アイコンフォントの導入（headに挿入）

HTML

2. 登録・リード獲得用CTAボタン

サンプル

サンプルのポイント

サンプルコード

CSS

アイコンフォントの導入（headに挿入）

HTML

3. SNSシェアやフォロー誘導のCTAボタン

サンプル

サンプルのポイント

サンプルコード

CSS

アイコンフォントの導入（headに挿入）

HTML

おすすめのCTAボタンデザインツール

Canva

Adobe XD

Figma

まとめ

最近の実績

最近のお役立ち情報