CTAブロック：配置、コピー、事例

CTA（コールトゥアクション）は、特定の次のステップを提示します。CTAブロックはそのプロンプトを目立たせますが、すべてを求めることが役割ではありません。獲得した注目を、その行動が合理的になった時点で、1つの明確なプライマリアクションに変換します。

レンダリングされた例には、視覚的に支配的なアクションが1つあります。そのセカンダリリンクは、予測可能な低コミットメントの質問（アトリビューションの仕組み）に答えるものであり、競合する成果を導入することはありません。このページはセクションの自動ミニバナーを無効にしています。デモンストレーションページに静かに別のプロモーション要求を追加すべきではないからです。

なぜこの要素が重要なのか

読者はすべての段落でコンバージョンする準備ができているわけではありません。彼らはまず、ページが自分の問題を理解しているか、その主張が信頼できるか、提案された次のステップが適切かを判断します。CTAブロックは、ページが十分なコンテキストを提供した後、その次のステップを認識しやすくするために存在します。これは、1つのアクション、その即時の成果、そして必要に応じて今行動すべき理由を明示することで、決定の労力を減らします。

1ページあたり1つのプライマリアクションが基本ルールです。「プライマリ」とは、ページが促進するように設計された単一のビジネス成果（トライアル開始、見積もりリクエスト、製品選択、購読、特定のリソースへの継続）を意味します。3つのアクションが同じサイズ、色、繰り返しで表示されると、読者はページの優先順位を再構築しなければなりません。3つの同等のCTAがあるページには、事実上CTAはありません。

セカンダリアクションは、プライマリコミットメントの準備ができていない読者のためだけに残してください。視覚的に控えめにし、同じジャーニー上に維持します。「無料トライアルを開始」と「アトリビューションの仕組みを見る」の組み合わせは一貫しています。トライアル、ニュースレター、ソーシャルフォローボタンが同等に表示されるのはそうではありません。セカンダリアクションが実際の懸念を取り除かない場合は、格下げするか削除してください。

機械抽出可能性とは、自動化システムがそのデザインの外でも要素の意味を保持できることを意味します。成果指向の見出し、短いサポート文、説明的なリンクラベル、実際のURLは、コンテキスト、アクション、宛先を明らかにします。「14日間のトライアルを開始」は抽出後も理解可能ですが、「はじめる」はそうではありません。

いつ使用するか

CTAブロックは、読者をそこに導いた質問にページが応え、次のステップが自然に続く場合に使用します。認知段階のページでは、読者が問題を学習または特定しているため、アクションは低コミットメントで勢いを維持する必要があります（関連ガイドを読む、例を確認する、特定のトピックを購読する、軽量チェックを実行する）。検討段階のページでは、代替案やアプローチが評価されているため、プロダクトウォークスルー、方法論、計算ツール、比較、関連ケーススタディを提供します。意思決定段階のページでは、証拠と適合性が確立されているため、トライアル、見積もり、購入、デモが適切です。定着段階のページでは、既存顧客が成功しようとしているため、セットアップ、導入、サポート、拡張のアクションを優先します。

用語集ページの「デモを予約する」ボタンは、単に用語を理解しようとしている人をコンバージョンすることはなく、定義がセールスの罠として扱われたことを露呈して信頼を損ないます。問題はフレーズ自体ではなく、読者の段階と求められるコミットメントのミスマッチです。同じボタンでも、製品ページ、ユースケースページ、ケーススタディページでは、証拠、範囲、適合性が示された後であれば正しい場合があります。

スロットを埋めるためにCTAを追加しないでください。答えが不完全な場合、宛先がページを繰り返す場合、またはアクションを完了できない場合は、省略してください。散文のリンクは自動的にCTAになるわけではありません。「関連資料」パネルに複数の同等の宛先がある場合は、1つのコールトゥアクションではなく、関連ナビゲーションです。

プライマリアクションをページのjourneyStage値にマッピングします：

どこに配置するか

正当化前の要求は押し付けがましく感じられ、読者が去った後のものは遅すぎます。デフォルトのクロージングパネルは、最後の実質的なセクションの後、関連コンテンツやフッターの前に配置します。成果を要約することはできますが、裏付けのない主張を導入することはできません。

記事中のミニバナーは、読者が有用な回答を得た後、次の主要な深掘りレイヤーの前という、真の意思決定の分岐点でのみ許可されます。このサイトでは、手動でショートコードを各記事に貼り付けるのではなく配置されます。親セクションの[cascade]がminiBannerEnabled = trueとminiBannerCtaPosition = 3を設定し、見出しレンダリングフックが3つ目の第2レベル見出し（H2）の直前にバナーを挿入します。miniBannerCtaPositionはH2見出しをカウントし、段落、画面の高さ、読了率はカウントしません。記事のH2がそれより少ない場合、バナーはレンダリングされません。継承された要求が不適切な個別ページでは、miniBannerDisabled = trueを設定します。

カスケードは、別のH2の前にニュースレターを挿入することもできます。これもコンバージョン要求であるため、miniBannerNewsletterEnabledとminiBannerNewsletterPositionを確認してください。CTAを別のCTA、フォーム、ペイウォール、警告、重要評価、未解釈のエビデンスの隣に決して配置しないでください。要求の間には、1つの完全な実質的セクションを確保します。

インラインボタンは、局所的に完了したタスクまたは決定的な証明ポイントの直後に配置します。文、番号付きステップ、表、引用、ソースノートを中断してはいけません。スティッキーサイドバーは長いデスクトップでの読書に付随することがありますが、1つの持続的なCTAとしてカウントされ、コンテンツを覆ったり、同じビューポート内の同一のインラインボタンを複製したりしてはいけません。

頻度の制限

追加の要求はそれぞれ注意を消費し、比較する新たな経路を生み出します。過剰な配置はクリック数を増やす一方で、完了したコンバージョンを低下させる可能性があります。時期尚早のクリックには意図が欠け、バナーは証拠を覆い、成果は経路を分割します。適格セッションあたりの完了コンバージョンを測定し、クリック率だけでは判断しないでください。要求を削除することでページの総コンバージョンが向上するかテストしてください。普遍的なパーセンテージは存在しません。

すべてのプロモーションバナー、インラインボタン、ニュースレターフォーム、スティッキーサイドバーをカウントします。単一のデザインパネル内の繰り返しボタンは1つのブロック内のアクションとしてカウントされますが、それでも競合します。プライマリにできるのは1つだけです。ヘッダーとフッターのナビゲーションは、キャンペーン形式のプロモーション処理でない限りカウントしません。

構成要素

スクリーンショットは7つの領域にラベルを付けています。このレンダリングされた凡例は画像とは独立してメンテナンス可能です。

1. コンテキストラベル： 省略可能、2〜4語、関連するプロダクト領域または次のステップのカテゴリを特定します。
2. 成果見出し： アクションが促進する価値または完了状態を述べます。
3. サポートコピー： 新しい議論を追加せずに、最後の実用的な懸念を解決します。
4. プライマリアクション： 唯一の支配的なボタン。そのラベルは次に何が起こるかを示します。
5. セカンダリアクション： 省略可能、視覚的に従属的で、同じジャーニーに沿って方向付けられます。
6. 宛先： ボタンの約束を果たすページへの動作するURL。
7. トラッキングID： 安定した配置とバリアントの識別子で、分析に渡され、コピーとしては表示されません。

デザイン例

処理方法はスペースと読者の段階によって変化します。1プライマリアクションの原則は変わりません。

ダーククロージングパネル： 長い検討および意思決定ページのデフォルトのクローズ。cta-dark-panelを使用し、セカンダリアクションは控えめで関連性のあるものにします。

ミニバナー： カスケードまたはmini-banner-ctaによって駆動されるコンパクトなプロンプト。有用なコンテンツの後に続き、不自然な意味の切れ目を避ける必要があります。

インラインボタン： 局所的な結果が明白な次のステップを生み出す場合に最適です。ナビゲーションのためにリンクをボタンとしてスタイル設定し、ページを変更するためにフォームボタンを使用しないでください。

ニュースレター獲得： 何が届き、どの程度の頻度かを明示する認知コンテンツに適しています。メールラベル、プライバシーコンテキスト、エラー、確認を提供します。

サイドバー： 十分な幅がある場合のみ使用します。小画面ではドキュメントフローに戻り、オーバーレイの場合は閉じることが可能で、唯一の経路になることはありません。

スクリーンショット主導のクロージングパネル： primary-cta-gridは要求を実際のプロダクト画像と組み合わせます。アセットは存在し、有用な代替テキストを持ち、宛先を明確にする必要があります。プレースホルダーは絶対に使用しないでください。

パラメータ

ポータブルな契約は、コンテンツフィールドとプレゼンテーションを分離します。実装のみのカラーおよびグラデーションコントロールはCTAの意味を変えません。

Hugoアダプターは異なる名前を使用します。cta-dark-panelはprimaryCtaTextとprimaryCtaUrlを持ち、mini-banner-ctaはprimaryTextとprimaryUrlを持ち、primary-cta-gridはprimaryTextとprimaryURLを持ちます。それぞれに同等のセカンダリフィールドがあります。最後のアダプターの大文字のURLは重要です。両方のバナーアダプターはセカンダリのデフォルトを提供するため、フィールドを省略しても1つのアクションが保証されるわけではありません。コンポーネントをプレビューし、階層を維持してください。

構文とコード例

3つの表記法は、プラットフォームが異なるフィールド名を使用する場合でも同じ意味を持ちます。

ポータブルMarkdownディレクティブ

:::cta-block{variant="dark" journeyStage="decision" heading="可視性が生み出す収益を測定する" primaryText="収益トラッキングを開始" primaryUrl="https://app.amicited.com/reports/cockpit" placementId="closing-revenue"}
次のクリックを完了したトライアル、注文、または購読に結びつけます。
:::

Hugoショートコード

{{< cta-dark-panel
  heading="可視性が生み出す収益を測定する"
  description="次のクリックを完了したトライアル、注文、または購読に結びつけます。"
  primaryCtaText="収益トラッキングを開始"
  primaryCtaUrl="https://app.amicited.com/reports/cockpit"
  secondaryCtaText="収益アトリビューションを見る"
  secondaryCtaUrl="/features/revenue-attribution/"
  gradientId="closing-revenue"
>}}

現在のショートコードはセカンダリアクションをレンダリングします。それを従属的なサポートとして扱い、2番目のプライマリ成果として扱わないでください。gradientIdは、1つのレンダリングページに複数のダークパネルが表示される場合に一意である必要があります。

自動的な記事中配置には、ショートコードを埋め込むのではなく、実際のセクション機構を使用します：

[cascade]
miniBannerEnabled = true
miniBannerCtaPosition = 3
miniBannerCtaHeading = "収益を生み出すページを確認する"
miniBannerCtaDescription = "引用ページからトライアルや注文までを追跡します。"
miniBannerCtaPrimaryText = "収益レポートを開く"
miniBannerCtaPrimaryUrl = "https://app.amicited.com/reports/cockpit"
miniBannerNewsletterEnabled = false

WordPressブロックまたはショートコード

[cta_block variant="dark" journey_stage="decision" heading="可視性が生み出す収益を測定する" primary_text="収益トラッキングを開始" primary_url="https://app.amicited.com/reports/cockpit" placement_id="closing-revenue"]次のクリックを完了したトライアル、注文、または購読に結びつけます。[/cta_block]

WordPressブロックはこれらをエディターコントロールとして公開する場合がありますが、テキストと宛先はコンテンツフィールドとして保存する必要があります。スタイリング、トラッキング、レスポンシブ動作はブロックレンダラーに属します。

例

良い例

引用されたページがどの収益を生み出すかを見る
ページ訪問をトライアル、注文、購読に結びつけます。
収益レポートを開く

これは、見出しが成果を名指しし、サポートコピーが関連性を説明し、ボタンがインターフェースを名指しているため、機能します。意思決定段階のアトリビューション説明の後、読者は次の画面を予測できます。

悪い例

ビジネスを変革する準備はできていますか？
今日、革新的なプラットフォームの力を解き放ちましょう。
もっと詳しく · はじめる · 送信

これは、コピーが一般的で、宛先が予測できず、3つの同等の動詞が競合しているため、失敗しています。「変革」「革新的」は証拠のない強調を加えています。ボタンは結果ではなく、インターフェース上の動作を説明しています。アクションをジャーニー段階に合わせ、それを明示し、他は削除してください。

より微妙な悪い例は、用語集の定義の前に完璧に書かれたデモCTAを挿入することです。配置とコミットメントが間違っている場合、良いコピーでも失敗します。そのページでは、関連する教育的な継続に置き換えるか、CTAを完全に省略してください。

スキーママークアップとアクセシビリティ

CTAブロックは専用のJSON-LDプロパティを提供しません。Schema.org語彙は記事のプロモーション用の一般的なCTAタイプを定義していません。そのテキストは、包含するArticle、TechArticle、Product、またはその他の真実のエンティティ内に残ります。スキーマタイプを発明したり、ボタンの言語を無関係なプロパティにコピーしたりしないでください。

ナビゲーションアクションは実際のhrefを持つアンカーを使用する必要があります。<button>は、ニュースレターフォームの送信や開示の展開など、現在のページでのアクション用です。リンクテキストはコンテキストがなくても意味をなす必要があります。キーボードフォーカスは可視である必要があり、フォーカス順序は読み取り順序に従う必要があり、プライマリとセカンダリアクションはその階層を色だけに依存してはいけません。新しい宛先が新しいタブを開く場合はその動作を開示し、通常は同じタブを維持します。

コンテナにrole="alert"や強制フォーカスは必要ありません。オーバーレイサイドバーにはキーボード操作可能な閉じるコントロールが必要であり、フォーカスをトラップしてはいけません。ニュースレターには関連するラベル、必須ステータス、テキストエラー、発表される成功メッセージが必要です。分析の失敗がリンクをブロックしてはいけません。

作成ルール

まず宛先の約束を書き、それを短くします。次に何が起こるかを述べます：「エンタープライズプランを比較」、「移行チェックリストをダウンロード」、「14日間のトライアルを開始」、「20分のデモを予約」。2〜6語、最大40文字を使用します。より長い必須の修飾語はサポートコピーに入れます。

何も説明しないラベルを禁止します：「クリック here」、「もっと詳しく」、「はじめる」、「送信」、「続ける」、「Go」、「More」、「さらに詳しく」。馴染みのある動詞が自動的に悪いわけではありません（「14日間のトライアルを開始」は具体的です）が、目的語や成果のない動詞は読者に推測を強います。

1つの短い見出しと最大35語のサポートコピーを使用します。ページのトーンに合わせ、背景が暗いというだけで声を大きくしないでください。価格、期間、クレジットカード要件、連絡先の期待、ダウンロード形式など、決定を変える事実がある場合はそれを明示します。偽の緊急性、裏付けのない節約額、隠れた条件、2番目のセールスアーギュメント、お客様の声、機能リスト、ナビゲーションメニュー、または複数の支配的なボタンをブロック内に決して配置しないでください。

セカンダリコピーは、同じ経路上の低コミットメントのニーズに答える必要があります。それぞれが自分のキャンペーンを表現したい内部関係者のための逃げ道になってはいけません。2つのアクションが同等の目立つ価値に値する場合、ページはその目的を解決しておらず、ジャーニー段階に戻って選択してください。

使用する投稿タイプ

postTypesフロントマターは、すべての登録フォーマットをリストしています。それぞれが次のステップを提供できるためですが、要件、バリアント、コミットメントは異なります。

測定

測定は表示インプレッションから始まり、クリックからではありません。ページURL、ページタイプ、journeyStage、プレースメントID、バリアント、ラベル、宛先、実験バージョン、匿名識別子を添付します。識別子を購読、認定デモ、トライアル、注文、または収益完了まで持ち越し、再試行を重複排除します。クリックだけではコンバージョンではありません。

適格セッションあたりの完了コンバージョンと収益、およびページが支援したコンバージョンを比較します。プレースメントとジャーニー段階でセグメント化します。用語集のニュースレターとプロダクトトライアルを組み合わせると、それぞれの目的が隠れてしまいます。宛先とフォームの失敗を確認し、壊れた経路を弱いコピーと誤認しないようにします。

アトリビューションは、タッチポイント間でクレジットを割り当てるモデルであり、CTA単独で成果を引き起こしたという証明ではありません。ファーストタッチ、ラストタッチ、アシストビューにラベルを付けて保持します。2つ目のCTAが追加のコンバージョンを生み出すのか、単にクリックを再分配するのかを判断する際は、管理されたテストを使用します。AI回答と引用ページをトライアル、注文、経常収益に結びつけるプロダクトワークフローについては、収益アトリビューション をご覧ください。

QAチェックリスト

• 1つの目的： ページには1つの名前付きプライマリコンバージョン成果があり、すべてのCTAがそれをサポートしている。
• ジャーニー適合： コミットメントがjourneyStageに一致している。認知コンテンツが高摩擦のセールス要求に直接飛んでいない。
• 獲得された配置： 各要求の前に有用なコンテンツまたは証拠がある。CTAが定義、ステップ、表、警告、評価、ソースノートを中断していない。
• 頻度： 自動バナー、ニュースレターフォーム、インラインボタン、スティッキーサイドバーを含む総数が長さベースの上限内にある。
• カスケード確認： miniBannerCtaPositionが意味的に適切なH2を指している。継承されたニュースレター設定が確認されている。不適切なページではminiBannerDisabled = trueが設定されている。
• 具体的なコピー： 見出しが成果を名指し、サポートコピーが35語以内、ボタンテキストが2〜6語で最大40文字。
• 禁止ラベルなし： 「もっと詳しく」「はじめる」「送信」などの一般的なラベルが宛先固有の文言に置き換えられている。
• セカンダリの抑制： セカンダリアクションは視覚的に従属的で、実際の懸念を取り除き、同じジャーニーに留まっている。
• 宛先の一致： すべてのURLが機能し、宛先が予期しないログイン、ダウンロード、セールスコールなしにラベルの約束を果たしている。
• アクセシブルなセマンティクス： ナビゲーションはリンクを使用、現在のページアクションはボタンを使用、フォーカスは可視、順序は論理的、フォームにはラベルとエラーがあり、色だけが階層の信号ではない。
• アセットの整合性： スクリーンショット主導のCTAは、正確な代替テキストを持つ既存の有用な画像を参照している。スクリーンショットキャプチャコメントは壊れたアセットをレンダリングしない。
• トラッキング： インプレッション、クリック、配置、バリアント、ページ、ジャーニー段階、完了した成果が接続可能で、ナビゲーションをブロックせずに重複排除できる。
• 成果レポート： レビューはクリック率のみではなく、適格セッションあたりの完了コンバージョンを使用し、アトリビューションが因果関係の証明として提示されていない。
• レスポンシブレビュー： ブロックは読みやすく、コンテンツを覆わず、狭い幅と広い幅の両方でプライマリアクションが明確である。

FAQ

フロントマターにある5つのレビュー済み質問は、頻度、セカンダリアクション、ジャーニー段階のミスマッチ、カスケード配置機構、構造化データの制限をカバーしています。