2019.03.19 Tue

キャッチコピーにアニメーションをいれて目立たせる方法

こんにちは。
ジーニアスウェブの宇津です。

ホームページの離脱率を下げるために重要だと考えられているのは、ホームページを開いたときに最初に見えるメインビジュアルとキャッチコピーです。

より目の引くメインビジュアルやキャッチコピーにすることでほかのホームページとの差別化を図ることができます。

メインビジュアルを目立たせるためにスライダーなど動きをつける工夫をしているホームページが多いです。

文字に効果をつける

まずは一般的にキャッチコピーにつける効果についてみていきます。

文字を目立たせるためには文字の大きさ・文字の太さ・文字の色を変更するのが常套手段です。

以下が参考になります。

See the Pen blog-fonts by ジーニアスウェブ (@genius-web) on CodePen.0

上から順に

  • 通常テキスト
  • 文字を大きくしたテキスト
  • 文字を大きくして太くしたテキスト
  • 文字を大きくして太くして目立つ色にしたテキスト

一部ですが並べて比べるとよくわかります。

基本はこのような効果を駆使して目立たせており、組み合わせるとより目立たせることができます。

文字にアニメーション

タイトルにあるとおり文字に対してアニメーションを追加します。

アニメーションをつけることで動きがでてより目立たせることができます。

以下が参考になります。

See the Pen blog-font by ジーニアスウェブ (@genius-web) on CodePen.0

※再度動きを見る場合はRerunを押して更新してください

最後に

今回はキャッチコピーを目立たせる方法として、アニメーションをいれてみました。

せっかく考えたキャッチコピーを読んでほしいのであれば、読んでもらうための一つの方法として、アニメーションをいれてみるのもいいと思います。

もちろんキャッチコピー以外にも使用することができます。

jsも使ってないので簡単に導入できますので、ひとつ試してみてはいかがでしょうか。

WRITERこの記事を書いた人

宇津

宇津

大阪オフィスでコーダーとして働いております。 よろしくおねがいします。

大阪オフィスでコーダーとして働いております。 よろしくおねがいします。

FREE DOWNLOAD

顧客獲得に成功した24社の成功事例を1冊にまとめました。
顧客獲得にお困りの方も、そうでない方も、一度お読みいただくことをお勧めします。

MORE VIEW