こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
SNSや動画配信サービスなどでおなじみの「いいね！」エフェクト。
クリックするとハートがふわっと浮かび上がる演出は、単なるボタンを押す動作に感情的な彩りを加えてくれます。
ユーザーにとっては「押したことが視覚的にわかる」だけでなく、ちょっとした 遊び心のある体験 にもなります。
Web制作の観点からも、このようなインタラクションはサイトの滞在時間を伸ばしたり、ユーザーの心理的な満足度を高める大切な要素です。
例えば、ECサイトの商品ページで「お気に入り」ボタンにハートが舞う演出を加えると、購買体験がグッと楽しくなります。
あるいはブログやポートフォリオで「応援する」ボタンに飛ぶハートを仕込めば、ユーザーとの距離が近くなるでしょう。
今回はそんな「いいね！」エフェクトを、CSSとJavaScriptだけでシンプルに実装する方法を解説していきます。
今回の実装ポイント
「いいね！」エフェクトを成立させるためには、以下のような要素が欠かせません。
- クリックイベントを取得し、クリックした座標にハートを生成する。
- ハートはCSSアニメーションで上方向にふわっと浮かせる。
- アニメーションが終了したら要素を削除して、メモリや描画の負担を軽減する。
この仕組みをしっかり組むことで、ユーザーが何度クリックしても快適に動作する「軽量なエフェクト」を作れます。
デモコード
以下は「いいね！」ボタンを押すと、その場所からハートがふわっと飛んでいくデモです。
コピーしてそのまま貼り付ければ、ローカル環境などで動作を確認できます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
応用アイデア
このエフェクトはカスタマイズの幅が広く、以下のように応用できます。
- ハートの色をランダムに変化させて、カラフルな演出にする。
- 1回のクリックで複数のハートを生成して、華やかさをアップ。
- ハート以外に「星⭐」「拍手👏」「音符♪」などに置き換えて独自演出に。
- 背景画像やサイトテーマに合わせた色味に調整し、デザインとの一体感を高める。
例えば「音楽ライブのイベントサイト」なら拍手👏や音符♪を飛ばすと面白いですし、「ファッション系のECサイト」ならカラフルな星⭐を散らすのも相性が良いですね！
satokotadesignキャンペーン実施中！
