パララックスとは？作り方5選とiPhoneで効かないときの対処法【2026年版】

2026年9月11日
WEB制作, コーディング
1view

WEB制作

パララックスとは、スクロールしたときに背景と手前の要素を違う速さで動かし、画面に奥行きを出す演出のことです。英語の parallax（視差）が語源で、ブランドサイトや採用サイトのファーストビューでよく使われています。

この記事では、Web制作会社のTHREE D PLUSが、パララックスの仕組みと向き不向き、CSS・GSAP・WordPressでの作り方、iPhoneで効かない・カクつくときの対処までをまとめます。ブラウザの対応状況は2026年9月時点の情報です。

1 パララックスとは？意味と仕組み
2 パララックスのメリット・デメリットと向いているサイト
3 パララックスの作り方5選【手法比較表】
4 ノーコード・WordPressでパララックスを入れる方法
5 既存サイトにパララックスを導入する3ステップ
6 SEO・表示速度・アクセシビリティで気をつけること
7 パララックスが動かない・カクつくときの対処法
8 よくある質問
9 まとめ

パララックスとは？意味と仕組み

aerial photo of brown moutains — Photo by JOHN TOWNER on Unsplash

パララックスは、「遠くのものほどゆっくり動いて見える」という視差の性質を、Webページのスクロールに置き換えた表現です。

電車の窓から外を眺めると、線路沿いの電柱はすばやく流れていくのに、遠くの山はほとんど動いていないように見えます。Webサイトでも、背景画像をゆっくり、文字や写真を通常の速さで動かすと、平面の画面に前後の距離感が生まれます。

実際のサイトで使われているパララックスは、大きく次の4パターンに分けられます。

パターン	動き方	よく使われる場所
背景固定	背景は止まったまま、手前のコンテンツだけが流れる	セクションの区切り、ファーストビュー
速度差	写真や背景を本文より遅く（または速く）動かす	メインビジュアル、写真の多いページ
重なり	次のセクションが前のセクションに覆いかぶさる	ストーリー型のランディングページ
スクロール連動	スクロール量に合わせて拡大・回転・フェードする	商品紹介、ブランドサイト

4つ目のスクロール連動は、要素が画面に入ったときにふわっと表示する「スクロールアニメーション」と組み合わせて使われることが多い表現です。フェードインの基本はスクロールアニメーションの実装方法で解説しています。

パララックスのメリット・デメリットと向いているサイト

パララックスは世界観を伝える力が強い一方で、表示速度・スマホでの挙動・酔いやすさの3点でコストがかかります。入れるかどうかは「見せるサイトか、探させるサイトか」で判断するのが確実です。

メリット｜第一印象と世界観を強く残せる

いちばんの効果は、ページを開いた数秒で「このブランドは丁寧に作られている」という印象を残せることです。写真がゆっくり動くだけでも、静止画を並べたページより空気感が伝わります。

スクロールに合わせて情報が順番に現れるため、読んでほしい順序で見せられるのも利点です。採用サイトで「会社の想い → 仕事内容 → 働く人」と流したり、商品ページで「悩み → 解決 → 使い方」と流したりする構成と相性がよく、結果として滞在時間が伸びやすくなります。

デメリット｜速度・スマホ・酔いのコストがかかる

デメリットは、主に次の4つです。

表示速度：大きな背景画像や、スクロールのたびに動くJavaScriptでページが重くなりやすい
スマホでの挙動差：iPhoneのSafariでは、CSSの背景固定がそもそも効かない
酔いやすさ：画面の一部が違う速さで動くと、乗り物酔いに似た不快感を覚える人がいる
更新コスト：写真を差し替えるたびに、動いたときのトリミングや余白を調整し直す必要がある

特にiPhoneの問題は、PCだけで確認していると公開後まで気づかないことがあります。この記事の後半で原因と対処を詳しく説明します。

制作会社の判断基準｜入れるべきサイト・避けるべきサイト

THREE D PLUSでは、次の5つの軸で導入を判断しています。

判断の軸	入れてよいサイト	慎重にしたいサイト
サイトの目的	世界観を見せて滞在してもらう（ブランド、採用、商品LP、観光・施設、イベント）	情報を探しに来る（士業、医療、料金確認が中心のBtoB）
主な利用者	デザインへの関心が高い層、若い層	シニア層、急いで答えを探している人
閲覧端末	PCでもじっくり見てもらえる	スマホ比率が非常に高く、通信環境もまちまち
素材の質	撮り下ろし写真やオリジナルのイラストがある	フリー素材が中心で、写真の枚数も少ない
更新体制	制作会社がコードで管理する	社内の担当者が頻繁に写真を差し替える

制作の現場でおすすめしているのは、ページ全体を動かす「全面パララックス」ではなく、いちばん伝えたい1〜2か所だけに効かせる使い方です。動く場所が少ないほど印象に残りやすく、表示速度や酔いの問題も小さく抑えられます。

パララックスの作り方5選【手法比較表】

MacBook Pro showing programming language — Photo by Emile Perron on Unsplash

2026年時点の現実的な選び方は、背景を止めるだけならCSS、写真に速度差をつけるならCSSのScroll-driven Animations、どのブラウザでも同じ動きが必要ならGSAPです。まず5つの手法を比較表で確認してください。

手法	難易度	iPhone	Firefox	JavaScript	向いている用途
1. background-attachment: fixed	やさしい	×（効かない）	○	不要	PC中心の簡易LP
2. 疑似要素＋position: fixed	やさしい	○	○	不要	スマホでも背景を止めたい
3. perspective＋translateZ	難しい	△（要実機確認）	○	不要	多層の奥行きを見せる演出ページ
4. Scroll-driven Animations	ふつう	○（Safari 26以降）	×（既定で無効）	不要	写真の速度差、フェード
5. GSAP ScrollTrigger	ふつう	○	○	必要	ブランドサイト、複雑な演出

方法1｜background-attachment: fixedで背景を固定する

もっとも手軽なのが、CSSの background-attachment: fixed です。背景画像が画面に貼り付いたまま止まり、その上をコンテンツが流れていく「背景固定型」のパララックスになります。

.px-bg {
  min-height: 60vh;
  background-image: url("bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* これで背景が止まる */
}

ただし、iPhoneのSafariではこの指定が認識されても効果がなく、背景は普通にスクロールします。WebKit（Safariのエンジン）の不具合報告でも「仕様どおりの動作」とされており、2026年9月時点で改善の見込みはありません。スマホの閲覧が多いサイトでは、次の方法2を使ってください。

方法2｜疑似要素とposition: fixedでiPhoneでも背景を固定する

iPhoneでも背景を止めて見せたいときは、背景画像を ::before 疑似要素に移し、position: fixed で画面に固定します。親要素の clip-path: inset(0) が、固定した背景をそのセクションの範囲だけに切り抜く役割を持ちます。

<section class="px-fixed">
  <h2>見出し</h2>
</section>

.px-fixed {
  position: relative;
  min-height: 60vh;
  clip-path: inset(0); /* 固定した背景をこの箱の中だけに見せる */
}
.px-fixed::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("bg.jpg") center / cover no-repeat;
}

overflow: hidden では固定要素を切り抜けないため、clip-path を使うのがポイントです。iOSのバージョンによって画面下部のツールバー付近の描画が変わることがあるため、公開前に必ずiPhone実機で確認してください。

方法3｜perspectiveとtranslateZで奥行きを出す

JavaScriptを使わずに「奥のレイヤーほどゆっくり動く」多層のパララックスを作る方法です。スクロールする箱に perspective を指定し、奥に置きたいレイヤーを translateZ でマイナス方向へ下げます。遠くにあるものは動きが小さく見えるという、3D表示の性質をそのまま利用しています。

<div class="parallax">
  <div class="parallax__group">
    <div class="parallax__layer parallax__layer--back">奥のレイヤー</div>
    <div class="parallax__layer parallax__layer--base">手前のレイヤー</div>
  </div>
</div>

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;   /* ページではなくこの箱をスクロールさせる */
  perspective: 1px;
}
.parallax__group {
  position: relative;
  height: 100vh;
  transform-style: preserve-3d;
}
.parallax__layer {
  position: absolute;
  inset: 0;
}
.parallax__layer--base { transform: translateZ(0); }
.parallax__layer--back { transform: translateZ(-1px) scale(2); } /* 奥に下げて小さく見える分を拡大で補正 */

拡大率は「1 +（下げた距離 ÷ perspectiveの値）」で計算します。上の例では 1 + 1 ÷ 1 = 2 です。

この方法はページのスクロールを専用の箱に移すため、固定ヘッダーやページ内リンク、スクロール位置を検知するJavaScriptと干渉しやすくなります。既存サイトへの後付けには向かず、新規で作る演出ページ向けの手法と考えてください。

方法4｜Scroll-driven Animationsで写真に速度差をつける

2026年の新規実装で第一候補になるのが、CSSのScroll-driven Animations（スクロール駆動アニメーション）です。animation-timeline を使うと、時間ではなくスクロール量に合わせてCSSアニメーションを進められます。Chrome・Edgeは2023年のバージョン115から、SafariはmacOS・iOSともにSafari 26（2025年9月）から対応しました。

<div class="px-frame">
  <img class="px-img" src="photo.jpg" alt="" width="1200" height="800">
</div>

.px-frame {
  height: 60vh;
  overflow: clip;
  view-timeline: --px-frame;  /* この枠の見え方をタイムラインにする */
}
.px-img {
  display: block;
  width: 100%;
  height: 130%;               /* 動かす分だけ大きめにしておく */
  object-fit: cover;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .px-img {
      animation: px-move linear both;
      animation-timeline: --px-frame;  /* 必ず animation の後に書く */
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes px-move {
  from { transform: translateY(-23%); }  /* (130% - 100%) ÷ 130% ≒ 23% */
  to   { transform: translateY(0); }
}

枠が画面の下から入ってきて上へ抜けるまでの間に、写真が23%ぶん下へずれていきます。枠より写真の動きが遅くなるため、写真だけが奥にあるように見えます。

注意点は、2026年9月時点のFirefoxの安定版では、この機能が既定で無効になっていることです。上のコードは @supports で囲んでいるので、未対応のブラウザでは写真が静止して表示されるだけで、レイアウトは崩れません。また animation の一括指定は animation-timeline を初期値に戻してしまうため、書く順番を逆にすると動かなくなります。

方法5｜GSAP ScrollTriggerで作る

Firefoxを含むすべての主要ブラウザで同じ動きを保証したい場合や、複数の要素を順番に連動させたい場合は、JavaScriptライブラリのGSAPとScrollTriggerプラグインを使います。HTMLは方法4と同じものを使えます。

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);

const mm = gsap.matchMedia();
// 「動きを減らす」設定をしていない人にだけ動きをつける
mm.add("(prefers-reduced-motion: no-preference)", () => {
  gsap.utils.toArray(".px-frame").forEach((frame) => {
    gsap.fromTo(frame.querySelector(".px-img"),
      { yPercent: -23 },
      {
        yPercent: 0,
        ease: "none",
        scrollTrigger: {
          trigger: frame,
          start: "top bottom",  // 枠の上端が画面の下端に来たら開始
          end: "bottom top",    // 枠の下端が画面の上端に来たら終了
          scrub: true           // スクロール量に動きを同期させる
        }
      }
    );
  });
});
</script>

GSAPは、2024年にWebflow社が買収したあと、2025年からSplitTextなど以前は有料だったプラグインも含めて全機能が無料になり、商用サイトでも使えます。ただし利用規約には、コードを書かずにアニメーションを作れるツール（Webflowと競合するサービス）への組み込みを禁じる条項があります。通常のWebサイト制作では問題になりませんが、ツールを開発する場合は規約を確認してください。スムーススクロールとの連携は動きのあるWebサイトはこう作るで紹介しています。

軽量ライブラリの現状｜simpleParallax.js・Rellax.js・Lenis

パララックス専用の軽量ライブラリも残っていますが、選ぶときは更新状況を必ず確認してください。

simpleParallax.js：画像に指定するだけで速度差をつけられる。2026年もメジャーアップデートが続いている
Rellax.js：以前は定番だったが、npmで公開されている最新版は2020年のもの。新規案件では採用しにくい
Lenis：パララックスそのものではなく、スクロールをなめらかにするライブラリ。GSAPのScrollTriggerと組み合わせて使う

更新が止まったライブラリは、ブラウザの仕様変更で動かなくなったときに自分で直すしかありません。長く運用するサイトほど、CSSの標準機能か、開発が続いているGSAPを選ぶほうが安全です。

ノーコード・WordPressでパララックスを入れる方法

コードを書かない場合でも、WordPressやノーコードツールの標準機能でパララックスを入れられます。ただし多くは背景固定型なので、iPhoneでの見え方を実機で確認することが前提です。

WordPress｜カバーブロックの「固定背景」

WordPressのブロックエディターでは、カバーブロックだけで背景固定型のパララックスを作れます。手順は次の3つです。

ブロックの追加から「カバー」を選ぶ
背景に使う画像をメディアライブラリから選ぶ
右側の設定パネルで「固定背景」をオンにする

PCでは背景が止まって見えますが、iPhoneでは方法1と同じ理由で固定されず、普通の背景としてスクロールします。表示が崩れるわけではないので、「PCだけ演出があれば十分」というページなら、この方法がいちばん手軽です。

WordPress｜Elementor Proのモーションエフェクト

ページビルダーのElementorを使っている場合は、有料版（Pro）のモーションエフェクトで速度差型のパララックスを設定できます。セクションや画像を選び、「スクロールエフェクト」の「縦スクロール」をオンにして、速度と方向を指定します。背景画像にも適用でき、PC・タブレット・スマホごとにオンとオフを切り替えられるため、「スマホでは動かさない」という設定も簡単です。

STUDIO｜スクロールエフェクト

STUDIOでは、スクロールに合わせて要素の位置を変える「スクロールエフェクト」でパララックスを作れます。基本の考え方は方法4と同じで、切り抜き用の箱の中に大きめの画像を置き、スクロールに合わせて画像のY座標をずらします。箱のはみ出し設定を「非表示（hidden）」にすると正しく動かないことがあるため、公式ヘルプでは「clip」の指定が案内されています。

Webflow｜GSAPを使ったインタラクション

WebflowはGSAPの開発元を傘下に持ち、2025年からインタラクション機能の中でGSAPのScrollTriggerをコードなしで使えるようになりました。方法5と同じ仕組みを画面操作で組めるため、デザイナーが細かい動きまで調整したいサイトに向いています。

既存サイトにパララックスを導入する3ステップ

MacBook Pro beside iPad and iPhone turned on — Photo by Firmbee.com on Unsplash

すでに公開しているサイトに後から入れる場合は、「場所を絞る → 最小限のコードで作る → 実機で確認する」の順に進めると失敗が少なくなります。

ステップ1｜動かす場所を1〜2か所に絞って手法を選ぶ

最初に、パララックスを入れる場所を決めます。候補になりやすいのは、ファーストビューのメインビジュアルと、ページ中盤でセクションの雰囲気が切り替わる区切りの2か所です。場所が決まったら、先ほどの比較表で手法を選びます。迷ったときは「スマホでも動かしたいなら方法4、PCだけでよいなら方法1またはカバーブロック」と考えると決めやすくなります。

ステップ2｜最小のコードで実装し、動きを減らす設定にも対応する

実装するときは、OSの「視差効果を減らす」「アニメーション効果」などの設定をオフにしている人向けの指定も同時に入れます。後回しにすると入れ忘れるため、最初のコードに含めておくのが確実です。

@media (prefers-reduced-motion: reduce) {
  .px-bg { background-attachment: scroll; }   /* 方法1を止める */
  .px-fixed::before { position: absolute; }   /* 方法2を止める */
  .px-img { animation: none; transform: none; } /* 方法4を止める */
}

方法5のGSAPは、先ほどのコードの gsap.matchMedia() がこの役割を担っています。

ステップ3｜iPhone実機とPageSpeed Insightsで確認する

公開前の確認は、次の順番で行います。

iPhone実機のSafariで、背景の固定や速度差が意図どおりか確認する（PCブラウザのスマホ表示モードでは再現されない挙動がある）
AndroidのChromeとFirefoxで、動かない場合でも表示が崩れていないか確認する
OSの「動きを減らす」設定をオンにして、動きが止まるか確認する
PageSpeed Insightsで導入前後のスコアを比べ、LCPとCLSが悪化していないか確認する

SEO・表示速度・アクセシビリティで気をつけること

パララックス自体がSEOの評価を下げることはありません。注意すべきなのは、動きのために本文が読み込まれにくくなることと、表示速度の悪化、動きが苦手な人への配慮の3点です。

SEO｜本文のテキストは動かさない

Googleは公式ドキュメントで、検索エンジンのクローラーはページをスクロールしたりクリックしたりしないと説明しています。スクロールしないと本文が読み込まれない作りにすると、その内容が検索結果に反映されない恐れがあります。パララックスは装飾用の写真や背景だけに使い、見出しや本文のテキストは最初からHTMLに書いておくのが基本です。

もう一つの注意点は、演出を優先してすべての情報を1ページに詰め込む「1ページ完結型」のサイトです。URLが1つしかないため、狙える検索キーワードも実質1テーマに限られます。検索から集客したいサービスは、下層ページに分けておくほうが有利です。

表示速度｜動かすのはtransformだけにする

スクロールに合わせて動かすプロパティは、transform と opacity に限定します。top や background-position を動かすと、スクロールのたびにレイアウトや描画の再計算が起きてカクつきの原因になります。

Core Web Vitalsとの関係では、transform による移動はCLS（レイアウトのずれ）に数えられません。INP（操作への反応速度）もクリックやタップが対象で、スクロール自体は対象外です。ただし、スクロールのたびに重いJavaScriptが動いていると、その間のタップへの反応が遅れてINPが悪化することがあります。背景画像は幅1920px程度に抑え、WebPなどで圧縮しておくとLCPへの影響も小さくできます。

アクセシビリティ｜酔いやすい人のために動きを止められるようにする

Webアクセシビリティの国際基準WCAG 2.2の達成基準2.3.3「インタラクションによるアニメーション」の解説では、背景が前景と違う速さで動くパララックスが、止められるようにすべき演出の例として名指しされています。この基準は最上位のレベルAAAなので必須ではありませんが、ステップ2のコードで紹介した prefers-reduced-motion への対応は数行で済みます。公共系のサイトや、幅広い年代が利用するサイトでは必ず入れておきましょう。

パララックスが動かない・カクつくときの対処法

code editor displaying react source code — Photo by Juanjo Jaramillo on Unsplash

パララックスの不具合は、原因が「ブラウザの対応」「動かしているプロパティ」「画像のサイズ」「親要素の指定」のどれかにあることがほとんどです。症状ごとに、確認する順番を整理しました。

iPhoneだと背景が固定されない

まず、background-attachment: fixed を使っていないか確認してください。iPhoneのSafariではこの指定が効かないため、方法2（疑似要素＋position: fixed）か方法4（Scroll-driven Animations）に切り替えます。WordPressのカバーブロックの「固定背景」も同じ理由で固定されません。どうしてもスマホで固定させたい場合は、カバーブロックに追加CSSクラスを付けて方法2のCSSを当てます。

Firefoxでだけ動かない

方法4を使っている場合は、Firefoxの安定版で animation-timeline が既定で無効になっていることが原因です。不具合ではないため、@supports で静止表示になっていれば問題ありません。Firefoxでも同じ動きが必要な案件なら、方法5のGSAPに切り替えてください。

スクロールするとカクつく・引っかかる

次の順番で確認します。

top・margin・background-position を動かしていないか（transform に置き換える）
JavaScriptの scroll イベントの中で、毎回位置を計算して書き換えていないか（方法4かGSAPに置き換える）
背景画像の容量が大きすぎないか（1枚あたり数百KB以内を目安に圧縮する）
will-change をたくさんの要素に付けていないか（動かす要素だけに絞る）

画像の上下に白い隙間ができる

写真を動かす距離に対して、写真の大きさが足りていません。方法4のコードでは写真の高さを枠の130%にし、はみ出した30%の範囲で動かしています。移動量を大きくしたい場合は、写真の高さも同じだけ大きくしてください。あわせて、枠に overflow: clip が指定されているかも確認します。

固定したはずの背景が一緒に動いてしまう

方法2で起きやすい症状です。親や祖先の要素に transform・filter・will-change: transform が指定されていると、position: fixed の基準が画面ではなくその要素に変わり、背景がコンテンツと一緒に流れてしまいます。フェードインのアニメーションを親要素に付けている場合によく起きるため、アニメーションは子要素に付け替えてください。

なお、ヘッダーを追従させる position: sticky でも、親要素の指定が原因で効かなくなることがあります。詳しくはCSS position: stickyとは？で解説しています。

よくある質問

Q. パララックスとはどういう意味ですか？
A. 英語の parallax（視差）が由来で、Webデザインではスクロールしたときに背景と手前の要素を違う速さで動かし、奥行きを出す演出を指します。「パララックス効果」「パララックスデザイン」とも呼ばれます。

Q. CSSだけでパララックスは作れますか？
A. 作れます。背景を固定するだけなら background-attachment: fixed、写真に速度差をつけるならScroll-driven Animations（animation-timeline）を使えば、JavaScriptは不要です。ただしFirefoxの安定版では後者が既定で無効なので、静止表示になる前提で使います。

Q. iPhoneで背景固定が効かないのはなぜですか？
A. iPhoneのSafariが background-attachment: fixed に対応していないためです。WebKitでは仕様どおりの動作とされているため、疑似要素と position: fixed を組み合わせる方法に切り替えてください。

Q. パララックスはSEOに悪影響がありますか？
A. 演出そのものは検索順位に影響しません。ただしGoogleのクローラーはページをスクロールしないため、スクロールしないと本文が読み込まれない作りは避けてください。動かすのは装飾用の写真や背景だけにするのが安全です。

Q. パララックスを入れるとサイトは重くなりますか？
A. 作り方によります。transform だけを動かし、背景画像を圧縮していれば、体感できるほど重くなることはほとんどありません。重くなる原因の多くは、容量の大きい画像と、スクロールのたびに位置を計算するJavaScriptです。

Q. 「画面酔いする」と言われたらどうすればいいですか？
A. prefers-reduced-motion で、OSの「動きを減らす」設定をしている人には動きを止めるようにします。あわせて、動かす場所を1〜2か所に減らす、移動量を小さくする、といった調整も効果があります。

Q. コードを書かずにWordPressやSTUDIOで入れられますか？
A. 入れられます。WordPressはカバーブロックの「固定背景」、Elementor Proはモーションエフェクト、STUDIOはスクロールエフェクトで設定できます。背景固定型はiPhoneでは固定されないため、スマホでの見え方を確認してから公開してください。

まとめ

パララックスは、スクロールの速度差で奥行きを出し、サイトの世界観を伝える演出です。2026年時点では、PCだけならCSSの背景固定、スマホでも動かすならScroll-driven Animations、すべてのブラウザで同じ動きが必要ならGSAPという選び方が現実的です。どの方法でも、動かす場所を絞る、transform だけを動かす、動きを減らす設定に対応する、iPhone実機で確認する、の4点を押さえておけば大きな失敗は防げます。

THREE D PLUSでは、パララックスを取り入れたサイトの設計・実装から、既存サイトの一部分だけに動きを加えるご相談まで承っています。「うちのサイトに合うか判断してほしい」という段階でも、お問い合わせからお気軽にご連絡ください。