CTA · CTAセクション

暖色テラコッタの大判CTAセクション

暖色（テラコッタ・赤・砂色）でまとめた、人肌の温度を持つ大判CTAセクション。飲食・ライフスタイル・小売など、信頼より親しみで選ばれるブランドのコンバージョン直前に効く設計。

保存した一覧を見る 0 →

このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。

印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。

Vibehaus · デザイン資料
https://vibe.itlibra.com/design/warm-cta/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由

PUBLISHED — 2026年4月26日 UPDATED — 2026年10月18日 CATEGORY — CTA LICENSE — CC0 1.0

プレビュー

AIへの指示文

ライフスタイル系ブランドのLP末尾に置く、暖色の大判CTAセクションを作ってください。

要件:
- 配色: テラコッタ #c44e2a を主、生成 #f4ead7 を背景、墨黒 #2a1810 をテキスト。アクセントに金 #e3a83c を1点。
- 全幅セクション、上下に十分な余白。
- 中央にやや右寄せの大型見出し（clamp 2.5-4.5rem）+ 短いリード文。
- プライマリCTA: 黒ピル + 白文字 + 矢印。セカンダリCTA: アンダーラインのテキストリンク。
- 左側に手描き風の小さなアイコン（コーヒーカップ・葉っぱ等を SVG で）。
- 右側に小さな星・ドット・楕円などの装飾を散らす。
- 下部に小さく「メールニュースレター登録で今だけ ¥500 OFF」のオファーバー。
- フォントは見出し丸ゴシック寄り、本文は Inter + Noto Sans JP。
- フルレスポンシブ。スマホでは装飾を控えて要点だけ。

バリエーション

ニュースレター登録版

セカンダリCTAの代わりにメール入力フォームを直結させる。
「登録する →」ボタンと「いつでも解除可能」の補足を併設。

ダーク版

背景を黒 #1a0e08 に、テラコッタは発色の良い #ff6a3d に置換。
装飾要素は金とクリーム色で輝度を保つ。

このプレビューのコード

HTML・CSS・JavaScriptの1ファイルです。外部依存・広告・解析コードはありません。架空のコーヒーサービスです。メール形式を確認して入力を消去します。登録・クーポン発行・配信・注文・決済・外部送信・保存は行いません。リンクは説明へ移動します。

CC0 · 改変・商用利用自由 · revision d3ab5a7a4275

コードを表示

<!doctype html>
<!-- Vibehaus · CC0 · 架空の表示・操作見本。外部素材・送信・永続保存なし。 -->
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex" />
    <title>暖色テラコッタの大判CTAセクション — Vibehaus プレビュー</title>
    <style>
      :root {
        --bg: #f4ead7;
        --bg-deep: #ead8b3;
        --ink: #2a1810;
        --muted: #6e4d3a;
        --terra: #c44e2a;
        --terra-deep: #8e3014;
        --gold: #e3a83c;
      }
      * { box-sizing: border-box; }
      html, body { margin: 0; padding: 0; }
      body {
        font-family: "Inter", "Noto Sans JP", "Hiragino Maru Gothic ProN",
          "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
        background: var(--bg);
        color: var(--ink);
        line-height: 1.85;
        -webkit-font-smoothing: antialiased;
        min-height: 100dvh;
        position: relative;
        overflow-x: hidden;
      }

      /* Decorative blobs at corners */
      .blob {
        position: absolute;
        pointer-events: none;
        z-index: 0;
      }
      .blob.tl {
        top: -80px; left: -80px;
        width: 320px; height: 320px;
        background: radial-gradient(closest-side, rgba(196, 78, 42, 0.18), transparent 70%);
        filter: blur(20px);
      }
      .blob.br {
        bottom: -100px; right: -120px;
        width: 380px; height: 380px;
        background: radial-gradient(closest-side, rgba(227, 168, 60, 0.22), transparent 70%);
        filter: blur(25px);
      }

      /* Ornaments scattered around — pure SVG inline */
      .deco {
        position: absolute;
        z-index: 1;
        opacity: 0.85;
      }
      .deco svg { display: block; }
      .deco.star { top: 12%; right: 9%; width: 38px; }
      .deco.leaf { top: 22%; left: 7%; width: 56px; transform: rotate(-12deg); }
      .deco.spiral { bottom: 20%; left: 12%; width: 44px; }
      .deco.dots { bottom: 14%; right: 8%; width: 100px; }
      @media (max-width: 760px) {
        .deco.star, .deco.leaf, .deco.spiral, .deco.dots { display: none; }
      }

      .wrap {
        position: relative;
        z-index: 2;
        max-width: 1100px;
        margin: 0 auto;
        padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 4vw, 2.5rem);
        text-align: center;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.4rem 0.9rem;
        background: rgba(42, 24, 16, 0.06);
        border: 1px solid rgba(42, 24, 16, 0.18);
        border-radius: 999px;
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--terra-deep);
        font-weight: 600;
        margin-bottom: 2rem;
      }
      .eyebrow::before {
        content: "✦";
        color: var(--gold);
        font-size: 0.9rem;
      }

      h2 {
        margin: 0 auto 1.5rem;
        max-width: 16ch;
        font-size: clamp(2.2rem, 5vw, 4rem);
        line-height: 1.35;
        letter-spacing: 0;
        font-weight: 800;
      }
      h2 :lang(ja) { letter-spacing: 0; line-height: 1.4; }
      h2 .em {
        background: linear-gradient(180deg, transparent 60%, var(--gold) 60%, var(--gold) 92%, transparent 92%);
        padding: 0 0.15em;
      }

      .lede {
        max-width: 50ch;
        margin: 0 auto 2.25rem;
        font-size: 1.05rem;
        line-height: 1.85;
        color: var(--muted);
      }

      .ctas {
        display: inline-flex;
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 1rem 1.85rem;
        border-radius: 999px;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        cursor: pointer;
        font-family: inherit;
        border: 0;
      }
      .btn.primary {
        background: var(--ink);
        color: var(--bg);
        box-shadow: 0 6px 20px -8px rgba(42, 24, 16, 0.5);
      }
      .btn.primary:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -10px rgba(42, 24, 16, 0.6); }
      .btn.primary .arr { transition: transform 0.2s; }
      .btn.primary:hover .arr { transform: translateX(4px); }
      .btn.ghost {
        background: transparent;
        color: var(--ink);
        text-decoration: underline;
        text-decoration-color: var(--terra);
        text-decoration-thickness: 2px;
        text-underline-offset: 6px;
        padding: 0.85rem 0.5rem;
        font-weight: 600;
      }
      .btn.ghost:hover { color: var(--terra); }

      .offer {
        margin-top: clamp(2.5rem, 5vw, 3.5rem);
        padding: 1rem 1.5rem;
        background: var(--ink);
        color: var(--bg);
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 0.85rem;
        font-size: 0.92rem;
        max-width: 100%;
        box-shadow: 0 12px 32px -16px rgba(42, 24, 16, 0.4);
      }
      .offer strong { color: var(--gold); font-weight: 700; }
      .offer input {
        flex: 1;
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(244, 234, 215, 0.4);
        color: var(--bg);
        font-family: inherit;
        font-size: 0.9rem;
        padding: 0.45rem 0.5rem;
        outline: none;
        min-width: 200px;
      }
      .offer input::placeholder { color: rgba(244, 234, 215, 0.5); }
      .offer button {
        background: var(--terra);
        color: var(--bg);
        border: 0;
        padding: 0.55rem 1.1rem;
        border-radius: 999px;
        font-weight: 700;
        font-size: 0.86rem;
        font-family: inherit;
        cursor: pointer;
      }
      .offer button:hover { background: var(--gold); color: var(--ink); }
      @media (max-width: 720px) {
        .offer { flex-direction: column; gap: 0.65rem; padding: 1.2rem; border-radius: 16px; }
        .offer input { width: 100%; }
        .offer button { width: 100%; }
      }
    [hidden]{display:none!important}
a,button,input,summary{min-width:44px;min-height:44px}
a{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:default}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid currentColor;outline-offset:4px}
nav a{display:inline-flex;align-items:center;justify-content:center}
nav{flex-wrap:wrap}
header.bar{flex-wrap:wrap;gap:1rem}
input{max-width:100%}
.demo-notes{position:relative;z-index:10;box-sizing:border-box;max-width:1080px;width:calc(100% - 2rem);margin:2rem auto;padding:clamp(1rem,3vw,2rem);background:#f6f1e8;color:#211c17;border:1px solid currentColor;text-align:left;font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-size:13px;line-height:1.8;letter-spacing:0;overflow-wrap:anywhere}
.demo-notes h2{font-size:18px;line-height:1.5;margin:0 0 .75rem}
.demo-notes h3{font-size:15px;line-height:1.5;margin:0 0 .4rem}
.demo-notes p{font:inherit;color:inherit;opacity:1;margin:0 0 1rem;max-width:none;letter-spacing:0}
.demo-notes section{margin-top:1.25rem;scroll-margin-top:1rem}
.demo-notes button{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;padding:.4rem .75rem}
.demo-notes a{color:inherit}
.demo-notes .demo-motion{margin-bottom:1rem}
.demo-notes section:focus{outline:3px solid currentColor;outline-offset:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
}
html{overflow-x:clip}
body{overflow-x:clip}
.offer{flex-wrap:wrap}
.offer input{min-width:0;flex:1 1 200px}
.offer button{flex:0 1 auto}
.demo-result{max-width:760px;margin:0 auto;padding:1rem 1.5rem;color:var(--ink);font-size:13px;line-height:1.8}
.offer button{background:#a53c1d}
.demo-decoration{position:absolute;inset:0;overflow:clip;pointer-events:none}
@media(max-width:720px){.offer input{flex:none;height:44px}.offer button{flex:none}}
</style>
  </head>
  <body>
<div class="demo-decoration" aria-hidden="true"><div class="blob tl" aria-hidden="true"></div><div class="blob br" aria-hidden="true"></div></div>



    <div class="deco star" aria-hidden="true">
      <svg viewBox="0 0 38 38" fill="none" stroke="#c44e2a" stroke-width="1.4" stroke-linecap="round">
        <path d="M19 4 L21 16 L33 19 L21 22 L19 34 L17 22 L5 19 L17 16 Z" fill="#e3a83c" stroke="#c44e2a"/>
      </svg>
    </div>
    <div class="deco leaf" aria-hidden="true">
      <svg viewBox="0 0 56 56" fill="none" stroke="#8e3014" stroke-width="1.6" stroke-linecap="round">
        <path d="M8 48 C 12 28 26 14 50 8 C 46 28 32 42 14 50" />
        <path d="M14 48 L 26 36 M 18 44 L 36 28 M 24 40 L 44 22"/>
      </svg>
    </div>
    <div class="deco spiral" aria-hidden="true">
      <svg viewBox="0 0 44 44" fill="none" stroke="#c44e2a" stroke-width="1.4" stroke-linecap="round">
        <path d="M22 22 m-2,0 a2 2 0 1 1 4 0 a4 4 0 1 1 -8 0 a6 6 0 1 1 12 0 a8 8 0 1 1 -16 0 a10 10 0 1 1 20 0"/>
      </svg>
    </div>
    <div class="deco dots" aria-hidden="true">
      <svg viewBox="0 0 100 60" fill="#8e3014">
        <circle cx="6" cy="6" r="3"/>
        <circle cx="22" cy="14" r="2"/>
        <circle cx="42" cy="6" r="2.5"/>
        <circle cx="62" cy="20" r="2"/>
        <circle cx="84" cy="10" r="3"/>
        <circle cx="14" cy="36" r="2"/>
        <circle cx="38" cy="46" r="3"/>
        <circle cx="60" cy="40" r="2"/>
        <circle cx="80" cy="48" r="2.5"/>
        <circle cx="94" cy="30" r="2"/>
      </svg>
    </div>

    <div class="wrap">
      <span class="eyebrow">Limited — Spring 2026</span>
      <h2>毎日のコーヒーを、<br/><span class="em">少し贅沢に。</span></h2>
      <p class="lede">
        豆の選定から焙煎までを職人が一杯ずつ。あなたの暮らしのリズムに合わせて、月 1 回お届けします。
      </p>
      <div class="ctas">
        <a class="btn primary" href="#demo-link-0">サブスクをはじめる<span class="arr">→</span></a>
        <a class="btn ghost" href="#demo-link-1">まずは試飲セットを見る</a>
      </div>

      <form class="offer" method="dialog" data-demo-email>
        <span><strong>¥500 OFF</strong> ニュースレター登録で今だけ。</span>
        <input id="demo-email" required autocomplete="off" type="email" placeholder="メールアドレス" aria-label="メールアドレス" />
        <button type="button" data-email-confirm data-js-control disabled>登録を確認（見本）</button>
      </form><p class="demo-result" role="status" data-email-result hidden></p>
    </div>
  <aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空のサービスや企画への案内です。日付・人数・価格・特典・利用条件は表示例です。リンクは構成の説明へ移動し、申込み・予約・決済・発券・招待は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<section id="demo-link-0" tabindex="-1">
<h3>サブスクをはじめる →の見本</h3>
<p>主ボタンから次の案内へ進める配置の例です。ここにある料金・特典・開催条件は架空で、申込み・契約・購入・参加枠の確保は行いません。</p>
</section>
<section id="demo-link-1" tabindex="-1">
<h3>まずは試飲セットを見るの見本</h3>
<p>主ボタンから次の案内へ進める配置の例です。ここにある料金・特典・開催条件は架空で、申込み・契約・購入・参加枠の確保は行いません。</p>
</section>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside><script>
const form=document.querySelector('[data-demo-email]'),email=document.querySelector('#demo-email'),result=document.querySelector('[data-email-result]');let composing=false;function confirmEmail(){if(composing||!email.reportValidity())return;email.value='';result.hidden=false;result.textContent='入力形式を確認し、入力を消去しました。登録・クーポン発行・メール配信・送信・保存は行っていません。'}form.addEventListener('submit',event=>event.preventDefault());form.addEventListener('compositionstart',()=>composing=true);form.addEventListener('compositionend',()=>composing=false);email.addEventListener('keydown',event=>{if(event.key==='Enter'&&!event.isComposing&&!composing){event.preventDefault();confirmEmail()}});document.querySelector('[data-email-confirm]').addEventListener('click',confirmEmail);email.addEventListener('input',()=>{result.hidden=true;result.textContent='' });
document.querySelectorAll('[data-js-control]').forEach(el=>el.disabled=false);
</script>
</body>
</html>

2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。

概要

CTAの定石は「鋭さ」です。コントラストの強いボタン、急かす言葉、限定の煽り。しかし鋭いCTAばかりに晒され続けた読者は、その手口に慣れ、警戒するようになりました。暖色CTAは、最後の一押しを「圧」ではなく「温度」で行う——決め顔ではなく笑顔で送り出す、というアプローチです。

なぜ「温度」が効くのか

長い記事を読み終えた読者は、すでにある程度こちらに心を開いています。そこへ畳みかけるような強いCTAをぶつけると、せっかく縮まった距離が一気に戻ってしまう。暖色——オレンジ、テラコッタ、やわらかい黄——は、人間が火や陽だまりに対して抱く安心感に結びついた色です。この色でクロージングを包むと、行動の促しが「売り込み」ではなく「やさしい後押し」として受け取られます。暖色は感情の記憶に残りやすく、ブランドの人格としても定着しやすい色域です。

崩れる形強いCTAで畳みかける

長い記事を読み終えて心を開いた読者にぶつけると、せっかく縮まった距離が一気に戻ります。慣れられた手口は、それ自体が警戒の合図です。

効く形暖色で温度に包む

オレンジやテラコッタは、火や陽だまりへの安心感に結びついた色です。促しが売り込みではなくやさしい後押しとして受け取られます。

押し付けないクロージングの作法

暖色CTAが向くのは、長尺記事の末尾や、じっくり検討してきた読者へのクロージングです。文言も様式に合わせ、「今すぐ」ではなく「気が向いたら」のトーンに寄せる。圧を抜くことはコンバージョンを諦めることではありません。警戒されないことが、結局いちばん行動に繋がります。

仕上げの判断軸

最大の落とし穴は彩度です。暖色は上げすぎると幼く安っぽくなるので、トーンを一段抑えること。金色のアクセントは画面に1点だけに留めます。

太字＋暖色の組み合わせは文字が滲みやすいため、-webkit-font-smoothing: antialiased を必ず指定すること。鋭いCTAが似合うシーン（緊急性のあるセール等）には、この温度感は逆効果になります。

見本で試せる範囲

架空のコーヒーサービスです。メール形式を確認して入力を消去します。登録・クーポン発行・配信・注文・決済・外部送信・保存は行いません。リンクは説明へ移動します。作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。