BLOG



201806_csshover_top.jpg

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

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

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

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

サンプルと作り方

(1)下線を表示する

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

See the Pen Hover - Undeline by ogawa (@ogawa_t_s) on CodePen.

(2)背景色を変える

(1)のコードを少し変更すると、背景色を変えることもできます。

1番目にオーソドックスな背景色変更を置いたので、比べてみてください。

See the Pen Hover - Background by ogawa (@ogawa_t_s) on CodePen.

(3)枠線を表示する

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

See the Pen oyvzdK by ogawa (@ogawa_t_s) on CodePen.

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

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

See the Pen HoverEffect - Blur by ogawa (@ogawa_t_s) on CodePen.

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

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

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

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

See the Pen HoverEffect - Navigation by ogawa (@ogawa_t_s) on CodePen.

対応ブラウザについて

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

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

Windows:Microsoft Edge 最新版

まとめ

ユーザーの操作によって反応するアニメーションなどをマイクロインタラクションと呼びますが、ちょっとした工夫でよりリッチな体験を演出できるので、状況に応じてさりげなく盛り込んでいきたいですね。

SINAPでは、ユーザーの目的と体験をトータルに考えたUI設計を得意としています。
UIデザインでお困りの方は、ぜひお気軽に弊社までご相談ください。

UI改善のお手伝いを行なっております

シナップは、Webサイト、アプリ、IoTなどインターネットとつながるユーザー接点すべてをデザインし、クライアントのビジネス立ち上げ、サービスの継続的発展をサポートすることを得意としている会社です。
UI改善に関するご相談がございましたら、お気軽にお問い合わせください