【Next.js】ホバーで動くカードの作り方を解説

公開日: 2026年9月12日 · 読了目安 8 分

Next.js で機能カードや作品カードにホバー演出を付ける方法。scale と影の使い分け、タッチデバイス、完成セクションの流用。

先に結論：ホバーは「一点」だけ反応させる

カード全体が大きく膨らみ、影が広がり、中の画像もズームすると、今っぽさより忙しさが先に来ます。反応は、枠・画像・アイコンのうち1つです。

transition は 150〜200ms、イージングは減速寄り。scale は 1.02 前後が扱いやすいです。

作り方は3つです。CSS の hover。マウス位置で光る。完成しているカードグリッドを載せる。

1つ目は、隣のカードまで動くことです。transform は自分だけです。

2つ目は、タッチ端末で sticky hover が残ることです。ホバー必須の情報は置かない。

3つ目は、リンク全体がカードなのに、中に別ボタンがあることです。クリック領域を1つにします。

hover:scale-[1.02] と duration-200。画像だけ overflow-hidden の中で scale する方が、カード全体を膨らませるより落ち着きます。

マウス座標でグラデーションを動かす演出です。"use client" が必要で、モバイルでは切ります。LP の全カードに付けないでください。

ホバーの縮尺、画像のクロップ、タイポまで揃った塊は、Card 連打では出ません。

DesignLayer でライブ確認してから載せてください。https://design-layer.com/components

無料コピーは1日3回です。機能紹介の型は https://design-layer.com/articles/nextjs-features-section-guide です。

1. フォーカス時も同じ強調があるか。2. 動きが情報の唯一の手がかりになっていないか。3. 画像の alt があるか。4. モバイルでホバー前提になっていないか。