インラインCTAボタン：コピー、配置、制限事項

インラインコールトゥアクション（CTA）ボタンとは、記事の流れの中に配置された、視覚的に強調された1つの次のアクションです。これは、テンプレートがプロモーション枠に達したからではなく、ページがアクションを起こす具体的な理由を作り出した後に表示されます。

Check your AI visibility →

レンダリングされた要素は1つの宛先を提供し、読者がそこで何ができるかを示します。競合するアクションや一般的な約束はありません。この抑制によって、インラインボタンはフルCTAブロックと区別されます。

この要素が重要な理由

インラインCTAは、読者の質問が「何をすべきか」から「どこでできるか」に変わる瞬間に配置されたときに機能します。その前の段落は、説明の完了、証拠の提示、結果の確立によってクリックを獲得します。その後、ボタンは相互作用のコストを削減します。読者はナビゲーションをスキャンしたり、サイトを検索したり、新しく理解したタスクにどの製品画面が一致するかを推測したりする必要がなくなります。

これは読者心理であって、装飾ではありません。関連性のあるボタンは、そのコミットメントが現在の意図と一致するため、勢いを維持します。時期尚早のボタンは、ページが答えを提供する前に読者に離脱を求め、繰り返されるボタンはすべての段落が同じ販売に向かうルートのように感じさせます。正確なタイミングによって、解決された局所的なニーズが1つの予測可能なアクションに変換されます。

機械による抽出可能性も同じ理由で重要です。検索システム、支援技術、ブラウザツール、AIエージェントは、完全な視覚的コンテキストなしでリンクラベルに遭遇する可能性があります。「Run the visibility check（可視性チェックを実行）」はアクションと対象を保持します。「Click here」「Go」「Learn more」はそうではありません。実際のリンク先、説明的なアクセシブル名、および通常の文書上の位置により、機械はそのコントロールの機能、遷移先、およびそのコンテキストを提供する先行クレームを識別できます。

この要素は、共有の要素作成ルール にも従わなければなりません。投稿タイプの仕様、要素の仕様、ビジネスルール、またはページレベルの要件が競合する場合、文書化された優先順位ルールがどの指示が優先されるかを決定します。ローカルキャンペーンコピーが安全性、アクセシビリティ、または手順の継続性を上書きすることはありません。

使用すべき場合

インラインCTAは、周囲のセクションが読み続けるよりも有用なローカルな次のアクションを生み出す場合にのみ使用してください。適切なトリガーは次のとおりです：

• 診断の説明の後に、その診断を実行するツールが続く場合
• 比較の結論の後に、該当するプランまたは設定ビューが続く場合
• ケーススタディの結果の後に、それを生み出した方法、製品機能、または評価が続く場合
• 完了したチュートリアルの後に、結果を適用または検証するオプションのアクションが続く場合
• 機能の説明の後に、既存ユーザーがそれを使用できる正確な画面が続く場合

アクションは利用可能で、関連性があり、正確に説明されていなければなりません。宛先に支払い、アカウント作成、ダウンロード、または営業の会話が必要な場合は、その期待をラベルの前または中に明示してください。「View the template（テンプレートを表示）」を未公開のリード獲得フォームに変えたり、「Run the check（チェックを実行）」をデモ予約カレンダーにしたりしないでください。

類似しているが異なるケースはよくあります。関連記事へのリンクは、ボタンとしてスタイル設定されていてもナビゲーションのままです。ニュースレターフォームは、同意と状態の動作を伴う獲得要素です。2つ以上の宛先はCTAブロックまたはナビゲーションモジュールを形成します。繰り返される製品カードのボタンはカード契約に属し、固定コントロールは永続的なインターフェースクロームです。

次のアクションが周囲のインターフェースですでに明らかな場合、宛先が現在のページを繰り返す場合、ページがまだ主要な質問に回答していない場合、またはプレーンな説明的リンクで同じ重要度を伝えられる場合は、この要素を使用しないでください。視覚的な強調は、クリック数を増やしたいという願望ではなく、判断の価値によって正当化されます。

配置する場所

読者は依頼の前に理由を必要とします。アクションを妥当なものにする段落、証拠ブロック、結果、または完了した手順の直後にボタンを配置してください。同じセクション内にトリガーを維持することで、レスポンシブレイアウト、コンテンツ抽出、シンジケーション後も関係性が維持されます。

散文の場合は、完全な段落の後、次の見出しの前に配置します。比較の場合は、証拠と結論を分割するのではなく、資格のある評決の後に続けます。ケーススタディの場合は、まず結果を実証します。ドキュメンテーションの場合は、ユーザーが成果を達成または検証するまで待ちます。

手順にはより厳格な境界があります。インラインCTAを決して配置してはいけない場所：

• すべての読者が完了しなければならない番号付きステップの間
• 指示とその期待される結果の間
• 警告とそれが管理する危険なアクションの間
• コードサンプル、表、引用、チェックリスト、図のキャプション、またはソースノートの中
• フォーム送信コントロール、購入ボタン、ダウンロードコントロール、ペイウォール、または別のCTAの隣
• 警告、免責事項、同意要求、またはエラーメッセージのすぐ上または下

手順を中断すると、フォーカスが変わり、出口が作られ、読者が状態を失ったり、検証をスキップしたり、コピーした値を忘れたりする可能性があります。オプションの製品アクションが手順の途中に属する場合は、それをプロモーションではなく、明確にラベル付けされたオプションステップまたは分岐にしてください。

個別のコンバージョン依求の間には、少なくとも1つの完全な実質セクションを確保してください。短いページでは、最後のCTAがすでに同じアクションを提供している場合は、インラインCTAを省略してください。ページ全体の最大値は、1,500語未満で1つのコンバージョン依求、1,500〜2,499語で2つ、2,500語以上で3つです。インラインボタン、バナー、ニュースレターフォーム、固定プロモーション、最後のCTAパネルをすべて合計してカウントします。これらは上限であり、目標ではありません。

構成要素

ラベル付けされた領域はテキストでも定義されているため、スクリーンショットが存在する前でも仕様は使用可能です：

1. トリガーコンテキスト： このアクションが今役立つ理由を説明する先行の文またはブロック。
2. アクションラベル： 次の画面または結果を予測する短い動詞＋目的語のフレーズ。
3. 宛先： ラベルの約束を果たす1つの有効なURL。
4. コントロール境界： クリックまたはタップ可能な完全な可視ターゲット。精密な操作を必要としない大きさ。
5. フォーカスインジケーター： 色の変化のみに依存しない可視のキーボード状態。
6. 方向性の手がかり： 単語を補完するが決して置き換えない、オプションの矢印または外部リンクの手がかり。
7. クリアスペース： ボタンを本文リンク、フォーム、警告、その他のコントロールから区別するための十分な分離。

トリガーはボタンの外側にあっても、編集上の構成要素に属します。トリガーがない場合は、CTAを削除または移動してください。

デザイン例

バリエーションは階層や動作を表現します。追加のアクションを許可するものではありません。

プライマリ

ローカルコンテキストが意図を確立した場合に、ページのメインコンバージョンアクションに最も視覚的に強い処理を使用します。同じビューポート内にプライマリアクションは1つだけです。

セカンダリ

ページのプライマリアクションが別の場所に存在し、このボタンが同じジャーニーのより低いコミットメントのステップを進める場合に、より控えめなアウトラインまたはニュートラルな処理を使用します。「セカンダリ」は視覚的な階層を表し、2番目の隣接する選択肢ではありません。

ダウンロード

コントロールをアクティブにすると即座にファイルがダウンロードされる場合にのみ、ダウンロード処理を使用します。ファイルタイプと、既知の場合はおおよそのサイズを近くのテキストに含めて、アクションが驚きにならないようにします。ダウンロード動作の代わりとしてtarget="_blank"を使用しないでください。

レスポンシブ全幅

全幅は3つのバリアントのうちの1つのレスポンシブ表現であり、4番目の意味的バリアントではありません。狭い画面でのみ、ターゲットサイズとラベルの折り返しを改善する場合に使用します。ワイドな記事カラムで2語のデスクトップボタンを引き伸ばさないでください。

パラメータ

契約は意味と動作を格納します。カラートークン、ボーダー半径、アイコンサイズ、ホバーアニメーションは、作成されたコンテンツではなくレンダラーに属します。

ariaLabelは、隠されたプロモーションコピーではなく、必要な明確化のためのものです。そのアクセシブル名には、音声制御ユーザーがコントロールを識別できるよう、可視の単語を含めるかそれに近いものにする必要があります。新しいコンテキストを開くことが真に必要な場合にのみ_blankを設定し、その動作を開示してください。使用する場合は、プラットフォームの現在のセキュリティ処理で新しいコンテキストを保護し、戻るための明確なルートを維持してください。

ポータブルソースはラベルをtextまたは短い本文として受け入れます。両方が存在する場合はtextが優先されます。アダプターはその優先順位、宛先、および動作を維持します。

構文とコード例

ポータブルディレクティブが意味を定義します。プラットフォームアダプターは、既存のコンポーネントで必要な場合にのみ異なるフィールド名を使用できます。同じラベル、宛先、バリアント、およびアクセシブルな動作を維持する必要があります。

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

:::inline-cta-button{url="https://app.amicited.com/" variant="primary" placementId="after-visibility-explanation" showArrow="true"}
Check your AI visibility
:::

本文が可視ラベルを提供します。ディレクティブは、チェックを関連性のあるものにする説明の完了後に属します。

Hugo

このサイトにはインラインボタン用のショートコードはなく、必要もありません。デザインシステムのボタンクラスを持つ単一のアンカーとして要素をレンダリングします：

<p><a class="btn btn-accent" href="https://app.amicited.com/" aria-label="Check your AI visibility in AmICited">Check your AI visibility &rarr;</a></p>

プライマリアクションにはbtn-accentを、周囲のセクションがすでに強い呼びかけを持っている場合はbtn-ghostを使用します。どちらのクラスもhome.cssに由来し、このセクションのすべての記事とランディングページが読み込みます。

避けるべきことが2つあります。テーマのbuttonsショートコードはTailwindベースであるため、これらのページではスタイルが適用されずにレンダリングされます。また、設定をJSON属性として受け取り、Hugoは属性の内部の二重引用符を位置パラメータとして解析し、「名前付きパラメータと位置パラメータを混在できません」というエラーでビルドに失敗します。ショートコードが構造化入力を真に必要とする場合は、table-simpleやlist_with_iconが行うように、開始タグと終了タグの間の内部コンテンツとしてJSONを渡します。

WordPressブロック

<!-- wp:amicited/inline-cta-button {"url":"https://app.amicited.com/","variant":"primary","placementId":"after-visibility-explanation","showArrow":true} -->
<a class="wp-block-amicited-inline-cta-button" href="https://app.amicited.com/">Check your AI visibility</a>
<!-- /wp:amicited/inline-cta-button -->

ショートコード互換のWordPress実装は以下を使用できます：

[inline_cta_button url="https://app.amicited.com/" variant="primary" placement_id="after-visibility-explanation" show_arrow="true"]Check your AI visibility[/inline_cta_button]

レンダラーがプレゼンテーションと分析を担当し、編集者は約束、宛先、配置を担当します。

例

良い例

AI可視性ベースラインがどのように検索エンジンがブランドに言及しているか、どのソースを引用しているかを明らかにするかを説明するセクションの後：

You now have the inputs needed to establish the baseline. Run the check for your domain, save the date and selected market, and use those same settings for the next comparison.

Check your AI visibility

これが機能する理由は、コンテキストが説明を完了し、何を保存すべきかを述べているからです。ラベルには動詞と具体的な目的語があり、宛先はそれを即座に実行でき、競合するアクションはありません。

悪い例

5ステップの設定のステップ2と3の間に挿入：

今すぐ爆発的な成長を解禁しよう！

たとえ宛先が有効であっても、これは悪い例です。未完了のタスクを中断し、アクションを指定する代わりに証明不可能な結果を使用し、クリック後に何が起こるかを隠しています。また、読者が検証前に設定を放棄するリスクもあります。関連するアクションはステップ5の後に移動し、「Open citation monitoring（引用モニタリングを開く）」などの実際の宛先に合わせてラベルを書き直してください。アクションがステップ3に必要な場合は、CTAとして提示するのではなく、そのステップの一部にしてください。

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

インラインCTAはスタンドアロンのSchema.orgタイプには対応しません。CTA、button、conversionActionプロパティを発明しないでください。宛先は、それを包含するエンティティの有効なプロパティ（確立されたオファーやソフトウェアアプリケーションのURLなど）にすでに属している場合がありますが、それは可視ページとそのスキーマタイプがそれをサポートしている場合に限ります。ボタン自体は構造化データの資格を追加しません。

ナビゲーションにはhref付きのアンカーを使用します。アクティベーションが現在のインターフェースを変更する場合、フォームを送信する場合、またはダイアログを開く場合はbuttonを使用します。ナビゲーションにはスタイル付きアンカーが正しく、ボタンとJavaScriptは標準のリンク動作を削除し、宛先を不明瞭にします。

可視ラベルはコンテキストから切り離されても意味をなさなければなりません。重複した「Learn more」リンクは、スクリーンリーダーのリンクリストを無意味にします。異なる宛先には固有のラベルを付け、アクセシブル名を可視の目的と一致させ、アイコンは装飾として扱うかテキストと同等の意味を与えてください。

キーボードフォーカス、ズーム、リフロー、タッチをサポートします。スペースが同等のアクセシブルターゲットを提供しない限り、44×44 CSSピクセルのターゲットを目指してください。削除されたフォーカスアウトラインは明確に可視のものに置き換え、すべての状態でコントラストを維持してください。

無効化されたCTAは避けてください。アクションが利用できない場合は、その理由と何を変更すべきかを説明してください。aria-disabled="true"だけではリンクのナビゲートを防げません。必要な場合にのみ新しいコンテキストを使用し、それを開示してください。

分析はアクティベーションをブロックしたり、アクセシブル名を書き換えたりしてはいけません。ラベルが変更されるため、安定した配置、宛先、およびバリアントを追跡してください。個人データをURLや属性にエンコードしないでください。

作成ルール

ボタンは1つの決定を解決します。命令形の動詞と具体的な目的語を付けてください：「Compare monitoring plans（モニタリングプランを比較）」または「Download the migration checklist（移行チェックリストをダウンロード）」。文中スタイルを使用し、差別化する単語を先頭に配置してください。

ラベルは2〜6語、できれば16〜40文字に抑えてください。特定のファイルダウンロードなど、アクションを開示するために必要な場合にのみその範囲を超えてください。読者が前提条件、コスト、アカウント要件、ファイルタイプ、または宛先の動作を知る必要がある場合、近くの補足コピーは最大25語の1文を使用できます。ボタン自体が文になってはいけません。

コミットメントをコンテキストに合わせてください。「See the workflow（ワークフローを表示）」は説明の後に適切ですが、「Book an implementation call（導入ミーティングを予約）」にはより強い購入エビデンスが必要です。クリック前にサインアップ、支払い、ダウンロード、または営業連絡を明示してください。「free（無料）」は、約束されたアクションが支払いなしで真に利用可能な場合にのみ使用し、重要な制限を近くに記載してください。

ラベルまたは要素内に以下のものを決して入れないでください：

• 裏付けのない最上級表現、保証、または「10x your growth（成長を10倍に）」などの成果
• 実際の期限に関係のない人為的な緊急性、カウントダウン、希少性、または恐怖
• 2つ目のボタン、ドロップダウン、フォームフィールド、チェックボックス、価格、推薦文、または段落
• 必須の手順説明、警告、同意条件、または法的資格
• 生のURL、トラッキングコード、説明のない略語、絵文字、または装飾的なアイコンのみのラベル
• 特定の目的語のない「Click here」「Submit」「Go」「Yes」「Continue」、または「Learn more」

頻度制限は記事の目的を保護します。デフォルトではインラインCTAを使用しません。セクションが意思決定ポイントを作り出す場合に1つ追加します。1,500語未満のページでは最大1つ、1,500〜2,499語では最大2つ、2,500語以上では最大3つまでとし、ページにバナー、フォーム、固定プロモーション、または最後のCTAも含まれている場合はそれらの数を減らしてください。連続するセクションで同一のインラインボタンを決して繰り返さないでください。

トーンは直接的で、穏やかで、釣り合いが取れている必要があります。ラベルはアクションを説明し、周囲のエビデンスが欲求を生み出します。弱いコンテキストを補うためにより強いボタンコピーが必要に思える場合は、代わりにコンテキストを改善してください。

使用する投稿タイプ

postTypes配列がこの関係の機械可読ソースです。リストされた各フォーマットには依然として真のローカルな意思決定ポイントが必要であり、包含はすべてのページにボタンを必須とするものではありません。

QAチェックリスト

• 先行コンテンツが、このアクションを今行う具体的かつ完全な理由を作り出している。
• 要素が正確に1つのアクションと1つの有効な宛先を含んでいる。
• 宛先が、未公開のサインアップ、支払い、ダウンロード、または営業ステップなしでラベルの約束を果たしている。
• ラベルが2〜6語で明確な動詞と目的語を使用している。
• コピーに裏付けのない主張、人為的な緊急性、曖昧な「Learn more」、またはアイコンのみの意味が含まれていない。
• バリアントが階層と一致している：プライマリ、セカンダリ、または真のダウンロード。
• CTAが完全な段落、結論、結果、または手順の後に表示されている。
• 番号付きステップ、指示/結果のペア、警告/アクションのペア、またはその他の不可分ブロックを中断していない。
• 別のCTA、フォームコントロール、購入アクション、警告、免責事項、同意要求、またはエラーの隣に配置されていない。
• 他のどのコンバージョン依求からも少なくとも1つの実質セクションで区切られている。
• ページレベルの依求の総数が長さベースの上限を下回っている。
• ナビゲーションは実際のhrefを持つアンカーを使用し、ページ内動作はボタンを使用している。
• 可視ラベルがスクリーンリーダーのリンクリストと機械抽出においても意味を保っている。
• アクセシブルラベルが可視の目的と一致し、追加のプロモーションコピーを隠していない。
• キーボードフォーカスが可視であり、ターゲットが操作可能であり、すべての状態でコントラストが維持されている。
• 狭い画面でのレンダリングが完全なラベルを維持し、隣接コンテンツと衝突していない。
• 新しいウィンドウとダウンロードの動作が必要であり、開示されている。
• 分析が安定した配置識別子を使用し、ナビゲーションを遅延させたり個人データを公開したりしていない。
• CTAに対してサポートされていないSchema.orgプロパティが追加されていない。
• ポータブルMarkdown、Hugo、WordPressのバージョンが同じアクションと宛先を維持している。
• スクリーンショット要件は、名前付きアセットが存在するまでコメントとして残されている。

FAQ

記事にはいくつのインラインCTAボタンを含めるべきですか？

デフォルトでは使用せず、真の意思決定ポイントでのみ1つ追加します。1,500語未満の記事では最大1つ、1,500〜2,499語では2つ、2,500語以上では3つまでとします。バナー、フォーム、固定プロモーション、最後のCTAも同じ制限にカウントされるため、実際のインライン許容数はしばしば少なくなります。

インラインCTAボタンを2つのステップの間に配置できますか？

いいえ。読者が完了した結果、安全な一時停止、またはオプションの分岐に到達するまで、手順は中断しないでください。必須ステップの間のCTAは、読者が離脱したり、状態を失ったり、検証をスキップしたりする原因になります。手順の後に配置するか、必要なアクションをプロモーションではなく明示的なステップにしてください。

インラインCTAはリンク要素とボタン要素のどちらを使用すべきですか？

アクションが別のURLに遷移する場合（通常のCTAのケース）は、スタイル付きリンクを使用します。現在のページ上でのアクション（フォーム送信やダイアログの表示など）にはボタンのみを使用します。意味論的な選択が視覚的な外観よりも重要です。

「Learn more」は許容可能なボタンコピーですか？

通常は不可です。段落から切り離されると意味を失い、リンクリストに重複した役に立たないエントリを作成します。代わりに、主題または結果を指定してください：「Compare monitoring plans（モニタリングプランを比較）」「View the migration workflow（移行ワークフローを表示）」「Run the visibility check（可視性チェックを実行）」。

インラインCTAボタンにはスキーママークアップが必要ですか？

いいえ。スタンドアロンのCTAスキーマタイプはありません。リンクを可視かつ意味的に正しく保ち、それを包含するエンティティの確立されたプロパティが真にそれを必要とする場合にのみ、そのURLを構造化データに含めてください。CTA固有のプロパティを決して発明しないでください。

インラインCTAは、完了した思考から有用なアクションへの最短ルートのように感じられるべきです。その位置を獲得し、宛先を明確に示し、すべての手順を中断から保護してください。