Webサイトやアプリでは、ボタン・メニュー・カード・写真などにマウスカーソルを載せたとき、見た目が変化する「ホバーエフェクト」がよく使われます。
一見すると、どれも「色が変わるだけ」のシンプルな表現に見えます。しかし実際には、背景色を変更する方法、半透明のレイヤーを重ねる方法、シャドウで立体感を演出する方法、グラデーションを重ねる方法など、目的に応じてさまざまな実装方法が使い分けられています。
また、それぞれの表現では「少し明るくする」「少し暗くする」「白や黒を薄く重ねる」といった細かな色の調整も重要になります。そこで便利なのが、色相・彩度・明度・透明度を個別に指定できるHSLAです。
ここでは、初心者向けにホバー時の色変化で使われる代表的な4つの技術と、それぞれの特徴や使い分け方を分かりやすく紹介します。
記事を読み終える頃には、「どのUIにどのホバー表現を選べばよいのか」「HSLAをどのように活用すると自然な色変化になるのか」を判断できるようになることを目指します。
ホバー（hover）表現とは？｜ユーザーに操作できることを伝える視覚効果
Webサイトでホバー（hover）表現を付ける目的は、ユーザーが現在マウスカーソルを載せている要素を分かりやすく伝え、「この要素は操作できる」ということを視覚的に知らせることです。
例えば、ボタンの色が少し変われば「クリックできそう」と感じられます。カード全体がリンクになっている場合も、ホバーによって見た目が変化することで、「クリックすると詳細ページへ移動できる」ということを自然に伝えられます。
なお、ホバーはマウスカーソルを使うPC向けの操作です。スマートフォンでは基本的にホバーは発生しないため、スマートフォン向けのUIではボタンサイズや余白など、タップしやすさを考慮した設計も重要になります。
なぜホバー（hover）時の色変化は使い分ける必要があるのか？
ホバー時の色変化というと、「background-color を変更すればよい」と考える方も多いでしょう。
しかし、実際のWeb制作では、それだけでは対応できないケースが少なくありません。
例えば、ボタンであれば背景色を変更するだけで十分な場合が多くあります。
一方、写真は背景色を変更しても画像自体は変化しないため、画像の上に半透明のレイヤーを重ねるオーバーレイが必要になります。
また、カードUIや企業サイトでは、ブランドカラーやデザインの統一感を維持したいことがあります。そのような場合は背景色そのものを変更するのではなく、白や黒の半透明レイヤーを重ねたり、シャドウやグラデーションを利用したりすることで、元のデザインを保ったままホバー表現を実現できます。
このように、「色が変わる」という見た目は同じでも、対象となるUIや目的によって適した実装方法は異なります。
そのため、実務では「どの方法で色変化を表現するか」を考えた上で実装方法を選択することが重要になります。
まず知っておきたい！ホバー時の色変化は4つの技術で使い分ける
Webサイトでホバー表現を使う目的は、ユーザーがマウスを載せたときに「現在どの要素を操作しようとしているのか」を視覚的に分かりやすく伝えることです。
例えば、ボタンやリンクにホバー時の変化を加えることで、ユーザーは「この部分をクリックできる」「ここから次のページへ進める」と直感的に判断できます。
ただし、ホバー時に「色が変わる」という結果は同じでも、実際の実装方法は対象となるUIによって異なります。
例えば、ボタンの場合は背景色を変更するだけで十分なケースが多く、シンプルな方法で実装できます。
一方、写真やカードでは背景そのものを変更すると元のデザインを損なう場合があります。そのため、画像の上に半透明のレイヤーを重ねるオーバーレイや、影を追加して立体感を出す方法がよく使われます。
また、バナーやヒーロー画像では、単純な色変更ではなくグラデーションを重ねることで、画像の印象を保ちながら効果的なホバー表現を作れます。
このように、ホバー表現では「どのように見せたいか」「元のデザインをどこまで維持したいか」によって適した方法を選択します。
代表的なホバー表現は、以下の4種類です。
| 技術 | 主な用途 | 特徴 |
|---|---|---|
| 背景色を変える | ボタン・メニュー | 最もシンプルな色変化 |
| 半透明のレイヤーを重ねる | 写真・カード・ブランドカラーを維持したい要素 | 元のデザインを保ったまま変化を加えられる |
| シャドウで立体感を演出する | ボタン・カード・パネル | 浮き上がる印象を作れる |
| グラデーションを重ねる | 写真・バナー・ヒーロー画像 | 画像の雰囲気を変化させられる |
この4つの違いを理解すれば、「このデザインにはどの方法を使えばよいのか」を自分で判断できるようになります。
4つのホバー・HSLA実装を簡単なCSSコードで見てみよう
ホバー時の色変化にはさまざまな実装方法がありますが、基本的な考え方はどれもシンプルです。
ここでは、実務でよく使われる4つのホバー表現を、HTMLとCSSの簡単なサンプルコードとともに紹介します。まずは「どのような書き方をするのか」「どのような場面で使うのか」を大まかに理解しましょう。
各技術の詳しい実装方法や、HSLAを使った色の調整方法については、それぞれの解説記事で基礎から丁寧に説明しています。
気になるホバー表現があれば、あわせて確認してください。
背景色を変えるホバー（ボタン・メニューの基本）
背景色を変更するホバーは、最もシンプルで利用頻度の高い実装方法です。マウスカーソルを載せたときにボタンやメニューの背景色を変えることで、「現在この要素を選択している」という状態をユーザーへ視覚的に伝えられます。
ボタンやメニューなど、背景色だけを変更すれば十分なUIでよく使われます。CSSでは :hover を使ってホバー時のスタイルを追加するだけで実装できるため、初心者が最初に覚えるホバー表現としてもおすすめです。
HTML
CSS
background-color: #007b16;
}
.btn:hover {
background-color: hsla(129, 100%, 25%, 0.85);
}
ブラウザでの表示
ボタンにカーソルを合わせると色の変化がわかります。
通常時は background-color に通常の背景色を指定し、ホバー時はクラス名に :hover を付けて背景色を変更します。HSLAを使うことで、色相・彩度・明度・透明度を調整しながら、自然な色変化を表現できます。
詳しいHTML・CSSの書き方や、:hover の基本的な使い方については、以下の記事で詳しく解説しています。
👉 「CSSで背景色を変更するホバーの基本｜HTML・CSSの書き方からHSLAまで徹底解説」
オーバーレイで半透明のベールを重ねるホバー（写真・カードの基本）
オーバーレイは、元の背景や画像を変更するのではなく、その上に半透明のレイヤーを重ねることでホバー時の変化を表現する方法です。
そのため、写真やカードUIなど、元のデザインを残したままホバー効果を加えたい場面でよく使われます。
例えば、画像カードの場合、ホバー時に画像そのものの色を変更することはできません。その代わりに、画像の上へ白や黒の半透明レイヤーを重ねることで、明るくしたり暗くしたりする表現ができます。
この表現では、CSSの「::before」 や 「::after」 といった疑似要素でレイヤーを作成し、opacity を使って表示・非表示を切り替えるのが一般的です。
また、レイヤーの色を HSLA で指定すると、透明度を細かく調整できるため、自然なホバー効果を作れます。
HTML
<img src=”画像の保存先URL” alt=”風景画像”>
</div>
CSS
position: relative;
width: 640px;
}
.card img {
display: block;
width: 100%;
}
.card::after {
content: “”;
position: absolute;
inset: 0;
background-color: hsla(0, 0%, 100%, 0.3);
opacity: 0;
transition: opacity 0.3s ease;
}
.card:hover::after {
opacity: 1;
}
ブラウザでの表示
ボタンにカーソルを合わせると色の変化がわかります。
この例では、画像自体の色や明るさは変更していません。
画像の上に白い半透明レイヤーを重ね、ホバー時だけ白い半透明レイヤーを表示することで、画像そのものを変更せず、画像に上から白みを重ねて見た目を変える変化を表現しています。
逆に、黒い半透明レイヤーを重ねることで、画像を暗くしたような印象を作ることもできます。
①の背景色変更では「背景そのものを別の色に変更」していますが、②のオーバーレイでは「元のデザインを残したまま、その上に色を追加」しています。
そのため、写真・バナー・カードなど、デザイン性を重視するUIではオーバーレイがよく利用されます。
詳しい実装方法や ::after・content・opacity・transition・overflow: hidden の役割については、以下の記事で基礎から詳しく解説しています。
👉 「CSSオーバーレイの基本｜::after・opacity・HSLAを使ったホバー表現」
シャドウで立体感を演出するホバー
シャドウを使ったホバー表現は、色を変更するのではなく、要素に影を追加して浮き上がったように見せる方法です。
ボタンやカード、パネルなどのUIでは、ホバー時に少し影を強くすることで、「現在この要素を選択している」「クリックできる対象である」という状態を視覚的に伝えられます。
この表現では、CSSの box-shadow を使用します。通常時は控えめな影にしておき、ホバー時だけ影の大きさや濃さを変更することで、自然な動きを作れます。
また、影の色には HSLA を使うと便利です。例えば黒色の影でも、透明度を調整することで「薄く自然な影」や「はっきりした浮き上がり」を細かく表現できます。
HTML
CSS
background-color: #007b16;
color: #fff;
padding: 16px 40px;
border: none;
border-radius: 8px;
box-shadow: 0 3px 8px hsla(0, 0%, 0%, 0.2);
transition: box-shadow 0.3s ease;
}
.shadow-btn:hover {
box-shadow: 0 8px 20px hsla(0, 0%, 0%, 0.35);
}
ブラウザでの表示
ボタンにカーソルを合わせると色の変化がわかります。
この例では、通常時にも薄い影を付け、ホバー時に影を大きくすることで、ボタンが少し浮き上がったように見せています。
背景色を変更する①の方法や、色のレイヤーを重ねる②の方法とは異なり、シャドウは要素そのもののデザインを変えずに、位置や奥行きの印象を変化させるホバー表現です。
そのため、カードUIやボタンなど、現在のデザインを維持しながら「押せそう」「選択している」という印象を加えたい場合によく使われます。
詳しい box-shadow の書き方や、HSLAを使った影の調整方法については、以下の記事で詳しく解説しています。
👉 「CSS box-shadowの基本｜HSLAで作る自然なホバーシャドウ」
グラデーションを重ねるホバー
グラデーションを重ねるホバーは、単純に1色へ変更するのではなく、複数の色をなめらかにつなげた変化を加える方法です。
写真やバナー、ヒーロー画像など、デザイン性を重視する要素でよく使われます。
例えば、画像の上にグラデーションを重ねることで、ホバー時に画像の雰囲気を変えたり、文字を読みやすくしたりすることができます。
この表現では、CSSの linear-gradient() や radial-gradient() を使用します。さらにHSLAを組み合わせることで、色だけでなく透明度も細かく調整できるため、元の画像を残しながら自然なホバー効果を作れます。
HTML
<img src=”画像の保存先URL” alt=”グラデーション画像”>
</div>
CSS
position: relative;
}
.gradient-card img {
display: block;
width: 100%;
}
.gradient-card::after {
content: “”;
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
hsla(210, 100%, 50%, 0.6),
hsla(280, 100%, 50%, 0.6)
);
opacity: 0;
transition: opacity 0.3s ease;
}
.gradient-card:hover::after {
opacity: 1;
}
ブラウザでの表示
ボタンにカーソルを合わせると色の変化がわかります。
この例では、画像そのものを変更するのではなく、画像の上に赤・黄・青の3色が滑らかにつながる半透明のグラデーションレイヤーを重ねています。
ホバー時にこのグラデーションレイヤーを表示することで、画像の雰囲気を変えながら、デザイン性の高いホバー表現を実現しています。
②のオーバーレイも画像の上にレイヤーを重ねる方法ですが、グラデーションでは複数の色を組み合わせられるため、より印象的な演出が可能です。
そのため、写真を使ったサービスサイトやキャンペーンページなど、視覚的なインパクトを重視する場面でよく利用されます。
詳しい linear-gradient() の使い方や、HSLAを使ったグラデーションホバーの調整方法については、以下の記事で詳しく解説しています。
