この記事では、WordPressで利用できる「CSS付きのHTML」コードを紹介します。プラグインも不要で成約率が高まるおしゃれでかっこいいLPボタンが作れちゃいます。
是非このHTMLを使ってブログで収益化を目指していきましょう。
ちなみに、作成しているボタン先の内容は実際に利用可能なAIライティングツールの紹介をしています。
目次
ビジネスにおすすめ｜おしゃれLPボタン5選
ここからは、ビジネスで使えるデザインのLPボタンを紹介します。是非参考にしてみてください。
1. 訴求＋画像付きで成約率をアップさせるLPボタン
上記が完成イメージです。用意するのは、「画像」「リンク」この２つを用意するだけで上記のように表示できます。
以下のコードをコピペしてご自身のサイトに挿入しましょう。その際に、マークアップしている箇所を変更してください。
コードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>タイトル</title>
<style>
/* ーーーー コンポーネント ーーーー */
.np-banner {
--blue:#0b73d4;
--red:#e23f3a;
--bg:#fff;
--text:#222;
--muted:#555;
max-width: 900px;
margin: 24px auto;
background: var(--bg);
border: 1px solid var(--blue);
border-bottom: 3px solid var(--red);
border-radius: 8px;
overflow: visible;
box-sizing: border-box;
}
.np-row {
display: flex;
gap: 32px;
align-items: center;
padding: 24px;
}
/* 画像側 */
.np-media {
flex: 1 1 40%;
background: linear-gradient(135deg,#2bb1e2,#0096d6);
border-radius: 8px;
overflow: hidden;
}
.np-media img {
display:block;
width:100%;
height:auto;
}
/* テキスト側 */
.np-body { flex: 1 1 60%; color: var(--text); }
.np-title {
margin: 0 0 10px;
font: 700 1.25rem/1.4 "Noto Sans JP",system-ui,sans-serif;
color: var(--text);
background: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.np-body p {
margin: 0 0 18px;
font: 400 .95rem/1.9 "Noto Sans JP",system-ui,sans-serif;
color: #444;
}
/* ボタン */
.np-cta {
display:inline-flex;
align-items:center;
gap:.55rem;
padding:.9rem 1.6rem;
border-radius:999px;
text-decoration:none;
color:#fff;
font-weight:700;
font-size:.95rem;
background: linear-gradient(90deg,#ff6b5d,#e93b2b);
box-shadow: 0 12px 28px rgba(233,59,43,.25), inset 0 -2px 0 rgba(0,0,0,.12);
transition: transform .18s ease, box-shadow .18s ease;
-webkit-tap-highlight-color: transparent;
}
.np-cta:hover {
transform: translateY(-2px);
box-shadow: 0 16px 32px rgba(233,59,43,.32), inset 0 -2px 0 rgba(0,0,0,.18);
}
.np-cta:active { transform: translateY(0); }
.np-cta svg { width:1.1em; height:1.1em; fill:currentColor; }
.np-note {
display:block;
margin-top:.55rem;
font-size:.8rem;
color:var(--muted);
}
/* スマホ最適化 */
@media (max-width: 768px) {
.np-row {
flex-direction: column;
gap:18px;
padding: 18px 16px 22px;
}
.np-media, .np-body { width:100%; }
.np-body { text-align:center; }
.np-note { text-align:center; }
}
</style>
</head>
<body>
<section class="np-banner">
<div class="np-row">
<div class="np-media">
<img src="画像URL" alt="説明文">
</div>
<div class="np-body">
<div class="np-title">無料｜AIツールプレゼント</div>
<p>
コストを抑え副業で収益化を目指していきましょう。<br>
NOMA＋では無料でAIライティングツールをプレゼント中。
</p>
<a class="np-cta" href="リンク先URL" aria-label="今すぐ無料でGET">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 3a1 1 0 0 1 1 1v9.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.42L11 13.59V4a1 1 0 0 1 1-1z"/>
<path d="M4 20a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1z"/>
</svg>
今すぐ無料でGET
</a>
<small class="np-note">※ 1分で完了・無料</small>
</div>
</div>
</section>
</body>
</html>
2. 表示大＋画像付きのかっこいいLPボタン
無料｜AIツールプレゼント
コストを抑え副業で収益化を目指していきましょう。
NOMA＋では無料でAIライティングツールをプレゼント中。
- 無料でAIツールが使える
- AIの最新情報が手に入る
- 副業で稼ぐための情報を発信
完全無料
すぐに利用できる
制限なし
AIツールをGETする
※ 期間限定の情報です。
「画像」「リンク」を入れてると上記のデザインが表示されます。
HTMLだけで作れるのでそのままコードをコピペしてご利用ください。マークアップしている箇所はオリジナルに修正しましょう。
コードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>NOMA＋｜AIツールプレゼント</title>
<style>
/* はみ出し防止の基本設定 */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }
body {
font-family: "Noto Sans JP", system-ui, sans-serif;
background: #fff;
-webkit-font-smoothing: antialiased;
}
/* レイアウト */
.cta-wrap { padding: 40px 20px; }
.cta-section {
width: 100%;
max-width: 900px;
margin: 0 auto;
background: #fff;
border: 1px solid #1b1f3b;
border-bottom: 3px solid #f5d66a;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,0.05);
text-align: center;
position: relative;
}
.cta-image {
width: 100%;
height: 380px;
background:
url('https://noma-plus.com/wp-content/uploads/2025/08/29051855_m.jpg')
center/cover no-repeat;
}
.cta-content {
padding: 40px 30px 50px;
max-width: 720px;
margin: 0 auto;
}
.cta-title {
margin: 0 0 12px;
font-size: 1.4rem;
font-weight: 800;
color: #1b1f3b;
line-height: 1.35;
background: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.cta-content p {
font-size: 1rem;
color: #333;
line-height: 1.9;
margin: 0 auto 18px;
}
.cta-content ul {
list-style: disc;
text-align: left;
display: inline-block;
margin: 0 auto 22px;
padding-left: 1.2em;
color: #444;
}
.cta-badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 18px;
}
.cta-badge {
font-size: .78rem;
background: #f7f8fc;
border: 1px solid #d8e0f5;
color: #1b1f3b;
border-radius: 999px;
padding: .3rem .7rem;
}
.cta-button {
display: inline-block;
padding: 1rem 2.2rem;
background: #f5d66a;
color: #1b1f3b;
border-radius: 8px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 6px 16px rgba(245,214,106,0.35);
transition: transform .2s ease, box-shadow .2s ease;
-webkit-tap-highlight-color: transparent;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(245,214,106,0.45);
}
.cta-note {
display: block;
font-size: .85rem;
color: #777;
margin-top: .6rem;
}
/* スマホ対応 */
@media (max-width: 768px) {
.cta-wrap { padding: 0; }
.cta-section {
border-left: none;
border-right: none;
border-radius: 0;
box-shadow: none;
}
.cta-section::before,
.cta-section::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 1px;
background: #1b1f3b;
pointer-events: none;
}
.cta-section::before { left: 0; }
.cta-section::after { right: 0; }
.cta-image { height: 240px; }
.cta-content { padding: 28px 16px 38px; }
.cta-title { font-size: 1.2rem; }
.cta-button:hover { transform: none; }
.cta-content, .cta-section { overflow-wrap: anywhere; }
}
</style>
</head>
<body>
<div class="cta-wrap">
<section class="cta-section">
<div class="cta-image" aria-hidden="true"></div>
<div class="cta-content">
<div class="cta-title">無料｜AIツールプレゼント</div>
<p>
コストを抑え副業で収益化を目指していきましょう。<br>
NOMA＋では無料でAIライティングツールをプレゼント中。
</p>
<ul>
<li>無料でAIツールが使える</li>
<li>AIの最新情報が手に入る</li>
<li>副業で稼ぐための情報を発信</li>
</ul>
<div class="cta-badges">
<span class="cta-badge">完全無料</span>
<span class="cta-badge">すぐに利用できる</span>
<span class="cta-badge">制限なし</span>
</div>
<a href="リンク先URL" class="cta-button" aria-label="説明文">
AIツールをGETする
</a>
<small class="cta-note">※ 期間限定の情報です。</small>
</div>
</section>
</div>
</body>
</html>
3. 下のアピール文でクリックしたくなるLPボタン
シンプルにしたいけれど、しっかりアピールしたい人向けのLPボタン。ボタンの色が変わるのもおしゃれですね。しっかり訴求する文を書きたい人向けです。
以下のコードをコピーしてご利用ください。
コードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>AIライティングツール</title>
</head>
<body style="margin:0;font-family:'Noto Sans JP',system-ui,sans-serif;background:#fff;color:#1f2328;">
<section style="background:#f2f3f5;padding:28px 16px 18px;margin:0;">
<div style="max-width:980px;margin:0 auto;text-align:center;">
<!-- キャプション -->
<div style="display:inline-flex;align-items:center;gap:.6rem;font-weight:700;color:#7a7f87;margin:0 0 14px;">
<span style="display:inline-block;width:28px;height:2px;background:#cfd3d9;"></span>
<span>AIで加速するライティング</span>
<span style="display:inline-block;width:28px;height:2px;background:#cfd3d9;"></span>
</div>
<!-- ピルボタン -->
<div style="display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:0;">
<a href="https://hidgia.com/p/r/8h3z7UnH"
style="display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 20px;border-radius:999px;
background:#fff;border:2px solid #ff6b3c;color:#1f2328;text-decoration:none;font-weight:800;letter-spacing:.01em;
box-shadow:0 8px 0 rgba(227,92,47,.20),0 12px 22px rgba(0,0,0,.07);">
<span>今すぐ登録</span>
<span aria-hidden="true"
style="width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:2px solid currentColor;">
<svg viewBox="0 0 24 24" width="14" height="14" style="display:block;fill:currentColor;">
<path d="M9 5a1 1 0 0 0 0 2h6.59L8.3 14.29a1 1 0 1 0 1.4 1.42L17 8.41V15a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1H9z"/>
</svg>
</span>
</a>
<a href="リンク先URL"
style="display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 20px;border-radius:999px;
background:#fff;border:2px solid #ff6b3c;color:#1f2328;text-decoration:none;font-weight:800;letter-spacing:.01em;
box-shadow:0 8px 0 rgba(227,92,47,.20),0 12px 22px rgba(0,0,0,.07);">
<span>詳しくみる</span>
<span aria-hidden="true"
style="width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:2px solid currentColor;">
<svg viewBox="0 0 24 24" width="14" height="14" style="display:block;fill:currentColor;">
<path d="M9 5a1 1 0 0 0 0 2h6.59L8.3 14.29a1 1 0 1 0 1.4 1.42L17 8.41V15a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1H9z"/>
</svg>
</span>
</a>
</div>
</div>
</section>
<section style="background:#ff5a3c;color:#fff;padding:36px 16px;margin:0;">
<div style="max-width:980px;margin:0 auto;text-align:center;">
<div style="margin:0 0 10px;font-size:clamp(1.4rem,1.1rem + 1.6vw,2.1rem);
font-weight:900;line-height:1.25;color:#fff;">
無料でAIライティングツールをプレゼント！
</div>
<div style="margin:0;opacity:.95;color:#fff;line-height:1.8;">
SEO特化で構成から執筆まで網羅
</div>
</div>
</section>
</body>
</html>
4. 画像なしでクリックしたくなるLPボタン
「リンク」と「文言」を入れてると上記のデザインが表示されます。スマホでは縦型表示になるので文字の量には気をつけて！
以下のコードをコピーしてご利用ください。
コードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Pill CTA Buttons</title>
<style>
:root{
--accent:#f5a623; /* 縁取りのオレンジ */
--accent-dark:#e39518; /* 影・濃い色 */
--text:#2a2a2a;
--bg:#fff7ef; /* ほんのり温かい背景（任意） */
}
*{box-sizing:border-box}
body{margin:0;font-family:"Noto Sans JP",system-ui,sans-serif;background:#fff;padding:24px}
.section{
max-width:980px;margin:0 auto;background:var(--bg);
border-radius:14px;padding:28px; text-align:center;
}
/* ボタンの並び */
.cta-row{
display:flex; gap:28px; justify-content:center; flex-wrap:wrap;
}
/* ===== ピル型CTA ===== */
.pill-cta{
--h:64px;
display:inline-flex; align-items:center; gap:18px;
height:var(--h); padding:0 24px 0 28px;
border-radius:999px; background:#fff; color:var(--text);
text-decoration:none; font-weight:800; font-size:18px; letter-spacing:.02em;
border:3px solid var(--accent);
box-shadow:
0 8px 0 var(--accent-dark, #d78f16),
0 8px 24px rgba(0,0,0,.08);
transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
position:relative;
isolation:isolate; /* ::before を下に閉じ込める */
}
/* 上側のハイライト（ふっくら見せる） */
.pill-cta::before{
content:""; position:absolute; inset:3px 6px auto 6px; height:36%;
background:linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,0));
border-radius:inherit; z-index:-1; pointer-events:none;
}
.pill-cta:hover{ transform:translateY(-2px); filter:saturate(1.02);
box-shadow:0 10px 0 var(--accent-dark), 0 14px 32px rgba(0,0,0,.1);}
.pill-cta:active{ transform:translateY(0); box-shadow:0 6px 0 var(--accent-dark), 0 8px 20px rgba(0,0,0,.08);}
.pill-cta:focus-visible{
outline:none; box-shadow:0 10px 0 var(--accent-dark), 0 0 0 4px rgba(245,166,35,.25), 0 14px 32px rgba(0,0,0,.1);
}
/* 右端の矢印丸 */
.pill-cta .chev{
width:36px; height:36px; border-radius:999px;
display:grid; place-items:center;
border:2px solid var(--accent);
box-shadow:inset 0 -2px 0 rgba(0,0,0,.05);
flex:0 0 auto;
}
.pill-cta svg{width:18px;height:18px;display:block;fill:var(--accent-dark)}
/* 小さめ/大きめバリエーション（必要ならクラス追加） */
.pill-sm{ --h:52px; font-size:16px; }
.pill-lg{ --h:72px; font-size:20px; }
@media (max-width:640px){
.section{padding:20px}
.cta-row{gap:16px}
.pill-cta{ width:100%; justify-content:space-between; padding:0 16px 0 20px; }
}
</style>
</head>
<body>
<section class="section">
<p style="margin:0 0 14px; color:#7a7a7a; font-weight:700;">＼ AIツールを無料で使いたい！／</p>
<div class="cta-row">
<a class="pill-cta pill-lg" href="登録URL">
<span>今すぐ登録</span>
<span class="chev" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M8.7 5.3a1 1 0 0 0 0 1.4L13 11l-4.3 4.3a1 1 0 0 0 1.4 1.4l5-5a1 1 0 0 0 0-1.4l-5-5a1 1 0 0 0-1.4 0z"/></svg>
</span>
</a>
<a class="pill-cta pill-lg" href="詳細のリンクURL">
<span>詳しく見る</span>
<span class="chev" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M8.7 5.3a1 1 0 0 0 0 1.4L13 11l-4.3 4.3a1 1 0 0 0 1.4 1.4l5-5a1 1 0 0 0 0-1.4l-5-5a1 1 0 0 0-1.4 0z"/></svg>
</span>
</a>
</div>
</section>
</body>
</html>
5. 選択を増やして訴求するLPボタン
すぐに訴求するボタンから詳細をするボタン、問い合わせなど3つの選択肢で読者を惹きつけるLPボタンです。デザインもおしゃれでスマホで見ても押したくなりますよ。ぜひ使ってみてください。
以下のコードをコピーしてご利用ください。
コードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>無料メルマガ訴求</title>
<style>
:root{
--blue-800:#1148a3;
--blue-700:#1958c7;
--muted:#cfe0ff;
--yellow:#f5d66a;
--yellow-ink:#1b1f3b;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0}
body{font-family:"Noto Sans JP",system-ui,sans-serif;background:#fff;color:#fff}
/* ===== セクション背景 ===== */
.lp-cta{
background:
radial-gradient(1000px 600px at 10% 10%, rgba(255,255,255,.06), transparent 60%),
radial-gradient(800px 500px at 85% 0%, rgba(255,255,255,.05), transparent 55%),
linear-gradient(180deg,var(--blue-800),var(--blue-700));
padding:60px 18px 40px;
position:relative;
overflow:hidden;
}
.lp-inner{max-width:1180px;margin:0 auto;}
/* ===== 上段 ===== */
.lp-top{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:40px;
}
.lp-media{ position:relative; min-height:300px; }
.lp-media img{
width:100%; height:100%; object-fit:cover;
border-radius:16px; box-shadow:0 14px 28px rgba(0,0,0,.18);
outline:2px solid rgba(255,255,255,.6); outline-offset:-2px; display:block;
}
.lp-copy{color:#fff;}
.lp-eyebrow{
display:inline-flex;align-items:center;gap:.6rem;
font-weight:700;color:var(--muted);opacity:.95;margin:0 0 10px;
}
.lp-eyebrow span{display:inline-block;width:28px;height:2px;background:rgba(255,255,255,.35)}
.lp-title{font-weight:800;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);line-height:1.3;margin:0 0 16px;}
.lp-desc{margin:0 0 22px;color:#e6eeff;line-height:1.9;max-width:44ch;}
.btn-primary{
display:inline-flex;align-items:center;gap:.6rem;
background:var(--yellow); color:var(--yellow-ink);
padding:.95rem 1.6rem; border-radius:999px; font-weight:800; text-decoration:none;
box-shadow:0 10px 24px rgba(245,214,106,.35), inset 0 -2px 0 rgba(0,0,0,.1);
transition:transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(245,214,106,.45);}
.btn-primary svg{width:1.1em;height:1.1em;fill:currentColor;}
/* ===== 下段（2カラム） ===== */
.lp-bottom{
display:grid; grid-template-columns:1fr 1fr; gap:24px;
align-items:center; margin-top:50px; position:relative;
}
.lp-divider{
position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%);
width:1px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.35),transparent);
}
.lp-col{ text-align:center; }
.lp-lead{ margin:0 0 14px; font-weight:700; color:#e8f0ff; font-size:clamp(1rem,.9rem + .4vw,1.15rem); }
/* === ここが重要：下部ボタンをテーマから隔離（名前を変える） === */
.lp-ghost{
display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
padding:.9rem 1.4rem; border-radius:999px;
background:rgba(255,255,255,.06);
border:1.5px solid rgba(255,255,255,.55);
color:#fff; text-decoration:none; font-weight:800;
box-shadow:0 8px 20px rgba(0,0,0,.12);
white-space:nowrap; line-height:1; /* 1行固定で折返し防止 */
-webkit-tap-highlight-color:transparent;
}
.lp-ghost:hover{ transform:translateY(-2px); background:rgba(255,255,255,.12); border-color:#fff; }
.lp-ghost svg{ width:1.05em; height:1.05em; fill:currentColor; }
/* ===== SP ===== */
@media (max-width:980px){
.lp-top{grid-template-columns:1fr; gap:18px;}
.lp-media{min-height:0; aspect-ratio:16/9;}
.lp-bottom{margin-top:18px;}
.lp-copy{text-align:center;}
.lp-desc{margin-left:auto;margin-right:auto;}
}
@media (max-width:420px){
.lp-top{gap:14px;}
.lp-bottom{margin-top:14px;}
}
</style>
</head>
<body>
<section class="lp-cta">
<div class="lp-inner">
<!-- 上段：中央寄せ（全列をまたぐ） -->
<div class="lp-top">
<div style="grid-column: 1 / -1;">
<div class="lp-media" style="width:min(100%, 760px); margin:0 auto;">
<img src="https://noma-plus.com/wp-content/uploads/2025/08/NOMA＋-メルマガ登録特典.jpg" alt="AIライティング">
</div>
<div style="height:26px"></div>
<div class="lp-copy" style="text-align:center; max-width:760px; margin:0 auto;">
<div class="lp-eyebrow"><span></span> 無料でGETしよう <span></span></div>
<div class="lp-title">無料のAIライティングツール<br>メルマガでGET</div>
<div class="lp-desc" style="margin-left:auto;margin-right:auto;">
構成から執筆、メタディスクリプションまで自動で作成。
</div>
<a href="一番訴求したいリンク" class="btn-primary" aria-label="メルマガを登録する">
メルマガ登録（無料）
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a1 1 0 0 1 1 1v9.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.42L11 13.59V4a1 1 0 0 1 1-1z"/><path d="M4 20a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1z"/></svg>
</a>
</div>
</div>
</div>
<!-- 下段：理想のレイアウト -->
<div class="lp-bottom">
<div class="lp-divider" aria-hidden="true"></div>
<div class="lp-col">
<div class="lp-lead">詳細を知りたい方へ</div>
<a href="リンクURL" class="lp-ghost" aria-label="詳細を知る">
詳細を見る
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5a1 1 0 0 0 0 2h6.59L8.3 14.29a1 1 0 1 0 1.4 1.42L17 8.41V15a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1H9z"/></svg>
</a>
</div>
<div class="lp-col">
<div class="lp-lead">お問い合わせで確認</div>
<a href="リンクURL" class="lp-ghost" aria-label="その他お問い合わせ">
お問い合わせ
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5a1 1 0 0 0 0 2h6.59L8.3 14.29a1 1 0 1 0 1.4 1.42L17 8.41V15a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1H9z"/></svg>
</a>
</div>
</div>
</div>
</section>
</body>
</html>
販売におすすめ｜かわいいLPボタン5選
ここからは、個人ブログで使えるかわいいLPボタンを5つ紹介します。ご自身のブログで使えそうなものがあればぜひコピーして使ってみてくださいね。
6. かわいいながらもしっかり訴求するLPボタン
電話番号のところはメールアドレスでもOK！
ふんわりピンクで、押したくなるようなLPボタンです。左上のキラキラと右下のハートも可愛いですね。
以下のコードをコピーしてご利用ください。
コードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>かわいいCTA</title>
<style>
:root{
--ink:#2b2b2b;
--muted:#8f8f94;
--accent1:#ff8aa0; /* コーラル */
--accent2:#ff9f66; /* ピーチ */
--badge:#ffefe9;
--line:#1d1d1d;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Noto Sans JP",system-ui,sans-serif;color:var(--ink);}
.cute-cta{padding:28px 14px; background:transparent;}
.wrap{
max-width:980px; margin:0 auto; position:relative;
background:#fff; border:2px solid var(--line); border-radius:18px;
box-shadow:0 16px 40px rgba(255,154,130,.18);
}
.wrap::before{content:"✨"; position:absolute; left:10px; top:10px; opacity:.6; font-size:18px;}
.wrap::after{content:"❤"; position:absolute; right:12px; bottom:8px; opacity:.25; font-size:18px; color:var(--accent1);}
.title{
text-align:center; font-weight:900; letter-spacing:.04em;
padding:20px 10px 4px; font-size:clamp(1.05rem,0.9rem + .7vw,1.35rem);
line-height:1.35;
}
/* ← これが追加：サブリードを中央に */
.sublead{
text-align:center; color:var(--muted);
font-size:.95rem; margin:0 10px 6px;
}
.inner{padding:10px 18px 22px; display:flex; flex-direction:column; align-items:center; gap:14px}
.phoneRow{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;}
.badge{
display:inline-grid; place-items:center; padding:.35rem .5rem;
background:var(--badge); color:#ff4d2f; border:2px solid #ff4d2f; border-radius:8px;
font-weight:900; font-size:.85rem;
}
.phoneBlock{text-align:center}
.tel{font-weight:900; letter-spacing:.08em; color:var(--ink); font-size:clamp(1.4rem,1.1rem + 1.5vw,2.2rem)}
.time{font-size:.82rem; color:#9a9aa0}
.ctaBtn{
margin-top:8px;
display:inline-flex; align-items:center; justify-content:center; gap:.8rem;
text-decoration:none; font-weight:900; color:#fff;
height:58px; padding:0 26px; border-radius:14px;
background:linear-gradient(90deg,var(--accent1),var(--accent2));
box-shadow:0 16px 34px rgba(255,138,160,.28), inset 0 -2px 0 rgba(0,0,0,.12);
border:1px solid rgba(255,255,255,.4);
-webkit-tap-highlight-color:transparent;
}
.ctaBtn svg{width:20px;height:20px;fill:currentColor}
.solo{ text-align:center; padding:18px 0 6px }
.solo a{
display:inline-flex; align-items:center; gap:.7rem;
padding:14px 20px; border-radius:12px; text-decoration:none; color:#fff; font-weight:900;
background:linear-gradient(90deg,var(--accent1),var(--accent2));
box-shadow:0 12px 28px rgba(255,138,160,.26), inset 0 -2px 0 rgba(0,0,0,.12);
}
.solo svg{width:18px;height:18px;fill:currentColor}
</style>
</head>
<body>
<section class="cute-cta">
<div class="wrap">
<div class="title">AIツール無料！</div>
<!-- ここが中央寄せのサブリード -->
<div class="sublead">お気軽にお問い合わせください</div>
<div class="inner">
<div class="phoneRow">
<span class="badge">SEO対策OK</span>
<div class="phoneBlock">
<div class="tel">03-1234-5678</div>
<div class="time">受付時間：平日 10:00〜19:00</div>
</div>
</div>
<a class="ctaBtn" href="URL" aria-label="メルマガ登録する">
メルマガ登録する（無料）
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M9 5a1 1 0 0 0 0 2h6.59L8.3 14.29a1 1 0 1 0 1.4 1.42L17 8.41V15a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1H9z"/>
</svg>
</a>
</div>
</div>
<div class="solo">
<a href="詳細URL" aria-label="詳細を見る">
詳細を見る
<svg viewBox="0 0 24 24"><path d="M9 5a1 1 0 0 0 0 2h6.59L8.3 14.29a1 1 0 1 0 1.4 1.42L17 8.41V15a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1H9z"/></svg>
</a>
</div>
</section>
</body>
</html>
7. 特典を訴求してクリックしやすいLPボタン
特典をしっかり伝えながらもクリック誘導できるLPボタン。
伝えたいことをしっかり伝え、ピンクで可愛らしい優しい感じに作りました。ぜひ使ってみてください。
以下のコードをコピーしてご利用ください。
コードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AIライティングが無料でもらえる</title>
<style>
/* スマホ：上段は縦並び＆中央 */
@media (max-width: 680px){
.hero-row { flex-direction: column !important; gap: 14px !important; }
.hero-text{ align-items: center !important; text-align: center !important; }
}
</style>
</head>
<body style="margin:0;font-family:'Noto Sans JP',system-ui,sans-serif;background:transparent;">
<section style="padding:22px 12px;">
<div style="max-width:960px;margin:0 auto;background:#fff;border:2px solid #111;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.08);overflow:hidden;">
<!-- リボン -->
<div style="background:#ffebe6;color:#ff4d2f;text-align:center;font-weight:900;letter-spacing:.08em;padding:8px 10px;font-size:.92rem;">
＊ AIツールを無料でプレゼント ＊
</div>
<!-- ▼ 上段（“外側 text-align:center”で確実に中央寄せ） -->
<div style="text-align:center; padding:18px;">
<!-- 内側は inline-flex なのでインライン要素として中央に配置される -->
<div class="hero-row"
style="display:inline-flex; align-items:center; gap:18px; width:auto; max-width:780px;">
<!-- 左：画像 -->
<div style="flex:0 0 auto; display:flex; justify-content:center;">
<img src="画像URL"
alt="LPイメージ"
style="width:220px;height:160px;object-fit:cover;border-radius:16px;display:block;">
</div>
<!-- 右：テキスト（PC左寄せ／SP中央） -->
<div class="hero-text" style="flex:1 1 auto; display:flex; flex-direction:column; gap:8px; text-align:left;">
<!-- バッジ＋サブリード -->
<div style="display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-start;">
<span style="display:inline-grid;place-items:center;padding:.35rem .55rem;background:#ffefe9;color:#ff4d2f;border:2px solid #ff4d2f;border-radius:8px;font-weight:900;font-size:.82rem;">
SEO対策OK
</span>
<span style="color:#7a7a7f;font-size:.9rem;">お気軽にお問い合わせください</span>
</div>
<!-- 見出し -->
<div style="font-weight:900;font-size:clamp(1.25rem,1.05rem + 1.2vw,1.9rem);letter-spacing:.03em;">
AIツール無料！
</div>
<!-- 価格行 -->
<div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
<span style="background:#111;color:#fff;font-weight:900;border-radius:6px;padding:.2rem .55rem;font-size:.8rem;">SPECIAL</span>
<span style="font-weight:900;color:#ff3d6e;font-size:clamp(1.9rem,1.3rem + 2vw,2.6rem);line-height:1;">0円</span>
<span style="color:#9aa;font-size:.9rem;">（メルマガ登録でGET）</span>
</div>
<!-- 電話・時間 -->
<div style="color:#222;font-weight:900;letter-spacing:.08em;">03-1234-5678</div>
<div style="color:#9aa;font-size:.9rem;">受付時間：平日 10:00〜19:00</div>
</div>
</div>
</div>
<!-- ▲ 上段ここまで ▲ -->
<!-- 区切り線 -->
<div style="height:1px;background:linear-gradient(90deg,transparent,#e9ecf3,transparent);margin:10px 18px;"></div>
<!-- 三大特典 -->
<div style="padding:0 18px 14px;">
<div style="font-weight:900;text-align:center;margin:0 0 10px;font-size:1.05rem;">初回限定 3大特典</div>
<ol style="margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr;gap:8px;">
<li style="display:flex;gap:10px;align-items:flex-start;background:#fff8f9;border:1px solid #ffd6de;border-radius:10px;padding:10px 12px;">
<span style="flex:0 0 28px;display:inline-grid;place-items:center;background:#ff638a;color:#fff;border-radius:6px;font-weight:900;font-size:.85rem;">1</span>
<span style="font-weight:700;">メルマガ登録で<strong>GET</strong>！</span>
</li>
<li style="display:flex;gap:10px;align-items:flex-start;background:#f7fbff;border:1px solid #d8e7ff;border-radius:10px;padding:10px 12px;">
<span style="flex:0 0 28px;display:inline-grid;place-items:center;background:#2f86ff;color:#fff;border-radius:6px;font-weight:900;font-size:.85rem;">2</span>
<span style="font-weight:700;">SEO対策AIライティングツール</span>
</li>
<li style="display:flex;gap:10px;align-items:flex-start;background:#f6fff6;border:1px solid #cfeccc;border-radius:10px;padding:10px 12px;">
<span style="flex:0 0 28px;display:inline-grid;place-items:center;background:#31c06a;color:#fff;border-radius:6px;font-weight:900;font-size:.85rem;">3</span>
<span style="font-weight:700;">副業のアドバイス</span>
</li>
</ol>
</div>
<!-- CTA -->
<div style="padding:6px 18px 18px;display:grid;gap:10px;grid-template-columns:1fr;justify-items:center;">
<a href="https://hidgia.com/p/r/8h3z7UnH" aria-label="メルマガ登録する（無料）"
style="display:inline-flex;align-items:center;justify-content:center;gap:.7rem;height:56px;padding:0 22px;
text-decoration:none;color:#fff;font-weight:900;border-radius:12px;
background:linear-gradient(90deg,#ff8aa0,#ff9f66);
box-shadow:0 14px 32px rgba(255,138,160,.28), inset 0 -2px 0 rgba(0,0,0,.12);">
メルマガ登録する（無料）
<svg viewBox="0 0 24 24" width="18" height="18" style="fill:currentColor;">
<path d="M9 5a1 1 0 0 0 0 2h6.59L8.3 14.29a1 1 0 1 0 1.4 1.42L17 8.41V15a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1H9z"/>
</svg>
</a>
<a href="詳細URL" aria-label="詳細を見る"
style="display:inline-flex;align-items:center;gap:.6rem;padding:12px 18px;border-radius:999px;text-decoration:none;
color:#ff6b8a;font-weight:800;border:2px solid #ffd1dc;background:#fff;">
詳細を見る
<svg viewBox="0 0 24 24" width="16" height="16" style="fill:currentColor;">
<path d="M9 5a1 1 0 0 0 0 2h6.59L8.3 14.29a1 1 0 1 0 1.4 1.42L17 8.41V15a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1H9z"/>
</svg>
</a>
</div>
</div>
</section>
</body>
</html>
8. 申し込みのみを訴求するLPボタン
細かい内容は一才なし！伝えたいことだけを伝えて訴求するLPボタンです。
美容系やオンライン系に向いているボタンですね。有料商材を扱っている人は、ぜひ使ってみてください。
以下のコードをコピーしてご利用ください。
コードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>AIライティング</title>
<style>
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;color:#2b2b2b;background:#fff}
.wrap{
max-width:980px;
margin:0 auto 80px; /* ← 下の本文との距離をここで確保 */
border-radius:18px;
overflow:hidden;
box-shadow:0 12px 40px rgba(0,0,0,.08);
}
.hero{
position:relative;
min-height:520px;
background:
linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.10)),
url("画像URL")
center/cover no-repeat;
border-bottom:8px solid #f05a78;
}
.hero-copy{position:absolute; left:5%; top:8%; color:#fff; text-shadow:0 3px 14px rgba(0,0,0,.25)}
.hero-copy .t1{font-weight:800; line-height:1.25; font-size:clamp(1.6rem,1.1rem + 2.8vw,3rem); letter-spacing:.06em}
.price-band{background:#f05a78; color:#fff; text-align:center; padding:18px 12px 22px}
.price-title{font-weight:800; letter-spacing:.18em; font-size:clamp(1rem,.9rem + .6vw,1.25rem); margin-bottom:8px}
.price-row{display:flex;gap:14px;align-items:flex-end;justify-content:center;flex-wrap:wrap}
.price-left{font-weight:900;font-size:clamp(1rem,.9rem + .6vw,1.25rem)}
.yen{font-weight:900; line-height:1; font-size:clamp(2.2rem,1.4rem + 3.2vw,4rem); color:#ffea70; text-shadow:0 6px 20px rgba(0,0,0,.25)}
.yen+span{font-weight:900;font-size:clamp(1rem,.9rem + .6vw,1.25rem)}
.tax{font-weight:800;opacity:.95}
.lead{display:flex; align-items:center; justify-content:center; gap:14px; padding:16px 10px; background:#fff; color:#e04f70; font-weight:900; letter-spacing:.08em; border-bottom:1px solid #ffd3dd}
.lead:before,.lead:after{content:"❯"; color:#ff9fb2; font-weight:900}
.lead:before{transform:rotate(180deg)}
.cta-wrap{display:grid;place-items:center;background:#fff;padding:22px 12px 72px} /* 中の余白も残す */
.cta{display:inline-flex; align-items:center; gap:.8rem; padding:18px 28px; border-radius:28px; color:#fff; text-decoration:none; font-weight:900; background:linear-gradient(180deg,#ff8aa0,#ff6b8a 60%,#ff567a); box-shadow:0 18px 40px rgba(255,107,138,.35), inset 0 -3px 0 rgba(0,0,0,.18), 0 2px 0 rgba(255,255,255,.7) inset}
.cta svg{width:22px;height:22px;fill:currentColor}
.cta-ghost{margin-top:16px; color:#b43a58; font-weight:700; opacity:.9; font-size:.92rem}
@media (max-width:680px){
.hero{min-height:460px}
.hero-copy{left:6%; top:7%}
}
</style>
</head>
<body>
<div class="wrap">
<section class="hero">
<div class="hero-copy"><div class="t1">あなたの人生に<br>副業という<br>新たなきっかけを</div></div>
</section>
<section class="price-band">
<div class="price-title">AIライティングツール</div>
<div class="price-row">
<div class="price-left">月額</div>
<div class="yen">0</div><span>円</span>
<div class="tax">（税抜）</div>
</div>
</section>
<div class="lead">今すぐAIツールを使いたい方へ</div>
<div class="cta-wrap">
<a class="cta" href="リンク先URL" aria-label="無料メルマガ登録へ">
無料メルマガ登録はコチラ
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5a1 1 0 0 0 0 2h6.59L8.3 14.29a1 1 0 1 0 1.4 1.42L17 8.41V15a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1H9z"/></svg>
</a>
<div class="cta-ghost">※WEBから24時間受付中</div>
</div>
</div>
</body>
</html>
9. 縦型でPC、スマホのデザインが変わらないLPボタン
Presented by NOMA＋
縦型のクリック誘導できるLPボタン。
スマホもPCも表示を変えたくないという人におすすめです。かわいい感じでもしっかり誘導できるように仕上げています。ぜひ使ってみてください。
以下のコードをコピーしてご利用ください。
コードを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>クーポン訴求バナー（かわいい版）</title>
<style>
:root{
/* ── パステル調の配色 ── */
--card:#ffffff;
--ink:#3a3340;
--mint:#0fb7a6;
--pink:#ff8fb3;
--peach:#ffb38a;
--lemon:#ffe081;
--line:#ffd9e6;
--cta1:#ff78a6;
--cta2:#ffa6a6;
}
*{box-sizing:border-box}
html,body{margin:0}
/* 背景は透過 */
body{
font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
color:var(--ink);
background:transparent;
}
/* ====== カード ====== */
.coupon-card{
max-width:520px; margin:22px auto;
background:var(--card);
border-radius:26px;
border:2px solid var(--line);
box-shadow:
0 18px 40px rgba(255,140,180,.18), /* ふわっと可愛い影 */
0 2px 0 #fff inset; /* シールっぽいエッジ */
overflow:hidden;
position:relative;
isolation:isolate;
}
/* 背景デコ（きらきら&ドット） */
.card-bg{
position:relative;
padding:22px 16px 18px;
background:
radial-gradient(circle at 12% 10%, rgba(255,224,129,.35) 0 16px, transparent 18px) no-repeat,
radial-gradient(circle at 90% 8%, rgba(255,224,129,.35) 0 12px, transparent 14px) no-repeat,
radial-gradient(circle at 85% 78%, rgba(255,224,129,.28) 0 14px, transparent 16px) no-repeat,
radial-gradient(3px 3px at 20% 30%, rgba(255,143,179,.35) 50%, transparent 52%) repeat,
radial-gradient(3px 3px at 80% 60%, rgba(255,166,166,.35) 50%, transparent 52%) repeat;
background-size: 140px 140px, 110px 110px, 120px 120px, 20px 20px, 22px 22px;
}
/* ====== リボン ====== */
.ribbon{
--h:52px;
width:88%; height:var(--h);
margin:0 auto 10px;
border-radius:12px;
background:linear-gradient(180deg,var(--pink),#ff7ea7);
color:#fff; font-weight:900; letter-spacing:.14em;
display:grid; place-items:center;
position:relative;
box-shadow:0 8px 18px rgba(255,126,167,.25) inset, 0 4px 12px rgba(255,126,167,.25);
}
.ribbon::before,.ribbon::after{
content:""; position:absolute; top:10px; width:50px; height:calc(var(--h) - 20px);
background:linear-gradient(180deg,#ff9ec0,#ff7ea7);
filter:brightness(.95);
clip-path:polygon(0 0,100% 10px,100% calc(100% - 10px),0 100%);
}
.ribbon::before{left:-36px; transform:skewX(-12deg); border-radius:10px 0 0 10px;}
.ribbon::after {right:-36px; transform:skewX(12deg); border-radius:0 10px 10px 0;}
/* ちいさなリボン飾り */
.ribbon span::after{
content:" ⭐️"; font-size:1.05em; filter:saturate(1.2);
}
/* ====== 数字ヒーロー ====== */
.num-hero{text-align:center; line-height:1; margin: 8px 0 6px;}
.num-hero .big{
font-weight:900; letter-spacing:.02em;
font-size:clamp(4.2rem, 16vw, 8.2rem);
background:linear-gradient(180deg,#11c8b6,#0fb7a6 60%,#0aa89a);
-webkit-background-clip:text; background-clip:text; color:transparent;
text-shadow:0 10px 26px rgba(15,183,166,.18);
}
.num-hero .yen{
font-weight:900; color:#0fb7a6; margin-left:.18em;
font-size:clamp(1.8rem,6vw,3.2rem);
text-shadow:0 6px 18px rgba(15,183,166,.14);
}
.subline{
text-align:center; font-weight:900; letter-spacing:.08em;
font-size:clamp(1.1rem,4.2vw,1.6rem);
color:#ff6fa0; margin: 6px 0 6px;
}
/* ====== 画像（角丸も適用） ====== */
.kv{width:100%; aspect-ratio: 5/3; border-radius:20px; overflow:hidden; margin:10px 0 10px;}
.kv img{width:100%; height:100%; object-fit:cover; display:block;}
/* ====== 説明 ====== */
.desc{ text-align:center; color:#7b7580; font-weight:800; margin: 8px 0 16px; }
/* ====== CTA ====== */
.cta{
display:flex; align-items:center; justify-content:center; gap:.65rem;
width:88%; height:58px; margin: 0 auto 16px;
color:#fff; text-decoration:none; font-weight:900; letter-spacing:.02em;
border-radius:999px;
background:linear-gradient(180deg,var(--cta1),var(--cta2));
box-shadow:0 18px 36px rgba(255,120,166,.30), inset 0 -3px 0 rgba(0,0,0,.12), 0 2px 0 #fff inset;
-webkit-tap-highlight-color:transparent;
}
.cta svg{width:20px;height:20px;fill:currentColor}
.cta small{opacity:.92; font-weight:800}
/* ====== フッター ====== */
.foot{
text-align:center; padding: 2px 0 16px; color:#8b8690; font-weight:900;
}
.foot .mark{display:inline-block; width:26px; height:26px; border-radius:50%;
background:conic-gradient(from 0deg,#7c3aed,#06b6d4,#10b981,#f59e0b,#ef4444,#7c3aed);
vertical-align:-6px; margin-right:6px;
box-shadow:0 2px 6px rgba(124,58,237,.25);
}
/* スマホ微調整 */
@media (max-width:420px){
.ribbon{width:92%}
.cta{width:92%}
}
</style>
</head>
<body>
<section class="coupon-card">
<div class="card-bg">
<div class="ribbon"><span>無料メルマガ登録で</span></div>
<div class="num-hero">
<span class="big">0</span><span class="yen">円</span>
</div>
<div class="subline">AIツールプレゼント！</div>
<figure class="kv">
<!-- 画像はそのまま差し替え可能 -->
<img src="画像URL" alt="AI画像">
</figure>
<div class="desc">SEO対策でしっかり稼ごう！</div>
<a class="cta" href="リンク先URL" aria-label="登録はこちら">
無料登録はこちら <small>（1分）</small>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5a1 1 0 0 0 0 2h6.59L8.3 14.29a1 1 0 1 0 1.4 1.42L17 8.41V15a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1H9z"/></svg>
</a>
</div>
<div class="foot">
<span class="mark" aria-hidden="true"></span>Presented by NOMA＋
</div>
</section>
</body>
</html>
10. シンプルだけど成約率UPを目指したLPボタン
画像なし！リンク先1つ！だけど成約率を上げたい人向けのLPボタンです。
読者が行動したら何が手に入るのかも一目瞭然。伝えたいことを凝縮しています。ぜひ使ってみてくださいね。
以下のコードをコピーしてご利用ください。
コードを表示
<section style="font-family:'Noto Sans JP',system-ui,sans-serif;background:transparent;padding:24px 12px;">
<style>
:root{
--paper:#f6e7c9; --ink:#5b4636; --sub:#7d6a58;
--mark1:#ffe5b6; --mark2:#ffc980; --chip:#fff7e6; --chip-b:#ead9b8;
}
.ob-wrap{max-width:1080px;margin:0 auto;position:relative;background:var(--paper);
border:3px solid var(--ink);border-radius:28px;overflow:hidden;box-shadow:0 16px 40px rgba(91,70,54,.08);color:var(--ink)}
.ob-inner{padding:28px clamp(18px,4vw,42px) 26px}
/* 見出し干渉リセット（テーマ対策） */
.ob-eyebrow,.ob-title{
background:none !important;border:none !important;box-shadow:none !important;
padding:0 !important;margin:0 !important;
}
.ob-eyebrow{display:inline-block;font-weight:800;color:var(--sub);letter-spacing:.08em;
padding:.35rem .75rem !important;border:3px solid var(--ink) !important;border-radius:14px;background:#fff3d9 !important}
/* hタグのテーマ装飾を避けるため「div」で見出しに */
.ob-title{display:inline-block;margin:12px 0 8px !important;line-height:1.15;letter-spacing:.04em;font-weight:900;
font-size:clamp(1.6rem,1.1rem + 2.4vw,3rem);position:relative}
.ob-title:after{content:"";position:absolute;left:-8px;right:-8px;bottom:-8px;height:14px;
background:linear-gradient(90deg,var(--mark1),var(--mark2));border-radius:12px;opacity:.55;z-index:-1}
.ob-lead{margin:8px 0 14px;color:var(--sub);font-weight:700;letter-spacing:.03em}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 2px}
@media (max-width:880px){ .chips{grid-template-columns:1fr} }
.chip{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;background:var(--chip);
border:2px solid var(--chip-b);border-radius:16px;padding:12px 12px;min-height:68px}
.chip-ico{width:44px;height:44px;display:grid;place-items:center;background:#fff;
border:2px solid var(--ink);border-radius:12px;color:var(--ink)}
.chip-ico svg{width:20px;height:20px;fill:currentColor}
.chip-txt{font-weight:800;letter-spacing:.02em}
.ob-cta{margin-top:12px;display:flex;justify-content:center}
.bakery-cta{
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.9rem;
width:100%;max-width:760px;height:86px;padding:0 28px;margin:0 auto;
background:var(--paper);color:var(--ink);text-decoration:none;border:3px solid var(--ink);border-radius:28px;
box-shadow:0 6px 0 rgba(91,70,54,.16),0 22px 40px rgba(91,70,54,.08);transition:transform .15s ease,box-shadow .15s ease;
}
/* 破線は背面に（重なり解消） */
.bakery-cta:before{content:"";position:absolute;left:14px;right:14px;top:12px;bottom:12px;border-radius:22px;
border:2px dashed rgba(91,70,54,.38);pointer-events:none;z-index:0}
.b-ico{width:40px;height:40px;display:grid;place-items:center;background:linear-gradient(180deg,#fff7e6,#ffe9c9);
border:2px solid var(--ink);border-radius:12px;color:var(--ink);z-index:1}
.b-ico svg{width:18px;height:18px;fill:currentColor}
.b-text{display:flex;flex-direction:column;line-height:1.15;text-align:center;position:relative;z-index:1}
.b-lead{font-weight:800;color:var(--sub);letter-spacing:.06em;font-size:clamp(.9rem,.6rem + .6vw,1rem)}
.b-title{position:relative;font-weight:900;letter-spacing:.06em;font-size:clamp(1.25rem,1rem + 1.7vw,1.9rem);color:var(--ink);display:inline-block}
.b-title:after{content:"";position:absolute;left:-6px;right:-6px;bottom:-6px;height:12px;
background:linear-gradient(90deg,var(--mark1),var(--mark2));border-radius:10px;opacity:.6;z-index:-1}
@media (max-width:560px){
.b-ico{display:none}
.bakery-cta{height:78px;padding:0 22px}
.b-title:after{bottom:-5px;height:10px}
}
</style>
<div class="ob-wrap">
<div class="ob-inner">
<span class="ob-eyebrow">NOMA＋</span>
<!-- 見出しは div にしてテーマ干渉を回避 -->
<div class="ob-title">AIツール、まだ有料で使ってるの？</div>
<p class="ob-lead">有料級のAIツールが無料で使える。</p>
<div class="chips">
<div class="chip">
<span class="chip-ico" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.5 6 .9-4.4 4.3 1 6-5.3-2.8L6.7 20l1-6L3.3 9.4l6-.9L12 3z"/></svg></span>
<div class="chip-txt">構成から作って欲しい</div>
</div>
<div class="chip">
<span class="chip-ico" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 7h16v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7zm3-4h10a1 1 0 0 1 1 1v2H6V4a1 1 0 0 1 1-1z"/></svg></span>
<div class="chip-txt">SEO対策をしてほしい</div>
</div>
<div class="chip">
<span class="chip-ico" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M3 5h18v2H3zm0 6h18v2H3zm0 6h12v2H3z"/></svg></span>
<div class="chip-txt">無制限で使いたい</div>
</div>
</div>
<div class="ob-cta">
<a class="bakery-cta" href="誘導先URL" aria-label="メルマガ登録する（無料）">
<span class="b-ico" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M3 17.25 14.8 5.45a2.5 2.5 0 1 1 3.54 3.53L6.53 20.78 3 21l.22-3.53zM15.5 6.9l1.6 1.6"/></svg>
</span>
<span class="b-text">
<span class="b-title">メルマガ登録する｜無料</span>
</span>
</a>
</div>
</div>
</div>
</section>
ジャンルを問わない！かっこいいLPボタン5選
とりあえず、かっこいいLPに使えるボタンが欲しい。そんな人はここから紹介するデザインを使ってみてください。すごくかっこいいので成約率UPも期待できちゃいます。
11. かっこよく訴求！クリックしやすいLPボタン（1）
NOMA＋
AIを使いこなす
SEO対策へ
SEO対策へ
今でも有料ツールを使っているの？
無制限のAIツールをプレゼント！
今すぐ登録｜無料
デザイン重視でかっこよさを追求したL Pボタン。
高級感のある色合いで、クリックしたくなるようにシンプルに仕上げました。
以下のコードをコピーしてご利用ください。
コードを表示
<section class="mk-hero" aria-label="NOMA＋ プロモ">
<style>
.mk-hero{
--bg1:#1b1d22; --bg2:#121317;
--ink:#fff; --ink-sub:#c9ced6;
--gold1:#f4d2a1; --gold2:#d9a36f; --gold3:#ba7f49;
--y1:#ffe34e; --y2:#ffd000; --y3:#ffbf00;
max-width:1080px; margin:20px auto; padding:24px 18px; border-radius:18px;
background:linear-gradient(135deg,var(--bg1),var(--bg2)); color:var(--ink);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"Hiragino Sans","Noto Sans JP",sans-serif;
box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.mk-hero *{box-sizing:border-box; margin:0; padding:0}
/* ロゴ */
.mk-logo{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mk-logo__badge{width:52px;height:52px;border-radius:12px;background:#ffd400;
display:grid;place-items:center;color:#111;font-weight:900}
.mk-logo__badge span{font-size:26px;transform:translateY(-1px)}
.mk-logo__txt{font-size:28px;font-weight:800;letter-spacing:.02em}
/* コピー */
.mk-copy{margin:4px 0 14px}
.mk-copy__main{
font-size:clamp(28px,4.6vw,48px); line-height:1.25; font-weight:800;
background:linear-gradient(180deg,var(--gold1),var(--gold2) 60%,var(--gold3));
-webkit-background-clip:text; background-clip:text; color:transparent;
text-shadow:0 1px 0 rgba(0,0,0,.15);
}
.mk-copy__sub{color:var(--ink-sub); font-size:14px; margin-top:6px}
/* 横並びCTA */
.mk-cta{display:flex; align-items:stretch; gap:10px; margin-top:16px}
.mk-cta__left{
flex:1 1 auto; background:#fff; color:#111; border-radius:12px;
border:1px solid #e8e8e8; padding:14px 16px; font-weight:800;
display:flex; align-items:center; justify-content:center; min-height:48px;
}
.mk-cta__right{
flex:0 0 auto; border-radius:12px; min-width:210px;
background-image:linear-gradient(180deg,var(--y1),var(--y2) 60%,var(--y3));
border:1px solid rgba(0,0,0,.06); box-shadow:0 6px 18px rgba(0,0,0,.18);
color:#111; text-decoration:none; font-weight:900;
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:0 18px; min-height:48px;
transition:transform .06s ease, box-shadow .06s ease, filter .06s ease;
}
.mk-cta__right:hover{transform:translateY(-1px); filter:saturate(1.02)}
.mk-cta__right:active{transform:translateY(0); box-shadow:0 3px 10px rgba(0,0,0,.16)}
.mk-cta__right svg{width:18px;height:18px;fill:currentColor}
/* モバイル調整 */
@media (max-width: 640px){
.mk-hero{padding:16px 14px}
.mk-copy{margin:2px 0 10px}
.mk-copy__main{font-size:clamp(22px,6vw,30px)}
.mk-cta{flex-direction:column}
.mk-cta__left{min-height:44px; padding:12px 14px}
.mk-cta__right{width:100%; min-height:44px; padding:0 14px}
}
</style>
<!-- ロゴ -->
<div class="mk-logo">
<div class="mk-logo__badge" aria-hidden="true"><span>N</span></div>
<div class="mk-logo__txt">NOMA＋</div>
</div>
<!-- コピー -->
<div class="mk-copy">
<div class="mk-copy__main">AIを使いこなす<br>SEO対策へ</div>
<div class="mk-copy__sub">今でも有料ツールを使っているの？</div>
</div>
<!-- CTA -->
<div class="mk-cta">
<div class="mk-cta__left">無制限のAIツールをプレゼント！</div>
<a class="mk-cta__right" href="訴求URL" aria-label="登録でGET（無料）">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 3a1 1 0 0 1 1 1v8.6l2.3-2.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L11 12.6V4a1 1 0 0 1 1-1z"/>
<path d="M5 19a1 1 0 0 0 1 1h12a1 1 0 1 0 0-2H6a1 1 0 0 0-1 1z"/>
</svg>
今すぐ登録｜無料
</a>
</div>
</section>
12. 画像付きで視覚にアプローチ！クリックしやすいLPボタン
黒背景で高級感が出るかっこいいL Pボタン。
画像も使うことで視覚的にも訴求できるのもおすすめのポイントですね。ぜひ使ってみてください。
以下のコードをコピーしてご利用ください。
コードを表示
<!-- ===== LP CTA (image-left / centered / full-width CTA) ===== -->
<section class="lpcta7" aria-label="スムーズなプレゼン">
<div class="lpcta7__inner">
<div class="lpcta7__imgwrap">
<img src="画像URL" alt="イメージ" class="lpcta7__img">
</div>
<div class="lpcta7__content">
<span class="lpcta7__caps">AIツールが無料で使える</span>
<span class="lpcta7__main">SEO対策をしっかりしよう</span>
<span class="lpcta7__sub">無料で使い放題</span>
<div class="lpcta7__badges">
<i class="b b--green">構成から作成</i>
<i class="b b--blue">ディスクリプションもOK</i>
<i class="b b--gray">上位表示も期待できる</i>
</div>
<!-- リンクはこのCTAだけに -->
<a href="リンク先URL" class="lpcta7__cta">
今すぐ登録（無料）
<svg viewBox="0 0 24 24" class="lpcta7__arrow" aria-hidden="true">
<path d="M5 12h12m-5-5l5 5-5 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</div>
</div>
</section>
<style>
.lpcta7{
--ink:#eaf2ff;--ink-sub:#b9c3d6;
--bg1:#0e1117;--bg2:#141a22;
--acc1:#5ee1ff;--acc2:#7d5cff;
width:min(100%,980px); margin:20px auto;
border-radius:20px; overflow:hidden; isolation:isolate;
color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,"Noto Sans JP",sans-serif;
/* 背景は本体に直書き＋clipでにじみ防止 */
background:
radial-gradient(900px 500px at 6% -20%, rgba(125,92,255,.22), transparent 60%),
radial-gradient(800px 400px at 100% 0%, rgba(94,225,255,.22), transparent 55%),
linear-gradient(135deg,var(--bg1),var(--bg2));
clip-path: inset(0 round 20px);
box-shadow:0 18px 45px rgba(0,0,0,.45);
}
/* 中身は束でセンタリング */
.lpcta7__inner{
display:grid; gap:22px; align-items:center; padding:22px;
grid-template-columns:minmax(220px,360px) 1fr;
max-width:920px; margin:0 auto;
}
/* 画像 */
.lpcta7__img{width:100%;display:block;border-radius:14px;aspect-ratio:16/9;object-fit:cover;
box-shadow:0 6px 20px rgba(0,0,0,.4);}
/* テキスト */
.lpcta7__content{display:flex;flex-direction:column;gap:10px;min-width:0;}
.lpcta7__caps{align-self:flex-start;font-size:.78rem;letter-spacing:.06em;font-weight:700;color:var(--ink-sub);
background:rgba(255,255,255,.08);padding:.35rem .7rem;border-radius:999px;}
.lpcta7__main{font-weight:800;line-height:1.2;font-size:clamp(1.25rem,2.4vw + .5rem,1.9rem);}
.lpcta7__sub{color:var(--ink-sub);font-size:.92rem;}
.lpcta7__badges{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .8rem;}
.b{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;
color:#cfe6ff;background:rgba(255,255,255,.06);padding:.4rem .6rem;border-radius:999px;}
.b::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor;}
.b.b--green{color:#b7ffce}.b.b--blue{color:#bfe2ff}.b.b--gray{color:#e2e8f0}
/* フルワイドCTA：右カラム内で幅100% */
.lpcta7__cta{
display:flex;align-items:center;justify-content:center;
width:100%; /* 横幅いっぱい */
font-weight:800;font-size:1rem;padding:1rem 1.2rem;border-radius:12px;
background:linear-gradient(90deg,var(--acc1),var(--acc2)); color:#071018;
text-decoration:none; box-shadow:0 8px 24px rgba(125,92,255,.35);
transition:filter .2s ease;
}
.lpcta7__cta:hover{filter:brightness(1.05)}
.lpcta7__arrow{width:20px;height:20px;margin-left:.4rem;}
/* モバイル：縦並び＆CTAはそのまま100% */
@media (max-width:768px){
.lpcta7__inner{grid-template-columns:1fr;gap:16px;padding:16px;max-width:680px;}
.lpcta7__img{aspect-ratio:16/10;}
}
</style>
13. PC画像あり、スマホなしのLPボタン
シンプルながらも画像で訴求できるLPボタン。縦長になるのでスマホで表示する時は画像なしでデザインしています。
カッコイイデザインでもしっかり伝えたい人はこちらを使ってみてください。
以下のコードをコピーしてご利用ください。
コードを表示
<section class="fmc-hero" aria-label="AIライティングツール">
<style>
.fmc-hero{
--main-blue:#0b4d91; --accent-red:#e6003d;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
max-width:960px; margin:40px auto; padding:48px 28px 48px;
background:linear-gradient(180deg,#f8fbff,#edf5fb);
border-radius:18px;
display:grid;
grid-template-columns: 1fr 1fr; /* ←左右を1:1に */
column-gap:36px; row-gap:32px;
align-items:center; /* ←縦中央で揃える */
overflow:hidden;
}
@media (max-width:900px){
.fmc-hero{
grid-template-columns:1fr;
padding:28px 18px;
row-gap:18px;
}
}
/* 画像（PC/タブレットは表示、スマホは非表示） */
.fmc-hero__img{ display:flex; justify-content:flex-start; }
.fmc-hero__img img{
width:100%;
aspect-ratio:4/5; /* ←縦長すぎない比率に変更 */
max-height:520px; /* ←テキスト量と高さを合わせやすく */
object-fit:cover;
border-radius:12px;
display:block;
box-shadow:0 8px 18px rgba(0,0,0,.08);
}
@media (max-width:900px){
.fmc-hero__img{ display:none !important; } /* スマホでは非表示 */
}
/* テキスト列（中央寄せ） */
.fmc-hero__content{
z-index:1; display:flex; flex-direction:column; justify-content:center;
}
.fmc-hero__title{
font-size:28px; line-height:1.5; font-weight:800; color:#0a2540; margin:0 0 16px;
}
.fmc-hero__title .box{ background:var(--main-blue); color:#fff; padding:3px 8px; border-radius:4px; }
.fmc-hero__title .blue{ color:var(--main-blue); }
.fmc-hero__list{ font-weight:700; font-size:17px; line-height:1.85; margin:0 0 14px; }
.fmc-hero__list svg{ width:18px; height:18px; color:#22b14c; vertical-align:middle; margin-right:6px; }
.fmc-hero__desc{ font-size:16px; line-height:1.8; color:#222; margin:0 0 22px; }
.fmc-hero__desc strong{ font-weight:900; }
/* ボタン（PCは横並び、SPは1列） */
.fmc-hero__btns{
display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100%; margin-top:8px;
}
.fmc-btn{
display:flex; align-items:center; justify-content:center;
font-weight:800; font-size:16px; text-decoration:none;
border-radius:10px; padding:16px 0;
transition:filter .2s ease, transform .08s ease;
box-shadow:0 6px 14px rgba(0,0,0,.08); width:100%;
}
.fmc-btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.fmc-btn--red{ background:var(--accent-red); color:#fff; }
.fmc-btn--green{ background:#fff; color:#23b26f; border:2px solid #23b26f; }
@media (max-width:900px){
.fmc-hero__title{ font-size:22px; margin-bottom:12px; }
.fmc-hero__list{ font-size:16px; margin-bottom:10px; }
.fmc-hero__desc{ font-size:15px; margin-bottom:16px; }
.fmc-hero__btns{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; gap:10px; }
.fmc-btn{ padding:14px 0; }
}
</style>
<!-- 左：画像 -->
<div class="fmc-hero__img">
<img src="画像URL" alt="AIイメージ">
</div>
<!-- 右：テキスト -->
<div class="fmc-hero__content">
<div class="fmc-hero__title">
<span class="box">AI副業</span>で変わる<span class="blue">月3万円稼ぐ</span>なら<br>
NOMA＋
</div>
<div class="fmc-hero__list">
<div><svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path d="M5 12l5 5L20 7"/></svg>無料のメルマガ</div>
<div><svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path d="M5 12l5 5L20 7"/></svg>AIツールも使える</div>
<div><svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path d="M5 12l5 5L20 7"/></svg>AIの知識が加速する</div>
</div>
<div class="fmc-hero__desc">
<strong>NOMA＋</strong>だから実現できる<strong>サポート。</strong><br>
弊社があなたをサポートします。
</div>
<div class="fmc-hero__btns">
<a href="訴求URL" class="fmc-btn fmc-btn--red">メルマガに登録</a>
<a href="訴求URL" class="fmc-btn fmc-btn--green">LINEで聞く</a>
</div>
</div>
</section>14. 高級感のあるクリックしやすいLPボタン
無料のAIライティングツール
SEO対策、
AIライティングツールで解決。
AIライティングツールで解決。
構成／執筆／編集まで。
NOMA＋ライティングツールで実現できます。
NOMA＋ライティングツールで実現できます。
商用OKの完全オリジナル
ディスクリプションまで網羅
使い放題のツールが無料
高級感も出しながらしっかり訴求するLPボタン。
伝えたいことをしっかり伝え、何ができるのかの補足も加える、そんなデザインに仕上げました。ぜひ使ってみてください。
以下のコードをコピーしてご利用ください。
コードを表示
<section class="samurai-cta" role="region" aria-label="AIライティングツール">
<style>
.samurai-cta{
--ink:#fff; --gold:#c99700; --gold-deep:#a97b00;
--radius:16px; --max:1100px;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
color:var(--ink);
margin:0 auto 40px; /* ← 下に40px余白を追加 */
padding:0 12px;
display:flex; justify-content:center;
}
@media (max-width:900px){
.samurai-cta{margin:0 auto 32px; padding:0 8px;} /* スマホは32pxに調整 */
}
.samurai-cta__wrap{
position:relative; width:100%; max-width:var(--max);
border-radius:var(--radius); overflow:hidden;
background:transparent; box-shadow:none;
display:flex; justify-content:center;
}
.samurai-cta__inner{
position:relative; z-index:1;
display:flex; flex-direction:column; align-items:center;
gap:16px;
background:rgba(0,0,0,.9);
border-radius:var(--radius);
padding:24px 20px;
text-align:center;
width:100%;
box-sizing:border-box;
}
@media (max-width:900px){
.samurai-cta__inner{padding:20px 14px; gap:14px;}
}
.samurai-cta__eyebrow{
display:inline-flex; align-items:center; justify-content:center;
gap:.6rem; font-weight:700; letter-spacing:.1em;
font-size:14px; opacity:.95; margin:0 auto;
}
.samurai-cta__eyebrow::before,
.samurai-cta__eyebrow::after{
content:""; display:inline-block; height:2px; width:26px;
background:rgba(255,255,255,.35);
}
.samurai-cta__title{
font-weight:900; line-height:1.3;
font-size:clamp(26px,5.8vw,46px);
text-shadow:0 2px 0 rgba(0,0,0,.2);
margin:0;
}
.samurai-cta__lead{
color:#e7e7e7; line-height:1.75;
font-size:clamp(14px,1.9vw,17px);
margin:0;
}
.samurai-cta__points{
display:flex; flex-wrap:wrap; justify-content:center;
gap:10px 12px; margin:8px 0 12px;
}
.samurai-cta__pill{
border:1px solid rgba(255,255,255,.35);
border-radius:999px; padding:8px 12px;
font-size:13px; opacity:.95; backdrop-filter:blur(2px);
}
.samurai-cta__btns{
display:flex; justify-content:center;
gap:10px; flex-wrap:wrap; margin:8px 0 0;
}
.samurai-cta__btn{
display:inline-flex; align-items:center; justify-content:center;
border-radius:999px; padding:14px 20px;
font-weight:900; letter-spacing:.06em;
text-decoration:none; line-height:1;
transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.samurai-cta__btn--primary{
background:linear-gradient(180deg,var(--gold),var(--gold-deep));
color:#1a1200; box-shadow:0 10px 24px rgba(201,151,0,.35);
}
.samurai-cta__btn--primary:hover{
transform:translateY(-2px); box-shadow:0 14px 30px rgba(201,151,0,.45);
}
.samurai-cta__btn--ghost{
border:1.5px solid rgba(255,255,255,.65);
color:#fff; background:rgba(0,0,0,.2);
}
.samurai-cta__btn--ghost:hover{
background:rgba(255,255,255,.08); transform:translateY(-2px);
}
</style>
<div class="samurai-cta__wrap">
<div class="samurai-cta__inner">
<div class="samurai-cta__eyebrow">無料のAIライティングツール</div>
<div class="samurai-cta__title">
<strong>SEO対策、</strong><br>AIライティングツールで解決。
</div>
<div class="samurai-cta__lead">
構成／執筆／編集まで。<br>
NOMA＋<strong>ライティングツール</strong>で実現できます。
</div>
<div class="samurai-cta__points">
<span class="samurai-cta__pill">商用OKの完全オリジナル</span>
<span class="samurai-cta__pill">ディスクリプションまで網羅</span>
<span class="samurai-cta__pill">使い放題のツールが無料</span>
</div>
<div class="samurai-cta__btns">
<a href="訴求リンクURL"
class="samurai-cta__btn samurai-cta__btn--primary"
aria-label="メルマガへ">
今すぐ利用する（無料）
</a>
<a href="詳細URL"
class="samurai-cta__btn samurai-cta__btn--ghost"
aria-label="詳細を見る">
詳細を見る
</a>
</div>
</div>
</div>
</section>
15. 動画訴求に使える白黒LPボタン
動画で訴求したい人におすすめのデザイン。動画先に誘導できるLPボタン。
もちろん動画以外でもOKですが、画像を5枚使うのでたくさん用意できる人はこちらを利用してみましょう。白黒でカッコよく仕上げ、下の３つはカラーで強調。ナイスなデザインで満足すること間違いなし！
以下のコードをコピーしてご利用ください。
コードを表示
<!-- ===== Noir Hero CTA / v6 (horizontal bar + centered text) ===== -->
<section class="noir-hero" aria-label="キャンペーン案内">
<style>
.noir-hero{
--ink:#fff;--bg:#0f1114;--cta:#0b0c10;--cta-hover:#15181e;
--radius:18px;--max:1100px;
--bar-height:120px; /* 白帯の太さ（PC） */
--bar-shadow:0 6px 18px rgba(0,0,0,.18), 0 -4px 12px rgba(0,0,0,.10);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
color:var(--ink);margin:28px auto 36px;max-width:var(--max);padding:0 16px;
}
.noir-hero a{color:inherit;text-decoration:none}
/* クリップ用ラッパー（角丸＋はみ出し防止） */
.noir-clip{border-radius:var(--radius);overflow:hidden!important;
box-shadow:0 18px 38px rgba(0,0,0,.24);}
.noir-card{display:block!important;position:relative;background:var(--bg);isolation:isolate;}
.noir-grid{display:grid;grid-template-columns:1fr 1fr;min-height:420px}
.noir-left,.noir-right{position:relative}
.noir-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
filter:grayscale(100%) contrast(108%);}
/* ===== 水平の白帯（全面横） ===== */
.noir-bar{position:absolute;left:0;right:0;top:50%;
height:var(--bar-height);transform:translateY(-50%);
background:#fff;z-index:2;box-shadow:var(--bar-shadow);}
/* 帯の上に文字を水平センター配置 */
.noir-wb{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
z-index:3;display:flex;align-items:center;gap:0.22em;
color:#111;font-weight:800;font-size:clamp(52px,8vw,120px);line-height:1;
filter:drop-shadow(0 1px 0 rgba(0,0,0,.12));
}
.noir-wb .plus{font-weight:500;transform:translateY(-2px)}
/* ロゴ・ドット */
.noir-logo{position:absolute;right:18px;top:16px;z-index:4;opacity:.9}
.noir-logo img{height:36px;width:auto;display:block;filter:invert(1) grayscale(1) contrast(120%)}
.noir-dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
display:flex;gap:8px;z-index:4}
.noir-dots i{width:6px;height:6px;border-radius:50%;background:#d0d0d0;opacity:.7}
.noir-dots i.active{background:#f0544f;opacity:1}
/* 下段CTA */
.noir-cta{display:flex;align-items:center;gap:16px;background:var(--cta);
padding:18px 16px;border-radius:14px;margin:16px 4px 0;transition:background .2s ease}
.noir-cta:hover{background:var(--cta-hover)}
.noir-tag{font-weight:700;color:#ddd;white-space:nowrap}
.noir-goto{font-size:clamp(18px,2.5vw,26px);font-weight:800;letter-spacing:.06em}
.noir-arrow{margin-left:6px;display:inline-block;transform:translateY(1px)}
.noir-thumbs{margin-left:auto;display:flex;gap:8px}
.noir-thumbs img{width:72px;height:40px;object-fit:cover;border-radius:8px;opacity:.9}
@media (max-width:900px){
.noir-grid{grid-template-columns:1fr;min-height:420px}
.noir-right{order:2;height:260px}
.noir-left{order:1;height:260px}
.noir-hero{ --bar-height:90px; } /* スマホは帯を少し細く */
.noir-cta{flex-wrap:wrap}
.noir-thumbs{width:100%;justify-content:flex-start}
.noir-wb{font-size:clamp(46px,7.2vw,100px)}
}
</style>
<div class="noir-clip">
<a class="noir-card" href="訴求URL" aria-label="キャンペーン詳細を見る">
<div class="noir-grid">
<div class="noir-left">
<img class="noir-img" src="画像URL" alt="モデルの横顔">
</div>
<div class="noir-right">
<img class="noir-img" src="画像URL" alt="プロダクト写真">
</div>
<div class="noir-logo">
<img src="https://dummyimage.com/120x36/000/fff&text=NOMA＋" alt="ブランドロゴ">
</div>
<!-- 水平白帯と中央テキスト -->
<div class="noir-bar" aria-hidden="true"></div>
<div class="noir-wb" aria-hidden="true">
<span>W</span><span class="plus">＋</span><span>B</span>
</div>
<div class="noir-dots" aria-hidden="true"><i></i><i class="active"></i></div>
</div>
</a>
</div>
<!-- 下段：動画CTA -->
<a class="noir-cta" href="動画URL" aria-label="動画を見る">
<span class="noir-tag">#ブラックフライデー</span>
<span class="noir-goto">動画はコチラ</span><span class="noir-arrow">›</span>
<span class="noir-thumbs" aria-hidden="true">
<img src="画像URL" alt="説明">
<img src="画像URL" alt="説明">
<img src="画像URL" alt="説明">
</span>
</a>
</section>
まとめ｜お気に入りのLPボタンを使ってブログでの収益化を目指そう
いかがでしたでしょうか。実際に利用できるLPボタン15選を紹介しました。ブログをもっとデザインしたい！訴求に繋げたいという人はぜひこの記事で紹介したLPボタンを活用してみてください。
ついでに今回紹介しているAIライティングツールも無料なのでこの機会にGETしてもらえると嬉しいです。
無料のAIライティングツール
SEO対策、
AIライティングツールで解決。
AIライティングツールで解決。
構成／執筆／編集まで。
NOMA＋ライティングツールで実現できます。
NOMA＋ライティングツールで実現できます。
商用OKの完全オリジナル
ディスクリプションまで網羅
使い放題のツールが無料
コメント