BLOG

【CLICKLIS】動くボタンをプラグインで簡単に作成!クリック率アップ【WordPress】

ぴよ子先生
ぴよ子先生
あら、たま剛くんどうしたの!?

たま剛
たま剛
僕でも簡単にブログ記事を装飾できるプラグインを見つけたんだー!

WordPress(ワードプレス)の扱いにだんだん慣れてくると、もっと記事をオシャレに装飾したいなぁーなんて思ってきますよね。

アフィリエイトやブログを運営する上で、アフィリエイトリンクや誘導したいリンクがある場合、特にボタンはユーザーにリンクを踏んでもらうためにとっても重要なものであり、いかに目立たせられるかが勝負です。

しかし、ユーザーの目に止まるようなオシャレなボタンを作ろうと思うと、CSSを何やかんや弄り倒さないといけないわけです。そして、初心者さんは一旦諦めてしまったり…。

私が使っているテーマ『JIN』には、ボタンデザインは何種類か標準装備されていますが、欲を言うと動くボタンが作りたい…! 

ということで、見つけたのが『CLICKLIS(クリックリス)』というプラグインです。

このプラグインを使うことで、何よりもライバルサイトとの差別化が簡単にできるというのがクリックリスのいいところ!

もちろん、良い記事を書くことでライバルと差をつけるのが1番の目標ですが、まずは見た目を整えて自分のモチベーションを上げていくのも、楽しくブログを続けるためには必要ですよね。

たま剛
たま剛
ブログに愛着が湧くし、なんだか上級者っぽいし、ブログの更新も頑張れそうな気がする!

CLICKLIS(クリックリス)は動くボタンを簡単に作れるプラグイン

『CLICKLIS(クリックリス)』は、ボタンデザイン・色・テキスト・URL等の簡単な詳細を設定するだけで自動でボタンコードを生成してくれる、WordPressのプラグインです。

できあがったコードを、記事のボタンを置きたい箇所にコピペするだけで、簡単にオシャレな動くボタンや動く画像を作ることができます。

こんな人にオススメ

  • ボタンをクリックしてもらえない
  • 記事全体のインパクトがない
  • アフィリエイトが上手くいかない
  • ブログへのモチベーションが下がってきた

こんなにたくさんの種類のアニメーションボタンが簡単に作れる

作れるアニメーションボタンは全部で8種類!

カラーは上記の4色以外にも『ユーザーカラー』で好きな色を設定することができるので、ご自身のブログのイメージカラーに合わせてボタンカラーを設定することが可能です。

横並びボタンも作れる

このような2つ横並びのリンクボタンも簡単に作れてしまいます。

なかなか使える配置ですね。

画像もブルブル動かせる

広告バナー(画像)も簡単にブルブル動かすことができます。

うん、とにかく目立つわ。

ぴよ子先生
ぴよ子先生
冒頭でたま剛くんがブルブルしていたのは、この機能を使ったのね。

CLICKLISで動くボタンの簡単な作り方

ダウンロード方法

まずはこちらからCLICKLISの購入手続きをしてください。購入手続きができましたら、『infotop』にログインします。

IDとパスワードを入力しログインできたら、『注文履歴』をクリックし『購入履歴一覧』のページへ飛びます。

f:id:c2830:20191118091716j:image

『購入履歴一覧』の中からCLICKLISのファイルをダウンロードします。

『ダウンロード』をクリックします。確認画面が出てきたら、迷わずダウンロードボタンをポチッとしてください。

f:id:c2830:20191118091658j:image

すると、検索窓の右端に下向きの矢印マークがあり、そこをクリックしてみるとダウンロードしたCLICKLISのファイル名が確認できます。(環境:iPhone7/iOS 13.2.2)

ファイル名をクリックしてみると、『iCloud Drive』の中の『ダウンロード』フォルダの中に、CLICKLISのzip形式のファイルが保存されているのがわかります。

f:id:c2830:20191118091712j:image

これでファイルのダウンロードは完了です。次はワードプレスで使えるようにインストールをします。

インストール方法

ワードプレスのメニューから『プラグイン』>『新規追加』と進み、『プラグインのアップロード』をクリックします。

f:id:c2830:20191118091702j:image

『ファイルを選択』のボタンが出てくるのでクリック。『ブラウズ』>『iCloud Drive』>『ダウンロード』と進み、先程保存したzipファイルをクリックします。

f:id:c2830:20191118091709j:image
f:id:c2830:20191118091705j:image

『今すぐインストール』をクリック、その後『有効化』して完了です!

f:id:c2830:20191118091721j:image

使い方

CLICKLISのプラグインをインストールし有効化すると、ワードプレスのメニュー一覧にかわいいリスのアイコンと共にCLICKLISの項目が現れます!

CLICKLISの詳細設定をしていきます。

まずは『ユーザーカラー』ということで、お好みでカラーコードを入力しておくと、そのカラーのボタンを作ることができます。

ボタンコードを生成していきます。

『ボタンタイプ』からお好きなアニメーションを1つ選択します。

次はボタンの色です。

カラーは4色と、先程設定したユーザーカラーの中から選択できますので1つ選んでください。

『ボタンテキスト』の欄に、ボタンに表示したい文字を入力します。

『ボタンリンクURL』に誘導したいリンクのURLを入力します。

『その他設定』は適宜選択してください。

リンク先を別タブで開く

自分のページに戻ってきてもらいやすくするため、設定しておくことをオススメします。

nofollowにする

外部リンクであれば、基本は設定しておけば大丈夫です。nofollowを設定することで検索エンジンに「このリンクをたどらない」という指示を伝える事ができます。nofollowを設定しない場合、リンク先のページの評価を上げたり、場合によっては自分のページの評価を下げてしまうことに繋がります。

すべて選択・入力し終わったら『ボタンコード生成』をクリックし、下の枠に出てきたコードをコピーして、ボタンを設置したい場所にペーストすれば、かわいいアニメーションボタンのできあがりです!

ぴよ子先生
ぴよ子先生
難しい操作や設定は一切ありませんでしたよね!

CLICKLISで得られる効果は?動くボタンを作るメリット・デメリット

メリット

  • ライバルとの差別化ができる
  • 見てもらいたいところの明確化ができる
  • 自分のモチベーションをアップできる

ライバルとの差別化ができる

もちろん記事の内容が重要なのは大前提です。

その上で、どこが重要かわからないような味気ない記事か、適度に装飾された見やすい記事、どちらの記事をまず読みたいでしょうか?

私だったら、後者です。

『あれ、この人の方が詳しそうだな』って思わせられたら勝ちですよ。

たま剛
たま剛
綺麗な装飾がしてあるとブログ上級者っぽいし、信頼感を与えられそう。

見てもらいたいところを明確化できる

私自身がそうですが、読者さんは結構記事を流し読みします

激しく画面をスクロールしていく中で、なにやら動いているモノが表れるとそこで目を止めますよね。

その前後の文章って読んでもらいやすいですし、読者さんにとっても『あーここを見ればいいのね!』ってわかりやすいです。

自分のモチベーションをアップできる

冒頭でも触れましたが、こんなにオシャレなアニメーションボタンは到底自分の技術では作れません。

それが、このプラグイン1つでしかも簡単操作で作れてしまう。

憧れのアニメーションを記事に含めることで、記事を書くのも楽しくなります。

デメリット

  • 使い方を間違えると読みづらい
  • なんだか怪しい?

使い方を間違えると読みづらい

読者さん目線で考えてみてください。

あまりにアニメーションを乱用すると記事がゴチャゴチャして見づらく、ただただうっとーしくてリンクを踏んでもらうどころか、早期にページを離れてしまう可能性があります。

それではせっかくのオシャレなボタンが逆効果になってしまいます。

ぴよ子先生
ぴよ子先生
見た目を華やかにしてくれる動くボタンですが、使い方には要注意ですね!

なんだか怪しい?

あまりにも動きまくるボタン…あなたはクリックしますか?

個人の好みとか感覚の違いですが、私だったらなんとなく怪しくて、たぶんクリックはしないような…。

たま剛
たま剛
このあたりはTPOに応じてって感じだね!

まとめ

こんな人はぜひ活用してみてほしい

  • ボタンをクリックしてもらいたい
  • 記事全体のインパクトを足したい
  • アフィリエイトで成功したい
  • ブログへのモチベーションを上げたい

私自身、CLICKLISを見つけてすぐに購入を決めました。

そのぐらい、私にとっては魅力的なプラグインでしたし、実際に使ってみても本当に使い勝手がよく、神プラグインの1つだと思ったので、今回ご紹介させてもらいました。