追加デザイン

動くマーカーアニメーション

記事を書く時やどこかのテキストを強調したい時におそらく多くの方は「マーカー」を使うのではないでしょうか?

JINには予め2種類のマーカーが用意されており、多くの方がその機能を使われていることだと思います。しかしそのマーカーの全てが予め引かれている線であったり、マーカーが引かれている部分が多すぎるとユーザーに対して結局どれが重要な部分なのかわかりづらくなってしまいます。

また、もっとユーザーの目線を誘導するにはもっと動きがあった方がいいのではないか?

回遊率やユーザーの「おっ!」という感動を与えるには淡々と続くテキストでは少し無理があるのではないか?

りょうた
りょうた
動きがあった方がもっとユーザーは見てくれるんじゃ…?

そう考えた結果、スクロール時にアニメーションをマーカーを引いた方がいいのではないかと思いCARATでは、同じマーカーでもよりユーザーの目線を誘導できるように、ユーザーがページをスクロールしてテキストが表示されたら自動的にマーカーが引かれるアニメーションを追加しました。

↑のテキストのようなマーカーです。

というわけで早速設定方法をご説明いたします。

使い方説明

「動くマーカー」機能はCARATを導入した段階で記事編集画面の「ビジュアル」「テキスト」にこんな感じで追加されています。

それぞれの違いはマーカーの色です。JINではマーカーの色を任意に変更することができます。変更の方法はJINのマニュアルページをご覧いただくと設定できるかと思いますのでここでは割愛します。

【使い方の注意事項】

  • 長いテキスト(3,4行もあるテキスト)で使用するとアニメーションが早くなり、ユーザービリティーが落ちることもあります。使いどころをよく考えて使用するようにしてください。
  • 「動くマーカー」はJINと全く同じカラーにはできますが、太さは変更することができず一定の太さにしかなりません。

これでさらにユーザーの回遊率が上がりますし、目線を誘導することができます。もちろんマーカーアニメーションを使いたくない場合はJINの既存の所からマーカーを使うとアニメーションのないマーカーを使うことができます。

りょうた
りょうた
使いどころを考えて使うともっと読みやすい記事が出来上がるね!

使いどころをしっかり考えた上で、またJIN特有のボックスデザインとの兼ね合いも考えながらブログにアクセントをつけていきましょう。

WordPressテーマ「JIN」専用デザインプラグイン『CARAT』

「CARAT」は大人可愛いを追求した女性向けデザインプラグインです。

WordPressテーマ「JIN」の機能性と「CARAT」のデザインでより読み手に感動を与えるプラグインを作りました。

「自分のブログが好き」

そんな人が1人でも増えてくれたらと心から願っています。