「ZEBLINE（ゼブライン）」の使い方を徹底解説！動くラインマーカーでユーザーの視線を釘付けにする！

どうも、ひろもん（@hiromon_com）です。

あなたもどこかのサイトを訪れた際、一度くらいは動くラインマーカーを見かけたことがあると思いますが、あなたのサイトでも使ってみたいと思いませんか？

実は「ZEBLINE（ゼブライン）」というプラグインを使えば、テーマに関係なくどのサイトでも以下のような動くラインマーカーが使えるようになります。

マーカーの色や速度も自由に変更可能

人は目の前に動くものがあると、つい無意識に目で追ってしまうものですが、この「無意識に目で追ってしまう現象」はサイト運営にも利用できます。

たとえば、あなたもこんなサイト見たことありませんか？

無意識に目で追ってしまうもの

上記のような動きのあるものが視界に入ると、つい無意識に目が行きますし、「注意を引く・注目を集める」効果は絶大です。

注目を集めて得られる効果

動きで注目を集めるテクニックは、アフィリエイトサイトに限らず、多くの企業サイトでも使われています。

そこで今回は、動くラインマーカーが使えるプラグイン「ZEBLINE」について徹底解説します。

「ZEBLINE」の使い方

プラグインを購入

「ZEBLINE」は有料プラグインなので、まずは販売ページから購入します。

公式サイト

「ZEBLINE」の販売ページはこちら

インストール方法

プラグインを購入したら以下の手順でインストールします。

初期設定

続いて初期設定を行います。

テキストをHTMLタグで囲う

動くラインマーカーを記事で使うには、管理画面に記載されたHTMLタグでテキストを囲います。

設定画面に「このマーカーを使う時は、class：zebline-maker zebline-color-aを追加してください。」と書かれており、わかりやすく説明すると、「マーカーを使う時はテキストをこのタグで囲ってね」という意味です。

実際のタグです

<span class="zebline-maker zebline-color-a">テキスト</span>
<span class="zebline-maker zebline-color-b">テキスト</span>
<span class="zebline-maker zebline-color-c">テキスト</span>

上記のタグを実際の記事編集画面（エディター）に入力すると以下になります。

上から順にマーカーA・マーカーB・マーカーCのタグです。

記事を公開するとこのようになります。

ワンクリックで使用する方法

ここでは毎回HTMLタグをコピペして使うのが面倒くさいという方向けに、「AddQuicktag（アドクイックタグ）」というプラグインを使って、ワンクリックでHTMLタグを挿入する方法を解説します。

「AddQuicktag」は無料プラグインなので、以下の手順でインストールします。

「AddQuicktag」の設定方法

「AddQuicktag」にZEBLINEのHTMLタグを設定する手順を解説します。

「AddQuicktag」でタグを呼び出す

設定にミスがないか実際にタグを呼び出して確認してみます。

「ZEBLINE」の活用方法

「ZEBLINE」の主な活用方法を紹介します。

アフィリエイター向けの活用方法

重要な箇所を知らせる

動くラインマーカーは注意を引き付けられるので、とくに読んでもらいたい重要な箇所に使うと検索ユーザーに読まれやすくなり、伝えたいことが伝わりやすくなります。

下記に比較用のダミーテキストを用意したので見比べてみてください。

どちらも同じ黄色のラインマーカーですが、動くラインマーカーの方がより強く視線を引き付けますし、アフィリエイトサイトにも活かせます。

「ZEBLINE」のレビュー

実際に「ZEBLINE」を使った上でのメリット・デメリットを紹介します。

メリット

「ZEBLINE」の最大のメリットは、検索ユーザーの視線を集めて、伝えたいことが伝わりやすくなることです。

記事の中で、「ここはきちんと読んでほしい」というポイントがそれぞれあるはずなので、重要なポイントに使うのが効果的です。

また単純に、動きのあるサイトやページはオシャレ感が出ます。

デメリット

「ZEBLINE」はブロックエディターで使えないこともありませんが、かなり使い勝手が悪いため、基本的にはクラシックエディター専用と思った方がいいです。

普段からブロックエディターを使っている方は、「ZEBLINE」を使うために、プラグインの「Classic Editor」を使って、クラシックエディターを使えるようにする必要があります。

また動くラインマーカーをページのあちこちに多用すると、逆に何が重要なのかわからなくなるため、使いすぎには注意が必要です。

要望・改善点

「ZEBLINE」がブロックエディターに対応すると、今よりもずっと使いやすくなります。

理想はエディター上でテキスト色や背景色などのように、カンタンに設定できることです。

こんな人におすすめ

動くラインマーカーがあると、つい無意識に目で追ってしまいます。

無意識にユーザーの視線を集められるのは非常に強みになるので、ユーザーに記事の内容をきちんと理解してもらいたいと考えている方におすすめです。

まとめ

動くラインマーカーは検索ユーザーの視線を集められるので、伝えたいことが伝わりやすくなります。

現状はクラシックエディターでしか使えないプラグインですが、気になる方はぜひ使ってみてください。

「ZEBLINE」の販売ページはこちら