「マウスポインタを「ポテト」に！エイプリルフールのサプライズ演出とその実装方法」

はじめに

4月1日はエイプリルフールでしたね。

せっかくだから、訪問者の「えっ！？」と驚くような小ネタを仕込みたくなり、今回はマウスポインタを巨大なポテトに変えるサプライズを仕掛けました。

なかなかインパクトがあったのではないでしょうか。
推しにも気づいてもらえて個人的に満足です。

この記事では、その実装方法と結果、実装時に意識したポイントについてまとめます。

🎉 やってみた内容

ページを開くと、マウスポインタが300pxの巨大ポテト画像に変身する。

• マウスを動かすとポテトがぬるぬる回転
• クリックするとポンッ！と弾けるエフェクト

という、ただそれだけの演出。
思ったほど弾けませんでしたが。

💡 僕が意識したシンプルな設計

• コードを functions.php に貼って → 動作確認 → 終わったら削除
  → これだけで完結。プラグインは使わず、テーマ改変も最小限に。
• プラグインを使うことも考えましたが、他のスクリプトとの干渉や複雑化を避け、シンプルな構造を優先しました。

🔧 実装方法（WordPress + functions.php）

① ポテト画像を用意

• 推奨サイズ：300px × 300px
• 背景透過PNGだと見栄えが良い
• アップロードした画像のURLを控えておく

例（仮のURL）：

https://example.com/wp-content/uploads/2025/04/potato.png

※ 上記は架空のURLと画像名です。ご自身の画像に差し替えてください。

② functions.php に以下のコードを追加

WordPressの「外観 → テーマファイルエディター」から functions.php を開き、以下のコードを追記します。

function add_potato_cursor_scripts() {
    ?>
    <style>
      body {
        cursor: none;
      }

      #potato-cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        height: 300px;
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%) rotate(0deg);
        transition: transform 0.05s linear;
      }

      .pop {
        animation: pop 0.3s ease;
      }

      @keyframes pop {
        0%   { transform: translate(-50%, -50%) scale(1) rotate(var(--angle, 0deg)); opacity: 1; }
        50%  { transform: translate(-50%, -50%) scale(1.4) rotate(var(--angle, 0deg)); opacity: 0.5; }
        100% { transform: translate(-50%, -50%) scale(1) rotate(var(--angle, 0deg)); opacity: 1; }
      }
    </style>

    <img id="potato-cursor" src="https://example.com/wp-content/uploads/2025/04/potato.png" alt="Potato Cursor">

    <script>
      const potatoCursor = document.getElementById('potato-cursor');
      let lastX = 0, lastY = 0;
      let angle = 0;

      document.addEventListener('mousemove', (e) => {
        const dx = e.clientX - lastX;
        const dy = e.clientY - lastY;
        const speed = Math.sqrt(dx * dx + dy * dy);
        angle += speed * 0.5;
        potatoCursor.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;
        potatoCursor.style.setProperty('--angle', `${angle}deg`);
        potatoCursor.style.left = e.clientX + 'px';
        potatoCursor.style.top = e.clientY + 'px';
        lastX = e.clientX;
        lastY = e.clientY;
      });

      document.addEventListener('click', () => {
        potatoCursor.classList.remove('pop');
        void potatoCursor.offsetWidth;
        potatoCursor.classList.add('pop');
      });
    </script>
    <?php
}
add_action('wp_footer', 'add_potato_cursor_scripts');

⚠️ 注意事項

• このコードに含まれる 画像URLやサイト名はすべて架空の例です。
  　実際に使う場合は、自分のサイトの画像URLに置き換えてください。
• コードをfunctions.phpに追加する際は、必ずバックアップをとってから行ってください。
• functions.phpの編集は慎重に！ 小さなミスでサイト全体が表示されなくなることもあります。
• 本記事を参考にした実装は、すべて自己責任でお願いします。

📈 効果はどうだったか？

• サイトを開いた瞬間に「ポテト！？」となる
• SNSでも少し反応してもらえました。
• 複雑な仕組みじゃないからこそ、すぐ実装→すぐ撤去できるライトな企画として大成功！

🎨 まとめ

エイプリルフールにちょっとした驚きを仕込むなら、マウスカーソルのカスタマイズは超手軽で効果的だったのではないでしょうか？

プラグインなどに頼らず、functions.phpに1ブロック追加するだけという軽量な構成なのでおすすめです。