マウスを乗せた瞬間の心地よさをデザインします。ボタン・カード・テキストリンク向けの10種類のエフェクトをその場で比較し、色と速度を調整してCSSまたはTailwindクラスとして書き出せます。
要素がふわりと浮き上がり、押せることを直感的に伝えます。
マウスを乗せて動きを確認してください
エフェクトを選ぶ（全10種）
一覧のサンプルにマウスを乗せると、それぞれの動きをその場で比較できます。クリックすると上のプレビューと書き出しコードに反映されます。
適用する対象
対象に応じて、書き出されるCSSのベーススタイル（余白・表示形式・角丸）が切り替わります。
配色と外観
移動量・拡大率・発光の広がりにまとめて反映されます
アニメーション
既存のプロジェクトの命名規則に合わせて変更できます。
書き出しオプション
.hover-target {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.9rem 2rem;
background: #4f46e5;
color: #ffffff;
border: none;
border-radius: 12px;
font-weight: 700;
cursor: pointer;
overflow: hidden;
isolation: isolate;
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1), color 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
.hover-target:hover {
transform: translateY(-8px);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
background: #4338ca;
color: #ffffff;
}
}
@media (prefers-reduced-motion: reduce) {
.hover-target,
.hover-target::before,
.hover-target::after {
transition-duration: 0.01ms;
}
}HTML側の要素に class="hover-target" を付与すると適用されます。
CSSホバーエフェクト生成ツール（hoverアニメーション・ジェネレーター）とは？
本ツールは、モダンなWebサイトで多用されるマイクロインタラクション（微小な動的変化）を、CSSだけで作成できるジェネレーターです。リフトアップ、発光、スライド充填、光沢スイープ、3D傾きなど10種類のエフェクトを一覧で並べ、実際にマウスを乗せて動きを比較しながら選べます。
適用対象をボタン・カード・テキストリンクから選ぶとベーススタイルが自動で切り替わり、配色・角丸・所要時間・イージング・クラス名を調整するだけで実装可能なコードが完成します。出力形式はCSS・Tailwindクラス・HTMLの3種類。 さらに、タッチ端末でホバーが焼き付く問題を防ぐ@media (hover: hover)と、動きを抑えたい利用者に配慮するprefers-reduced-motionへの対応コードをワンクリックで含められます。
こんなシーンで便利です
ボタン・CTAのクリック率向上
「ここが押せる」と直感的に伝わる動きを付与し、フォーム送信や資料請求への到達率を高めます。
カード型デザインの差別化
ポートフォリオや記事一覧で、カードが浮き上がる、あるいは奥行きを持って傾く演出を加え、洗練された印象を作ります。
テキストリンクの視認性改善
下線が伸びるアンダーラインや矢印スライドで、リンクであることと遷移先の方向を同時に伝えられます。
CSSアニメーションの学習
擬似要素とtransformを組み合わせた実装を、生成されたコードから読み解けます。GPU加速が効く書き方の実例としても使えます。
使い方は簡単 4ステップ
- 適用する対象（ボタン・カード・テキストリンク）を選択します。
- エフェクト一覧のサンプルにマウスを乗せて動きを比較し、使いたいものをクリックします。
- 配色・角丸・エフェクトの強さ・所要時間・イージングを調整します。
- 書き出しオプションを設定し、CSS・Tailwind・HTMLのいずれかをコピーします。
※イージングのSmooth（吸い付く戻り）は、標準のease-outより減速が長く、上質で落ち着いた印象を与えます。
ご利用時の注意点
- クラス名の変更：初期値は hover-target です。設定欄で自由に変更でき、HTMLの出力にも即座に反映されます。
- 擬似要素の利用：スライド充填・アンダーライン・光沢スイープ・矢印スライドは ::before または ::after を使用します。対象要素に position: relative が必要ですが、生成コードに含まれています。
- 重なりの制御：スライド充填では isolation: isolate によって独立した重ね合わせ文脈を作り、背景の擬似要素が要素の背景より前面かつテキストより背面に描画されるようにしています。
- トランジションの範囲：transition: all ではなく、変化するプロパティを個別に指定しています。意図しない再描画や既存スタイルとの競合を避けるためです。
- Tailwind出力について：任意の値（arbitrary values）を使用しています。JITが検出できるよう、出力された文字列はそのまま貼り付けてください。
ホバーエフェクト10種のCSS設定と向いている用途の一覧
本ツールが生成するエフェクトの一覧です。使用する主なCSSプロパティと、それぞれが得意とする用途をまとめています。
| エフェクト名 | 主なCSSプロパティ | 期待できるユーザー体験 | 向いている対象 |
|---|---|---|---|
| リフトアップ | transform: translateY(-8px) / box-shadow | 要素が浮き上がり、押せることを強調する | ボタン・カード |
| 拡大 | transform: scale(1.05) | 視覚的なフィードバックを強め、注目を集める | ボタン・カード |
| 発光（Glow） | box-shadow: 0 0 20px rgba(...) | 高級感やネオン風の近未来的な印象を与える | ボタン |
| スライド充填 | ::before { transform: scaleX(1) } | 背景が滑り込み、進行方向を感じさせる | ボタン |
| 枠線強調 | box-shadow: inset 0 0 0 4px | ゴーストボタンが引き締まり、静かな主張になる | ボタン |
| アンダーライン | ::after { transform-origin / scaleX } | 下線が伸び、リンクの視認性が高まる | テキストリンク |
| 光沢スイープ | ::after { translateX / skewX } | 斜めの光が走り、ガラスや金属の質感を演出 | ボタン・カード |
| 3D傾き | transform: perspective() rotateX() | 奥行きが生まれ、立体的なカードUIになる | カード |
| 押し込み | box-shadow: 0 8px 0 / translateY | 厚みが沈み込み、物理的な手触りを再現する | ボタン |
| 矢印スライド | ::after { content: '→' / translateX } | 次へ進む導線であることを明示できる | ボタン・リンク |
【CSSアニメーションを60fpsで滑らかに保つ原則】
transform（scale, translate, rotate）とopacityの変更は、レイアウト計算と塗りの工程を飛ばして合成のみで処理されるため、GPU加速が効き滑らかに動きます。一方で width、height、margin、top などを直接アニメーションさせるとリフロー（再レイアウト）が発生し、要素数が多いページほど顕著にカクつきます。本ツールが生成するコードは、動きの主体をすべて transform と box-shadow に寄せています。
イージングが印象を決める
標準の ease よりも cubic-bezier(0.23, 1, 0.32, 1) のように終盤の減速が長い曲線を使うと、吸い付くように止まる上質な動きになります。逆に反発を含む曲線は、カジュアルで親しみやすい印象を与えます。用途に応じて使い分けてください。
所要時間の目安
ホバー演出は 0.2秒から0.4秒 が扱いやすい範囲です。0.15秒未満だと変化に気づきにくく、0.6秒を超えると操作に対して重く感じられます。カードのような面積の大きい要素はやや長め、テキストリンクは短めが自然です。
実務でホバーエフェクトを組み込む際のパフォーマンス設計とコード管理の指針
生成したコードを実際のプロダクトへ統合するにあたり、描画負荷の抑制、コンポーネント設計への落とし込み、デザインシステムへの組み込みを効率的に進めるための考え方を解説します。
will-changeによる事前最適化と、指定しすぎたときに起きるメモリ圧迫
アニメーションさせる要素にwill-change: transformを指定すると、ブラウザが変化を事前に把握してレイヤーを分離するため、初回ホバー時の一瞬の引っかかりを抑えられます。
ただし、レイヤーの生成はメモリを消費するため、一覧ページの全カードに一括指定すると逆効果になります。数十件を超えるリストでは指定を外すか、ホバーする直前にのみ付与する設計を検討してください。本ツールの生成コードでは、ボタンとカードに限定して付与しています。
タッチ端末でホバーが焼き付く問題と、メディアクエリによる切り分け
スマートフォンでは :hover がタップ時に発火し、画面遷移するまでホバー状態が残り続けることがあります。カードが浮いたまま固まる、色が変わったまま戻らないといった違和感の原因です。
対策は @media (hover: hover) and (pointer: fine) でホバー用スタイルを囲い、マウス操作の環境に限定すること。タッチ端末では代わりに :active による一瞬のフィードバックを設計するのが定石です。本ツールは書き出しオプションからこのメディアクエリを含められます。
CSSカスタムプロパティでエフェクトを一元管理し、サイト全体の統一感を保つ
秒数やイージング関数を各コンポーネントへ直接書き込むと、サイト全体のリズムを調整したくなったときに修正箇所が散らばります。:root に --hover-duration や --hover-ease といったカスタムプロパティを定義し、生成コードの数値をそれらへ置き換えてください。テーマ変更や速度の微調整を1箇所の修正で全体へ反映でき、デザインシステムとしての一貫性を保てます。
動きを減らしたい利用者への配慮は、演出を消すのではなく最小化する
前庭障害や視覚過敏のある利用者にとって、大きな移動や拡大は不快感の原因になります。OSの設定は prefers-reduced-motion メディアクエリで検知できます。
ここで重要なのは、アニメーションを完全に削除するのではなくトランジション時間をごく短くして状態変化そのものは残すことです。変化が消えると「押せる要素かどうか」の手がかりまで失われるためです。本ツールの生成コードもこの方針を採っています。
ホバーエフェクト実装でよくある失敗と対策
トランジションの指定漏れで、アニメーションせず一瞬で切り替わる失敗
ホバー時のスタイル（:hover）だけをコピーし、通常時のセレクタに transition を書き忘れるケースです。この場合、状態は変わるものの補間が行われないため、パッと切り替わるだけの素っ気ない挙動になります。逆に通常時にだけ transition を書いてホバー解除時の戻りが効かない、という取り違えも頻発します。
💡 対策・解決策を見る▼
widthやmarginを直接アニメーションさせて、画面全体がカクつく失敗
ボタンを大きく見せようとして width や padding、margin を変化させると、その要素だけでなく周囲のレイアウト計算がやり直されます。これがリフローで、一覧ページのように対象が多い画面ではフレーム落ちが顕著になり、ホバーするたびに周囲の要素がずれる現象も起こります。
💡 対策・解決策を見る▼
スマートフォンでタップ後にホバー状態が残り続ける失敗
PC向けに作ったホバー演出がタッチ端末でもそのまま発火し、タップした要素が浮いたまま、あるいは色が変わったまま固定されるケースです。画面遷移するまで解除されないため、利用者には「反応が固まった」ように見え、体験を損ないます。
💡 対策・解決策を見る▼
重ね順の考慮不足で、浮き上がった要素や背景の演出が隠れる失敗
カードにリフトアップや発光を適用したとき、隣接する要素や親コンテナの重ね合わせ文脈の都合でエフェクトが背後に回り込み、影が切れて見えることがあります。スライド充填のように擬似要素を背景として使う演出では、要素自身の背景色に隠れて何も見えない、という失敗も起こりがちです。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.このツールで生成したCSSコードは商用サイトでも自由に使えますか
A. はい、商用サイトの制作、クライアントワーク、個人のポートフォリオなど、目的を問わず自由にご利用いただけます。クレジット表記やリンク設置の義務もありません。生成されるのは標準的なCSSプロパティの組み合わせであり、特定のライブラリへの依存もないため、そのままプロジェクトへ組み込めます。
Q.スマートフォンでタップした後にホバー状態が残ってしまう問題は回避できますか
A. 回避できます。書き出しオプションのタッチ端末を除外する設定を有効にすると、ホバー時のスタイルがhover対応かつポインタ精度の高い端末に限定して適用されるメディアクエリで囲まれた状態で出力されます。これにより、スマートフォンやタブレットでタップした要素が浮き上がったまま残る、いわゆるホバーが焼き付く現象を防げます。
Q.TailwindCSSを使っているプロジェクトでも利用できますか
A. 利用できます。コード出力欄のTailwindタブに切り替えると、任意の値を用いたクラス文字列が書き出されます。擬似要素を使うエフェクトについてもbeforeとafterの修飾子を用いた形式で出力されます。なお、クラス名を実行時に文字列結合で組み立てると検出されない場合があるため、出力された文字列はそのまま貼り付けてください。
Q.アニメーションを控えたい利用者への配慮は必要ですか
A. 必要です。前庭障害や視覚過敏のある方にとって、大きな動きは不快感や体調不良の原因になることがあります。書き出しオプションで動きを減らす設定への対応を有効にすると、OSでアニメーション軽減を選択している利用者に対してトランジション時間をほぼゼロにするコードが追加されます。動きを完全に消すのではなく最小限に抑える方式のため、状態変化そのものは維持されます。
Q.入力したカラーコードや設定値が外部に送信されることはありませんか
A. ありません。本ツールはカラーコード、所要時間、イージング、クラス名などのすべてのデータを利用者のブラウザ内だけで処理する完全ローカル設計です。サーバーへの送信もデータベースへの保存も行われないため、公開前のプロダクトの配色を扱う場合でも安全にご利用いただけます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。