SWELLボタンブロックの使い方とカスタマイズ方法|クリック計測やリンク設定がかんたんにできる!
「リンクをボタン化できる?」
「ボタンをおしゃれにカスタマイズしたい…」
「ボタンでクリック率を計測するには?」
この記事では、そんな方に向けて、SWELLボタンブロックの使い方とカスタマイズ方法を解説します。
こんにちは、かめコンパスです!
この記事を読めば、あなたも簡単に
- ボタンの色を変えたりアイコンを配置できる
- ボタンにアフィリエイトリンクを設定できる
- ボタンの表示回数やクリック数を計測できる
ようになります。
私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、おしゃれなデザインのボタン作成と集計したデータでクリック率の改善を図れています。
どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください!
\SWELL購入を検討中の人はこちらもご覧ください!/
SWELLボタンブロックでできること
SWELLボタンブロックでは以下のようなことができます。
- ボタンのデザインが豊富でおしゃれ
- ボタンにアイコン画像を配置できる
- アフィリエイトリンクを設定できる
- ボタンのクリック率を計測できる
それぞれ詳しく解説します。
ボタンのデザインが豊富でおしゃれ
SWELLボタンのデザインは「色」「丸み」「スタイル」を選べ、以下のようなおしゃれなボタンを作成できます。
- 色…3パターンのボタンで色を選べる
- 丸み…「丸みなし」「少し丸める」「丸める」の3種類から選べる
- スタイル…「ノーマル」「立体」「キラッと」「アウトライン」「MOREボタン」の5種類から選べる
利用できるSWELLボタンのデザインは、なんと45通り!(=3つのボタン×3種類の丸み×5種類のスタイル)
豊富なカスタマイズ性から、自サイトのデザインとの相性の良さだったり、ユーザーに与えたい印象を考慮して選べます。
デザインによって与える印象がガラリと変わるよ
ボタンにアイコン画像を配置できる
SWELLではツールバーからテキスト内にアイコン画像を配置できますが、SWELLボタンにも以下のようなアイコン画像を配置できます。
アイコン画像の種類は、ザッと数えただけでも1000種類以上!
どれを選べばいいか迷ってしまうくらいアイコン画像の種類が豊富にあります。
アイコン画像のデザインもおしゃれ
使いたいアイコン画像が見つからない…ということはなさそうです。
アフィリエイトリンクを設定できる
WordPress標準のボタンブロックでは通常のURLしかリンクを挿入できませんが、
SWELLボタンブロックはASPから取得したアフィリエイトリンクをそのまま貼りつけることでボタンを設置できます。
広告タグを改変せずにボタン化できるので、アフィリエイトをする人にとっては重宝するでしょう。
テキストリンクの広告タグをボタン化することでクリック率UPも期待できそう…
ボタンのクリック率を計測できる
SWELLボタンブロックでは、記事内に挿入したボタンのクリック数や表示回数を計測できます。
- ボタン設置後のPV数…ボタンを設置している記事へアクセスされた数
- ボタンの表示回数…PC・スマホ・タブレット画面にボタンが表示された回数
- ボタンのクリック数
- このボタンまで読まれた割合…記事へアクセスしたユーザーのどれくらいの人数が設置しているボタンまで読んだかの割合
- 表示回数に対するクリック率 例)表示回数100回・クリック数10回の場合⇒クリック率10%
このような計測機能がないと、ボタンがクリックされているのか、そもそもクリックされていないのか不明確です。
収益アップを目指したいがクリック数や表示回数の善し悪しが分からないので、
ボタンの設置場所を変えたほうがいいのか、あるいはボタン内のテキストを修正すればいいのか分からないでしょう。
分からずクリック数が良かったものを修正して、結果クリック数が悪くなるといったケースも出てきちゃう…
ですが、SWELLボタンブロックの計測機能を使えば、得られたデータで分析や正しい改善ができます。
アフィリエイターには嬉しい機能だね
また、計測したデータをリセットできる計測結果をクリアボタンもついています。
ボタンの配置やテキストを修正したときにリセット機能を使えば、クリック率が改善されたかどうか正しいデータが取れますよ。
リセット前のデータはエクセルなどに残しておいてね
SWELLボタンブロックの使い方とカスタマイズ設定
SWELLボタンブロックの使い方はSWELL公式サイトでもまとめられているが、本記事ではより詳しく紹介します。
公式サイト:SWELL専用ボタンブロックの使い方
記事編集画面の左上にある+を押して、SWELLボタンをクリックする
これでSWELLボタンブロックを呼び出せます。
SWELLボタンブロックと似たWordPress標準のボタンブロックも存在するので、間違って選ばないように…
WordPress標準のボタンブロックはカスタマイズ性が低く、通常のURLしかリンクを挿入できません。
ちなみに、SWELLボタンブロックは以下2つの方法からも呼び出せます。
\タブの切り替え/
SWELLボタンブロックを呼び出したい段落ブロックの最初に/SWELLボタン、もしくは/swell-buttonを入力する ※「/」は半角で入力してください。
自分の好きな方法で呼び出しましょう。
個人的に「/swell-button」で呼び出すのがおすすめ!マウスを操作せずキーボード入力だけで早くかんたんに呼び出せるよ
SWELLボタンブロックで設定可能な項目は7つあります。
※上のリンクをクリックすると見たい場所へジャンプします。
それぞれ詳しく解説します。
- SWELLボタンブロックを選択する
- 設定をクリックする
- ブロックをクリックする
テキストとリンクを入力する
SWELLボタンに直接テキストやリンクを入力できます。
SWELLボタンに入力するテキストは読みやすさを意識してシンプルで見やすく、なるべく1行に収まるようにしましょう。
スマホ表示でテキストが1行になるようにしてね
また通常、記事編集ページでテキストや画像にリンクを貼ってもリンク先URLが表示されません。
ただ、SWELLボタンではリンク先URLも表示されるので、何のリンクを貼ったのか一目で分かります。
こういう小さな気遣いがストレスフリーにつながるね
スタイルを選ぶ
SWELLボタンではスタイルを以下の5種類から選べます。
基本は自分好みのスタイルを選んでいいと思いますが、使用するのは1~2種類のみに絞ったほうがいいでしょう。
例えば、同ページ内に5種類すべてのスタイルのボタンを使用すると、統一感がなくなるからです。
デザインがバラバラだと読みづらくもなるね
サイズを決める
SWELLボタンのサイズを以下の4つから、またフォントのサイズを自由に決められます。
ボタンのサイズとフォントのサイズは、ボタン内のテキストが1行に収まるように調整するのがよさそうです。
例えば通常の大きさだと2行になるテキストを、ボタンのサイズを大きく、フォントのサイズを小さくして1行に収めるなど…
テキストが2行だと読みにくいし格好悪いよ
フォントがデフォルトのサイズでも1行に収まれば、そのままでOKです。
色と丸みを設定する
SWELLボタンの色と丸みを設定できます。
設定方法は、以下の2パターンから行ってください。
\タブの切り替え/
- 記事編集ページ右サイドバーにある「SWELL設定から色を設定できます。」のリンクから飛んだページ先
SWELLボタンの色を設定する
SWELLボタンの色を3種類決めることができ、「色を選択」をクリックすると好きな色を指定できます。
カラーピッカー(下図の〇にあたる)を動かして好きな色を直感的に選ぶことができますが、
すでに使いたい色が決まっていたり、サイト内で見つけた色を使いたい場合は、カラーコードを直接入力するといいでしょう。
カラーピッカーで好きな色にピンポイントで合わすのは難しいので、基本カラーコードの入力がおすすめ!
使いたい色のカラーコードが分からない…カラーコードの調べ方が分からない…という人はGoogle Chromeの拡張機能「ColorPick Eyedropper」を使うとかんたんに調べられますよ。
\クリックで開く/
ColorPick Eyedropperの導入方法とカラーコードの調べ方はこちら
導入方法
- ChromeウェブストアからColorPick Eyedropperを導入するページを開き、chromeに追加をクリックする
使い方
- 使いたい色があるページで、拡張機能⇒ColorPick Eyedropperの順にクリックする
- 使いたい色をクリックすると、#から始まるカラーコードが調べられます
- カラーコードを先ほどのWordPress管理画面のカラー設定にコピペすると、使いたい色を利用できます。
ちなみに色をデフォルトに戻したい場合は、デフォルトをクリックすると元に戻せます。
さて、紹介したカラー設定は「ボタンのグラデーションをオンにする」に✔を入れると、SWELLボタンの色をグラデーションにすることもできます。※SWELLボタンのスタイル「ノーマル」「キラッと」のみ有効
以下は、SWELLボタンのグラデーションをオフとオンにしたときの比較画像です。
グラデーションは2種類の色をだんだん変化させていく表現なので、リズムが出て動きのあるような印象を与えますよ。
私も第一印象ですぐにグラデーションを使おうと思いました
SWELLボタンの丸みを設定する
SWELLボタンの丸みを「丸みなし」「少し丸める」「丸める」の3つから設定できます。
「丸みなし」だと真面目で緊張感のある印象を与え、「丸める」は柔らかく温かみのある印象を与えますよ。
クリック率を計測させる
SWELLボタンブロックには計測機能がついており、「クリック率を計測する」をオンにすると以下5つのデータを取得できます。
- ボタン設置後のPV数
- ボタンの表示回数
- ボタンのクリック数
- このボタンまで読まれた割合
- 表示回数に対するクリック率
SWELLボタンを設置したばかりであったり、記事が読まれていないと「まだ計測データはありません」と表示されますが、計測データが蓄積していくと下の画像のように計測結果が表示されます。
計測結果を確認するにはつど記事編集ページを開く必要があり面倒ですが、データ分析やクリック率の改善ができるので、広告リンクを設置していれば必ず計測機能を使いましょう。
データがある程度たまってきてから分析・改善をするといいね
アイコン画像を配置する
SWELLボタンにアイコンを設定することもできます。
下の画像は、配置できるアイコン画像の一部を抜粋したものです。
選びきれないくらい多くのアイコン画像があるよ
アイコン画像を配置したほうが目に止まりやすくなったり、好印象を与えたりするのでおすすめです。
また、配置したアイコンの位置やアイコンサイズも選べますが、デフォルトのままでいいでしょう。
広告タグを入力する
SWELLボタンブロックには、テキスト型の広告タグを入力できる設定エリアが設けられています。
先ほど紹介した、SWELLボタンにテキストとリンクを入力する代わりにASPで取得したアフィリエイトコードを入力すると、広告リンクとそのテキストが反映されます。
広告リンクとテキストが正しく反映されれば、「※HTMLタグ直接入力中」という文字が表示されます。
コピペでOKだからめちゃくちゃ楽!
アフィリエイトコードの取得方法は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つ紹介します。
- マイクロコピー付きのボタンを設置する
- ボタンを横並びに設置する
- 広告タグ管理機能と組み合わせて利用する
- アフィリエイトリンクボタンにアイコンを配置する
- ABテストブロックとの併用で収益を最大化する
それぞれ詳しく解説します。
マイクロコピー付きのボタンを設置する
SWELLでは、以下のようなボタンの上にテキストを表示させたマイクロコピー付きボタンを設置できます。
\マイクロコピー/
ボタンの上に訴求文を表示できるので、クリック率アップも期待できそうです。
他サイトを拝見するとほとんどの方がマイクロコピー付きボタンを使用しているね
ユーザーが思わずクリックしたくなるような訴求文を書き、収益化につなげましょう。
\クリックで開く/
マイクロコピー付きボタンの作り方はこちら
SWELLボタンを配置した上の段落ブロックにテキストを入力する
ツールバーのテキストを配置をクリックし、「テキスト中央寄せ」を選ぶ
ツールバーのブロック下の余白量をクリックし、「0 em」に✔する
これでマイクロコピー付きボタンを作れます。
ちなみに、SWELLではマイクロコピー付きボタンのサンプルも用意されています。
アイコン画像やテキストを変更して使ってみてください。
ボタンを横並びに設置する
SWELL専用のカスタムブロック「リッチカラム」を使えば、SWELLボタンを横並びに設置できます。
デバイス別で横並びにするかどうか選べるので、PCでは横並び、スマホでは縦並びというふうにもできますよ。
SWELLはデバイスごとに表示方法を変えられるので便利!
ただ、もしスマホ表示でSWELLボタンを横並びにする場合、ボタン内のテキストは2行にならないようにしましょう。
読みづらくもなるし、ボタンも縦に膨張して格好悪くなりますよ。
スマホ表示ではボタンを横並びにしないほうがいいかも…
\クリックで開く/
SWELLボタンを横並びにする方法はこちら
+⇒リッチカラムの順にクリックする
ページに挿入されたリッチカラムブロックの2カラムそれぞれに、SWELLボタンを配置する
これでSWELLボタンを横並びにできます。
ボタンの横並びをデバイスごとに設定したい場合は、右サイドバーに表示されるリッチカラム設定の「列数」で設定してください。
また、SWELLボタンには計測機能がついているので、横並びに配置してどっちのボタンのほうがクリック率が高くなるか比較することもできますよ。
広告タグ管理機能と組み合わせて利用する
SWELLにはサイト内に散らばったアフィリエイトリンクなどを一括で管理できる広告タグ管理機能があります。
この広告タグ管理機能に登録したテキスト型広告タグは、SWELLボタンに表示させることができます。
つまり毎回ASPから広告コードを取得する必要はなく、事前に登録した広告タグを使いまわせるってこと!
\クリックで開く/
広告タグ管理機能とSWELLボタンを組み合わせて利用する方法はこちら
広告タグ管理機能で作成したテキスト型広告タグの呼び出しコードをコピーする
広告タグ管理機能の使い方については下の記事を参考にしてください。
- 記事編集ページでSWELLボタンブロックを選択し、設定⇒ブロックの順にクリックする
- 「広告タグを直接入力」に先ほどの呼び出しコードを貼りつける
これでテキスト型広告タグをSWELLボタンに設定できます。
実際の投稿ページでちゃんと表示されるかは、プレビューで確認してください。
表示⇒新しいタブでプレビューの順にクリックする
この方法で得られた計測結果はWordPress管理画面で確認できるので、わざわざ記事編集ページへ確認しに行く必要はありません。
計測できるデータ項目は多少違うけど、クリック率はどちらでも確認できるよ
アフィリエイトリンクボタンにアイコンを配置する
通常SWELLボタンブロックに広告タグを入力した場合はアイコン設定ができず、アイコン画像を配置できません。
ただし、広告コードにアイコンのショートコードを入力することで、アフィリエイトリンクボタンにもアイコンを配置することができます。
\クリックで開く/
アフィリエイトリンクボタンにアイコンを配置する方法はこちら
SWELLボタンの「広告タグを直接入力」欄に広告タグを入力する
広告タグのテキストの前にアイコンのショートコードを入力する
広告タグには[アイコン 〇〇]と入力してください。※〇〇はアイコンのショートコード。〇〇の前は半角スペース。
使用できるアイコンのショートコードは、SWELL公式サイトを参考にしてください。
これでアフィリエイトリンクボタンにアイコンを配置できます。
実際の投稿ページでちゃんと表示されるかは、プレビューで確認してください。
ボタンにアイコンがあると見栄えが良くなるね
ABテストブロックとの併用で収益を最大化する
SWELLボタンブロックにはクリック数を計測できる機能があります。
クリック数が多ければ多いほどいいのですが、どんなボタンの色やテキストを使えばクリック数が多くなるのか分かりません。
クリック数の多いほうが収益は増える可能性もあるね
SWELLにはABテストブロックがあり、SWELLボタンブロックと併用して使えば、どのボタンでクリック数が多くなるのか判別できます。
\クリックで開く/
ABテストブロックとSWELLボタンブロックの併用方法はこちら
+⇒ABテストの順にクリックする
- ページに挿入されたABテストブロックのAブロック内の段落ブロックを選択する
- +⇒SWELLボタンの順にクリックする
挿入されたSWELLボタンブロックの広告タグとテキストや色を入力する
これでAブロックの設定完了です。
Bブロックも設定できたら、実際の投稿ページでAブロックとBブロックがランダムに表示され、どちらのクリック数が多いか判別できます。
ABテストブロックの使い方について、詳しくは下の記事を参考にしてください。
SWELLボタンブロックを利用するときの注意点
SWELLボタンブロックを利用するうえで注意しなければならないことが以下の2つあります。
- ブログパーツや同期パターンで使用しない
- 広告タグを改変する場合はASP規約を読む
それぞれ詳しく解説します。
ブログパーツや同期パターンで使用しない
SWELLボタンをブログパーツや同期パターン(=再利用ブロック)で使用すると、計測機能が利用できなくなります。
\タブの切り替え/
計測機能が使えなければ、WordPress標準のボタンブロックとさほど変わらなくなり、SWELLボタンブロックの良さが消えてしまいます。
主に広告リンクを貼ると思うので、計測機能は必須で使いたいね
ですので、ブログパーツや同期パターン(=再利用ブロック)ではSWELLボタンを使用しないようにしましょう。
ブログパーツについて詳しく知りたい場合は、下の記事を参考にしてください。
広告タグを改変する場合はASP規約を読む
SWELLボタンブロックに入力する広告タグを改変する場合は、必ずASP規約を読みましょう。
なぜなら、広告の成果計測の正確性を担保するため、広告タグの改変を禁止しているASPもあります。
ただし、一部の属性の変更は改変とみなされないケースもあるので、詳細は各ASPの利用規約を読んでください。
広告タグの改変によって成果報酬が正しく反映されない可能性もあるので注意してね
広告タグを改変について、以下にASPごとの見解をリンクします。
- A8.net – A8.netでの禁止事項 ※「メディア会員としての禁止行為-広告素材の改変」に記載あり。
- afb(アフィb) – 各種禁止事項ならびに法令違反に関して ※「afbパートナー様の禁止事項-リンクの改変(広告素材を含む)」に記載あり。
- バリューコマース – アフィリエイトNG行為 ※「広告コードを改変する」に記載あり。
- アクセストレード – パートナー利用規約 ※「第15条(禁止事項)-6」に記載あり。
- もしもアフィリエイト – よくある質問 ※「7.広告の掲載について-Q.取得したアフィリエイトタグを書き換えても違反にはなりませんか。」に記載あり。
※はリンク先ページのどこに広告タグを改変についての見解が書かれているかを示す
※2024年10月時点の情報
SWELLボタンブロックの使い方とカスタマイズ方法まとめ
今回は、SWELLボタンブロックの使い方とカスタマイズ方法を紹介しました。
当ブログでは、SWELLに関する記事をいくつか書いてます。
下のカテゴリーページにまとめていますので、のぞいてみてください。
ためになったという人は“コメント”してくれると嬉しいです!
コメント