カスタムカーソル（Custom Cursor）はどんな効果ですか？

マウスカーソルを独自デザインに置き換える効果。リンクホバー時に拡大して反応。プレミアム感のあるサイトに必須。ブランドサイト・ポートフォリオ・LPのファーストビューなど、世界観を演出したい場面に向く演出です。

Custom CursorはCSSだけで実装できますか？

見た目はCSSで作れますが、動きの制御にJavaScriptを併用します。本ページではHTML・CSS・JavaScriptのコードをまとめて掲載しています。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

Custom Cursor（カスタムカーソル） — CSS+JS · AIプロンプト付き

CODE

HTML

<div class="demo-stage cc-stage"><p class="cc-text">この領域でマウスを動かしてみてください</p><a href="#" class="cc-link">HOVER ME</a></div>

CSS

.cc-stage { position: relative; min-height: 280px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem; cursor: none; background: #1A1A1A; border-radius: 12px; }
.cc-text { color: #999; font-size: .9rem; }
.cc-link { color: #fff; text-decoration: none; font-family: 'Oswald', sans-serif; letter-spacing: .3em; padding: 1rem 2rem; border: 1px solid #fff; }
.cc-dot { position: fixed; width: 8px; height: 8px; background: #E91B89; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 9999; transition: transform .15s ease; }
.cc-dot.expand { transform: translate(-50%, -50%) scale(4); background: rgba(233, 27, 137, .3); }

const dot = document.createElement('div'); dot.className = 'cc-dot'; document.body.appendChild(dot);
document.querySelector('.cc-stage')?.addEventListener('mousemove', e => { dot.style.left = e.clientX + 'px'; dot.style.top = e.clientY + 'px'; });
document.querySelector('.cc-link')?.addEventListener('mouseenter', () => dot.classList.add('expand'));
document.querySelector('.cc-link')?.addEventListener('mouseleave', () => dot.classList.remove('expand'));

AI PROMPT

Claude Cursor v0

PROMPT

マウス追従の独自カーソルを作って。通常時は8pxのピンクドット、リンクhover時にscale(4)で半透明化して拡大。position:fixed+pointer-events:none+z-index:9999で固定。transition:.15s easeで滑らか追従。bodyのcursor:noneで元カーソル隠す。

カスタムカーソル（Custom Cursor）とは

マウスカーソルを独自デザインに置き換える効果。リンクホバー時に拡大して反応。プレミアム感のあるサイトに必須。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。

使いどころ

ブランドサイト・ポートフォリオ・LPのファーストビューなど、世界観を演出したい場面に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。