「自分のサイト、なんだか安っぽい」——その原因、デザインではなく動きが無いことかもしれません。いま評価されるサイトは、スクロールに合わせて要素がふわっと現れたり、数字がカウントアップしたり、どこかしらが呼吸しています。
この記事では、コードにあまり詳しくない人でも試せる順に、ホームページに動きをつける方法を5つ紹介します。
方法1：CSSのhoverだけで「押せる感」を出す
いちばん簡単なのはボタンやカードのホバー演出です。次の3行をCSSに足すだけで、マウスを載せたときにカードが少し浮きます。
.card{transition:transform .3s, box-shadow .3s}
.card:hover{transform:translateY(-4px);
box-shadow:0 12px 30px rgba(0,0,0,.15)}
ポイントは transition を必ず入れること。これが無いと動きが瞬間移動になり、逆に安っぽくなります。
この「ホバーで反応する」を突き詰めると、こんな部品になります。
方法2：スクロールで「ふわっと出す」（JS数行）
要素が画面に入ったらフェードインする、いわゆる「スクロールリビール」。JavaScriptの IntersectionObserver を使えば外部ライブラリ無しで書けます。
const io = new IntersectionObserver(es => es.forEach(e => {
if (e.isIntersecting) e.target.classList.add('on');
}));
document.querySelectorAll('.rv').forEach(el => io.observe(el));
CSS側は .rv{opacity:0;transform:translateY(20px);transition:.8s} と .rv.on{opacity:1;transform:none} の2行。動かしたい要素に class="rv" を付ければ完成です。
方法3：数字のカウントアップで実績を見せる
「創業12年」「施術実績3,000件」のような数字は、静止しているより数え上がる方が目に留まります。仕組みは方法2と同じで、画面に入った瞬間にタイマーで数字を増やすだけです。実装例はこちら。スクロールすると数字が数え上がります。
方法4：GSAPで「プロの動き」に踏み込む
無料で商用利用できるアニメーションライブラリGSAPを使うと、スクロール連動（パララックス、ピン留め、横スクロール）や文字を1文字ずつ躍らせる演出が作れます。世界の受賞サイトの多くがこれを使っています。
gsap.from(".title", {y: 40, opacity: 0, duration: 1, ease: "power3.out"});
ただし自由度が高いぶん、パラメータ調整に時間がかかるのが正直なところです。「どの数値がかっこいいのか」は経験がないと分かりません。
方法5：完成済みのパーツを使う（最短）
動きの設計・イージングの数値・スマホ対応・「動きを減らす」設定への配慮までを自分で作り込むのは、それだけで1パーツ数時間かかります。最短ルートは、調整済みの完成パーツをコピペして、文言と色だけ自分用に変えることです。
motionAETHERのカタログでは、ヒーロー・文字演出・スクロール演出・ギャラリーなど500点以上が全部実際に動いた状態で見られます。気になる動きがどう作られているかを眺めるだけでも勉強になるはずです。
まとめ：やりすぎ注意、でもゼロは損
最後にひとつだけ注意点を。動きは足しすぎると逆効果です。1画面に主役の動きは1つ、出現演出は0.6〜0.9秒、が目安。そして prefers-reduced-motion（OSの「視差効果を減らす」設定）への配慮を忘れずに。
- まずはhoverとスクロールリビール（方法1・2）から
- 実績数字があるならカウントアップ（方法3）
- 本格的にやるならGSAP（方法4）か完成パーツ（方法5）