【Cocoon】CTAボックスの作り方と活用法｜アフィリエイトリンクを効果的に配置

CTAボックス、使ってみませんか？

CTA（Call to Action）は、読者に「次の一歩」を踏み出してもらうための大切なツール。例えば、「今すぐ登録」「詳しくはこちら」「購入する」といったボタンやメッセージがそれにあたります。

特にアフィリエイトやサイトの成果を上げたい方にとって、魅力的でクリックしたくなるCTAボックスが成果を左右します。

この記事では、WordPressテーマ「Cocoon」を使ってCTAボックスを自作する方法とその活用のコツをご紹介します。

ブロックエディタの標準機能を使うので初心者でも簡単。

アフィリエイトリンクを効果的に配置してクリック率アップを目指しましょう！

この記事の内容

特に「余白の調整」は、見た目をスッキリさせるためのちょっとした工夫が必要なポイント。

ほんの数行だけCSSを使います。

※具体的な作成手順は有料コンテンツで公開中！詳しくは「作成手順を見る」からチェックしてくださいね。

INDEX

CocoonのCTAボックス機能の特徴

Cocoonテーマには、標準機能としてCTAボックスが搭載されています。

Cocoon標準のCTAボックスの設置例↓

CTAボックス

実際に表示したCocoon機能のCTAボックスです。

メリット

しかし、以下のような制限があります。

制限点

これらの制約を解消するためには、自作のCTAボックスを作成してみましょう！

自作CTAボックスの基本構成と、初心者でも簡単に実践できるレイアウト例をご紹介します。

Cocoonのシンプルで洗練された雰囲気を再現したデザイン。背景色を暗く、文字色を白に設定することで、Cocoonの標準CTAのようなモダンな印象に仕上げます。

例：ボタンを2カラム配置

自作したCTAボックス

Ccooonのデザイン風に自作したCTAボックスです。

複数の選択肢を提示したい場合にぴったりの3カラムレイアウト。商品やサービスの魅力をしっかり伝えたいときに最適です。

例：商品紹介向けCTAボックス（ボタンを3カラム配置）

このデザインは、ユーザーに複数のアクションを提案し、選択の自由度を高めます。

WordPressプラグイン／Pochipp

今回は、この3カラム構成のレイアウトを例にして実際の作成手順を紹介します。

自作CTAボックスの基本構成は以下の4つの要素。Cocoonのブロックエディタを活用すれば初心者でも柔軟にカスタマイズできます。

外枠
- Cocoonの「白抜きボックス」を使用。
- 背景色や枠線の色はブロック設定で簡単にカスタマイズ可能。
- シンプルながら目立つデザインで、コンテンツを際立たせます。
画像（バナー）
- 商品やサービスの魅力を伝えるためのアイキャッチ画像やバナーを配置。
- パソコンとモバイルで適切なサイズになるよう調整しましょう。
- 視覚的なインパクトでユーザーの興味を引きつけます。
コンテンツ
- 商品やサービスの特徴やメリットを簡潔に記載。
- ユーザーが「これ欲しい！」と思えるポイントを強調しましょう。
- 短く、読みやすいテキストで訴求力がアップ！
リンクボタン
- 「詳細を見る」「今すぐ購入」など、行動を促すボタンを配置。
- 目立つ色やサイズでデザインし、クリック率を高めます。
- Cocoonのボタンブロックを使えば、簡単にカスタマイズ可能。