簡単に作れて見栄えする!CSSで作るリッチなhover演出

2018.06.21

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

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

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

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

サンプルと作り方

(1)下線を表示する

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


(2)背景色を変える

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


(3)枠線を表示する

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


(4)背景画像を拡大する

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


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

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

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

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


対応ブラウザについて

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

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

Windows:Microsoft Edge 最新版

まとめ

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

Web戦略から制作、グロースまで総合的に支援します
シナップはサービスの継続的な成長をサポートするデザインコンサルティングです。戦略的から制作・開発、そしてサービスのグロース・運用まで、すべてのワークフローにおいて支援が可能です。
この記事をシェアする
小川 大樹
小川 大樹
アパレル販売員を経験後、もの作りがしたいという思いからweb業界へ転職。独学でフロントエンドの技術を学ぶ。無垢材や綿100%のシャツなどナチュラルな雰囲気のものが好き。

関連記事