COLUMN コラム

ボタンやナビゲーションメニューといったリンク付きのコンポーネントを実装する際には、hover設定（マウスオーバー時の設定）を行うことが多いと思います。リンクであることが分かりやすいよう見た目・アクションを整えるのはUI作成の基本でもありますよね。（意図がある場合は別ですが）

そして、このhover設定にはデザインをリッチに見せるために意識しておくと良いポイントが隠れています。些細なポイントにはなりますが、今回はこのhoverアクションにスポットを当てて、お話ししていきたいと思います。

1. hover時のtransition設定

hover（マウスオーバー）した際に色や見た目を変更する設定をした場合、単純にカラーやサイズに変化を加えるだけで終わらせず「transition」を併せて使用すれば、滑らかに変化するアニメーション効果を施すことができます。

transitionとは
“トランジション (transition) は、要素の2つの状態間の変化を定義するためのものです。”

MDN引用: https://developer.mozilla.org/ja/docs/Web/CSS/transition

1-1. 「transition」を設定してリッチさをプラス

例えば下二つのボタンについて、印象の違いを比べてみてください。（パソコンでご覧ください）

設定なし設定あり

左が「transition」設定なしのボタン、右が「transition: 0.8s」を設定したボタンです。

「transition」を設定した方がパッと色が切り替わるよりどことなく余裕があって優雅な雰囲気を感じませんか？

もちろんパッと色が切り替わるのは良くないというわけではなく、あくまでデザインテイストやテーマに合わせ意図に沿っていることが大切です。

1-2. transitionの設定方法

「transition」は以下4つのプロパティを一括指定できるショートハンドプロパティです。
 
　transition-delay:　トランジション効果が始まるまでの待ち時間を指定
　transition-duration:　アニメーションが完了するまでの所要時間を秒数またはミリ秒数で指定
　transition-property:　トランジション効果を適用するCSSプロパティを指定
　transition-timing-function:　変化の度合い（中間状態の値を算出する方法）を指定

効かせたい要素に「transition」を設定します。

.sample:hover { transition: 0.3s; }

上のようにショートハンドで記述する注意点として、さらにプロパティの指定をしておくのがベターです。というのも、何も指定しないと初期値allが効くため、意図しない動きを発生させたりバグにつながる可能性があります。

/* プロパティまで指定する */
.sample:hover { transition: opacity 0.3s, transform 0.3s; }

hover時に滑らかに変化させたいのがopacityやtransformだけの場合、上のように記述すると指定したプロパティだけにアニメーションが作用するので安心です。

2. 背景色をグラデーションカラーにしたときの注意点

残念なことに、背景色をグラデーションカラーにしたときは上述のhover時に「transition」設定しただけではアニメーションが効きません。

しかし少し工夫すればグラデーションカラーの背景色を使用した場合にもちゃんと「transition」を効かせることができます！「擬似要素（before, after）」を使用したり、「background-position」を活用したりといくつか手段が取れるので、また次回ご紹介できればと思います。

3. おわりに

今回は普段何気なく設定しているhoverアクションにスポットを当て、意識・工夫することでデザインのリッチさを少し向上させるポイントについてシェアしました。

些細な点ではありますが、こうした点の積み重ねで全体の良さを底上げしていけると思いますので、ぜひ意識して制作していきましょう！