CTA · CTAセクション

弾むアニメーションのCTAブロック

少し傾いたカードと厚い境界線、浮遊する絵文字、手書き風の矢印書き込みで構成した遊び心のあるCTAブロック。個人開発プロダクト・クリエイター系サービス・コミュニティ募集など、親しみの温度を優先したい局面向け。

PUBLISHED — 2026年4月23日 UPDATED — 2026年4月23日 CATEGORY — CTA LICENSE — CC0 1.0

プレビュー

vibe.itlibra.com/preview/playful-cta/

概要

遊び心のあるCTAブロックは、「この先にいるのは冷たい企業ではなく、話せる人間だ」というシグナルを視覚で伝える設計です。少し傾いたカード、ふわふわ揺れる絵文字、手書き風の矢印——これらはすべて、完璧に整ったSaaS体験から意図的に外れるための装置です。

「ちゃんとしすぎ」が壁になるとき

個人開発者やクリエイターのコミュニティ募集では、洗練が逆効果になることがあります。完璧な直線、均等な余白、プロの写真素材——それらは訪問者に「自分が気軽に話しかけていい相手ではなさそうだ」と感じさせる。わずかな歪みと手書きの要素は、その心理的な壁を取り払い、「ここには話しかけていい人間がいる」と伝えます。不完全さが、親密さの記号として働くのです。

崩しすぎない、という難しさ

このスタイルの難所は、崩しの「度合い」です。少しの歪みは親しみを生みますが、崩しすぎると「子供向けアプリ」や「素人の手作りサイト」に転落する。プロが意図して崩している、と伝わる範囲に留めることが、遊び心と信頼性を両立させる条件です。

仕上げの判断軸

カードの回転は rotate(-1deg) 程度が上限——これ以上回すとトーンが幼くなりすぎます。境界線を厚くし、4〜6pxのオフセット影（ネオブルータリスト風）を添えると、モダンさとソフトさが両立します。揺れる絵文字は4箇所ほどに置き、@keyframes のディレイを段階的にずらすのがコツ。全部同じタイミングだとロボット的に、バラバラすぎると散漫になります。見出し内の強調は2箇所まで。手書き矢印はデスクトップのみとし、モバイルでは非表示にして場所を節約します。

使いどころ

個人開発プロダクトのコミュニティ募集 / 早期アクセス招待
Creator系サービスの登録導線 (コースの開講、メンバー募集など)
ブランドが「堅さを捨てる」瞬間を作りたい B2C 製品の途中セクション

カテゴリ: CTA
スタイル: プレイフル / ハンドクラフト / ウォーム / ボールド

背景と狙いどころ

Context

Category · CTAセクション

CTA

行動喚起セクション（Call to Action）。

カテゴリ一覧を見る →

Style · プレイフル

プレイフル

遊び心・アニメーション多め。

スタイル一覧を見る →

Style · 手書き

ハンドクラフト

手書き線・不揃いな温度。

スタイル一覧を見る →

AIへの指示文

個人開発プロダクトやクリエイター向けサービスの募集用に、遊び心のあるCTAブロックを作ってください。

キャンバス:
- 暖色オフホワイト (#fef6e4) のページ背景。
- フォントは Inter。weightの強弱(800 / 700 / 400)だけでメリハリをつける。
- 配色: ピンク (#ff6fae)、パープル (#7b5cff)、イエロー (#ffd166)、グリーン (#4ad295)、近黒 (#1d1a2b)。色の数は多いが、派手な塗りは小面積に限定する。

CTA ブロック (中央寄せ、max-width 900px):
- 白カード、3px の近黒ボーダー、28px の角丸、6px/6px の近黒オフセット影 (所謂ネオブルータリスト風)。
- カード全体を `rotate(-1deg)` で少し傾ける。hover で `rotate(-0.5deg) translateY(-2px)` に戻す。

装飾:
- カードの四隅からはみ出すように、絵文字 (✨ 🎯 🪄 💌) を絶対配置で浮かべる。各絵文字に `drop-shadow(2px 2px 0 black)` のオフセット影。`@keyframes bob` で 3.5秒かけて上下に 6px 揺らす。delay を 0 / 0.8 / 1.6 / 2.4 秒にずらして単調さを避ける。
- 左外側に手書き風の矢印書き込み (1行メッセージ + SVG/CSSで描いた矢印)。720px 未満では非表示。

本文:
- eyebrow: 黄色ピル、2px の近黒ボーダー、`rotate(2deg)` で傾ける。"Limited seats · Spring intake" など。
- H1: clamp(2.2rem, 5vw, 3.6rem)、weight 800。2 行構成で、
  - 1 行目の一部の単語を `<span class="wiggle">` で包み、ピンク色 + `@keyframes wiggle` で ±3deg 揺らす。
  - 2 行目のキーワードを `<span class="highlight">` で包み、擬似要素 `::before` で緑のハイライトブロックを下敷きに敷く (少し傾けた下線っぽい表現)。
- リード: muted gray、最大 46ch、2 行程度。
- アクション:
  - プライマリボタン: ピンク背景、3px の近黒ボーダー、14px radius、4px/4px のオフセット影。矢印アイコン付き。hover で `translate(-2px, -2px)` + 影を 6px/6px に深める。active で `translate(1px, 1px)` + 影を 2px/2px に浅くする。
  - セカンダリボタン: 白背景、同じ形。
- マイクロコピー: "No credit card · Cancel any time · Hand-held onboarding"。チェックマークを小さな緑の円 (2px 近黒ボーダー) に入れる。

レスポンシブ: 720px 未満で矢印書き込みを非表示にするだけでOK。ボタンは `flex-wrap` で自然に縦積み。

JS 不要。全てCSSアニメーション。

バリエーション

ダーク版

ページ背景を (#1a1630)、カードを (#2a2540) に変更。
ピンクとイエローはそのまま、緑は (#5efac2) に差し替えて暗背景で発光させる。
全体の境界線と文字色を (#fff9e8) に反転。

フォーム埋込版

CTAボタンの代わりに、メール入力フォーム + 送信ボタン(ピンク背景)を1行に並べる。
入力欄は 3px の近黒ボーダー、14px radius、focus で緑のアウトライン。
送信ボタンは矢印アイコン付きでそのまま。

よくある質問

動きが強すぎないか心配です

`prefers-reduced-motion` メディアクエリで `bob` と `wiggle` の animation を止める分岐を入れてください。モーション苦手なユーザーにはカードの傾きだけ残り、遊び心は保たれます。

絵文字の代わりにカスタムイラストを使いたい

そのまま置き換えられます。SVGを同じサイズ (clamp 2rem → 3rem) で配置し、`filter: drop-shadow(2px 2px 0 ink)` は残すと「ハンドクラフト感」が続きます。

手書き矢印を素直な注釈で置き換えたい

`.tiny-arrow` を削除して、カードの外に小さなラベル(例: '3 seats left'、動的な残席カウントなど) を置くだけでOK。ここに数字を置くと説得力が増します。

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

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

CTA ハンドクラフトプレイフル

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

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

CTA ウォームプレイフル

タイプライター手紙風のCTA

タイプライターで打たれた一通の手紙を再構築したCTA。修正線・赤鉛筆挿入・切手風ボタン・消印スタンプで「特別なあなただけに」の親密さを演出する尖った文書設計。

CTA エディトリアルレトロ