インターフェースのホバー: 定義、効果の種類と実装

ウェブデザインにおけるホバーとは

ホバー（英語“to hover”から）— マウスカーソルが要素の上にあるときのインターフェース要素の視覚的な反応です。この用語は、CSS :hover偽クラスとホバー時の要素の状態の両方を指します。

ホバーの概念は、Xerox Alto（1973）の初期グラフィカルインターフェースに源を発し、1998年のCSS2の導入によりウェブで標準化されました。それ以来、ホバーはデスクトップにおけるユーザーエクスペリエンスの不可欠の一部となりました。

CSS Usage Statistics (2025)によると、トップ1000のサイトの94%が少なくとも一つの要素に:hover偽クラスを使用しています。ホバーは、ボタン（89%）、リンク（85%）、カード（62%）に最もよく適用されています。

ホバーと他の状態の違い

ホバー ≠ active。:hoverはマウスを上から回すと活性化され、:activeはクリックの瞬間に活性化されます。:focusはキーボードでフォーカスを得ると活性化されます。それぞれの状態には目的があります。ホバーはプレビュー、activeはアクションの確認です。

CSSの :hover偽クラス

CSSの:hover偽クラスは、ユーザーがマウスカーソルを要素の上に回すと、その要素にスタイルを適用します。これは何らのHTML要素でも動作しますが、もっともよくインタラクティブ要素で使用されます。

/* Basic hover implementation */
.button {
    background: #4A90D9;
    color: white;
    padding: 12px 24px;
    border: none;
    transition: all 0.3s ease;
}

.button:hover {
    background: #357ABD;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74,144,217,0.4);
}

:hoverセレクターの特徴性は、クラス（0,1,0）と同じです。特定の要素のホバーをオーバーライドする必要がある場合は、より高い特徴性のセレクターを使用してください。宣言順序は重要です。:hoverを:focusの後に宣言すると、フォーカス時にホバーが動作しない可能性があります。

組み合わせ偽クラス

:hoverは他の偽クラスと組み合わせることができます複雑なロジックを作成するために。例えば、.card:hover .card__titleは、カード全体にホバーしたときにカード内のタイトルのスタイルを変更します。これにより、ネストされたアニメーションを伴う効果を作り出すことができます。

ホバー効果の種類

ホバー効果は、変更されるプロパティの種類によって分類されます。それぞれの種類は異なるシナリオに適しており、ユーザーに特定の印象を与えます。

最も効果的な種類は、色と影の効果を組み合わせたものです。Material Designは、ホバーフィードバックの主要タイプとして、エレベーション変更（影の高さの変更）を推奨しています。

Google Material Design (2024)によると、ホバー効果は目立つが注意を散らすものではあってはなりません。推奨されるアニメーションの期間は200–300ミリ秒です。あまりにも速い効果（100ミリ秒未満）は気付かれない可能性があり、あまりにも遅い効果（500ミリ秒以上）はユーザーをイライラさせます。

滑らかな効果のためのCSSトランジション

CSSプロパティtransitionは、プロパティの変化を時間をかけてアニメーションすることで、ホバー効果を滑らかにします。transitionがなければ、ホバーは即時に活性化され、がっちゃいとなって目に良くありません。

/* Different transitions per property */
.card {
    transition:
        box-shadow 0.3s ease-out,
        transform 0.2s ease-out,
        background 0.15s linear;
}

.card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    transform: translateY(-4px);
}

transitionの期間はコンテキストによります。小さな要素（アイコン、リンク）は150–200ミリ秒。大きな要素（カード、モーダル）は250–350ミリ秒。イージング関数ease-outは、アニメーションを最後に滑らかに遅くし、自然な印象を与えます。

推奨される実践 — アニメートされる各プロパティに対して個別にtransitionを指定します。allプロパティは開発中に便利ですが、プロダクションでは予期せぬ効果を防ぐために、アニメーションに対して特定のプロパティを定義するほうが良いです。

タッチデバイスでのホバー

タッチデバイスでは、ホバーの概念は存在しません。要素の上にホバーできるカーソルがありません。要素をタップすると、ホバー状態を経なずに即時にクリックが発生します。インターフェースが完全にホバーに依存している場合、これは問題を引き起こします。

StatCounter (2026)によると、世界のウェブトラフィックの62%がモバイルデバイスからのものです。タッチ画面でのホバーの不存在を無視することは、多くのユーザーに対してUXの制御を失うことを意味します。

/* Disable hover on touch devices */
@media (hover: none) and (pointer: coarse) {
    .button:hover {
        background: initial;
        transform: none;
    }
}

hover: noneメディアクエリは、デバイスがホバーをサポートしていないことを検出することができます。このようなデバイスでは、ホバー効果が無効になり、インタラクションは:activeおよび:focus状態に基づいて行われます。代替解決策として、タップ時にホバーコンテンツを表示すること（1回目のタップでホバーを表示、2回目でアクションを実行）がありますが、このパターンはUXを悪化させます。

ホバー効果のアクセシビリティ

ホバーのアクセシビリティは、よく見落とされる重要な価値観です。キーボードでインターフェースを操作するユーザーは:hoverを活性化できません。ホバーでのみ利用可能な機能は、それらのユーザーにとってアクセス不可能になります。

WCAG 2.2規則（成功基準§1.4.13 — ホバーまたはフォーカス時のコンテンツ）によれば、ホバー時に表示されるコンテンツは、フォーカス時にも利用可能である必要があります。ホバーが追加情報（ツールチップ、ドロップダウンメニュー）を表示する場合は、同じ情報が:focusでも利用可能である必要があります。

/* Hover + focus for accessibility */
.tooltip-trigger:hover .tooltip,
.tooltip-trigger:focus .tooltip {
    opacity: 1;
    visibility: visible;
}

/* Disable animation for vestibular disorder */
@media (prefers-reduced-motion: reduce) {
    *:hover {
        transition: none;
    }
}

prefers-reduced-motionメディアクエリ — ユーザーのシステム設定を尊重します。ユーザーがシステムでアニメーションを無効にしている場合は、ホバー効果はtransitionなしで即時に適用される必要があります。これは、前庭険害のある人々を助けます。

追加の推奨。重要な機能にホバーを使用しない、ホバー時に情報を伝えるために色だけに依存しない（アイコンまたはテキストを追加）、ホバー状態のコントラストを十分に保証する。