コール トゥ アクション · Call to Action · Blanc Nail

◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Content › Call to Action

コール トゥ アクション

ユーザの次の一手を促す決定打セクション。緊張と余白の設計。

14

Patterns

Content

Group

isValid=0

Verified

CSS

Animation

01

CTA — Dark Centered Offer

cta-dark-centered

Copy
Link

🎁 LIMITED OFFER

今だけ、初年度 50% OFF

2026年4月末までの期間限定。すべてのプランで適用可能です。

割引を適用する →
  • パターン名: CTA — Dark Centered Offer
  • 概要: Dark centered CTA with eyebrow tag and warm-gradient highlight.
  • 使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 760px、主要ブロック group, paragraph, heading, paragraph, buttons, button
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/cta-dark-centered"} /-->

CSS:
.section-cta-dark-centered { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-cta-dark-centered').forEach((el) => el.dataset.ready = 'true');

02

CTA — Animated Gradient Banner

cta-gradient-banner

Copy
Link

今日から、新しい体験を

クレジットカード不要、14 日間の無料トライアル。
いつでもキャンセル可能です。

無料で始める →
  • パターン名: CTA — Animated Gradient Banner
  • 概要: Full-bleed animated gradient CTA with bold heading and prominent button.
  • 使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 880px、主要ブロック group, heading, paragraph, buttons, button
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/cta-gradient-banner"} /-->

CSS:
.section-cta-gradient-banner { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-cta-gradient-banner').forEach((el) => el.dataset.ready = 'true');

03

CTA — Newsletter Signup

cta-newsletter

Copy
Link

📬

毎週、最新トレンドをお届け

業界の最新動向と実践的な Tips を、月 1 回まとめてお届けします。

無料で購読する
  • パターン名: CTA — Newsletter Signup
  • 概要: Warm cream-tone newsletter CTA with emoji icon.
  • 使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 720px、主要ブロック group, paragraph, heading, paragraph, buttons, button
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/cta-newsletter"} /-->

CSS:
.section-cta-newsletter { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-cta-newsletter').forEach((el) => el.dataset.ready = 'true');

04

CTA — Split Text + Buttons

cta-split

Copy
Link

あなたのチームに、
パワーを。

3,000 以上のチームに選ばれている理由を、ぜひお試しください。

無料で始める
デモを予約
  • パターン名: CTA — Split Text + Buttons
  • 概要: Dark two-column CTA with copy on left and stacked buttons on right.
  • 使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 66% / 34% / 1px、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, heading, paragraph, column, buttons, button
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/cta-split"} /-->

CSS:
.section-cta-split { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-cta-split').forEach((el) => el.dataset.ready = 'true');

05

CTA — EX01 Warm Gradient Band

cta-ex01-warm-band

Copy
Link

今週末、足を運んでみませんか

はじめての方も、おひとりさまも歓迎です。

ご予約はこちら
  • パターン名: CTA — EX01 Warm Gradient Band
  • 概要: Warm gradient call-to-action band with one primary button.
  • 使用目的: CTA領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/cta-ex01-warm-band"} /-->

CSS:
.section-cta-ex01-warm-band { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-cta-ex01-warm-band').forEach((el) => el.dataset.ready = 'true');

06

CTA — EX02 Coupon Dashed

cta-ex02-coupon

Copy
Link

WEB限定クーポン

初回ご利用 10% OFF

ご予約時に「ホームページを見た」とお伝えください。
他クーポンとの併用不可 ・ 有効期限は今月末まで。

クーポンを使って予約
  • パターン名: CTA — EX02 Coupon Dashed
  • 概要: Coupon-style offer with dashed border and terms note.
  • 使用目的: CTA領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/cta-ex02-coupon"} /-->

CSS:
.section-cta-ex02-coupon { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-cta-ex02-coupon').forEach((el) => el.dataset.ready = 'true');

07

CTA — EX03 Document Download Split

cta-ex03-document

Copy
Link
資料イメージ

料金と事例がわかる資料を無料配布中

サービス内容・料金表・導入までの流れを 20 ページにまとめました。検討中の社内共有にもお使いいただけます。

資料を受け取る（無料）
  • パターン名: CTA — EX03 Document Download Split
  • 概要: Document request CTA: thumbnail left, copy and button right.
  • 使用目的: CTA領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/cta-ex03-document"} /-->

CSS:
.section-cta-ex03-document { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-cta-ex03-document').forEach((el) => el.dataset.ready = 'true');

08

CTA — EX04 Zen Minimal Line

cta-ex04-zen-minimal

Copy
Link

続きは、店頭で。

アクセスを見る
  • パターン名: CTA — EX04 Zen Minimal Line
  • 概要: Ultra-quiet closing CTA with thin rules above and below.
  • 使用目的: CTA領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/cta-ex04-zen-minimal"} /-->

CSS:
.section-cta-ex04-zen-minimal { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-cta-ex04-zen-minimal').forEach((el) => el.dataset.ready = 'true');

09

CTA — EX05 Seasonal Campaign

cta-ex05-seasonal

Copy
Link

期間限定 ・ 12/1 — 12/25

ウィンターキャンペーン開催中

キャンペーン詳細
ご予約
  • パターン名: CTA — EX05 Seasonal Campaign
  • 概要: Seasonal campaign banner with period and two actions.
  • 使用目的: CTA領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/cta-ex05-seasonal"} /-->

CSS:
.section-cta-ex05-seasonal { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-cta-ex05-seasonal').forEach((el) => el.dataset.ready = 'true');

10

CTA — EX06 Gift Suggestion

cta-ex06-gift

Copy
Link

🎁

大切な人への贈りものに

ギフトラッピングは無料。のし・メッセージカードにも対応しています。

ギフトセットを見る
  • パターン名: CTA — EX06 Gift Suggestion
  • 概要: Gift-focused CTA with soft background and two buttons.
  • 使用目的: CTA領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/cta-ex06-gift"} /-->

CSS:
.section-cta-ex06-gift { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-cta-ex06-gift').forEach((el) => el.dataset.ready = 'true');

11

CTA — EX07 First Visit Guide

cta-ex07-first-visit

Copy
Link

はじめての方へ

持ちものは不要 ・ 所要時間 60 分 ・ 当日予約 OK。
初回の流れを写真つきでご案内しています。

初回の流れを見る →
  • パターン名: CTA — EX07 First Visit Guide
  • 概要: Reassuring first-visit CTA with three quick facts and a button.
  • 使用目的: CTA領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/cta-ex07-first-visit"} /-->

CSS:
.section-cta-ex07-first-visit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-cta-ex07-first-visit').forEach((el) => el.dataset.ready = 'true');

12

CTA — EX08 Photo Cover CTA

cta-ex08-photo-overlay

Copy
Link

物語のつづきを、あなたの暮らしで。

オンラインストアへ
  • パターン名: CTA — EX08 Photo Cover CTA
  • 概要: Cover-based CTA with dark overlay photo and centered action.
  • 使用目的: CTA領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/cta-ex08-photo-overlay"} /-->

CSS:
.section-cta-ex08-photo-overlay { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-cta-ex08-photo-overlay').forEach((el) => el.dataset.ready = 'true');

13

CTA — EX09 Limited Seats Counter

cta-ex09-counter

Copy
Link

残り 3 席

今月の体験会

無料体験会、今月分の受付はまもなく終了です

申し込む
  • パターン名: CTA — EX09 Limited Seats Counter
  • 概要: Scarcity CTA: remaining seats stat next to the action button.
  • 使用目的: CTA領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/cta-ex09-counter"} /-->

CSS:
.section-cta-ex09-counter { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-cta-ex09-counter').forEach((el) => el.dataset.ready = 'true');

14

CTA — EX10 Two Path Choice

cta-ex10-two-path

Copy
Link

今すぐ予約したい方

空き状況をリアルタイムで確認できます。

予約カレンダーへ

まずは検討したい方

料金表と事例をまとめた資料をどうぞ。

資料を請求する
  • パターン名: CTA — EX10 Two Path Choice
  • 概要: Closing fork: two equal cards for different visitor intents.
  • 使用目的: CTA領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/cta-ex10-two-path"} /-->

CSS:
.section-cta-ex10-two-path { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-cta-ex10-two-path').forEach((el) => el.dataset.ready = 'true');