CTAは、読者が次の行動を判断できる場所に置きます。末尾まで読まれる前提にせず、結論・比較・実例の後で案内する内容を決め、その後にボタンの文言と見た目を調整します。
この配布JSONは、Styles & Scripts、Panel、Controls Conditions（Pro）を使う既存環境向けです。見た目のCSSを出力する機能が必要なため、入力コントロールの種類だけで無料版へ対応しているとは判断できません。以前の「無料版の範囲で組める」という案内を訂正します。
Lazy Blocksに触れるのが初めての方は、先にLazy Blocks使い方完全ガイドで基本操作を確認してから戻ってきてください。
- 「渾身の記事を書いたのに、アフィリエイトボタンがクリックされない……」
- 「テーマ標準のボタンでは、読者の視線を止めるには少し弱い」
- 「でも、ボタンのために重いプラグインを増やすのは避けたい」
先に「クリックすると何が分かるか」を決め、その後で見た目を調整しましょう。この記事では完成デモと各設定、配布JSONの導入前に確認する点を紹介します。
完成デモ：文言・サイズ・アニメーションを確認
このブロックでは、ボタン本体と補足文を一緒に設定できます。料金の確認、資料の閲覧、ダウンロードなど、リンク先の実際の行動に合わせて文言を付けます。
購入前の読者には条件を確認する導線、すでに導入した読者には設定手順への導線を置くと、記事と次の行動がつながります。
1. アニメーションの種類と使いどころ
設定パネルから、ボタンの雰囲気を一瞬で変えるアニメーションを選択できます:
- 炭酸 (Bubbles): 泡が昇る演出で「特別感」を演出。
- キラリ (Shine): 高級感を出し、視線をボタンへ誘導。
- 波紋 (Ripple): ボタンの存在感をダイナミックに強調。
- その他: 鼓動 (Pulse)、震え (Vibrate)、発光 (Glow) など、状況に合わせて使い分けが可能です。
また、特殊アニメーションも用意しております。
2. クリック後の内容を伝える補足文
ボタン上の補足文には、対象プランや確認できる内容を短く書きます。期限や割引を載せる場合は、実際の条件を確認し、終了後に更新できるようにしてください。
3. あらゆるテーマに馴染む柔軟なデザイン
形状とデザインを組み合わせて調整できます。候補を一つ選んだら、まず文言が途中で折れずに読めるかをスマホで確認します。
ボタンサイズは特大・大・中・小から選べます。大きさだけで目立たせず、前後の説明との余白も合わせて確認します。
4.豊富なカラープリセットとカスタム
色はプリセットまたはカラーピッカーで変更できます。背景との区別と文字の読みやすさを優先して選んでください。
また、トグルをONにすることでグラデーションを実装することができます。
「既存プラグイン」との差別化
テーマ標準のボタンで必要な説明と見た目を作れる場合は、そのまま使えます。動きや補足文の設定を複数記事でそろえたいときに、このブロックが候補になります。
効果を見るときは、文言・位置・色を一度に変えすぎないようにします。記事閲覧数に対するクリックの割合を比較し、使いやすさも確認しましょう。
「炭酸（Bubbles）」の泡アニメーションは、初期実装では選んでいないボタンにまで泡エフェクトのレイヤーが常時表示されてしまうバグがありました。
CSS側で「該当のアニメーションが選択されているときだけレイヤーを表示する」条件を明示的に指定して直しています。装飾用のCSSを自作するときは、こういう「使っていない機能のスタイルが漏れ出す」パターンに注意すると事故が減ります。
CTAを末尾だけに置く前に、読者が判断する場所を探す
| 目的 | 選び方 |
|---|---|
| 料金・比較記事 | 対象者と結論を示し、比較条件を読んだ直後に「料金と契約条件を確認」。 |
| 使い方・解決記事 | 先に操作や対処を示し、無料の方法で足りない条件が明確になった場所に次の選択肢。 |
| 事例・レビュー記事 | 実例と確認できた限界を示した後に、同じ用途で試すための条件案内。 |
記事末尾にしかCTAがなければ、その前に読むのをやめた人へ案内が届きません。一方、判断材料の前に購入ボタンを置くだけでも選ぶ理由が足りません。読者が「自分向けか」「何ができるか」「費用はいくらか」を理解した節目を候補にします。
WordPress標準なら「ボタン」ブロックを追加し、文言とリンク先を設定します。テーマにCTA設定がある場合は、その表示対象も確認します。本文中の説明を含むCTA欄と、リンクだけのボタンを分け、同じ画面で競合する主な行動を増やしすぎないようにしてください。
文言は「こちら」よりも「月額と更新料金を確認する」のように行き先で分かる内容を示します。無料と書くなら無料の範囲を近くに説明し、有料トライアルの自動課金条件を小さな文字へ隠さないようにします。テキストリンクは補助的な参照先、ボタンは主な次の行動に使うと整理できます。
スマホでは長い文言、押せる範囲、前後の余白、背景との区別を確認します。追従ボタンは本文や操作を覆わないか点検し、追従するだけでクリックが増えるとは決めつけません。点滅や揺れは必須ではなく、動きなしでも意味が伝わることを優先します。
改善は「記事閲覧→CTA表示→クリック→成果発生→確定」の順で見ます。記事IDとCTA位置・案件を分けて計測し、クリック率が上がっても確定報酬が下がっていないかを確認します。比較するときは流入数・端末・期間の違いを考慮し、短期間の少数クリックだけで勝ちと判定しないようにしましょう。
配布用JSONファイルダウンロード
下のJSONを読み込み、検証用ページで文言とリンク先を設定してください。スマホ表示とリンク動作を確認してから、本文の判断材料を読み終えた位置へ置きます。
入力欄やJSONの扱いが分からない場合は、ブロックの設定・インポート手順を参照してください。既存の環境に合うか、検証用ページで確かめてから使用します。
配布データの動作条件と読み込み手順
この記事のJSONは、記載した環境向けのブロック定義です。プラグイン本体のZIPとは別のファイルです。動作条件を確認し、バックアップを取ったうえで検証用ページへ読み込んでください。
CSS・JavaScriptをStyles & Scriptsで管理している配布物は、その出力機能が必要です。入力コントロールが無料版に含まれていても、同じ見た目や動作が再現できるとは限りません。条件が合わない場合は、標準ブロックや無料版向けの配布データを確認できます。
- 配布ページからJSONを保存し、ブロック管理画面のExport / Importで読み込む。
- 一覧に追加された定義を確認し、テスト記事へ一つ配置する。
- 見出し・本文・画像・URLを自分の内容へ置き換える。
- PC・スマホで長文、空欄、クリック、開閉などの動作を確認する。
- 問題がある場合は重ねてインポートせず、読み込み状態とCSS・JavaScriptの出力を確認する。
設定方法はブロック設定の技術ガイドにまとめています。配布物についての連絡はお問い合わせページをご利用ください。
