修正依頼を受けて「どう対応しよう？」と頭を抱えることはありませんか。この記事では、HTML・CSSデザイナーが職場であるある！と感じる困りごとの解決策をご紹介します。今回は、アニメーションを取り入れたHoverスタイル。動画とともに7つご紹介します。試してみたくなるコードが見つかるはず。
「テキストリンクが分かりにくい…」
あなたならどう修正する？
修正依頼者
テキストリンクに動きを付けることはできますか？分かりにくいみたいで…。
自分
確認します。
修正依頼者
このボタンも、変化がなく分かりにくいようです。何かできそうですか？
自分
承知しました。修正します。
（どのように対処しようかな...？）
ウェブデザインにおいて、ユーザーの使いやすさを向上させることは大切です。特に、ユーザーがマウスオーバーした際にどのように要素が反応するか、つまりHoverスタイルは、直感的な操作をするのに重要な役割があります。
しかし、Hoverスタイルが明確でないか、あるいは全く気づかれないウェブサイトを時折見かけます。
そこで今回は、ユーザーに明確で理解しやすいHoverスタイルを実現するためのCSSテクニックを紹介します。サイトの使いやすさを向上させましょう。
良くない例。Hoverアニメーションを使用すると
【1】カーソルをのせても全く変化がない状態。リンクだと認識しにくい
リンクであると認識させるため、下線やテキストカラー、背景色を明確に変化させましょう。
【2】文章内のテキストリンクにスタイルを適用していない状態。リンクを見つけることが困難
リンクスタイルにもテキストカラーやフォントスタイル（ウェイト）を適用し、Hoverスタイルで下線とテキストカラーを変化させることで、リンクでページ遷移することが明確になります。
これらのHoverスタイルは、基本的なもので、最低限適用すべきスタイルです。
本記事では、ユーザーにとってより分かりやすく、使いやすいUIにするため、アニメーションを取り入れたHoverスタイルを7つご紹介します。
アニメーションを使用する理由は、状態の変化を動的に示すことで、ユーザーに対してその変化を視覚的に明瞭に伝えるためです。パッと切り替えるよりも、アニメーションを用いることで、ユーザーは変化をよりはっきりと認識し、理解しやすくなります。
1. 下線アニメーション
リンクとしては、一番スタンダードなテキストリンク。
サンプルでは、下線のアニメーションでHoverスタイルを表現しています。
下線はtext-decoration: underline で指定可能です。しかし、線をアニメーションさせることができません。
そこで、疑似要素（::after）を使って下線を作ります。Hoverした際は左から右にアニメーションされ、カーソルを外すと右へ消えていきます。
HTML
<div class="text"><a href="">テキストリンク</a></div>
CSS
.text a {
display: inline-block;
position: relative;
padding-bottom: 16px;
text-decoration: none;
transition: color .3s;
}
.text a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
transform: scaleX(0);
transform-origin: bottom right;
width: 100%;
height: 3px;
background-color: #4c7aaf;
transition: transform .3s;
}
@media (hover) {
.text a:hover {
color: #4c7aaf;
}
.text a:hover::after {
transform: scaleX(1); /* 0→1でX軸方向に100%変形 */
transform-origin: bottom left;
}
}
2. 矢印アニメーション
トップページコンテンツなどで下層ページへ誘導する際に使われる矢印リンクは、矢印を動かすことで、リンクであると分かりやすくなります。
サンプルではシンプルな矢印を疑似要素（::after）を使ってCSSで作成し、Hoverした際にtransform: translateX(10px)で横に移動させています。矢印は画像でも結構です。
HTML
<div class="arrow"><a href="">矢印リンク</a></div>
CSS
.arrow a {
display: flex;
align-items: center;
gap: 32px;
text-decoration: none;
transition: color .3s;
}
.arrow a::after {
content: '';
display: block;
transform: rotate(45deg);
width: 12px;
height: 12px;
border-top: 3px solid #333;
border-right: 3px solid #333;
transition: transform .3s;
}
@media (hover) {
.arrow a:hover {
color: #4c7aaf;
}
.arrow a:hover::after {
border-top: 3px solid #4c7aaf;
border-right: 3px solid #4c7aaf;
transform: translateX(10px) rotate(45deg); /* X軸方向に10px動かす */
}
}
3. ボタンアニメーション
ボタンはリンクだけでなく、メニューを表示させる際や、フォーム送信時にも使われており、重要な要素で利用することが多いです。
サンプルでは、テキストカラーや背景色だけでなく、Borderカラーやボタンサイズを変化させ、より分かりやすく変化を明示させています。
HTML
<div class="button"><button type="button">ボタン</button></div>
CSS
.button button {
width: 320px;
height: 80px;
background-color: #d9d9d9;
border: 3px solid rgba(0 0 0 / 0);
transition: all .3s;
}
@media (hover) {
.button button:hover {
transform: scale(1.1); /* ボタンを1.1倍拡大 */
color: #f4f4f4;
background-color: #4c7aaf;
border: 3px solid #90b3dc;
border-radius: 16px;
}
}
ボタンサイズを変化させるためにtransform: scale(1.1)を使用したり、ボタンの変化前にborder: 3px solid rgba(0 0 0 / 0)を指定したのは、ボタン周辺の要素に影響を与えないためです。
ボタンサイズをwidth やheight で変化させると、ボタン要素周辺の要素の位置も合わせて変わってしまいます。border も0pxから3pxに変化すると、周りの要素が3px分ずれます。
ボタンの変化があっても他要素に影響を与えないことで、ボタンへの意識が集中します。
4. リストアニメーション
ナビゲーションやサイドバー、フッターなどで利用されることが多い、リスト形式のリンクアニメーションです。
サンプルでは、本記事で紹介した下線アニメーションを利用し、背景色アニメーションを組み合わせてリストHoverスタイルを実装しています。
a の疑似要素（::before）で下線、疑似要素（::after）で矢印を作成します。
この他に背景色アニメーションを実装するために疑似要素が必要なのですが、aタグはすべて使用しているので、その親要素のli の疑似要素（::before）を使います。
リンクのHoverスタイルは主にaタグへ指定することが多いですが、今回のように、aタグとaタグを包括する親要素（今回はliタグ）のサイズが同じであれば、親要素も使ってHoverスタイルを適用できます。
HTML
<div class="list">
<ul>
<li><a href="">リストリンク</a></li>
<li><a href="">リストリンク</a></li>
<li><a href="">リストリンク</a></li>
</ul>
</div>
CSS
.list li {
position: relative;
border-bottom: 1px solid #c9c9c9;
}
.list li::before { /* 背景色 */
content: '';
position: absolute;
top: 0;
left: 0;
transform: scaleX(0);
transform-origin: right;
width: 100%;
height: 100%;
background-color: #f0f5fb;
transition: transform .3s;
}
.list a {
display: flex;
align-items: center;
position: relative;
padding: 24px;
gap: 32px;
text-decoration: none;
transition: color .3s;
}
.list a::before { /* 下線 */
content: '';
position: absolute;
bottom: -2px;
left: 0;
transform: scaleX(0);
transform-origin: bottom right;
width: 100%;
height: 3px;
background-color: #4c7aaf;
transition: transform .3s;
}
.list a::after { /* 矢印 */
content: '';
display: block;
transform: rotate(45deg);
width: 12px;
height: 12px;
border-top: 3px solid #333;
border-right: 3px solid #333;
transition: transform .3s;
}
@media (hover) {
.list li:hover::before {
transform: scaleX(1); /* 0→1でX軸方向に100%変形 */
transform-origin: left;
}
.list a:hover {
color: #4c7aaf;
}
.list a:hover::before {
transform: scaleX(1); /* 0→1でX軸方向に100%変形 */
transform-origin: bottom left;
}
.list a:hover::after {
border-top: 3px solid #4c7aaf;
border-right: 3px solid #4c7aaf;
}
}
5. ロゴシャドウアニメーション
ロゴは、Hoverスタイルが適用されていることが少ない要素の一つです。変化させていたとしても半透明にする程度のことが多いでしょう。
サンプルでは、png形式やsvg形式で作成されたロゴ画像のロゴデザインに合わせてHoverスタイルを適用させています。
filter: drop-shadowを使うと、影が画像の枠を対象とするのではなく、ロゴ画像内のロゴデザインを対象にできます。
※ロゴガイドラインに沿ったデザインを採用してください。禁止されている表現はせず、分からない場合にはロゴ制作者に確認をとることをおすすめします
HTML
<div class="logo-shadow">
<a href=""><img src="logo.png" alt="Logo Design"></a>
</div>
CSS
@media (hover) {
.logo-shadow a:hover img {
filter: drop-shadow(0 0 8px #4c7aaf);
}
}
6. ロゴカラーアニメーション
テキストでなくてもSVGコードを使えばCSSで文字の色を変化させることができます。svg { fill: #4c7aaf }のように、fill プロパティにカラーコードを指定するだけで変化することが可能です。
※ロゴガイドラインに沿ったデザインを採用してください
Illustrator でロゴファイルを表示し、「ファイル」→「別名で保存」をクリック。ファイル形式を「SVG（svg）」を選択してから「保存」をクリックすると、下画像のように「SVG オプション」が表示されます。
「SVG オプション」内の「SVGコード」をクリックすると別ウィンドウでSVGコードが表示されるので、そのコードをコピペします。
詳細は、以下記事が参考になるので、合わせてご覧ください。SVGコードの中には不要なコードがあり、参考記事では削除箇所も紹介されています。
・SVG Tips vol.1 - IllustratorからSVGを書き出す方法
https://note.com/matsu_eri/n/nb56c1014219e
・SVG Tips vol.2 - SVGをウェブページに表示する方法
HTML
<div class="container logo color">
<a href=""><svg version="1.1" id="logo-design" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 768 768"><path d="M0,388.5V210.2h41.5v144.6h88.9v33.6H0z"/><path d="M246.7,391.5c-14.1, …省略 /></svg></a>
</div>
CSS
@media (hover) {
.logo-color a:hover svg {
fill: #4c7aaf;
}
}
7. 写真アニメーション
ロゴHoverスタイルと同じくらいがおざなりになりがちな写真（イラスト含む）のHoverスタイル。ブログ一覧などでよく使われます。
サンプルでは、カーソルをのせるとfilter: blur が適用され、ぼかしがかかります。ただ、ぼかしは一瞬だけでその後は通常表示になります。これは、Hover時も写真を見やすくするため。写真が重要なコンテンツであるサイトには、このスタイルがおすすめです。
ぼかしがなくなるとHoverしているのか分からないため、他のHoverスタイルも合わせて適用します。ここでは、borderとborder-radius（角丸）を変化させました。
HTML
<div class="picture">
<a href=""><img src="sample-image.jpg" alt="Sample Image"></a>
</div>
CSS
.picture a {
display: block;
}
.picture img {
display: block;
max-width: 100%;
height: auto;
border: 4px solid rgba(0 0 0 / 0);
transition: all .3s;
}
@keyframes pictureAnimation {
0% {
filter: blur(0);
}
10% {
filter: blur(10px); /* 10%だけにblurを適用 */
}
0% {
filter: blur(0);
}
}
@media (hover) {
.picture a:hover img {
animation: pictureAnimation .3s;
border: 4px solid #a9a9a9;
border-radius: 24px;
}
}
・・・
本記事で紹介したHoverスタイルは一例です。値を変えたり、他の変化と組み合わせることで、多様なスタイルを実装することができます。サイトイメージに合わせたHoverスタイルを実装するようにしましょう。
Webデザイナー。Webサイト制作をメインにサイト設計からデザイン、コーディングまでをワンストップで請負うフリーランスWebデザイナーとして活動。シンプルで伝わりやすいデザインを得意とし、中小企業のコーポレートサイト制作を主として制作。Twitter（@pulpxstyle）では、自身の経験から得た制作の現場で使えるTipsやアイデアを発信中。著書は、『現場で使える Webデザインアイデアレシピ』（マイナビ出版）。
▼これまでのHTML・CSS修正のアイデア
・fit-contentで画像キャプションを最適化するには
・モニターサイズに合わせて画像を出し分けする方法
・モニターサイズに合わせて改行位置を指定する方法
・ 読みやすい文章にするコーディング
・リンクとボタンのデザインの基本
