「トップページに動きを足したいけれど、何から手を付ければいいか分からない」——制作会社から提案された「パララックス」という言葉に、なんとなくうなずいてしまった方も多いのではないでしょうか。実は、この表現は使い所を外すと「読みづらい」「酔う」とマイナスに働きます。この記事では、仕組み・実装・失敗例を具体的に整理します。
パララックスとは？「視差」で奥行きを作る仕組み
パララックス（parallax）は日本語で「視差」。電車の窓から外を見たとき、近くの電柱は速く流れ、遠くの山はゆっくり動いて見えますよね。あれと同じ原理です。
Webでは、スクロール量に対して要素ごとに移動距離を変えることで、平面のはずの画面に奥行きを錯覚させます。
- 背景画像：スクロール量の30〜50%だけ動かす（＝遠景）
- 中間のイラスト：70%程度
- テキスト：100%（通常のスクロール通り＝近景）
この「ズレ」が奥行きの正体です。難しい3D技術ではなく、移動量の差だけで成立します。
実際に動くとこうなります。層ごとの速度差だけで、これだけ立体的に見えます。
実装方法：CSSだけで済むケースとJSが要るケース
1. CSSのみ（最軽量・最初の一手）
背景を固定するだけの簡易版なら、これで十分です。
.parallax-section {
background-image: url("bg.jpg");
background-attachment: fixed;
background-size: cover;
min-height: 60vh;
}
/* iOSで効かないため保険 */
@media (max-width: 768px) {
.parallax-section { background-attachment: scroll; }
}
background-attachment: fixed はiOS Safariで動作しません。スマホでは潔く切るのが現実解です。
2. CSS 3Dによる本格パララックス
複数レイヤーを別速度で動かすなら、perspective を使うとJSなしで滑らかに動きます。
.wrapper {
height: 100vh;
overflow-y: scroll;
perspective: 1px;
}
.layer-back { transform: translateZ(-2px) scale(3); } /* 遠い＝遅い */
.layer-front { transform: translateZ(0); }
translateZ の値を負に大きくするほど遠景＝動きが遅くなります。scale は「1 + 奥行き量 / perspective値」で補正します。
3. JavaScript（要素単位で制御したいとき）
const targets = document.querySelectorAll("[data-speed]");
let ticking = false;
window.addEventListener("scroll", () => {
if (ticking) return;
ticking = true;
requestAnimationFrame(() => {
const y = window.scrollY;
targets.forEach(el => {
const s = parseFloat(el.dataset.speed); // 0.2〜0.6程度
el.style.transform = `translate3d(0, ${y * s}px, 0)`;
});
ticking = false;
});
});
ポイントはrequestAnimationFrameでスクロールイベントを間引くこと。これを省くとローエンド端末でカクつきます。またtopやmarginではなく必ずtransformを使ってください（再レイアウトが走らず軽い）。
効果が出る使い所／やりすぎて酔わせる失敗例
| 場面 | 判定 | 理由 |
|---|---|---|
| ファーストビューの背景 | ◎ | 印象を残す一等地。1回なら邪魔にならない |
| 実績・製品の切り替え地点 | ○ | 章の変わり目として機能する |
| 会社概要・沿革 | △ | 情報を読ませたい場所。控えめに |
| 料金表・フォーム | × | 判断・入力の邪魔。離脱要因 |
| 全セクションに適用 | × | 酔いの最大要因 |
現場でよく見る失敗は次の4つです。
1. 移動量が大きすぎる：目安は画面高の15%以内。50px〜120px程度で十分効きます 2. 全ページに敷き詰める：1ページ2〜3箇所まで。効かせたい場所を絞る 3. テキストを動かす：読む対象が動くと確実に読みづらくなります。動かすのは背景と装飾だけ 4. スクロールジャック：スクロール量を奪う演出は、戻れない・進めないストレスに直結します
そして必須なのがアクセシビリティ対応です。
@media (prefers-reduced-motion: reduce) {
.layer-back, [data-speed] { transform: none !important; }
}
OS側で「視差効果を減らす」を選んでいる利用者には動きを止める。三半規管の弱い方への配慮であり、実装コストはこの3行だけです。
迷ったら「動いているもの」を見てから決める
パララックスは言葉での説明が難しく、社内合意が取りづらい表現です。実物を並べて「これくらいの速度」「これは強すぎる」と指差しで決めるのが一番早い進め方です。実例をまとめて見たい方は、スクロール演出やホバー効果など約500点が実際に動く状態で並んだカタログ「motionAETHER」（app.novamor.jp/motion/demo・無料閲覧）のような一覧を、意思決定の材料にすると話が早く進みます。
なお、パララックス以外にも「スクロールでカードが現れる」程度の控えめな演出で十分なケースは多くあります。実際に動くとこうなります。
まとめ
パララックスは「移動量の差」だけで奥行きを作るシンプルな技術です。実装はtransform＋requestAnimationFrame、使い所はファーストビューを中心に1ページ2〜3箇所、移動量は画面高の15%以内、prefers-reduced-motion対応は必ず入れる。
まずは自社サイトのファーストビューだけ、移動量50pxから試してみてください。スマホ実機で1分スクロールして気持ち悪くならなければ、その設定が正解です。