CTA · CTAセクション

御朱印帳・スタンプラリー風のCTA

御朱印帳とスタンプラリーを再構築したCTAセクション。朱印スタンプ・残り札所・巡礼ゲージで「あと少しでコンプリート」の達成欲求を喚起する、日本独自文化を武器にした尖った設計。

保存した一覧を見る 0 →

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

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

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

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

プレビュー

AIへの指示文

オンボーディング完了率を上げるためのCTAセクションを、御朱印帳・スタンプラリーのフォーマットで作ってください。

要件:
- 配色: 和紙生成 #f3ead6 + 焼き和紙 #e8dcbe + 墨 #1a1612 + 朱赤 #c8201a + 古金 #b78b3a + 松緑 #2c4a32。
- 全画面に和紙テクスチャ（radial-gradient ドットパターン + 茶系の薄いシミ複数）を mix-blend-mode で重ねる。
- 上部ストリップ: 4px 二重線で囲った帯。御朱印帳キャンペーン（左、朱赤）/ 中央タイトル / 期間（右、モノスペース）。
- 中央見出し: 巨大明朝の「あなたの旅を、一つずつ刻もう。」両脇に縦書き（writing-mode: vertical-rl）の「第○八番札所」「令和八年春」を配置。
- 御朱印ボード:
  - 焼き和紙背景に細かい升目グリッド（repeating-linear-gradient で 28px 升）
  - 4隅近くに朱赤の小さな円（虎落笛風コーナー装飾）
  - 上部に「— 御 朱 印 帳 —」のラベル（背景でくり抜き表示）
  - 5×2 のスタンプセル
    - 押印済み: 朱・緑・金 の3色を混ぜて、それぞれ±6〜12度のランダム傾き、border-radius 12px or 50%
    - スタンプ文字は1〜2文字の大型漢字（登・録・創・共・招）
    - 次に押すマス: 朱の点線円 + パルスアニメーション
    - 未開放: グレーの点線円 + ?マーク or ★（最終マス）
- プログレスバー: <b>5</b>/10 巡礼済（朱赤強調）+ ストライプ柄（repeating-linear-gradient 45deg）の朱赤バー。
- 下部CTA: 「第六番・推薦キャンペーン」赤ボタン（border 3px ink + box-shadow 8px 8px 0 ink、hover で 4px 4px に縮む立体ブルータリスト風）。
- 装飾: 桜花絵文字 ❀ を3箇所に薄く散らす。
- フォント: 見出しは Hiragino Mincho ProN、サブテキストは Yu Gothic、番号は JetBrains Mono。
- JS不要、フルレスポンシブ（モバイルは 5×2 → 3×4）。

バリエーション

道の駅スタンプラリー版

色を緑 #2c4a32 ベース + 山吹 #ffb300 に。スタンプは都道府県の特産物アイコンに。
ボードの背景を東屋の木目（linear-gradient 茶色）に。

ゲーム実績バッジ版

色を黒地 + 紫 + シルバーに反転（暗背景）。スタンプを六角形のメタリック実績バッジに。
フォントを Cinzel（古典セリフ）に変更。

このプレビューのコード

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

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

コードを表示

<!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,nofollow">
<title>stamp-rally-cta preview</title>
<style>
  :root {
    --washi: #f3ead6;
    --washi-dark: #e8dcbe;
    --ink: #1a1612;
    --ink-soft: #4d4036;
    --vermillion: #c8201a;
    --vermillion-deep: #8a1410;
    --gold: #b78b3a;
    --pine: #2c4a32;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--washi);
    color: var(--ink);
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
    line-height: 1.7;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    background-image:
      radial-gradient(rgba(74,52,32,0.05) 1px, transparent 1px),
      radial-gradient(circle at 25% 30%, rgba(183,139,58,0.07), transparent 50%),
      radial-gradient(circle at 78% 80%, rgba(200,32,26,0.04), transparent 55%);
    background-size: 4px 4px, auto, auto;
    background-blend-mode: multiply, normal, normal;
  }
  .wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 56px);
    position: relative;
  }

  /* Top sutra strip */
  .strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 4px double var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 14px 0;
    margin-bottom: 56px;
    font-size: 11px;
    letter-spacing: 0.4em;
  }
  .strip .left {
    color: var(--vermillion);
    font-family: "Yu Gothic", "Noto Sans JP", sans-serif;
    font-weight: 800;
  }
  .strip .center {
    font-size: 13px;
    letter-spacing: 0.6em;
  }
  .strip .right {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.2em;
    color: var(--ink-soft);
  }

  /* Header */
  .head {
    text-align: center;
    margin-bottom: 64px;
    position: relative;
  }
  .head .vert-meta {
    position: absolute;
    top: 0; left: 0;
    writing-mode: vertical-rl;
    color: var(--ink-soft);
    font-size: 12px;
    letter-spacing: 0.4em;
  }
  .head .vert-meta-r {
    position: absolute;
    top: 0; right: 0;
    writing-mode: vertical-rl;
    color: var(--ink-soft);
    font-size: 12px;
    letter-spacing: 0.4em;
  }
  .head .eyebrow {
    color: var(--vermillion);
    font-size: 12px;
    letter-spacing: 0.7em;
    margin-bottom: 18px;
    font-family: "Yu Gothic", sans-serif;
    font-weight: 800;
  }
  .head h1 {
    font-size: clamp(42px, 6.5vw, 84px);
    font-weight: 900;
    margin: 0 0 14px;
    letter-spacing: 0.05em;
    line-height: 1.35;
  }
  .head h1 b { color: var(--vermillion); }
  .head .subline {
    font-size: 13.5px;
    color: var(--ink-soft);
    letter-spacing: 0;
    line-height: 1.85;
    max-width: 540px;
    margin: 0 auto;
    font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
  }

  /* Stamp board */
  .board {
    background: var(--washi-dark);
    border: 2px solid var(--ink);
    padding: 48px 36px 36px;
    position: relative;
    background-image:
      repeating-linear-gradient(
        to right,
        rgba(26,22,18,0.06) 0 1px, transparent 1px 28px
      ),
      repeating-linear-gradient(
        to bottom,
        rgba(26,22,18,0.06) 0 1px, transparent 1px 28px
      );
  }
  .board::before, .board::after {
    content: "";
    position: absolute;
    width: 24px; height: 24px;
    border: 2px solid var(--ink);
    background: var(--vermillion);
    border-radius: 50%;
  }
  .board::before { top: -12px; left: 32px; }
  .board::after { bottom: -12px; right: 32px; }

  .board-title {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--washi-dark);
    padding: 0 18px;
    font-size: 13px;
    letter-spacing: 0.5em;
    color: var(--ink);
    font-family: "Yu Gothic", sans-serif;
    font-weight: 800;
  }

  /* Stamp grid */
  .stamps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-bottom: 28px;
  }
  @media (max-width: 720px) {
    .stamps { grid-template-columns: repeat(3, 1fr); }
  }

  .cell {
    aspect-ratio: 1;
    border: 1px dashed var(--ink-soft);
    background: rgba(243,234,214,0.6);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
  }
  .cell .label {
    position: absolute;
    top: 6px; left: 8px;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--ink-soft);
    font-family: "JetBrains Mono", monospace;
  }

  /* Stamps stamped already */
  .stamp {
    width: 78%; aspect-ratio: 1;
    border: 3px solid var(--vermillion);
    color: var(--vermillion);
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 30px;
    letter-spacing: 0.05em;
    background: rgba(200,32,26,0.06);
    transform: rotate(-6deg);
    position: relative;
    line-height: 1;
  }
  .stamp.round {
    border-radius: 50%;
    transform: rotate(8deg);
  }
  .stamp.tilt-r { transform: rotate(11deg); }
  .stamp.tilt-l { transform: rotate(-12deg); }
  .stamp.green { color: var(--pine); border-color: var(--pine); background: rgba(44,74,50,0.07); }
  .stamp.gold { color: var(--gold); border-color: var(--gold); background: rgba(183,139,58,0.07); }

  .stamp small {
    position: absolute;
    bottom: 8px;
    font-size: 9px;
    letter-spacing: 0.25em;
    color: inherit;
  }

  /* Empty cells - dotted */
  .cell.empty .next-marker {
    width: 36px; height: 36px;
    border: 2px dashed var(--ink-soft);
    border-radius: 50%;
    color: var(--ink-soft);
    font-family: "Hiragino Mincho ProN", serif;
    font-size: 14px;
    display: grid;
    place-items: center;
  }
  .cell.next .next-marker {
    border-style: solid;
    border-color: var(--vermillion);
    color: var(--vermillion);
    animation: pulse 1.6s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: 0.7; }
  }

  /* Progress bar */
  .progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0 14px;
    font-size: 12.5px;
    letter-spacing: 0.18em;
    color: var(--ink);
    font-family: "Yu Gothic", sans-serif;
  }
  .progress b { color: var(--vermillion); font-size: 18px; font-weight: 900; }
  .progress .num {
    font-family: "JetBrains Mono", monospace;
    letter-spacing: 0.1em;
  }
  .bar {
    height: 12px;
    background: var(--washi);
    border: 1px solid var(--ink);
    overflow: hidden;
    position: relative;
  }
  .bar > span {
    display: block;
    width: 60%;
    height: 100%;
    background: var(--vermillion);
    background-image: repeating-linear-gradient(
      45deg,
      var(--vermillion) 0 8px,
      var(--vermillion-deep) 8px 16px
    );
  }

  /* CTA row */
  .cta-row {
    margin-top: 56px;
    text-align: center;
  }
  .cta-row .lead {
    font-size: 18px;
    letter-spacing: 0.18em;
    margin-bottom: 18px;
    color: var(--ink);
  }
  .btn-main {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 22px 44px;
    background: var(--vermillion);
    color: var(--washi);
    font-family: "Yu Gothic", sans-serif;
    font-weight: 900;
    font-size: 17px;
    letter-spacing: 0;
    text-decoration: none;
    border: 3px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    margin-bottom: 14px;
  }
  .btn-main:hover {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0 var(--ink);
  }
  .btn-main .arr { font-size: 22px; }
  .cta-row .sub {
    font-size: 11px;
    letter-spacing: 0;
    color: var(--ink-soft);
    font-family: "JetBrains Mono", monospace;
  }

  /* Floating sakura */
  .sakura {
    position: absolute;
    pointer-events: none;
    font-size: 22px;
    color: var(--vermillion);
    opacity: 0.5;
  }
  .s1 { top: 18%; left: 4%; transform: rotate(15deg); }
  .s2 { top: 55%; right: 3%; transform: rotate(-22deg); font-size: 28px; }
  .s3 { bottom: 8%; left: 6%; transform: rotate(40deg); font-size: 18px; }
[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}
}
.bar>span{width:50%}
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}
</style>
<noscript><style>*,*::before,*::after{animation:none!important}.ticker p{padding-left:8px;white-space:normal}</style></noscript>
</head>
<body>
  <div class="wrap">
    <span class="sakura s1" aria-hidden="true">❀</span>
    <span class="sakura s2" aria-hidden="true">❀</span>
    <span class="sakura s3" aria-hidden="true">❀</span>

    <header class="strip">
      <span class="left">● 御朱印帳キャンペーン</span>
      <span class="center">— 巡 礼 す る ご と に 特 典 —</span>
      <span class="right">2026.04.27 — 06.30</span>
    </header>

    <section class="head">
      <span class="vert-meta">第 ○ 十 番 札 所</span>
      <span class="vert-meta-r">令 和 八 年 春</span>
      <p class="eyebrow">巡 礼 開 始</p>
      <h1>あなたの旅を、<br><b>一つずつ</b>刻もう。</h1>
      <p class="subline">10の体験を巡って、御朱印を集めよう。最後の1個を押した瞬間、特別な特典があなたを待っています。</p>
    </section>

    <div class="board">
      <h2 class="board-title">— 御 朱 印 帳 —</h2>

      <div class="stamps">
        <div class="cell">
          <span class="label">壱</span>
          <div class="stamp">登</div>
        </div>
        <div class="cell">
          <span class="label">弐</span>
          <div class="stamp round green">録<small>SIGN UP</small></div>
        </div>
        <div class="cell">
          <span class="label">参</span>
          <div class="stamp tilt-r">創</div>
        </div>
        <div class="cell">
          <span class="label">四</span>
          <div class="stamp round gold">共<small>SHARE</small></div>
        </div>
        <div class="cell">
          <span class="label">五</span>
          <div class="stamp tilt-l">招</div>
        </div>
        <div class="cell next">
          <span class="label">六</span>
          <span class="next-marker">次</span>
        </div>
        <div class="cell empty">
          <span class="label">七</span>
          <span class="next-marker">？</span>
        </div>
        <div class="cell empty">
          <span class="label">八</span>
          <span class="next-marker">？</span>
        </div>
        <div class="cell empty">
          <span class="label">九</span>
          <span class="next-marker">？</span>
        </div>
        <div class="cell empty">
          <span class="label">満</span>
          <span class="next-marker">★</span>
        </div>
      </div>

      <div class="progress">
        <span><b>5</b> / 10 巡礼済</span>
        <span class="num">PROGRESS · 50%</span>
      </div>
      <div class="bar"><span></span></div>
    </div>

    <div class="cta-row">
      <p class="lead">— 次の札所へ進もう —</p>
      <a class="btn-main" href="#demo-link-0">第六番 ・ 推薦キャンペーン<span class="arr">→</span></a>
      <p class="sub">REWARD ✦ 全制覇で永世会員バッジ進呈</p>
    </div>
  </div>
<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>
<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の描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。

概要

御朱印帳を手に寺社をめぐり、スタンプラリーの台紙を一マスずつ埋めていく——日本人の多くが、この「集めて完成させる」喜びを身体で覚えています。このCTAは、その文化的な記憶を、オンボーディングやリファラルの設計に応用します。

空欄は「埋めたい」という衝動を生む

人間には、未完了のものを完了させたいという強い心理傾向があります（ツァイガルニク効果）。スタンプ台紙に並んだ空きマスは、その衝動を視覚的に直撃する装置です。5/10巡礼済と示されたゲージを見た瞬間、人は残りの5マスを埋めたくなります。SaaSのオンボーディングが「あと3ステップで完了です」と書くより、空欄の御朱印帳を見せるほうが、はるかに強く行動を引き出します。

崩れる形あと3ステップで完了です

文章で残数を伝えるだけでは、未完了を埋めたいという衝動までは起きません。読んで理解して終わり、で画面を閉じられます。

効く形空欄の並んだ台紙を見せる

空きマスはツァイガルニク効果を視覚的に直撃します。残りの札所が見えていればゴールは近いと判断でき、最後まで歩き切る確率が上がります。

進捗の可視化が離脱を防ぐ

オンボーディングの途中離脱は、多くの場合「あとどれだけ続くのか分からない」不安から起きます。残りの札所がはっきり見えていれば、ユーザーは「ゴールは近い」と判断でき、最後まで歩き切る確率が上がる。次に押すべきマスを脈動アニメーションで示せば、迷いも消えます。スタンプラリーは、本質的に「進捗バーを文化的に楽しくしたもの」なのです。

仕上げの判断軸

刺さるのは、オンボーディング完了率を上げたいSaaS、観光・地域振興、リファラルプログラム、ロイヤリティ特典など。御朱印帳というメタファは日本市場で最強ですが、海外向けにはスタンプカードへの翻案が要ります。

コンプリート特典は必ず最初に提示してください。ゴールの価値が見えなければ、人はマスを埋める動機を持ちません。

朱印スタンプの傾きや質感は楽しさを生みますが、押印済みと未押印のマスのコントラストは明確に保ちます。

見本で試せる範囲

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