まずは結論：これで直るかもしれません
もしあなたが今、
- macOSを使っていて
- あるサイトでカルーセルやスライダーだけが動かない
- でも他のJavaScript（メニュー、フォーム送信など）は動いている
- iPhoneでは普通に動くし、別の人のMacでは問題ない
という状況なら、以下を一度試してみてください。
手順：macOSの「視差効果を減らす」をオフにする
- 画面左上の メニューから「システム設定…」を開く
- 左メニューの「アクセシビリティ」をクリック
- 「視覚サポート」セクションにある「ディスプレイ」を開く
- 中央あたりにある
「視差効果を減らす」のスイッチをオフ（グレー）にする
- ブラウザ（Edge / Firefox / Safari など）を一度終了（⌘Q）して再起動
- 問題のカルーセルを表示しているページを再読み込みする
これでカルーセルが動き出す場合、原因はかなりの確率で
macOSの「視差効果を減らす」設定と、それに反応したライブラリ側の挙動です。
ここから先は、経緯と考察です
上の対処で解決した方は、ここから先は「なぜそうなるのか」「実装側はどう考えると良さそうか」を整理した読み物パートです。
同じような事象で悩んでいる制作・開発チームの参考になれば幸いです。
症状のおさらい：JavaScriptは生きているのに、カルーセルだけ死んでいる
状況を整理するとこうです。
- 対象環境：
- macOS
- Edge / Firefox など複数ブラウザ
- 現象：
- ページ読み込みエラーはなし
- メニューの開閉、フォーム送信、他のJavaScriptは正常に動作
- カルーセルだけ、自動再生もスライド切り替えも始まらない
- 別環境では：
- iPhoneのSafari → 正常動作
- 同じMac上の、別のユーザーアカウント → 正常動作
つまり、
- JavaScript全体が落ちているわけではない
- ネットワークやCDNも正常
- 「このユーザーだけカルーセルが止まる」
という症状でした。
最初の仮説：ブラウザ設定やセキュリティソフトの影響では？
まず疑ったのは、王道のところです。
ブラウザ・拡張機能の線
- シークレットウィンドウ（Cmd+Shift+N）で再現するか
- 全拡張機能オフでも再現するか
- トラッキング防止レベルを下げても変わらないか
→ いずれも再現する。
→ 「ブラウザ内のクッキーや拡張だけの問題ではなさそう」と判断。
セキュリティソフトの線
次に、ブラウザをまたいで影響しそうなソフトを疑いました。
- ウイルス対策ソフト
- フィッシング対策ソフト
- ネットワークフィルタ系
これらを、
- ログイン項目から削除
- バックグラウンド実行をオフ
- アンインストーラで完全削除 → 再起動
まで行いましたが、現象は変わらず。
このあたりで、「システム全体の設定というより“このユーザー環境のどこか”に原因がありそう」という感触が強くなりました。
決め手：新規ユーザーでは問題が起きない
決定的だったのがこの観察です。
同じMac上で新しくユーザーアカウントを作成し、そのユーザーでログインすると、カルーセルは正常に動作する。
- 同じハードウェア
- 同じmacOSバージョン
- 同じネットワーク / DNS
- 同じブラウザ
でも、
- 既存ユーザー → カルーセルだけ動かない
- 新規ユーザー → すべて正常
となると、疑うべきはほぼ絞られます。
✅ OS全体設定・ルーター・DNS → シロに近い
✅ セキュリティソフト → ほぼ排除済み
⚠️ 既存ユーザーの「ユーザー設定（アクセシビリティなど）」がクロ候補
ここで「OSのアクセシビリティ設定」を見に行く、という流れになりました。
macOSの「視差効果を減らす」とprefers-reduced-motion
アクセシビリティ → ディスプレイ → 視差効果を見てみると、
問題が起きていたユーザーでは「視差効果を減らす」がオンになっていました。
この設定がオンだと、macOSは「このユーザーはアニメーションを少なめにしてほしい」という意図をブラウザに伝えます。
ブラウザからは、次のように見えるようです。
window.matchMedia('(prefers-reduced-motion: reduce)').matches
// => true
いわゆる prefers-reduced-motion の値が reduce になるわけです。
ライブラリはどう解釈するか
最近のカルーセルやアニメーションライブラリは、
この prefers-reduced-motion を見て挙動を変えることが多くなっています。
- 自動再生を止める
- アニメーションの速度を0にする
- トランジションのエフェクトを簡略化する
などがよくある対応です。
今回の場合も、使用していたライブラリ（SplideやGSAP系）が、
「prefers-reduced-motion: reduce のときは、自動アニメーションを止める」
という仕様になっており、その結果、
- JavaScript自体は正常に読み込み・実行されている
- しかし、ユーザーの設定に従って“あえて動かしていない”
という状態になっていたと推測します。
実装側でどう考えるか：アクセシビリティと表現のバランス
この事例は、
- アクセシビリティ（ユーザーの「動きを減らしたい」という希望）
- ビジュアル表現（ヒーローエリアのカルーセルなど）
のバランスをどう取るか、を考えるきっかけにもなりました。
原則としては「ユーザーの設定を尊重する」
てんかん発作や乗り物酔いなどを避けるため、激しいアニメーションをオフにしたいユーザーは確実にいます。
OSレベルで「動きを減らす」設定が用意されていて、Webがそれを拾って表現を調整するのは、本来とても良い流れです。
とはいえ、止まり方の調整余地はある
一方で、サイトによっては
- メインビジュアルが完全に動かないと、メッセージが伝わりづらい
- スライドが切り替わらないと、コンテンツが一部見えない
というケースもあります。
そういった場合は、ライブラリ側のオプションで、
- 自動再生は止めるが、手動操作（矢印 / ドット）は有効にする
- アニメーション速度を大幅に落とすが、完全にゼロにはしない
など、動きの量を減らしつつ、体験を完全に失わない方向性も検討できます。
似たトラブルに遭遇したときのチェックリスト
今回の調査を通して、「こういう順番で潰していくと整理しやすい」と感じたポイントをまとめておきます。
1. 他端末／他ユーザーで再現するか
- iPhone / 別のPC / 同じMacの別ユーザーアカウントで再現するか確認する
- → 別環境では正常なら、「その端末／ユーザー固有の問題」の可能性が高い
2. ブラウザをまたいで同じか
- Safari / Chrome / Edge / Firefox など、複数ブラウザで試してみる
- → すべて同じ症状なら、ブラウザ個別の問題ではない可能性が高い
3. セキュリティソフト・VPN・ネットワーク系常駐アプリ
- ウイルス対策ソフト、フィッシング対策ツール、VPNなどを一時的に停止して挙動を見る
- → それで改善する場合は、そのソフトのフィルタ設定を見直す
4. OSのアクセシビリティ設定
- macOSの「アクセシビリティ」設定を確認する
- 特に「視差効果を減らす」など、表示やアニメーションに関わる項目をチェックする
おわりに
今回の「Macでカルーセルだけ動かない」問題は、最初は単なる不具合だと思って調べ始めましたが、原因は意外にもMac本体の設定（視差効果を減らす）でした。
同じMacでも、ユーザーごとの設定によって表示や動き方が変わることがあります。その結果として、「ある人の環境でだけうまく動かない」という現象が起きるのだと、あらためて実感しました。
Webサイトをつくる側としては、
- 不具合かな？と思ったときに、OSやアクセシビリティの設定も選択肢に入れてみること
- そして、できる限り「誰の環境でもストレスなく使える」状態を目指していくこと
この2つを意識しておきたいところです。
この記事が、同じような症状で悩んでいる方のヒントになればうれしいですし、
日々の制作現場での「トラブルシューティングの視点」を少しでも共有できていれば幸いです。
