SWELLボタンブロックの使い方とカスタマイズ方法｜クリック計測やリンク設定がかんたんにできる！

「リンクをボタン化できる？」

「ボタンをおしゃれにカスタマイズしたい…」

「ボタンでクリック率を計測するには？」

この記事では、そんな方に向けて、SWELLボタンブロックの使い方とカスタマイズ方法を解説します。

SWELLボタンブロックとは…リンクをボタン化できるSWELL専用カスタムブロック

この記事を読めば、あなたも簡単に

• ボタンの色を変えたりアイコンを配置できる
• ボタンにアフィリエイトリンクを設定できる
• ボタンの表示回数やクリック数を計測できる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、おしゃれなデザインのボタン作成と集計したデータでクリック率の改善を図れています。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

＼SWELL購入を検討中の人はこちらもご覧ください！／

本記事に挿入されているSWELLボタンは、リンクを設定していないのでクリックしても飛びません。

SWELLボタンブロックでできること

SWELLボタンブロックでは以下のようなことができます。

それぞれ詳しく解説します。

ボタンのデザインが豊富でおしゃれ

SWELLボタンのデザインは「色」「丸み」「スタイル」を選べ、以下のようなおしゃれなボタンを作成できます。

利用できるSWELLボタンのデザインは、なんと45通り！(＝3つのボタン×3種類の丸み×5種類のスタイル)

豊富なカスタマイズ性から、自サイトのデザインとの相性の良さだったり、ユーザーに与えたい印象を考慮して選べます。

ボタンにアイコン画像を配置できる

SWELLではツールバーからテキスト内にアイコン画像を配置できますが、SWELLボタンにも以下のようなアイコン画像を配置できます。

アイコン画像の種類は、ザッと数えただけでも1000種類以上！

どれを選べばいいか迷ってしまうくらいアイコン画像の種類が豊富にあります。

使いたいアイコン画像が見つからない…ということはなさそうです。

アフィリエイトリンクを設定できる

WordPress標準のボタンブロックでは通常のURLしかリンクを挿入できませんが、

SWELLボタンブロックはASPから取得したアフィリエイトリンクをそのまま貼りつけることでボタンを設置できます。

広告タグを改変せずにボタン化できるので、アフィリエイトをする人にとっては重宝するでしょう。

ボタンのクリック率を計測できる

SWELLボタンブロックでは、記事内に挿入したボタンのクリック数や表示回数を計測できます。

このような計測機能がないと、ボタンがクリックされているのか、そもそもクリックされていないのか不明確です。

収益アップを目指したいがクリック数や表示回数の善し悪しが分からないので、

ボタンの設置場所を変えたほうがいいのか、あるいはボタン内のテキストを修正すればいいのか分からないでしょう。

ですが、SWELLボタンブロックの計測機能を使えば、得られたデータで分析や正しい改善ができます。

また、計測したデータをリセットできる計測結果をクリアボタンもついています。

ボタンの配置やテキストを修正したときにリセット機能を使えば、クリック率が改善されたかどうか正しいデータが取れますよ。

SWELLボタンブロックの使い方とカスタマイズ設定

SWELLボタンブロックの使い方はSWELL公式サイトでもまとめられているが、本記事ではより詳しく紹介します。

公式サイト：SWELL専用ボタンブロックの使い方

ちなみに、SWELLボタンブロックは以下2つの方法からも呼び出せます。

自分の好きな方法で呼び出しましょう。

SWELLボタンブロックで設定可能な項目は7つあります。

それぞれ詳しく解説します。

テキストとリンクを入力する

SWELLボタンに直接テキストやリンクを入力できます。

SWELLボタンに入力するテキストは読みやすさを意識してシンプルで見やすく、なるべく1行に収まるようにしましょう。

また通常、記事編集ページでテキストや画像にリンクを貼ってもリンク先URLが表示されません。

ただ、SWELLボタンではリンク先URLも表示されるので、何のリンクを貼ったのか一目で分かります。

スタイルを選ぶ

SWELLボタンではスタイルを以下の5種類から選べます。

基本は自分好みのスタイルを選んでいいと思いますが、使用するのは1～2種類のみに絞ったほうがいいでしょう。

例えば、同ページ内に5種類すべてのスタイルのボタンを使用すると、統一感がなくなるからです。

サイズを決める

SWELLボタンのサイズを以下の4つから、またフォントのサイズを自由に決められます。

ボタンのサイズとフォントのサイズは、ボタン内のテキストが1行に収まるように調整するのがよさそうです。

例えば通常の大きさだと2行になるテキストを、ボタンのサイズを大きく、フォントのサイズを小さくして1行に収めるなど…

フォントがデフォルトのサイズでも1行に収まれば、そのままでOKです。

色と丸みを設定する

SWELLボタンの色と丸みを設定できます。

設定方法は、以下の2パターンから行ってください。

SWELLボタンの色を設定する

SWELLボタンの色を3種類決めることができ、「色を選択」をクリックすると好きな色を指定できます。

カラーピッカー(下図の〇にあたる)を動かして好きな色を直感的に選ぶことができますが、

すでに使いたい色が決まっていたり、サイト内で見つけた色を使いたい場合は、カラーコードを直接入力するといいでしょう。

カラーピッカーとは…画面上に表示された色を選択することで、その色を文字色や背景色に使うことができる機能のこと

カラーコードとは…色を数字やアルファベットなど文字の羅列で表した符号のこと

使いたい色のカラーコードが分からない…カラーコードの調べ方が分からない…という人はGoogle Chromeの拡張機能「ColorPick Eyedropper」を使うとかんたんに調べられますよ。

_{＼クリックで開く／}

ちなみに色をデフォルトに戻したい場合は、デフォルトをクリックすると元に戻せます。

さて、紹介したカラー設定は「ボタンのグラデーションをオンにする」に✔を入れると、SWELLボタンの色をグラデーションにすることもできます。※SWELLボタンのスタイル「ノーマル」「キラッと」のみ有効

以下は、SWELLボタンのグラデーションをオフとオンにしたときの比較画像です。

グラデーションは２種類の色をだんだん変化させていく表現なので、リズムが出て動きのあるような印象を与えますよ。

ちなみに、後から色を変更するとすでに記事に挿入しているSWELLボタンにも反映されてしまうので注意してください。

SWELLボタンの丸みを設定する

SWELLボタンの丸みを「丸みなし」「少し丸める」「丸める」の3つから設定できます。

「丸みなし」だと真面目で緊張感のある印象を与え、「丸める」は柔らかく温かみのある印象を与えますよ。

クリック率を計測させる

SWELLボタンブロックには計測機能がついており、「クリック率を計測する」をオンにすると以下5つのデータを取得できます。

SWELLボタンを設置したばかりであったり、記事が読まれていないと「まだ計測データはありません」と表示されますが、計測データが蓄積していくと下の画像のように計測結果が表示されます。

計測結果を確認するにはつど記事編集ページを開く必要があり面倒ですが、データ分析やクリック率の改善ができるので、広告リンクを設置していれば必ず計測機能を使いましょう。

アイコン画像を配置する

SWELLボタンにアイコンを設定することもできます。

下の画像は、配置できるアイコン画像の一部を抜粋したものです。

アイコン画像を配置したほうが目に止まりやすくなったり、好印象を与えたりするのでおすすめです。

また、配置したアイコンの位置やアイコンサイズも選べますが、デフォルトのままでいいでしょう。

広告タグを入力する

SWELLボタンブロックには、テキスト型の広告タグを入力できる設定エリアが設けられています。

先ほど紹介した、SWELLボタンにテキストとリンクを入力する代わりにASPで取得したアフィリエイトコードを入力すると、広告リンクとそのテキストが反映されます。

ASPとは…広告主とブログ運営者を仲介する企業のこと

広告リンクとテキストが正しく反映されれば、「※HTMLタグ直接入力中」という文字が表示されます。

アフィリエイトコードの取得方法はASPによって異なりますので、詳細は各ASP公式ページをご確認ください。

以下の表に、おすすめのASPとその特徴をそれぞれまとめました。ご参考までに…

ASP		特徴	公式サイト
	A8.net	アフィリエイト満足度13年連続No.1！広告主数は25,000社以上と日本最大級！	A8.net
	afb（アフィb）	女性ジャンルに強い！消費税分を上乗せして支払い！振込手数料が無料！	afb（アフィb）
	もしもアフィリエイト	『W報酬制度』で報酬が12%アップ！初心者ブロガー向けにノウハウ配信！	もしもアフィリエイト
	バリューコマース	Yahoo!ショッピング、Amazon、楽天など大手広告主も参加！報酬単価が高い！	バリューコマース
	アクセストレード	金融、保険、Eコマース、求人、エンタメ、サービスに強い！振込手数料が無料！	アクセストレード
	JANet	金融系ジャンルに強い！報酬単価が高い！	JANet

SWELLボタンブロックのおすすめな活用例

SWELLボタンブロックの使い方とカスタマイズ方法が理解できたら、ここでSWELLボタンのおすすめな活用方法を5つ紹介します。

それぞれ詳しく解説します。

マイクロコピー付きのボタンを設置する

SWELLでは、以下のようなボタンの上にテキストを表示させたマイクロコピー付きボタンを設置できます。

＼マイクロコピー／

マイクロコピーとは…リンクボタン周りなどに添える短い文章のこと

ボタンの上に訴求文を表示できるので、クリック率アップも期待できそうです。

ユーザーが思わずクリックしたくなるような訴求文を書き、収益化につなげましょう。

_{＼クリックで開く／}

ちなみに、SWELLではマイクロコピー付きボタンのサンプルも用意されています。

アイコン画像やテキストを変更して使ってみてください。

ボタンを横並びに設置する

SWELL専用のカスタムブロック「リッチカラム」を使えば、SWELLボタンを横並びに設置できます。

リッチカラムブロックとは…複数の段落ブロックをデバイスごとに表示列数を変えたり、横スクロール表示できるSWELL専用カスタムブロック

デバイス別で横並びにするかどうか選べるので、PCでは横並び、スマホでは縦並びというふうにもできますよ。

ただ、もしスマホ表示でSWELLボタンを横並びにする場合、ボタン内のテキストは2行にならないようにしましょう。

読みづらくもなるし、ボタンも縦に膨張して格好悪くなりますよ。

_{＼クリックで開く／}

また、SWELLボタンには計測機能がついているので、横並びに配置してどっちのボタンのほうがクリック率が高くなるか比較することもできますよ。

広告タグ管理機能と組み合わせて利用する

SWELLにはサイト内に散らばったアフィリエイトリンクなどを一括で管理できる広告タグ管理機能があります。

この広告タグ管理機能に登録したテキスト型広告タグは、SWELLボタンに表示させることができます。

この方法を利用する際は、計測機能が適切に動作するかの確認も含めて自己責任でお願いします。

_{＼クリックで開く／}

この方法で得られた計測結果はWordPress管理画面で確認できるので、わざわざ記事編集ページへ確認しに行く必要はありません。

アフィリエイトリンクボタンにアイコンを配置する

通常SWELLボタンブロックに広告タグを入力した場合はアイコン設定ができず、アイコン画像を配置できません。

ただし、広告コードにアイコンのショートコードを入力することで、アフィリエイトリンクボタンにもアイコンを配置することができます。

この方法は広告タグの改変にあたるので、各ASPの利用規約を確認して問題のない範囲で行ってください。

_{＼クリックで開く／}

ABテストブロックとの併用で収益を最大化する

SWELLボタンブロックにはクリック数を計測できる機能があります。

クリック数が多ければ多いほどいいのですが、どんなボタンの色やテキストを使えばクリック数が多くなるのか分かりません。

SWELLにはABテストブロックがあり、SWELLボタンブロックと併用して使えば、どのボタンでクリック数が多くなるのか判別できます。

ABテストブロックとは…A案とB案の異なる要素を用意し、ランダムに表示させてどちらが高い成果を得られるか検証できるSWELL専用カスタムブロック

_{＼クリックで開く／}

ABテストブロックの使い方について、詳しくは下の記事を参考にしてください。

SWELLボタンブロックを利用するときの注意点

SWELLボタンブロックを利用するうえで注意しなければならないことが以下の2つあります。

それぞれ詳しく解説します。

ブログパーツや同期パターンで使用しない

SWELLボタンをブログパーツや同期パターン(=再利用ブロック)で使用すると、計測機能が利用できなくなります。

計測機能が使えなければ、WordPress標準のボタンブロックとさほど変わらなくなり、SWELLボタンブロックの良さが消えてしまいます。

ですので、ブログパーツや同期パターン(=再利用ブロック)ではSWELLボタンを使用しないようにしましょう。

広告タグを改変する場合はASP規約を読む

SWELLボタンブロックに入力する広告タグを改変する場合は、必ずASP規約を読みましょう。

なぜなら、広告の成果計測の正確性を担保するため、広告タグの改変を禁止しているASPもあります。

ただし、一部の属性の変更は改変とみなされないケースもあるので、詳細は各ASPの利用規約を読んでください。

広告タグを改変について、以下にASPごとの見解をリンクします。

SWELLボタンブロックの使い方とカスタマイズ方法まとめ

今回は、SWELLボタンブロックの使い方とカスタマイズ方法を紹介しました。

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。