CSS不要。思わず押したくなる「ANTHEM」のボタンホバーアニメーションの活用方法

WordPressテーマ「ANTHEM」では、サイト内に表示できるボタンのアニメーションに新しいものを追加しています。カーソルを合わせる（以下、ホバーする）とスワイプするような動きを任意で適用できます。デモサイトでは、トップページのヘッダー部分に表示されるボタンがそうです。

細部にも一味違うアニメーションを設定できるわけです。本稿でその適用箇所と活用方法を解説いたします。

新しいボタンホバーアニメーションがクリックを促します

ANTHEMでは、従来のホバーアクション（色変化）と別に、以下の2種類のホバーアニメーションを適用できます。

スワイプアニメーション

斜めスワイプアニメーション

それぞれホバーしない限りは、背景が透過する仕様です。背景に画像などをセットしている箇所で、コンテンツに干渉せずにボタンを表示できます。ホバーの前後で背景色を変化させるシンプルなアクションの他に、つい押したくなるような動きでアピール可能です。

新しいボタンホバーアニメーションを適用できる箇所について

デモサイトでは、トップページのスライダーと、下記記事で紹介しているページ作成機能で制作したランディングページ（LP）にのみ適用していますが、あらゆる箇所に適用可能です。

テーマ内でボタンを表示できる場所すべてに適用できる

基本的には、テーマ内でボタンを表示可能な箇所すべてに適用可能です。トップページのコンテンツビルダー内に表示させるボタンにも、それぞれ適用いただけます。固定ページ内はもちろん、「セールスページ制作機能」内のサイドコンテンツ部分のボタンにも適用可能です。

背景画像や、背景色の有無によって、最適なデザインを設定してご活用ください。

セールスページ制作機能については、下記記事で詳しく解説しております。

クイックタグを使ってどこにでも表示できる

各所のボタン表示箇所以外にも、クイックタグで出力するボタンにも適用させることができます。自由に記述いただけるブログやお知らせ記事の他、カスタム投稿タイプ「サポート」内にも当然適用可能です。

クイックタグを活用できる場所（＝フリースペース）ならどこにでもワンタッチで表示いただけます。

どのように活用するといいのか

どこにでも設定できる新しいボタンホバーアニメーションですが、どんな設定でどのように活用するといいのか。設定項目が豊富な故に、迷う部分かもしれません。よろしければ、以下を参考に設定してみてください。ケースごとのおすすめの設定と、使うべき箇所を解説しています。

設定項目は以下の通りです。細かく設定可能です。

• 文字色
• 線の色
• 線の透明度
• カーソルを合わせた時の文字色
• カーソルを合わせた時の背景色
• カーソルを合わせた時の線の色
• カーソルを合わせた時の線の透明度

背景色や背景画像がある場合の設定

このケースの場合は、「文字色」と「カーソルを合わせた時の文字色」は同じにして、線の色は変化させずに、背景色のみを変化させるような設定がいいでしょう。

ポイントは、「カーソルを合わせた時の背景色」と「カーソルを合わせた時の線の色」を別にしておくことです。ホバー時にボタンが小さくなるような錯覚を防ぐためです。

また、線の色の透明度は、0.5ぐらいに設定しておくことで、背景色と枠線の色が異なっていても違和感はなくなります。ボタンの設定例は以下の通りです。

背景色や背景画像が無い場合の設定

このケースの場合は、「文字色」と「線の色」を合わせて、「カーソルを合わせた時の文字色」のみ反転させるようなイメージで「白（#ffffff）」を設定しておくと無難でしょう。設定は以下のようになります。

目立たせたい箇所に適用するのが基本

基本的には、「視覚的に目立つ箇所」 or 「クリックを促したい箇所」に適用するといいでしょう。

「視覚的に目立つ箇所」は、トップページのヘッダー部分やレイヤー画像コンテンツ上に表示するボタンなどです。目立つ部分なので、サイトの印象に繋がります。

「クリックを促したい箇所」は、セールスページのサイドコンテンツ部分や、LPのコンバージョンに繋がる部分でしょうか。他のボタンよりも直接コンバージョンに繋がりやすい箇所です。

ちなみにフリースペースにクイックタグで出力できるボタンのサイズや形は、自在に変更できますので、下記のように目立つボタンも設置できます。

ここぞという箇所でユーザーにアクションを促しましょう

ANTHEMに新しく追加されたボタンのホバーアニメーションについて解説いたしました。

すべてのボタンにアニメーションを適用すると、くどい印象で逆効果になり得ます。例えば、下層ページに遷移するだけのボタンにアニメーションを適用するのではなく、購入や資料請求などのコンバージョンに繋がるボタンにアニメーションを適用するといいでしょう。

あえて一部のボタンのみ異なるホバーアニメーションにすることで、デザインにメリハリがつき、ポジティブな結果に繋がるかもしれません。ぜひお試しください。

合わせて読みたいWordPressテーマ「ANTHEM」の関連記事

第1回 : どうすれば成約率を高められるか？「ANTHEM」に実装されたセールスページを徹底解説
第2回 : WordPressテーマ「ANTHEM」の販売ページで紹介できなかった16の機能一覧
第3回 : FAQ、ランキング、アバウトページをWordPressテーマ「ANTHEM」で作成する方法
第4回 : CSS不要。思わず押したくなる「ANTHEM」のボタンホバーアニメーションの活用方法（当記事）