はじめまして。5月に入社しました、エンジニアの小川です。

皆さんのwebサイトではアニメーションを使用しているでしょうか。ここ数年の間に、CSS3(*1)の普及により、CSSで表現できることはかなり広がりました。

前職でCSSアニメーションを使った制作をしていましたので、 今回は自己紹介も兼ねて簡単に作れて見栄えするPCでのhover演出をいくつかご紹介します。マウスオーバーで表示されますので、試してみてください。

(*1)便宜的にCSS3という言葉を使いましたが、厳密にはCSS3という包括的な標準は存在せず、ColorやSelectorなどModuleごとに分かれて標準化されています。

サンプルと作り方

（１）下線を表示する

様々なサイトでよくみる演出です。リンクで使われていることが多いですね。いくつかバリエーションを掲載します。HTML/SCSSのボタンをクリックするとコードを見ることができます。

（２）背景色を変える

（１）のコードを少し変更すると、背景色を変えることもできます。
1番目にオーソドックスな背景色変更を置いたので、比べてみてください。

（３）枠線を表示する

ホバーすると枠線を表示します。下線同様、擬似要素に枠線のスタイルを指定して重ねています。

（４）背景画像を拡大する

背景画像を拡大し、オーバーレイをかけています。

工夫次第でこんな使い方も

JavaScriptと組み合わせると、より複雑な演出が可能です。以下の演出はCSSのみでも可能かもしれませんが、工数や実用性の面で一般的にJavaScriptで実装されることが多いため、今回はJavaScriptを使いました。

グーバルナビゲーションなどで良く見られるActive状態を設定した動きです。

クリックしたボタンがActiveになり、下線が追従します。

対応ブラウザについて

今回ご紹介した演出を確認した環境は以下の通りです。（2018.06.05現在）

Mac：Chrome 最新版 / Firefox 最新版 / Safari 最新版

Windows：Microsoft Edge 最新版

まとめ

ユーザーの操作によって反応するアニメーションなどをマイクロインタラクションと呼びますが、ちょっとした工夫でよりリッチな体験を演出できるので、状況に応じてさりげなく盛り込んでいきたいですね。
SINAPでは、ユーザーの目的と体験をトータルに考えたUI設計を得意としています。
UIデザインでお困りの方は、ぜひお気軽に弊社までご相談ください。