CTA · CTAセクション
御朱印帳・スタンプラリー風のCTA
御朱印帳とスタンプラリーを再構築したCTAセクション。朱印スタンプ・残り札所・巡礼ゲージで「あと少しでコンプリート」の達成欲求を喚起する、日本独自文化を武器にした尖った設計。
プレビュー
概要
御朱印帳を手に寺社をめぐり、スタンプラリーの台紙を一マスずつ埋めていく——日本人の多くが、この「集めて完成させる」喜びを身体で覚えています。このCTAは、その文化的な記憶を、オンボーディングやリファラルの設計に応用します。
空欄は「埋めたい」という衝動を生む
人間には、未完了のものを完了させたいという強い心理傾向があります（ツァイガルニク効果）。スタンプ台紙に並んだ空きマスは、その衝動を視覚的に直撃する装置です。「5/10巡礼済」と示されたゲージを見た瞬間、人は残りの5マスを埋めたくなる。SaaSのオンボーディングが「あと3ステップで完了です」と書くより、空欄の御朱印帳を見せるほうが、はるかに強く行動を引き出します。
進捗の可視化が離脱を防ぐ
オンボーディングの途中離脱は、多くの場合「あとどれだけ続くのか分からない」不安から起きます。残りの札所がはっきり見えていれば、ユーザーは「ゴールは近い」と判断でき、最後まで歩き切る確率が上がる。次に押すべきマスを脈動アニメーションで示せば、迷いも消えます。スタンプラリーは、本質的に「進捗バーを文化的に楽しくしたもの」なのです。
仕上げの判断軸
刺さるのは、オンボーディング完了率を上げたいSaaS、観光・地域振興、リファラルプログラム、ロイヤリティ特典など。御朱印帳というメタファは日本市場で最強ですが、海外向けには「スタンプカード」へ翻案が要ります。報酬（コンプリート特典）は必ず最初に提示すること——ゴールの価値が見えなければ、人はマスを埋める動機を持ちません。朱印スタンプの傾きや質感は楽しさを生みますが、押印済みと未押印のマスのコントラストは明確に保ちます。
使いどころ
- オンボーディング達成率を上げたいSaaS
- 観光・地域振興・自治体プロモーション
- リファラルプログラム（招待 X 人達成系）
- メンバー特典・ロイヤリティプログラム
- イベント・カンファレンス参加証
このデザインの分類
- カテゴリ
- CTA
- スタイル
- ハンドクラフト / プレイフル / ウォーム / レトロ
背景と狙いどころ
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（古典セリフ）に変更。
よくある質問
御朱印帳のメタファは海外ユーザーに通じる？
スタンプの傾きをランダム化したい
完了済み・次・未達 の状態管理は？
関連するデザイン
タイプライター手紙風のCTA
タイプライターで打たれた一通の手紙を再構築したCTA。修正線・赤鉛筆挿入・切手風ボタン・消印スタンプで「特別なあなただけに」の親密さを演出する尖った文書設計。
弾むアニメーションのCTAブロック
少し傾いたカードと厚い境界線、浮遊する絵文字、手書き風の矢印書き込みで構成した遊び心のあるCTAブロック。個人開発プロダクト・クリエイター系サービス・コミュニティ募集など、親しみの温度を優先したい局面向け。
パステル×マスコットの"かわいい"CTAセクション
日本発の「kawaii」美学を再構築した、パステル配色とマスコットキャラのCTAセクション。Z世代の女性向け・コスメ・サンリオ系プロダクトに刺さる、ふわふわで愛され系の遊び心ある設計。