Wixのコツ｜マウスオーバー効果で動きのあるウェブデザイン

Wix エディタの中には、素晴らしいウェブデザインを簡単に実現できる機能が揃っています。しかし、使える機能が多すぎて、なかなかユーザーの皆さんに発掘してもらえない機能があるのも事実。

そこで、今回は Wix サイトに「マウスオーバー効果」を追加する方法と効果的な使い方を詳しく解説します。

マウスオーバー効果とは、ウェブページ上にある画像やテキストにマウスを合わせると、自動的に画像が切り替わるという、素敵なエフェクトです。

マウスオーバー効果（ロールオーバー効果、ホバーエフェクトとも呼ばれる）は、ユーザーのアクションによって始めて動作するため、どんな変化があるのか、ユーザーの興味をそそり、閲覧者をより長時間サイトに引き止めることができます。そして、インタラクティブなホームページは、購読や購入などにつながる「クリック」も獲得できる確立があがります。

さあ、マウスオーバー効果を追加して、より魅力的なWebデザインのホームページを作成しましょう！

白黒の画像を用意し、各画像にマウスを合わせると写真がカラーで表示されるデザインはどうでしょうか。ついつい全ての画像にマウスオーバーしてしまうではないでしょうか？全体的にモノクロな配色を用いることで、マウスオーバー効果がより印象的に表現になります。

さっそく以下のステップに従って、あなたのサイトにマウスオーバー効果を追加してみましょう！

1. エディタから「追加」をクリックし、「ボタンとメニュー」を選択後、「画像ボタン」をクリックします。

2. サイト内に追加された画像ボタンをクリックし、画像ボタンの設定を開きます。

3. デフォルト画像とマウスオーバー時の画像を設定します。マウスオーバーする前後の「ビフォー＆アフター」画像のように考えてみてください。

4. できあがったマウスオーバー効果の例はこちら：

5. 最後に、忘れてはいけないのが「リンク先の設定」です。素敵なロールオーバー効果が設定できたら、クリックした際のリンク先（例: 商品の詳細ページなど）もきちんと設定しましょう。

ポイント：前もって画像を準備しておきましょう。マウスオーバー効果には、2種類の画像が必要です。この例では、白黒画像とカラー画像の組み合わせです。

このような2種類の画像セットは、Wix エディタに内臓された画像エディタでも簡単に作成できますのでお試しあれ。

マウスオーバー効果の使い方には、まだまだ面白い方法がたくさんあります。いくつかおすすめの活用法をご紹介します。

マウスを合わせたときに、マウスオーバー効果を用いてポップアップテキストを表示してみてください。訪問者が食いつくこと間違いなしです。

アイコンや画像にマウスを合わせたときに、まるでアイコンがちょっと動いたように見える別の画像と追加してみましょう。ちょっとした動きでも、ユーザーの注意を引く効果があります。

マウスを合わせた前後に、色やデザインが少し異なる画像に切り替えてみてはいかがでしょうか。

このほかにも、アイディア次第でいろいろな活用方法があります！あなたはどのように使いますか？まだサイトをお持ちでない方は、無料でサイトの作成ができる Wix をお試しください。

おすすめ関連記事

この記事を書いた人

Wix Team