CSSメディアクエリでアニメーションを制御！スマホとPCで動きを切り替える方法

1. メディアクエリという機能の正体とは

1. メディアクエリという機能の正体とは

ウェブサイトを作るときに欠かせないのが「メディアクエリ」という技術です。これは簡単に言うと、ホームページを見ている道具が「パソコンなのか」「スマートフォンなのか」を判別するための条件分岐のようなものです。今の時代、ウェブサイトは大きなモニターで見られることもあれば、小さなスマホの画面で見られることもあります。それぞれの画面に最適なデザインを届けるために使われます。

プログラミングを全くやったことがない方でも、イメージしやすい例えがあります。それは「服装」です。外の気温が「高い（夏）」なら半袖を着て、「低い（冬）」ならコートを着ますよね。メディアクエリもこれと同じで、「画面の幅が広い（パソコン）」ならこのデザインを使い、「画面の幅が狭い（スマホ）」なら別のデザインを使う、という指示を出すことができるのです。

この機能を使うことで、特定の画面サイズのときだけ特別な命令を出すことが可能になります。今回はこれを利用して、アニメーションを動かしたり、逆にピタッと止めたりする方法をマスターしていきましょう。これができるようになると、どんな端末で見ても見やすい「レスポンシブデザイン」というプロの技に一歩近づきます。

2. なぜスマホでアニメーションをオフにする必要があるのか

2. なぜスマホでアニメーションをオフにする必要があるのか

アニメーションはサイトを華やかにしてくれますが、何でもかんでも動かせばいいというわけではありません。特にスマートフォンは、パソコンに比べて画面が小さく、利用者は移動中や隙間時間にパッと情報を確認したいことが多いです。そんなときに画面中が激しく動いていると、肝心の文字が読みづらくなってしまいます。

また、スマートフォンの性能についても考える必要があります。最新のスマホは非常に高性能ですが、古い機種を使っている人もたくさんいます。複雑なアニメーションをいくつも動かし続けると、スマホが一生懸命計算をすることになり、バッテリーが早く減ってしまったり、画面の動きがカクカクして重くなってしまったりすることもあります。利用者にストレスを与えないことが、良いサイト作りの大原則です。

そこで、大きな画面のパソコンでは豪華に動かし、小さな画面のスマホでは静止画のように見せるという「切り替え」が重要になります。これをメディアクエリで制御することで、誰にとっても優しいウェブサイトを実現できるのです。パソコンを初めて触る方も、まずは「スマホはシンプルが一番」という考え方を持っておくと良いでしょう。

3. 画面の幅を指定するブレイクポイントの考え方

3. 画面の幅を指定するブレイクポイントの考え方

メディアクエリを使うときに必ず出てくるのが「ブレイクポイント」という言葉です。これは、デザインを切り替える「境目となる横幅」のことです。例えば、横幅が７６８ピクセルという数字を境目にして、それより大きければパソコン用、小さければスマホ用、といった具合にルールを決めます。

このピクセルという単位は、パソコンの画面上の「点」の数のことです。数字が大きければ大きいほど、広い画面ということになります。一般的なスマホの横幅やタブレットの横幅を考慮して、世の中のウェブ制作者たちはこの境目の数字を決めています。初心者の方は、まずは「７６８」という数字を一つの目安として覚えておくと便利です。

具体的には、ＣＳＳ（デザインを決めるコード）の中に「ここから先は画面幅が〇〇以下のときだけ適用してね」という枠組みを作ります。その枠の中にアニメーションを止める命令を書くことで、スマホのときだけ動きを制限することができるようになります。

4. 実際にスマホだけでアニメーションを止めるコード

4. 実際にスマホだけでアニメーションを止めるコード

それでは、具体的なプログラムの書き方を見てみましょう。まずはパソコンではずっと回っている画像が、スマホ（横幅が狭い画面）になるとピタッと止まる仕組みを作ります。ここでは「animation-play-state」という命令を使います。これはアニメーションの「再生」や「停止」を切り替えるスイッチのようなものです。

「running」と書けば再生、「paused」と書けば一時停止になります。メディアクエリの枠組みの中に「paused」と書き込むことで、スマホで見たときだけ画像が動かなくなります。このように、一つの要素に対して状況に応じた二つの命令を使い分けるのがポイントです。

<style>
	.rotate-item {
	    width: 100px;
	    height: 100px;
	    background-color: #007bff;
	    margin: 20px auto;
	    animation: spin 3s linear infinite;
	}

	@keyframes spin {
	    from { transform: rotate(0deg); }
	    to { transform: rotate(360deg); }
	}

	/* 画面幅が768px以下のとき（スマホなど）の命令 */
	@media (max-width: 768px) {
	    .rotate-item {
	        /* アニメーションを停止させる */
	        animation-play-state: paused;
	        background-color: #dc3545; /* 止まったことがわかるように赤くします */
	    }
	}
</style>

<div class="rotate-item text-white d-flex align-items-center justify-content-center">
	<i class="bi bi-gear-fill fs-1"></i>
</div>
<p class="text-center">画面の横幅を狭くすると回転が止まります</p>

5. 特定の動きをスマホだけシンプルにする方法

5. 特定の動きをスマホだけシンプルにする方法

アニメーションを完全に「消す」のではなく、スマホでは「控えめな動きにする」という方法もあります。例えば、パソコンでは派手に飛び跳ねるボタンを、スマホではゆっくりと点滅するだけにする、といった調整です。これによって、スマホの使い勝手を損なわずに、適度な賑やかさを残すことができます。

この場合、メディアクエリの中でアニメーションの名前（animation-name）自体を上書きしてしまいます。パソコン用の激しい台本と、スマホ用の優しい台本の二種類を用意しておき、画面幅に合わせて読み込む台本を差し替えるイメージです。まるで映画のシーンに合わせて、主役の動きを変える演出家のような仕事ですね。

このように細かく調整することで、どんなデバイスで見ても「ちょうどいい」と感じるデザインが作れます。初心者のうちは、まずは色を変えるなどの簡単なことから始めて、徐々に動きの種類の切り替えに挑戦してみましょう。

<style>
	.jump-box {
	    width: 150px;
	    padding: 15px;
	    background-color: #28a745;
	    color: white;
	    text-align: center;
	    margin: 30px auto;
	    border-radius: 10px;
	    /* 最初は激しいジャンプのアニメーション */
	    animation: jump 1s infinite;
	}

	@keyframes jump {
	    0%, 100% { transform: translateY(0); }
	    50% { transform: translateY(-20px); }
	}

	@keyframes soft-fade {
	    0%, 100% { opacity: 1; }
	    50% { opacity: 0.5; }
	}

	/* 画面幅が768px以下のとき */
	@media (max-width: 768px) {
	    .jump-box {
	        /* 動きの台本をふわふわ点滅に差し替える */
	        animation: soft-fade 2s infinite;
	    }
	}
</style>

<div class="jump-box shadow">
	<i class="bi bi-star-fill"></i> 動きが変わるよ
</div>

6. フワッと出る動きをスマホでは瞬時に出す設定

6. フワッと出る動きをスマホでは瞬時に出す設定

スクロールするとふわっと現れる要素は人気ですが、スマホだとスクロールのスピードが速いため、アニメーションが追いつかずに「真っ白な画面が続く」という現象が起きることがあります。これを防ぐために、スマホではアニメーションを無効にして、最初からパッと表示させておく設定が有効です。

やり方は簡単です。メディアクエリの中で、アニメーションの持続時間（animation-duration）を「０秒」にするか、アニメーション自体を「none（なし）」に設定します。こうすることで、スマホ利用者はストレスなく、スクロールした瞬間に情報を目にすることができます。

「せっかく作ったアニメーションを消すのはもったいない」と感じるかもしれませんが、一番大切なのはアニメーションを見せることではなく、情報を正しく伝えることです。状況に応じて潔く動きを削ることも、プロのウェブ制作者として大切なスキルのひとつです。

<style>
	.fade-text {
	    font-size: 24px;
	    font-weight: bold;
	    color: #6f42c1;
	    text-align: center;
	    animation: fadeIn 3s forwards;
	}

	@keyframes fadeIn {
	    from { opacity: 0; }
	    to { opacity: 1; }
	}

	/* 画面幅が768px以下のとき */
	@media (max-width: 768px) {
	    .fade-text {
	        /* アニメーションを無効にする */
	        animation: none;
	        opacity: 1; /* 消えたままにならないようにしっかり表示 */
	    }
	}
</style>

<div class="fade-text mt-5">
	<i class="bi bi-lightning-charge"></i> スマホではすぐ見えます
</div>

7. パソコンのホバーアニメーションをスマホで無効化する

7. パソコンのホバーアニメーションをスマホで無効化する

パソコンでは、ボタンにマウスをのせたときに「ボイン」と動くホバー（hover）アニメーションがよく使われます。しかし、スマートフォンにはマウスがありません。指で画面をタッチしたときにホバーの動きが中途半端に発動してしまい、ボタンが押しっぱなしのような見た目になってしまうことがあります。

これはスマホ特有の困った現象です。これを防ぐためには、メディアクエリを使って「マウスが使える環境のときだけホバーの動きを許可する」という書き方をします。これにより、スマホでタッチしたときは余計な動きをさせず、スッキリとボタンを押せるようになります。

最近では「指で触る（タッチ）」のか「マウスで指す（ポインター）」のかを判別する、より高度なメディアクエリの書き方もあります。まずは基本の横幅による切り替えに慣れてから、そうした細かい使い勝手の向上にも目を向けてみてください。

8. ユーザーの意思を尊重する特別なメディアクエリ

8. ユーザーの意思を尊重する特別なメディアクエリ

実は、画面の幅以外にもアニメーションを制御する方法があります。パソコンやスマホの設定で「視覚効果を減らす」という項目をオンにしている人がいます。これは、激しい動きが苦手な方や、酔いやすい方が自分を守るための設定です。

この「動きを控えめにしてほしい」というユーザーの意思を読み取ることができるメディアクエリも存在します。これを活用することで、画面サイズに関わらず、動きを必要としていない人には静止した画面を見せることができます。これはアクセシビリティという「誰もが使いやすいサイト」を作る上で非常に高度で思いやりのあるテクニックです。

プログラミング未経験の方はまだここまで覚えなくても大丈夫ですが、「画面サイズ以外にも切り替える理由があるんだな」と知っておくだけで、サイト制作に対する視野が大きく広がります。技術は常に、使う人の幸せのためにあるものなのです。

9. 失敗しないためのテストと確認のやり方

9. 失敗しないためのテストと確認のやり方

メディアクエリを書いてみたけれど、本当に切り替わっているのか不安になることがあります。そんなときは、パソコンのブラウザ（Google Chromeなど）にある「検証モード」という機能を使ってみましょう。これを使うと、パソコンの画面上で疑似的にスマホのサイズを作り出し、動きを確認することができます。

また、実際に自分のスマートフォンでサイトを開いて確認するのも大切です。指での操作感は、マウスでは再現できないからです。もしスマホで動きが止まっていなかったら、ブレイクポイントの数字が間違っていないか、命令を囲む「カッコ」が閉じられているかを確認してみてください。初心者のうちは、この小さなミスが一番の悩みどころになりますが、落ち着いて見直せば必ず解決できます。

メディアクエリを使いこなせれば、世界中の人がどんな端末で見ても完璧な動きをするサイトが作れるようになります。一つ一つの設定が、サイトを訪れる人への「おもてなし」に繋がっていることを忘れないでくださいね。