CTA · CTAセクション

パステル×マスコットの「かわいい」CTAセクション

日本発の「kawaii」美学を再構築した、パステル配色とマスコットキャラのCTAセクション。Z世代の女性向け・コスメ・サンリオ系プロダクトに刺さる、ふわふわで愛され系の遊び心ある設計。

保存した一覧を見る 0 →

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

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

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

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

プレビュー

AIへの指示文

Z世代女性向け美容ブランドの、可愛い系CTAセクションを作ってください。

要件:
- 配色: ベース #fff5f7（ベビーピンク）+ 主色 ピンク #ff8fbb / ミント #b4f0d8 / ラベンダー #d6c5fa を使う。差し色に金 #ffe09a。
- 中央に大型のCSS-onlyマスコットキャラ（くま or うさぎ風、丸い頭+丸い耳+点目+赤いほっぺ）。SVGまたはCSSの円・楕円組合せ。
- 背景に手書き風の星、ハート、お花を散りばめる（アニメGIF風には浮遊する小さなアニメ）。
- 大型見出しはふわふわ系の丸ゴ書体（Comfortaa / Quicksand / Mochiy Pop One）。clamp 2.4-4rem。
- 見出し内に絵文字（💖 ✨ 🎀）を文中に1-2個。
- 大型ピル型CTAボタン: ピンク背景 + 太い白ボーダー + 上下に「ぴょんぴょん」アニメ。
- サブCTA: ふきだし型（吹き出し SVG 形状）「気軽にどうぞ〜」。
- 装飾の浮遊アニメ（CSS keyframes）でほのぼの感を出す。prefers-reduced-motion で停止。
- フォント: 見出し丸ゴ系、本文 Inter + Noto Sans JP。
- フルレスポンシブ。

バリエーション

ぱりっと白基調版

ベース色を白に変え、装飾を 1 段抑えて「上品なかわいい」へ。
コスメLPやJ-Beauty向けに最適。

ピクセルキャラ版

マスコットを8bitドット絵風（image-rendering: pixelated）に変更し、
レトロゲーム×かわいいのハイブリッドに。

このプレビューのコード

HTML・CSS・JavaScriptの1ファイルです。外部依存・広告・解析コードはありません。架空のサービスや企画への案内です。日付・人数・価格・特典・利用条件は表示例です。リンクは構成の説明へ移動し、申込み・予約・決済・発券・招待は行いません。演出の停止とOSの動き低減に対応します。

CC0 · 改変・商用利用自由 · revision 32a9faf447c8

コードを表示

<!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 {
        --baby-pink: #fff5f7;
        --pink: #ff8fbb;
        --pink-deep: #e35a91;
        --mint: #b4f0d8;
        --lav: #d6c5fa;
        --gold: #ffe09a;
        --ink: #4a2638;
        --muted: #8e6878;
      }
      * { box-sizing: border-box; }
      html, body { margin: 0; padding: 0; }
      body {
        font-family: "Mochiy Pop One", "Comfortaa", "Quicksand", "Hiragino Maru Gothic ProN",
          "Noto Sans JP", sans-serif;
        background: linear-gradient(180deg, var(--baby-pink) 0%, #ffeaf2 100%);
        color: var(--ink);
        line-height: 1.85;
        -webkit-font-smoothing: antialiased;
        position: relative;
        overflow-x: hidden;
        min-height: 100dvh;
      }

      /* Floating decorations */
      .float {
        position: absolute;
        pointer-events: none;
        z-index: 1;
        animation: float 6s ease-in-out infinite;
      }
      .float-2 { animation-duration: 7s; animation-delay: -1s; }
      .float-3 { animation-duration: 8s; animation-delay: -2s; }
      .float-4 { animation-duration: 5s; animation-delay: -0.5s; }
      .float-5 { animation-duration: 9s; animation-delay: -3s; }
      @keyframes float {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-12px) rotate(8deg); }
      }
      .heart-1 { top: 10%; left: 8%; font-size: 2.2rem; color: var(--pink); }
      .heart-2 { top: 18%; right: 10%; font-size: 1.6rem; color: var(--pink-deep); }
      .star-1 { top: 30%; left: 14%; font-size: 1.8rem; color: var(--gold); }
      .star-2 { bottom: 22%; right: 12%; font-size: 2rem; color: var(--gold); }
      .star-3 { top: 50%; left: 4%; font-size: 1.2rem; color: var(--lav); }
      .flower-1 {
        bottom: 14%; left: 8%;
        width: 60px; height: 60px;
      }
      .flower-2 {
        top: 40%; right: 6%;
        width: 50px; height: 50px;
      }
      .cloud-1 {
        top: 8%; left: 30%;
        width: 100px; height: 50px;
      }
      .cloud-2 {
        bottom: 18%; right: 28%;
        width: 80px; height: 40px;
      }

      @media (max-width: 720px) {
        .heart-1, .heart-2, .star-1, .star-3, .flower-1, .flower-2 { display: none; }
      }

      .frame {
        position: relative;
        z-index: 5;
        max-width: 880px;
        margin: 0 auto;
        padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 4vw, 2.5rem);
        text-align: center;
      }

      .ribbon {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        background: white;
        color: var(--pink-deep);
        padding: 0.5rem 1.25rem;
        border-radius: 999px;
        font-family: "Comfortaa", "Hiragino Maru Gothic ProN", sans-serif;
        font-weight: 700;
        font-size: 0.85rem;
        letter-spacing: 0.04em;
        margin-bottom: 1.5rem;
        box-shadow: 0 6px 20px -8px rgba(255, 143, 187, 0.5);
        border: 2px solid var(--pink);
      }

      /* Mascot — pure CSS character (round bear-like) */
      .mascot {
        position: relative;
        width: 180px;
        height: 180px;
        margin: 0 auto 1.5rem;
        animation: bob 3s ease-in-out infinite;
      }
      @keyframes bob {
        0%, 100% { transform: translateY(0) rotate(-3deg); }
        50% { transform: translateY(-8px) rotate(3deg); }
      }
      .mascot::before, .mascot::after {
        /* ears */
        content: "";
        position: absolute;
        top: 12px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--pink);
        border: 4px solid white;
        box-shadow: 0 4px 0 rgba(227, 90, 145, 0.18);
      }
      .mascot::before { left: 12px; transform: rotate(-12deg); }
      .mascot::after { right: 12px; transform: rotate(12deg); }
      .mascot .head {
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        width: 144px;
        height: 144px;
        border-radius: 50%;
        background: var(--pink);
        border: 4px solid white;
        box-shadow: 0 8px 0 rgba(227, 90, 145, 0.18);
      }
      .mascot .eye {
        position: absolute;
        width: 12px;
        height: 16px;
        border-radius: 50%;
        background: var(--ink);
        top: 92px;
      }
      .mascot .eye.l { left: calc(50% - 28px); }
      .mascot .eye.r { right: calc(50% - 28px); }
      .mascot .cheek {
        position: absolute;
        width: 22px;
        height: 14px;
        border-radius: 50%;
        background: var(--pink-deep);
        opacity: 0.45;
        top: 116px;
      }
      .mascot .cheek.l { left: calc(50% - 50px); }
      .mascot .cheek.r { right: calc(50% - 50px); }
      .mascot .mouth {
        position: absolute;
        width: 18px;
        height: 10px;
        border: 3px solid var(--ink);
        border-top: 0;
        border-radius: 0 0 18px 18px;
        top: 122px;
        left: 50%;
        transform: translateX(-50%);
      }

      h2 {
        margin: 0 0 1rem;
        font-family: "Mochiy Pop One", "Comfortaa", "Hiragino Maru Gothic ProN",
          sans-serif;
        font-size: clamp(2rem, 5vw, 3.6rem);
        line-height: 1.35;
        letter-spacing: 0;
        font-weight: 800;
        color: var(--ink);
      }
      h2 :lang(ja) { letter-spacing: 0; line-height: 1.4; }
      h2 .em {
        background: linear-gradient(180deg, transparent 50%, var(--gold) 50%, var(--gold) 90%, transparent 90%);
        padding: 0 0.15em;
      }
      h2 .heart-em {
        display: inline-block;
        color: var(--pink-deep);
        font-size: 0.85em;
        animation: heart-beat 1.5s ease-in-out infinite;
      }
      @keyframes heart-beat {
        0%, 100% { transform: scale(1); }
        20% { transform: scale(1.2); }
        40% { transform: scale(1); }
      }

      .lede {
        margin: 0 auto 2.5rem;
        font-size: 1.1rem;
        line-height: 2;
        color: var(--muted);
        max-width: 36ch;
      }

      .ctas {
        display: inline-flex;
        gap: 1.25rem;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
      }
      .btn-cute {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 1.05rem 2.25rem;
        background: var(--pink);
        color: white;
        font-family: inherit;
        font-size: 1.05rem;
        font-weight: 800;
        text-decoration: none;
        border: 4px solid white;
        border-radius: 999px;
        box-shadow:
          0 6px 0 var(--pink-deep),
          0 12px 24px -6px rgba(227, 90, 145, 0.45);
        cursor: pointer;
        transition: transform 0.15s, box-shadow 0.15s;
        animation: hop 2.4s ease-in-out infinite;
      }
      @keyframes hop {
        0%, 90%, 100% { transform: translateY(0); }
        45% { transform: translateY(-4px); }
      }
      .btn-cute:hover {
        transform: translateY(-3px);
        box-shadow:
          0 10px 0 var(--pink-deep),
          0 18px 28px -8px rgba(227, 90, 145, 0.55);
      }
      .btn-cute:active {
        transform: translateY(3px);
        box-shadow: 0 2px 0 var(--pink-deep);
      }

      /* Speech bubble for secondary CTA */
      .bubble {
        position: relative;
        display: inline-flex;
        align-items: center;
        padding: 0.75rem 1.4rem;
        background: white;
        color: var(--ink);
        font-family: "Comfortaa", inherit;
        font-weight: 700;
        font-size: 0.95rem;
        text-decoration: none;
        border: 3px solid var(--lav);
        border-radius: 999px;
        cursor: pointer;
        transition: transform 0.15s;
      }
      .bubble:hover { transform: translateY(-2px); }
      .bubble::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 35px;
        width: 0; height: 0;
        border: 8px solid transparent;
        border-top: 12px solid var(--lav);
      }
      .bubble::before {
        content: "";
        position: absolute;
        bottom: -6px;
        left: 38px;
        width: 0; height: 0;
        border: 6px solid transparent;
        border-top: 9px solid white;
        z-index: 2;
      }

      .footnote {
        margin-top: 2.5rem;
        font-family: "Comfortaa", inherit;
        font-size: 0.82rem;
        color: var(--muted);
      }

      @media (prefers-reduced-motion: reduce) {
        .float, .mascot, .btn-cute, .heart-em { animation: none; }
      }
    [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[data-demo-paused] *,html[data-demo-paused] *::before,html[data-demo-paused] *::after{animation-play-state:paused!important}
html[data-demo-paused] .ticker p{animation:none!important;padding-left:8px;white-space:normal}
.ribbon{color:#b62c68}
.btn-cute{color:#4d1732}
</style>
  <noscript><style>*,*::before,*::after{animation:none!important}.ticker p{padding-left:8px;white-space:normal}</style></noscript>
</head>
  <body>
    <span class="float heart-1" aria-hidden="true">♡</span>
    <span class="float float-2 heart-2" aria-hidden="true">♥</span>
    <span class="float float-3 star-1" aria-hidden="true">✦</span>
    <span class="float float-4 star-2" aria-hidden="true">✧</span>
    <span class="float float-5 star-3" aria-hidden="true">✦</span>
    <svg class="float flower-1" viewBox="0 0 60 60" aria-hidden="true">
      <g fill="#d6c5fa" stroke="#a585e8" stroke-width="2">
        <circle cx="30" cy="14" r="9"/>
        <circle cx="46" cy="30" r="9"/>
        <circle cx="30" cy="46" r="9"/>
        <circle cx="14" cy="30" r="9"/>
      </g>
      <circle cx="30" cy="30" r="7" fill="#ffe09a" stroke="#e8b850" stroke-width="2"/>
    </svg>
    <svg class="float float-2 flower-2" viewBox="0 0 50 50" aria-hidden="true">
      <g fill="#b4f0d8" stroke="#5fc183" stroke-width="2">
        <circle cx="25" cy="12" r="8"/>
        <circle cx="38" cy="25" r="8"/>
        <circle cx="25" cy="38" r="8"/>
        <circle cx="12" cy="25" r="8"/>
      </g>
      <circle cx="25" cy="25" r="6" fill="#ffe09a" stroke="#e8b850" stroke-width="2"/>
    </svg>
    <svg class="float float-3 cloud-1" viewBox="0 0 100 50" aria-hidden="true">
      <path d="M 20 35 Q 5 35, 5 22 Q 5 12, 18 12 Q 22 2, 38 6 Q 52 0, 60 12 Q 78 8, 82 22 Q 95 24, 95 35 Z" fill="white" stroke="#ffd0e0" stroke-width="2"/>
    </svg>
    <svg class="float float-4 cloud-2" viewBox="0 0 80 40" aria-hidden="true">
      <path d="M 16 28 Q 4 28, 4 18 Q 4 10, 14 10 Q 17 2, 30 5 Q 42 1, 48 10 Q 62 8, 65 18 Q 76 20, 76 28 Z" fill="white" stroke="#d6c5fa" stroke-width="2"/>
    </svg>

    <section class="frame">
      <span class="ribbon">🎀 春の新作キャンペーン</span>

      <div class="mascot" aria-hidden="true">
        <div class="head"></div>
        <span class="eye l"></span>
        <span class="eye r"></span>
        <span class="cheek l"></span>
        <span class="cheek r"></span>
        <span class="mouth"></span>
      </div>

      <h2>
        <span class="em">あたらしい</span><br/>
        わたしを、はじめよう。<span class="heart-em">💖</span>
      </h2>
      <p class="lede">
        今だけ初回 50% OFF。お肌にやさしいパステル系コスメシリーズ、まずは試してみませんか？
      </p>

      <div class="ctas">
        <a class="btn-cute" href="#demo-link-0">ぴょん♡ 始めてみる →</a>
        <a class="bubble" href="#demo-link-1">気軽にどうぞ〜</a>
      </div>

      <p class="footnote">⋆ 送料無料 · 30日間返品OK · 全国どこでも翌日お届け ⋆</p>
    </section>
  <aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空のサービスや企画への案内です。日付・人数・価格・特典・利用条件は表示例です。リンクは構成の説明へ移動し、申込み・予約・決済・発券・招待は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<div class="demo-motion">
<button type="button" data-demo-motion data-js-control disabled aria-pressed="false">演出を止める</button>
</div>
<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 motion=matchMedia('(prefers-reduced-motion: reduce)'),toggle=document.querySelector('[data-demo-motion]');let paused=false;function syncMotion(){const stop=paused||motion.matches;document.documentElement.toggleAttribute('data-demo-paused',stop);toggle.setAttribute('aria-pressed',String(stop));toggle.disabled=motion.matches;toggle.textContent=motion.matches?'動きを減らす設定で停止中':stop?'演出を再開':'演出を止める'}toggle.addEventListener('click',()=>{paused=!paused;syncMotion()});motion.addEventListener('change',syncMotion);
document.querySelectorAll('[data-js-control]').forEach(el=>el.disabled=false);syncMotion();
</script>
</body>
</html>

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

概要

「kawaii」は、いまや翻訳されずに英語の辞書に載る日本語です。サンリオ、ファンシー文具、少女文化を経て磨かれてきたこの美学は、単なる「可愛い見た目」ではなく、見る人の警戒心を解く一連の視覚的記号の体系です。このCTAは、その記号体系をコンバージョン設計に応用します。

警戒を解いてから誘う

広告やCTAに対して、現代の訪問者は強い防御姿勢を持っています。売りつけられると察知した瞬間に視線は逃げます。パステルの配色、丸い輪郭のマスコット、点目と赤いほっぺ——これらは進化的に「脅威ではない」と認識される形であり、見る人の心理的ガードを無意識に下げます。無防備になった状態で初めて「気軽にどうぞ〜」という柔らかいCTA文言が届く。誘う前に解除する、という二段構えがこの設計の本質です。

マスコットというブランド資産

中央に置くマスコットキャラは、一度記憶されると強力なブランド資産になります。人はキャラクターに愛着を持つと、それを擬人化し、SNSで共有し、再訪の理由にする。企業ロゴが「認識」されるだけなのに対し、可愛いマスコットは「好かれる」——この感情の差が、コミュニティ形成の起点になります。

崩れる形ロゴで覚えてもらう

企業ロゴは認識されるだけで止まります。正確に思い出してもらえても、そこから先の行動——共有したい、また来たい——には繋がりません。

効く形マスコットで好かれる

人はキャラクターに愛着を持つと、擬人化し、SNSで共有し、再訪の理由にします。認識と好意の差が、そのままコミュニティ形成の起点になります。

仕上げの判断軸

刺さるのはコスメ、J-Beauty、Z世代女性向けアプリ、子ども向けプロダクト。コーポレートやB2B SaaSには不向きですが、ゲーム・サブカル文脈なら男性ターゲットにも有効です。

浮遊する星やハートの装飾アニメは prefers-reduced-motion で必ず停止可能に。装飾はCTAセクション内に閉じ込め、広告領域とは干渉させないこと。「上品なかわいい」に寄せたいなら、ベースを白にして装飾密度を一段落とします。

見本で試せる範囲

架空のサービスや企画への案内です。日付・人数・価格・特典・利用条件は表示例です。リンクは構成の説明へ移動し、申込み・予約・決済・発券・招待は行いません。演出の停止とOSの動き低減に対応します。作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。