こんな方に読んでほしい！
- Webサイトからの申し込みを増やしたい！
- 申し込みページへのクリック数を増やしたい！
- 申し込みページへのリンクボタンに工夫を加えたい！
WordPressプラグイン「MaxButtons」を使ってサービスの申し込みやダウンロードに欠かせないWebサイトのリンクボタンを実際に作りながら解説します。
今回は、思わず押したくなるボタンをWordPressで使えるようにするプラグイン「MaxButtons」の導入方法や使い方、メリットなどについて徹底解説します！
1. 押したくなるボタンを作るには
押したくなるボタンは、記事の本文や固定ページ、カスタム投稿、ウィジェットなどで下記のようなものに使われます。
- サービスの申し込み
- 資料請求
- ダウンロード
- ユーザー登録
いずれも利益につながるような重要な項目ですが、リンクボタンにこだわっていないWebサイトは存在します。
1-1. 押されやすいリンクボタンとは
あなたは次のようなボタンを押したいと思いますか？
リンクボタンは、色や形によって押しやすさや印象が変わってきます。
非常に極端な例ですが、どんなに良いサービスでもこのようなボタンは押したいと思いません。しかし、次のようなボタンならどうでしょうか？
はじめのものよりは押される可能性があると思いませんか？
このように、ボタンのデザインを変えただけでクリック率は確実に上がります。
1-2. 押したくなるボタンの特徴
リンクボタンを作るにあたって、どのようなことに注意すればいいのでしょうか？
先ほどのサンプルで作ったボタンでは、次のことを意識して作りました。
- ページに対して大きすぎず、小さすぎないリンクボタンの大きさ
- リンクボタンの色が暖色系
- リンクボタンを立体的にするために影を設定
- ボタンにマウスがホバーしたときには文字色を白色に変化
- 文字を立体的にするために影を設定
ここに注意！
リンクボタンの適切な色や形は、Webサイトの雰囲気によって変わります。今回作ったリンクボタンが、いかなる場合も正しいというわけではありません。
2. プラグイン「MaxButtons」のメリット
WordPressプラグイン「MaxButtons」は簡単に思いどおりのデザインが作れ、繰り返し利用できることが魅力です。
あなたのWebサイトに合った「押したくなるボタン」を作れば、何度も使いまわしができます！
作ったリンクボタンはショートコードを張り付けるだけなので簡単なのも、使い勝手が良いですよね。
3. プラグイン「MaxButtons」の導入方法
「MaxButtons」はWordPress公式プラグインなので、WordPress管理画面>プラグイン>新規追加 から簡単にインストールできます。
右側のキーワード検索テキストボックスで「 MaxButtons 」と検索すると1番目にヒットしますので、「今すぐインストール」をクリックし、有効化します。
インストール済みプラグイン一覧に「MaxButtons」 が表示されていればインストール完了です。
4. プラグイン「MaxButtons」の操作方法
「MaxButtons」の設定方法や操作方法、注意点について徹底解説します！
今回は下記のようなサンプルのリンクボタンをプラグイン「MaxButtons」を使って作ります。
WordPress管理画面>MaxButtonsから「MaxButtons」のページに移動して「Add New」をクリックし、リンクボタンの作成画面に入ります。
4-1. 操作画面の構成
それぞれの設定項目を変更すると画面右上のプレビューウインドウがリアルタイムに変更されるので、それを目安にして設定項目を変更します。
「MaxButtons」の主な画面構成は下記のとおりです。
①Preview ... プレビューウインド
②Basics ... 基本設定
③Border ... ボタンの縁取り設定
④Background ... ボタンの背景設定
⑤Text Shadow ... 文字の影つけ設定
⑥Save ... 保存ボタン
4-2. 一般設定
①プレビューウインドの左下をクリックすると、プレビューウインドの背景色を変更できます。Webサイトの背景色と同じにすれば、どのようなイメージで表示されるかがよくわかります。
一般設定で変更したのは次の項目です。
①Button Name ... 「MaxButtons」の管理画面で表示される名前
②URL ... リンク先URL
③ボタンオプション ... リンクの表示方法とボタンの属性
④Button Tooltip ... ボタンをマウスホバーした時に表示される吹き出し
⑤Text ... ボタンの表面に表示される名前
⑥Text Color ... ボンタの文字色の通常表示とマウスホバー時の表示
⑦Description ... 「MaxButtons」の管理画面で表示される詳細の説明
ここがポイント！
③ボタンオプションの「Open in New Window」と 「Use rel="nofollow"」は、「リンクを開くときには新しいウインドウで開く」と「このボタンはGoogle検索にフォローさせない」という意味なので、どのボタンを作る時も両方にチェックすることをおすすめします。
今回は使いませんでしたが、次のような項目を変更するとボタンの見た目がかっこよくなります。
- Font ... フォント、文字の大きさや割り付けなどを変更できます。
- Padding ... ボタンの余白の部分を設定
- Button Width ... ボタンの横幅を設定
- Button Height ... ボタンの高さを設定
ここに注意！
ボタンの横幅や高さに変更を加えた場合は、Padding を変更しないとボタンのバランスが悪くなるので注意が必要です。
4-3. ボタンの縁取り設定
ボタンの縁取り設定で変更を加えたのは「Border Color」のみです。カラーピッカーを使って好みの色に変更できます。
今回は使いませんでしたが、「Style」を変更すれば点線や2重囲いなどに変更できるので、必要に応じて設定してください。
4-4. ボタンの背景設定
ボタンの背景設定で変更を加えたのは次の2つです。
①Background color ... 通常時のボタンの色
②Background hover ... マウスホバー時のボタンの色
4-5. 文字の影つけ設定
今回は文字の影つけ設定で変更を加えていません。
ここまでの作業が完了したら、保存して「終了」ボタンを押し、ボタンの作成画面を終了します。
4-6. ショートコードの貼り付け
ボタンの作成が完了すると「MaxButtons」の管理画面に完成したボタンが一覧表示され、ボタンの隣にショートコードが表示されます。
「MaxButtons」のショートコードは次のような書式です。
[maxbutton id = "数字"]
ショートコードは、「投稿」「カスタム投稿」「固定ページ」「ウィジェット」などに張り付けて利用できます。
5. まとめ
今回は、プラグイン「MaxButtons」を使って実際に「押したくなるボタン」を作りながら操作方法、リンクボタンのメリットを解説しました。
リンクボタンのデザインを変えただけで、ガラッと印象が変わります。
「押したくなるボタン」が作れることが理解できたと思います。
あなたが作ったWebサイトの色に合うように、ボタンの色も調整してみてください。
