こんにちは。
ジーニアスウェブの宇津です。
ホームページの離脱率を下げるために重要だと考えられているのは、ホームページを開いたときに最初に見えるメインビジュアルとキャッチコピーです。
より目の引くメインビジュアルやキャッチコピーにすることでほかのホームページとの差別化を図ることができます。
メインビジュアルを目立たせるためにスライダーなど動きをつける工夫をしているホームページが多いです。
文字に効果をつける
まずは一般的にキャッチコピーにつける効果についてみていきます。
文字を目立たせるためには文字の大きさ・文字の太さ・文字の色を変更するのが常套手段です。
以下が参考になります。
See the Pen blog-fonts by ジーニアスウェブ (@genius-web) on CodePen.0
上から順に
- 通常テキスト
- 文字を大きくしたテキスト
- 文字を大きくして太くしたテキスト
- 文字を大きくして太くして目立つ色にしたテキスト
一部ですが並べて比べるとよくわかります。
基本はこのような効果を駆使して目立たせており、組み合わせるとより目立たせることができます。
文字にアニメーション
タイトルにあるとおり文字に対してアニメーションを追加します。
アニメーションをつけることで動きがでてより目立たせることができます。
以下が参考になります。
See the Pen blog-font by ジーニアスウェブ (@genius-web) on CodePen.0
※再度動きを見る場合はRerunを押して更新してください
最後に
今回はキャッチコピーを目立たせる方法として、アニメーションをいれてみました。
せっかく考えたキャッチコピーを読んでほしいのであれば、読んでもらうための一つの方法として、アニメーションをいれてみるのもいいと思います。
もちろんキャッチコピー以外にも使用することができます。
jsも使ってないので簡単に導入できますので、ひとつ試してみてはいかがでしょうか。