SWELLボタンのホバーとマウスホバーエフェクト入門｜初心者でもできる8つの設定

SWELLでサイトを作っていると、「ボタンやメニューにマウスを載せたときの動きがなんかイマイチだな…」と感じることがありませんか。

この記事では、SWELLボタンのホバーとヘッダーメニューなどのマウスホバーエフェクトについて、テーマ設定でできる範囲から、ちょっと踏み込んだCSSカスタマイズまで解説します。

結論から言うと、「ボタンとメニューのホバーに自分なりのルールを決めて、サイト全体を同じ雰囲気でそろえるだけ」で、SWELLサイトは一気にプロが作ったような印象に近づきます。

SWELLボタンのホバー・マウスホバーエフェクトとは？

SWELLボタン ホバーでできること一覧

ホバーとは、マウスカーソルをボタンやリンクの上に載せた瞬間に、見た目が少し変わるあの演出のことです。SWELLのボタンで起きる変化をイメージしやすいように、代表的なパターンをまとめました。

状態	見た目の変化の例	ユーザー側のメリット
ホバーなし	色や形がまったく変わらない	押せるのかどうか少し分かりづらいことがある
色だけ変わるホバー	背景色や文字色がほんの少しだけ濃くなる	「ここはボタンだ」と直感的に伝わりやすい
影がふわっと出るホバー	ボタンが軽く浮き上がったように見える	押したくなる、立体感が出る
線や枠が出てくるホバー	下線や枠線がスッと表示される	派手すぎず、上品な動きでクリックを促せる
サイズが少し大きくなるホバー	カーソルを載せたときだけボタンが少し拡大する	特に押してほしいボタンを目立たせやすい

ホバーは、デザインを派手に見せるための飾りではなく、「ここはクリックできますよ」という目印の役割を持っています。特に、申込ボタンや資料請求ボタンなど、押してほしい場所には、分かりやすいホバーを付けておくとユーザーが迷いにくくなります。

マウスホバーエフェクトが大事な理由

マウスホバーエフェクトは、ボタンだけでなく、ヘッダーメニューやボックスメニュー、テキストリンク、画像などにも関係してきます。

例えば、次のような動きです。

• グローバルメニューにカーソルを載せたときだけ、下線がスッと出る
• ボックスメニューにホバーすると、カード全体が少し明るくなる
• テキストリンクにホバーすると、色が変わって「リンクだ」とはっきり分かる

こうしたホバーがきちんと整っていると、ユーザーは「ここを押せばいいんだな」と自然に判断できます。一方で、

• 場所ごとに動き方がバラバラで統一感がない
• 色の変化が小さすぎて、ホバーしても気づかれない
• 動きが激しすぎて、見ているだけで少し疲れてしまう

といった状態だと、せっかくのSWELLのデザインがもったいないです。

この記事全体を通して、「分かりやすい」「うるさくない」「世界観がそろっている」という3つを意識して、ホバーを整える方法を見ていきます。

SWELLボタン ホバーの基本設定（コードなし編）

SWELLボタンブロックの使い方

まずは、ブロックエディターで使えるSWELLボタンブロックの基本を確認しておきます。難しいことはなく、慣れると直感的に触れる部分です。

代表的なボタンデザインは、だいたい次のようなイメージです。

デザイン名の例	見た目のイメージ	向いている用途
シンプル（ノーマル）	単色で塗られた標準的なボタン	記事内リンクや通常のアクションボタン全般
立体ボタン	影がついて、少し浮き上がって見える	申し込みボタン、問い合わせボタンなど重要なCTA
アウトライン	枠線だけで囲まれたスッキリしたボタン	サブのアクション、二番手のリンク
MOREボタン	矢印付きで「もっと見る」系の見た目	記事一覧ページや商品一覧ページの下部
キラッと系	ホバー時に光が流れるような印象的な演出	目立たせたいCTA。ただし多用は控えめに

はじめのうちは、あまり派手な演出は使わず、シンプル・立体・アウトラインあたりから試してみると、デザインの整理がしやすいです。

テーマ設定でボタンホバーを一括調整

SWELLには、テーマの設定画面からボタン全体の雰囲気をまとめて調整できる機能があります。ここを整えておくと、サイト全体の統一感が一段と出てくるので、最初に触っておくのがおすすめです。

よく触るボタン関連の設定項目は、ざっくり次のようなイメージです。

設定項目の例	どこに効くか	ポイント
ボタンの角丸	ボタン全般の角の丸み	丸めすぎるとカジュアル寄りになるので、テーマに合うバランスを探す
ボタンの文字色	ボタンの通常時の文字色	ホバー時の背景色とのコントラストを意識すると読みやすい
ボタンの背景色	ボタンの通常時の背景色	ブランドカラーを1色決めておくと、サイト全体の軸がブレにくい
ボタンの影の有無	ボタン全体の立体感	影はほんのりにして、特に重要なボタンだけ強めにするのもアリ
ホバー時の色	カーソルを載せたときの色の変化	通常色より少し濃くするか、彩度を少し上げると分かりやすい

ここで意識しておくと良いのが、次の2パターンです。

• 普段使いの基本ボタン
• 本当に押してほしい重要ボタン

例えば、

• 基本ボタン：淡めのブランドカラーで、ホバー時に少し濃くする
• 重要ボタン：最初から濃い色にしておき、ホバー時に影やサイズを少し強調する

といったルールを作ると、ユーザーにも「どれがメインのボタンなのか」が自然に伝わりやすくなります。

SWELL マウスホバーエフェクト（ヘッダーメニュー）の設定

ヘッダーメニューのマウスホバーエフェクトの種類

SWELLでは、カスタマイザーからヘッダーメニューのマウスホバーエフェクトをいくつかのパターンから選べます。代表的なものを挙げると、次のような感じです。

エフェクトの例	見た目の変化	向いているサイトイメージ
下線がスッと出るタイプ	ホバーしたメニューの下に細いラインが出る	シンプルなブログ、ビジネス系、コーポレートサイト
背景色が少し変わるタイプ	項目の背景がほんのり色づく	一般的なブログ、メディアサイト全般
ブロック表示タイプ	メニュー項目が角丸のタブのように見える	ポータルサイト風、ボックス感を出したいデザイン
文字色だけ変わるタイプ	テキストだけカラーが変化する	余計な装飾を減らしたい、ミニマルなデザイン

マウスホバーエフェクトを選ぶときのポイントは、

• サイト全体の雰囲気より、ほんの少しだけ目立つ程度に留める
• PC表示で一目見て「今どこにカーソルがあるか」が分かるか確認する
• スマホではホバーが効きにくいので、あくまでPC向けの補助と考える

といったところです。

ホバー色やラインの見え方を整えるコツ

マウスホバーエフェクトを設定しても、「なんだか線が見えづらい」「色の変化が弱くて分からない」ということがあります。そんなときは、次のようなポイントを見直してみてください。

• 背景色とホバー時の色のコントラストが十分か
• 文字色と下線の色が似すぎていないか
• ヘッダーの高さや余白が狭くて、ラインが窮屈になっていないか

よくある症状と、見直したいポイントをまとめると、こんなイメージです。

気になる症状	よくある原因	対処の方向性
ホバーラインがほとんど見えない	背景とラインの色が近すぎる	ラインの色を濃くするか、太さを少し太くする
ホバーするとゴチャッとして見える	影・背景色・下線など、動く要素が多すぎる	動きを「色だけ」「線だけ」など1つに絞る
メニューが窮屈で息苦しい	余白が少ない、フォントが大きすぎる	フォントサイズを少し下げるか、左右の余白を増やす

ヘッダーメニューは、派手な仕掛けよりも「見やすさ」「ストレスのなさ」を優先した方が、結果的にユーザーに喜ばれることが多いです。

CSSでSWELLボタン ホバーをおしゃれにカスタマイズ

よく使うホバーアニメーション3パターン

細かいコードはここでは控えめにして、「どんな動き方がよく使われるのか」をざっくりつかめるように整理しておきます。

パターン名	動きのイメージ	向いている使い方
フェード（色の切り替え）	背景色や文字色が、なめらかにスッと変わる	落ち着いたサイト全般、違和感の少ない演出にしたいとき
スケール（少し拡大）	ホバー時にボタンが1.05倍くらいに大きくなる	申し込みボタンや購入ボタンなど、特に押してほしい場所
アンダーラインアニメーション	下線が左から右にシュッと伸びる、または逆方向に戻る	テキストリンクやメニュー項目に、さりげない動きを付けたいとき

基本的な考え方としては、

• background-color と color（背景色と文字色）を変える
• box-shadow（影）で立体感を足す
• transform: scale() でサイズを少しだけ変える
• transition で、変化をなめらかにする

このあたりを組み合わせるだけで、かなり表現の幅が出てきます。例えば、重要ボタンだけ、通常時はフラットで、ホバーしたときに少し拡大＋影を強めると、「ここが一番大事なボタンです」とさりげなく伝えることができます。

サイト全体のホバーを同じ世界観で揃える

CSSカスタマイズでありがちなのが、

• ボタン
• メニュー
• ボックス
• テキストリンク

など、それぞれに別々のホバーを追加して、結果として統一感がなくなってしまうパターンです。私が気をつけているのは、最初に「ホバーのルール」を決めてしまうことです。

• ホバーで変える要素は、多くても2つまで（色＋影など）
• サイトの「ブランドカラー」と「アクセントカラー」を決めておく
• ボタンもメニューも、基本は同じカラーセットで動かす

例えば、次のような「ルール表」を自分用に作っておくと、あとから迷いにくくなります。

要素	通常時	ホバー時
メインボタン	背景：ブランドカラー／文字：白	背景：少し濃い同系色／影を少し強める
サブボタン	枠線のみ／文字：ブランドカラー	背景：薄いブランドカラー／枠線はそのまま
ヘッダーメニュー	文字：グレー系	文字：ブランドカラー／必要なら下線も追加
テキストリンク	文字：ブランドカラー	色を少し濃く＋下線アニメーション

この表に沿ってCSSを書いていくと、「なんとなくいじったらゴチャゴチャになってしまった」という状態を防ぎやすくなります。

SWELL マウスホバーエフェクトを抑える・消すとき

動きが激しすぎるときの対処法

ホバーの機能をあれこれ試しているうちに、

• ラインが出て、背景も変わって、影も動いて…全体的に落ち着かない
• メニューとボタンで動きがバラバラになり、見ていて違和感がある

という状態になることもあります。そんなときに見直したいポイントは、次の通りです。

ホバーの目的は「遊び心」ではなく、「分かりやすさ」と「クリックの後押し」です。迷ったときは、「なくても困らない動き」「少し疲れる動き」から順番に削っていくと、ちょうどいいバランスに落ち着きやすくなります。

画像やリンクのホバーをピンポイントで調整

SWELLでは、ボタンやメニューだけでなく、画像やSNSボタンにもホバーがついていることがあります。

• 画像にカーソルを載せると、うっすら色が乗ったように見える
• SNSアイコンにホバーすると、アニメーションが大きめに動く

こういった動きが気になる場合は、対象のパーツに使われているクラスを特定して、

• 不透明度（opacity）を控えめにする
• 影や枠線の変化を小さくする、もしくは外す
• transition の時間を少し長くして、ゆっくり動くようにする

といった形で、ピンポイントに調整してあげるイメージです。

全部のホバーを消してしまうのではなく、

• よく見られる場所や、長く滞在してほしい場所は控えめに
• サイドバーや目立たせたいエリアだけ、少し動きを強めに

といったようにメリハリを付けると、全体として心地よいサイトになります。

クリックされるSWELLボタン ホバーの作り方（実例）

色とサイズで分かりやすくする

クリックされるかどうかは、ホバー以前に「そもそもボタンだと分かるか」で大きく変わります。私がよく意識しているのは、次のようなポイントです。

例えば、メインのボタンは「濃いブランドカラー＋白文字」にしておき、ホバー時に少しだけ濃くしたり、影を足したりします。サブのボタンは、枠線だけにして、ホバーしたときに淡い色が付くくらいにすると、「どちらがメインか」が自然に伝わりやすくなります。

文言と配置でホバー効果を活かす

どれだけホバーがきれいでも、ボタンの文言や配置がぼんやりしていると、クリックは思ったほど伸びません。ホバーの効果を引き出すために、次のような点も一緒に見直してみてください。

• ボタンの文言は、「押した後に何が起きるか」をできるだけ具体的に書く
  • 例：「資料請求」よりも「無料で資料をもらう」
• ボタンのすぐ近くに、とっておきの一言を添えておく
  • 例：「〇〇な人向けの特典あり」など、押す理由になる一言
• ヘッダーメニューのホバーと同じ色味にして、「このサイトの大事な色」を覚えてもらう

私の感覚では、

• ブランドカラーのホバー：前に進む、申し込むなど「メインのアクション」用
• 少し落ち着いた色のホバー：詳細を見る、一覧を見るなど「補足的なアクション」用

といった役割分担をしておくと、サイト全体が整って見えますし、ユーザーも迷いにくくなります。

よくある質問（SWELLボタン ホバー・マウスホバーエフェクト）

Q1. SWELLボタンのホバーを設定しても変化が分かりません。どうすればいいですか？

A. 多くの場合、通常時とホバー時の色の差が小さすぎるか、背景とのコントラストが弱いことが原因です。SWELLボタンのホバー設定で、背景色を思い切って濃くするか、文字色の明るさをしっかり変えてみてください。

それでも分かりづらいときは、ボタンの文字サイズを少し大きくしたり、影を追加したりして、「ここはボタンですよ」というサインを強めてあげると、だいぶ見え方が変わります。

Q2. SWELLのマウスホバーエフェクトの動きがうるさいです。もっと落ち着かせることはできますか？

A. できます。ヘッダーメニューのマウスホバーエフェクトは、設定画面でシンプルなパターンに変えたり、色の変化だけに絞ったりすることが可能です。

また、ホバーの主役を「ヘッダーメニュー」にするのか「SWELLボタン」にするのかをあらかじめ決めておき、片方は控えめな設定にするのもおすすめです。たとえば、メニューは文字色だけ変えるシンプルなホバーにして、ボタン側でしっかり動きをつける、といった分担をすると、全体が落ち着いて見えます。

Q3. SWELLボタンのホバーやマウスホバーエフェクトで、本当にクリック率は変わりますか？

A. ホバーだけで劇的に数字が跳ね上がるわけではありませんが、「ここが押せる場所だと一目で分かる」「押したくなる雰囲気になっている」ことで、じわじわと差が出てきます。

SWELLには、ボタンのクリック数を計測する機能も用意されています。ホバーが弱いパターンと、しっかり演出を付けたパターンを作り、クリック数を比べてみると、自分のサイトにとってちょうどよいホバーの強さが見つけやすくなります。

まとめ：SWELLボタンのホバーを整えてクリック率と世界観をアップ

この記事のポイントを整理します

今日からの最初の一歩としては、

• メインボタンとサブボタンの色とホバーの状態
• ヘッダーメニューのマウスホバーエフェクト

この2つだけでいいので、「自分のサイトではどういうルールにするか」をメモに書き出してみてください。そのメモを見ながら、SWELLの設定画面と、必要であれば簡単なCSSを少しずついじっていくだけでも、ホバーの印象が驚くほど変わります。

ホバーが整うと、サイト全体が「ちゃんと考えて作られている」ように見えるので、ぜひ自分のペースで少しずつ試してみてください。