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

2018.06.21
  • UXデザイン

はじめまして。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%のシャツなどナチュラルな雰囲気のものが好き。

関連記事

Webサービスを成功に導くシナップのUXリサーチ

2023.10.04
  • UXデザイン

一見良さそうに見えるデザインにも問題点が… デザイン4大原則から考えるUIデザインの完成度を高める方法

2023.06.06
  • UXデザイン
  • UI/UX

カスタマージャーニーマップは何で作る?カスタマージャーニーマップを作るツール3選

2022.10.25
  • UXデザイン

UXリサーチとは?今日からスモールスタートで始めるUXリサーチ

2022.06.14
  • UXデザイン

成長するサービスに必要不可欠なデザインシステム4つのメリット

2021.11.09
  • UXデザイン

成長するサービスを支えスケールを可能にするデザインシステムとは

2021.10.12
  • UXデザイン

いますぐできる利用者のネガティブな感情を取り除き、 ポジティブな感情をもたらすUXデザインのヒント

2021.04.13
  • UXデザイン

春のスタートダッシュを決めよう!~2021年度版:Web業界の新人さんにオススメの書籍10選~

2021.04.07
  • UXデザイン

この3つだけはおさえておきたい。明日から作業効率が大幅アップする!この半年で行われたAdobeXDの新機能(2020年6月-12月)

2021.01.14
  • UXデザイン

2020年春からおさえておきたいデザイントレンド 7選

2020.04.14
  • UXデザイン

参考にしたいデザインシステムまとめ 10選

2019.04.11
  • UXデザイン

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

2018.06.21
  • UXデザイン

パーツごとに見るモバイルUI:参考にしたいUIまとめ

2017.09.12
  • UXデザイン

パーツごとに見るモバイルUI:フォームの事例と、UIを考えるときのポイント

2017.09.06
  • UXデザイン

パーツごとに見るモバイルUI:カルーセルの事例と、設計・デザイン時に気をつけること

2017.08.29
  • UXデザイン

パーツごとに見るモバイルUI:ハンバーガーメニューを押した際のナビゲーションの表現方法

2017.08.23
  • UXデザイン

パーツごとに見るモバイルUI:ハンバーガーメニュー以外の特徴的なメニュー表現の事例紹介

2017.08.09
  • UXデザイン

視覚で伝わるインフォグラフィック!面白い事例も作ってみました!

2017.06.01
  • UXデザイン

初めてでも大丈夫!Adobe XDの書き出し機能と使い方

2016.12.14
  • UXデザイン

スムーズに検索させよう!複雑な検索をするときの画面やUIパターン

2016.02.09
  • UXデザイン

よくわかるIoTの仕組み 「モノ」とインターネットを接続するには

2015.11.19
  • UXデザイン

記事をページ分割するメリット・デメリット(モバイルフレンドリー対応)

2015.08.07
  • UXデザイン

モバイルフレンドリー対応:スマホで読まれる文字数は?

2015.07.30
  • UXデザイン

スマホサイトの「続きを読む」は必要か?(モバイルフレンドリー)

2015.05.28
  • UXデザイン

人気記事

このサイトでは、利用状況の把握などのために、プライバシーポリシーに基づき、Cookieを使用してアクセスデータの取得・利用等を行います。