ミニバナー:配置、頻度、カスケードルール
適切なスクロール位置に表示され、ページ全体の頻度制限を尊重し、競合するコンバージョン要求を避ける明確なカスケードを使用するミニバナーを構築する。
ミニバナーは、記事セクション間に挿入されるコンパクトな全カラムのコンバージョンユニットです。直近のセクションが確立した価値を、ページを占有したり読者の現在のタスクを中断したりすることなく、タイムリーな次のステップに変換します。
この例は成果を挙げ、完了した作業に結び付け、宛先を予測しています。その位置は定義の一部です。同じ文言でも、プロンプトと競合他社の説明の前では時期尚早でしょう。
この要素が重要な理由
長い記事は、いくつかの意図の瞬間を生み出します。有益な説明や比較の後、読者は製品を確認したり、ツールを使用したり、リソースをダウンロードしたり、購読したりする準備ができるかもしれません。ミニバナーは、その変化を認識し、ユーザーにナビゲーションを探させることなく対応します。
心理的メカニズムは獲得された割り込みです。バナーは記事が蓄積した注意を消費します。完成した思考の後では、論理的な次のアクションは有益に感じられますが、任意の段落数では広告のように感じられます。繰り返しによって、読者はすべての特徴的なブロックを障害物として扱うことを学びます。
したがって、配置と頻度はコンテンツルールです。スクロール位置は検索ゾーンを提供しますが、直前のセクションが理由を提供します。バナーは「今学んだことをどう活用できるか?」に答えるべきです。
バナーが特別なスキーマを作成しないとしても、機械による抽出可能性は重要です。検索システム、AIエージェント、ブラウザツール、支援技術は、周囲のビジュアルデザインなしで見出し、説明、リンクを抽出する可能性があります。「可視性コックピットを開いて追跡中のプロンプトを比較する」のような自己完結型のステートメントは、アクションとその目的を保持します。「始めてみませんか?」の後に「もっと詳しく」が続くだけでは、オブジェクト、成果、宛先を特定できません。
型付けされたフィールドにより、公開システムは頻度を強制し、配置を解決し、安全な位置がない場合にバナーを抑制できます。スタイル付きの段落では確実に参加できません。共有の要素作成ルール を適用します。目的は外観、アクセシビリティ、安全性、手順の継続性よりも優先されます。
使用すべき場面
実質的な記事が、関連するオプションのコンバージョンをサポートするのに十分な価値を提供した場合にミニバナーを使用します。適切なタイミングは次の通りです:
- フレームワークが読者の問題分類を支援し、製品レポートがそのフレームワークを適用できる場合
- 比較が資格のある判定に達し、ツールが読者自身のケースをテストできる場合
- 調査セクションがギャップを確立し、ダウンロード可能なワークシートが対応策の計画に役立つ場合
- ケーススタディの方法が説明され、サービスが同種の実装を提供する場合
- 独自の分析の後、ニュースレターが同種の将来のアップデートを提供する場合
ページには少なくとも1,200語の実質的な単語が必要です。このしきい値を下回ると、バナーは導入部や終了のコンバージョンに近すぎます。宛先はコピーを即座に満たすものでなければなりません。セールスフォーム、メールゲート、サインイン要件はクリック前に開示してください。
僅差のケースは異なる処理が必要です。サポートリンクはナビゲーションです。文中のボタンはインラインアクションです。ページ末尾のセールスパネルはクロージングCTAです。ニュースレターフォームには同意、検証、プライバシー要件が追加されます。障害、価格変更、法的通知はコンバージョンユニットではありません。
ミニバナーをスペース埋め、ヘッダーアクションの繰り返し、無関係なキャンペーンの宣伝、または弱いコンテンツの補償に使用してはいけません。センシティブな特性に基づいてパーソナライズしてはいけません。周囲のコンテンツが行動する理由を提供できない場合は、省略してください。
配置場所
配置には2つの入力値を使用します。記事進行度は妥当なゾーンを特定し、意味的境界は読者が思考を完了したことを確認します。記事進行度は、導入部後の最初の段落からクロージングCTA前の最後の段落までで測定される、既に通過した実質的な本文コンテンツの割合です。ナビゲーション、ヒーローコピー、目次、脚注、定型文、およびバナー自体はカウントされません。
最初のバナーの場合、推奨ゾーンを記事進行度の35%~55%と定義し、その前に少なくとも600語を要求します。完成したH2セクションの後、または次の見出しが明らかに新しい主題を開始する場合にのみ完全なサブセクションの後に配置します。少なくとも2,500語のページの2番目のバナーには、70%~85%のゾーンを使用します。最初のバナーから少なくとも900語かつ30パーセントポイント離れている必要があります。
配置カスケードは正確な位置を次の順序で解決します:
- 明示的な安全なアンカー: 許可されたゾーン内にあり、すべての隣接チェックに合格する場合、作者指定のセクションIDを使用します。
- 前方の安全な境界: 最初のバナーの場合は40%、2番目のバナーの場合は72%から前方にスキャンし、該当する最初のH2セクション終了位置をゾーン最大値まで探します。
- 後方の安全な境界: 前方の位置が該当しない場合、ゾーン内の最後の該当するH2境界を後方にスキャンします。
- 抑制: どちらの検索でも該当する位置が見つからない場合、何もレンダリングせず、QA用に
no-safe-anchorを記録します。生の段落数にフォールバックしてはいけません。
この順序は安全な編集アンカーを維持し、自動配置を決定論的にし、省略を有効として扱います。レンダリング済みまたはソースブロックから一貫して進行度を計算し、明示的なバナーを黙って異なるトピックに移動してはいけません。
ミニバナーは以下の位置に配置してはいけません:
- 必須ステップ間、または指示とその期待される結果の間
- 主張とその引用、チャートとその説明、引用とその帰属の間
- 警告、免責事項、エラー、同意要求、または安全に関する注意事項の直前または直後
- リスト、表、図、コードサンプル、アコーディオン、タブパネル、ブロッククォート、FAQ回答、またはフォームの中
- インラインCTA、オファー、商品カード、ニュースレターフォーム、ペイウォール、購入コントロール、または別のバナーの隣
- 見出しの真下(見出しが最初の説明段落から切り離される場合)
- 固定プロモーションや挿入された広告枠と同じ境界
バナーと非安全関連のコールアウト、メディア、またはインタラクションの間には、1つの実質的なブロックを要求します。レスポンシブレイアウトでは、スタックされたソース順に対して隣接性をテストします。
頻度はページ全体に適用されます。1,200語未満ではミニバナーを0個、1,200~2,499語では最大1個、2,500語以上では最大2個とします。本文内のすべてのプロモーションユニット(ミニバナー、インラインコンバージョンボタン、ニュースレター獲得、オファーボックス、製品プロモーション)を、1,500語未満では1つ、1,500~2,499語では2つ、2,500語以上では3つという上限にカウントします。制限が競合する場合は、低い方の数が優先されます。制限はより少なく使用する許可であり、埋めるべき目標ではありません。
構成要素
- 配置アンカー: 安定したセクションIDと計算された進行度値。このバナーがなぜこの境界に配置されるかを説明します。
- コンテナ: 視覚的に境界のある全カラム領域で、通常のドキュメントフローの一部として残ります。
- 見出し: 前の見出しに依存せずに、具体的な成果または次のステップを示します。
- 説明: 完了したセクションをアクションに結び付け、サインイン、メール取得、支払い、または営業会話などの重要なコミットメントを開示します。
- 主要アクション: 約束された内容を満たす1つの記述的なリンクまたはフォーム送信コントロール。
- セカンダリアクション: 主要なコミットメントの準備ができていない読者向けの、オプションの控えめなルート。2つ目のキャンペーンではありません。
- クリアスペース: バナーを散文から分離し、近くのコントロールがバナーに属しているように見えるのを防ぎます。
- 配置ID: 変更可能な段落番号ではなく、意味的アンカーを説明する安定したアナリティクスラベル。
レンダラーが表示を担当します。作者は約束、資格条件、宛先、推奨アンカー、バリアントを担当します。
デザイン例
すべてのバリアントは1つの配置と頻度の契約を共有します。異なるビジュアル処理によって別のプロモーション枠が作成されることはありません。
単一アクションCTA
直前のコンテンツが明確な次のステップを示している場合、1つの主要アクションを使用します。これがデフォルトです。
主要アクションとセカンダリアクション
2つのアクションは、「評価を開始」と「方法論を表示」のように、同じジャーニーを異なるコミットメントレベルで表す場合にのみ使用します。階層を明確にし、両方の宛先を直前のセクションに関連させます。
リソースまたはダウンロード
このバリアントは、直接利用可能なテンプレート、チェックリスト、データセット、またはガイドに使用します。形式を明記し、アクションの前にゲートを開示します。クリックですぐにダウンロードされる場合は、ファイルタイプと(既知の場合)おおよそのサイズを記載します。
ニュースレター獲得
ニュースレターバリアントは、将来のメッセージの内容を示した後にのみ使用します。メールラベル、同意、プライバシー先、検証、成功状態、エラー状態が必要です。
レスポンシブスタック
狭い画面では、テキストが先に来て、アクションは同じソース順で後に続きます。ボタンは全幅になる場合がありますが、バナーが固定表示になったり、コンテンツを覆ったり、次の見出しを人工的なインタースティシャルの下に押しやったりしてはいけません。
パラメータ
正規の契約は、作者の意図と配置計算を分離します。「ソース」はアダプターが値を取得する場所を示します。バナーが無関係なページメタデータからマーケティングコピーを推測してよいという意味ではありません。
| 名前 | 型 | 必須 | 最小/最大 | デフォルト | ソース | |
|---|---|---|---|---|---|---|
title | プレーン文字列 | はい | 4~10語、70文字 | なし | 本文の最初の見出し | |
description | プレーンテキスト | はい | 12~28語、160文字 | なし | 最初の見出し後の本文 | |
variant | 列挙型 | いいえ | cta、resource、またはnewsletter | cta | 属性 | |
primaryText | プレーン文字列 | はい | 2~6語、40文字 | なし | 属性 | |
primaryUrl | URL | CTAとリソースで必須 | 1つの絶対またはルート相対URL | なし | 属性 | |
secondaryText | プレーン文字列 | いいえ | 2~6語、40文字 | なし | 属性 | |
secondaryUrl | URL | secondaryTextと共に必須 | 1つの絶対またはルート相対URL | なし | 属性 | |
preferredAfter | 安定したセクションID | いいえ | 1つのID、3~80文字 | 計算されたカスケードアンカー | 属性 | |
placementId | 安定したスラッグ | はい | 3~80文字 | 解決済みセクションIDから派生 | 属性または配置アダプター | |
minProgress | 小数 | いいえ | 最初は0.35~0.55、2番目は0.70~0.85 | 0.35または0.70 | 配置アダプター | |
maxProgress | 小数 | いいえ | 許可ゾーン内でminProgressより大きい | 0.55または0.85 | 配置アダプター | |
campaignId | プレーンスラッグ | はい | 3~80文字 | なし | 属性 | |
emailLabel | プレーン文字列 | ニュースレターのみ | 1~6語、50文字 | メールアドレス | 属性 | |
formAction | URL | ニュースレターのみ | 1つのセキュアなフォームエンドポイント | なし | 属性 | |
consentText | プレーンテキスト | ニュースレターのみ | 10~35語 | なし | 本文 |
本文の最初の見出しがtitleにマッピングされ、最初の段落がdescriptionにマッピングされます。ニュースレターの同意は後続に残ります。secondaryTextとsecondaryUrlはオールオアナッシングのペアです。キャンペーン識別子に個人データを含めてはいけません。
進行度制限はこの仕様で制御されるデフォルトであり、作者がプロモーションを上方に移動するための調整ノブではありません。レンダラーはより厳しい制限を公開しても構いませんが、指定されたゾーン外の値を受け入れてはいけません。preferredAfterが安全チェックに失敗した場合、アダプターはカスケードを実行し、要求されたアンカーと解決されたアンカーの両方を記録します。
構文とコード例
ポータブルディレクティブが正規の作者コンテンツです。プラットフォームアダプターはそのフィールド、安全な配置結果、ソース順、アクセシブルな名前を保持します。
ポータブルMarkdownディレクティブ
:::mini-banner{variant=cta primaryText="Open the visibility cockpit" primaryUrl="https://app.amicited.com/reports/cockpit" preferredAfter="benchmark-your-prompts" placementId="after-prompt-benchmark" campaignId="visibility-cockpit-contextual"}
## See where your brand appears in AI answers
Open your visibility cockpit after you have identified the prompts and competitors that matter.
:::
最初の見出しと段落が表示コピーを提供します。公開アダプターは推奨アンカーを検証し、安全な境界が存在しない場合にコンポーネントを抑制します。
Hugoショートコード
現在のHugo mini-banner-ctaショートコードはCTAフィールドをレンダリングします。配置メタデータは、ショートコードが直接受け入れるようになるまで、ページアセンブリまたは配置アダプターに属します:
{{< mini-banner-cta
heading="See where your brand appears in AI answers"
description="Open your visibility cockpit after you have identified the prompts and competitors that matter."
primaryText="Open the visibility cockpit"
primaryUrl="https://app.amicited.com/reports/cockpit"
>}}
名前付きパラメーターのみを使用します。ソース例はエスケープされており、2つ目のバナーをレンダリングせずにショートコードを文書化しています。プロダクションの配置レイヤーは、これをafter-prompt-benchmarkに関連付け、Hugoがコンポーネントを出力する前に頻度カスケードを適用する必要があります。
WordPressブロック
<!-- wp:amicited/mini-banner {"variant":"cta","primaryText":"Open the visibility cockpit","primaryUrl":"https://app.amicited.com/reports/cockpit","preferredAfter":"benchmark-your-prompts","placementId":"after-prompt-benchmark","campaignId":"visibility-cockpit-contextual"} -->
<h2>See where your brand appears in AI answers</h2>
<p>Open your visibility cockpit after you have identified the prompts and competitors that matter.</p>
<!-- /wp:amicited/mini-banner -->
ブロックを安全でない場所に移動すると、検証警告が表示される必要があります。
例
良い例
究極ガイドがブランドプロンプトをオーディエンスと意図でグループ化する方法を説明し、セクションを実践的なベンチマークで締めくくります。記事進行度43%、1,080語の後に、次のバナーを表示します:
追跡中のプロンプトを1つのコックピットで比較
各プロンプトにどの競合他社が表示され、自社ブランドがどこにないかを確認できます。
可視性コックピットを開く
これは、セクションが特定のニーズを生み出し、宛先が記載されたタスクを実行し、ラベルが単独でも意味を持ち、位置が最初のバナーゾーンと隣接ルールを通過するため、機能します。
悪い例
導入部の第2段落の後、3,000語のガイドが以下を表示します:
ビジネスを変革する準備はできましたか?
今日からAIの力を解き放ちましょう。
もっと詳しく 始める
これはコピーの質を検討する前に失敗しています。読者は有用なセクションを完了しておらず、配置は許可ゾーン外であり、2つの一般的なアクションは理解可能な階層を生み出しません。見出しは根拠のない約束をしており、説明には具体的な対象がなく、どちらのリンクも宛先を予測しません。同じバナーを下方に移動しても、その曖昧な契約は修正されません。
スキーママークアップとアクセシビリティ
ミニバナーは専用のSchema.orgタイプを提供しません。そのテキストは、囲むArticle、TechArticle、WebPage、またはその他の正当なページタイプ内のコンテンツとして残ります。商業アクションを含むという理由だけで、Advertisement、Offer、またはHowToStepとしてマークしてはいけません。その他の構造化データは、可視ページとそのスキーマ仕様がすべての事実をサポートする場合にのみ有効です。
ランドマークがナビゲーションに役立つ場合にのみラベル付きリージョンを使用し、それ以外の場合はasideまたはグループ化されたコンテナを使用します。タイトルをページの見出し階層内に保持します。リンクは<a>でナビゲートし、<button>はフォームを送信するか、ページ内アクションを実行します。アクセシブルな名前は可視の目的と一致する必要があります。
キーボードフォーカスはソース順に従います。フォーカスインジケーターは可視のままである必要があり、ターゲットは適切なサイズと間隔が必要で、ズーム時にコピーがクリップされてはいけません。レスポンシブレイアウトはコントロールを並び替えてはいけません。色、アイコン、ボタンの塗りつぶしのみを状態や優先度の信号にしてはいけません。
ニュースレターの場合、ラベルを入力フィールドに関連付け、プログラムでエラーを公開し、回復可能なエラー後もアドレスを保持し、フォーカスを移動せずに成功を通知します。同意は事前選択されてはいけません。バナーをビューにアニメーション表示したり、配置しきい値でフォーカスを奪ったりしてはいけません。
作成ルール
価値提案を普遍的なスローガンではなく、直前のセクションの続きとして記述します。
- 4~10語(できれば70文字未満)の見出しを使用します。成果、対象物、またはリソースを指定します。
- 12~28語、160文字以内の1つの説明を使用します。コンテキストをアクションに結び付け、重要なコミットメントを開示します。
- 2~6語、40文字以内の1つの主要ラベルを使用します。「開く」「比較する」「ダウンロード」「計算する」「購読する」などの正確な動詞で始めます。
- セカンダリアクションは最大1つまで許可します。同じトピックに関するもので、コミットメントが同等以下である必要があります。
- 必要な同意およびプライバシーテキストを除き、CTAバリアント全体を55可視単語未満に保ちます。
- 有用な場合は読者に直接呼びかけますが、作為的な興奮、恐怖、カウントダウン表現、および宛先が証明できない主張は避けます。
- 抽出された断片が主題を保持するように、見出し、説明、またはアクション全体で主要名詞を繰り返します。
- 読者の判断を変える可能性がある場合、クリック前にサインイン、支払い、メール取得、ファイル形式、または営業連絡先を開示します。
製品機能、 testimonial、価格表、クーポン条件、ナビゲーションリスト、複数ステップフォーム、法的免責事項、星評価、カウントダウン、自動再生メディアの段落、または3つ以上のアクションをミニバナー内に配置してはいけません。「ここをクリック」「もっと詳しく」「Go」「送信」「始める」「力を解き放ちましょう」を、具体的な対象と宛先のコンテキストなしで使用してはいけません。
使用する投稿タイプ
postTypes[]フロントマターがこのマトリックスのソースです。含まれているということは、配置と意図のテストに合格した場合に要素が許可されることを意味し、バナーを必須にするものではありません。
| 投稿タイプ | 典型的なトリガー | 配置に関する注意 |
|---|---|---|
ultimate-guide | 主要なフレームワークまたは実装セクションが完了 | 最初または2番目のゾーン。ピラーナビゲーションの分割を避ける |
how-to-guide | 手順が検証済みの成果に到達 | 必要な全ステップの後のみ、手順の途中では不可 |
listicle-guide | 意味のあるカテゴリのエントリが終了 | 同等のランク付け項目の間に挿入しない |
comparison-a-vs-b | 証拠が資格のある判定をサポート | 判定の後、競合オプションの間には不可 |
best-x-for-y | セグメント固有の推奨が完了 | アフィリエイト開示と証拠を添付したままにする |
alternatives-to-x | 読者が適合性を評価する十分な基準を持つ | 同等の評価の前に1つのオプションを優遇しない |
case-study | 方法と証拠が移転可能な結果を確立 | 証拠の後、次のナラティブフェーズの前 |
buying-guide | 選択基準が実行可能な選択につながる | 基準または意思決定ガイダンスの後、価格の隣には不可 |
cost-guide | コスト要因と利用可能な範囲が説明されている | 資格条件や計算ノートを不明瞭にしない |
service-page | 範囲と適合性が連絡に十分明確 | 1つの資格のあるコンサルテーションアクションを使用 |
solution-page | 問題からワークフローへの接続が確立 | 汎用的なホームページではなく、正確なソリューションアクションにリンク |
feature-page | 機能、オーディエンス、価値が実証されている | 説明の前ではなく、証拠またはワークフローの後に配置 |
original-research | 完全な調査結果が解釈されている | 調査結果を方法や制限から分離しない |
benchmark-report | 読者がベンチマークと次のテストを理解 | リソースまたは製品アクションが解釈の後に続く場合がある |
free-tool-page | ツールが結果を生成または説明した | ツールの主要コントロールを支配的に保つ |
QAチェックリスト
- ミニバナーを検討する前に、ページに少なくとも1,200語の実質的な単語がある。
- 直前のセクションがバナーのアクションに対する具体的な理由を生み出している。
- 最初のバナーは進行度35%~55%の間にあり、少なくとも600語の後に続く。
- 2番目のバナーは2,500語以上のページにのみ、進行度70%~85%の間に表示される。
- 2つのバナーは少なくとも900語かつ30パーセントポイント離れている。
- すべての記事内コンバージョンユニットがカウントされ、低い方の該当頻度上限が使用された。
- 明示的なアンカーまたはカスケード結果は完全なH2境界であり、段落数による挿入ではない。
- カスケードが安全なアンカーを見つけられない場合、バナーは表示されない。
- ステップ、警告、証拠とソースのペア、表、図、フォーム、またはインタラクティブコンポーネントが中断されていない。
- 競合するコンバージョン、購入コントロール、同意要求、または挿入された広告がバナーの隣にない。
- 見出し、説明、ラベル、コミットメント、宛先が作成制限を満たし、互いに一致している。
- 主要アクションとオプションのセカンダリアクションに明確な階層があり、同じジャーニーに関するものである。
- リンク、ボタン、フォームラベル、フォーカス順序、フォーカス状態、エラー、レスポンシブスタッキングがキーボードと支援技術で機能する。
- バナーは色、アイコン、周囲の散文、またはビジュアルレイアウトなしで抽出されても理解可能である。
- サポートされていないスキーマタイプまたはプロパティが追加されていない。
-
placementId、campaignId、要求されたアンカー、解決されたアンカー、抑制理由が、個人データを含まずにQAで利用可能である。 - モバイルレンダリングはバナーを通常のフローに保ち、記事コンテンツを覆ったり押しのけたりしない。
FAQ
以下のよくある質問は、推奨スクロールゾーン、頻度上限、安全な配置カスケード、2アクションルール、スキーマ制限、および非固定表示動作を定義しています。
このセクションの他のチュートリアル
実践する準備はできましたか?
無料チェック · 7日間お試し · クレジットカード不要