SWELLのパララックス設定ガイド｜おしゃれトップページを作る5ステップ

SWELLでパララックスを試してみたものの、動きがなんだか不自然だったり、思ったよりダサく感じてしまったりして悩んでいませんか。

ざっくり言うと、SWELLのパララックス演出は「使う場所と回数を絞って、設定の意味を理解して使えば、一気にプロっぽいサイトに近づく」という機能です。

SWELLでパララックスを使う前に知っておきたいこと

パララックスと固定背景の違いをざっくり整理しよう

パララックスも固定背景も「スクロールしたときに背景の見え方が変わる」という意味では似ていますが、動き方や使いどころは少し違います。感覚をつかみやすいように、ざっくり比較してみましょう。

項目	パララックス効果	固定背景（背景を固定）
見え方のイメージ	スクロールに合わせて背景がゆっくり動く	コンテンツだけが動き、背景は止まって見える
使う目的	立体感や奥行き感、少しドラマチックな動きを出したい	写真を大きく見せたい、世界観をしっかり固定したい
向いている場所	セクションの区切り、LPの印象的な見せ場	メインビジュアルやファーストビュー
体感としての派手さ	やや派手で演出感が強め	落ち着いた印象になりやすい
注意したい点	やりすぎると酔いやすく、重くもなりやすい	文字が読みにくくなりやすく、画像も大きくなりがち

SWELLでは、高度なスクロール連動アニメーションをコードから組むというより、フルワイドブロックや背景画像の設定を組み合わせて「パララックス風の見え方」を作っていくイメージです。そのため、SWELLのパララックスを上手に使うには、ブロックエディタ側の設定を理解しておくことが近道になります。

私の感覚では、1ページの中でパララックス演出を使うのは、多くても2〜3セクション程度に抑えたほうが、見た目も読みやすさもバランスが良くなります。

SWELLでパララックスっぽい表現ができる主な場所

SWELLでパララックス風の表現を作りやすい場所は、主に次の3つです。

• フルワイドブロックの背景画像
• メインビジュアル（ヘッダー直下の大きな画像エリア）
• ページ全体の背景画像（固定表示を使ってパララックス風に見せる）

フルワイドブロックは、画面いっぱいに横幅が広がるセクションのようなイメージです。ここに背景画像とパララックス演出を組み合わせることで、「帯状の背景の上にコンテンツが流れていく」ような見え方を作れます。

メインビジュアルでは、背景画像を固定表示にすることで、ファーストビューにどっしりとした世界観を出せます。一方、ページ全体の背景画像に写真を敷くと、サイト全体の雰囲気をまとめやすい反面、読みやすさや表示速度にも影響しやすいので、使いどころは慎重に選んだほうが安心です。

SWELL パララックスの基本設定と考え方

フルワイドブロックの背景画像設定を理解する

SWELLでパララックス演出を使うときの主役が、フルワイドブロックです。ブロック側の設定項目を、ざっくり押さえておきましょう。

設定項目	役割・意味	注意ポイント
背景画像	セクションの背景として表示する画像	明るさやコントラストが強すぎると文字が読みにくくなる
背景の位置	画像のどの部分を中心に見せるかを決める	人物やロゴの顔など、大事な部分が切れないように調整する
背景の繰り返し	画像をタイル状に並べるかどうか	パララックスや固定背景では基本的にオフにしておくと自然
背景のサイズ	「カバー」など、表示の大きさや広がり方	カバーにすると画面いっぱいに表示されやすい
背景の固定・スクロールの設定	スクロール時の動き方を指定する	同じページで使いすぎるとごちゃつくので、1〜2セクションに絞る

フルワイドブロックは、ヘッダーやフッターとは別の「一枚の帯」のようなパーツだと考えると分かりやすいです。そこに背景画像とパララックスっぽい動きを加えることで、奥行きやメリハリをつけられます。

実際に私が使うときも、まずは「このページの見せ場はどこか」を決めてから、そこにだけパララックス設定を入れていくようにしています。あちこちで動かすより、ピンポイントで使ったほうが、印象に残りやすくなります。

ページ背景でパララックス風の見え方を作るときの考え方

SWELLでは、投稿ページや固定ページ全体に背景画像を設定し、背景を固定表示することでパララックスに近い見え方を作ることもできます。ただし、この使い方には少しコツがあります。

ページ背景に大きな写真を使う方法は、ブランドサイトやポートフォリオのような、世界観を重視するサイトと相性が良いです。一方で、情報量が多いブログ記事に常に背景画像を敷くと、どうしても読みづらくなりがちなので、必要なページだけに絞って使うのがおすすめです。

フルワイドブロックでSWELL パララックスを実装する手順

SWELL パララックス設定の全体の流れ

フルワイドブロックを使ったパララックス演出は、ざっくり次のような手順になります。

1. フルワイドブロックを挿入する
2. ブロックの幅を「フルワイド」に設定する
3. 背景画像を設定する
4. 背景の位置やサイズを整える
5. スクロール時の動き方（固定表示など）を設定する
6. 中にテキストやボタンを配置する
7. PCとスマホの表示をチェックする

ステップ	作業内容	意識したいポイント
1	フルワイドブロックを追加	どのセクションをパララックス演出にするか事前に決めておく
2	幅をフルワイドに設定	サイト型トップページでは特に設定し忘れに注意
3	背景画像を選ぶ	文字を載せるなら、なるべくシンプルで余白の多い写真を選ぶ
4	位置・サイズを調整	主役となる部分が中央付近に来るように微調整する
5	スクロール時の演出を設定	同じページで使うのは1〜2カ所にとどめておく
6	テキスト・ボタンを配置	余白をしっかり取り、読みやすさを最優先にする
7	PC・スマホで確認	スマホでパララックスが効かない場合の見え方もチェックする

私が実務でフルワイドブロックを組むときは、いきなり全部を作り込むのではなく、まず「背景の選定」と「文字の配置」だけざっくり決めてしまいます。そのあとで、細かい動きや余白を調整していく流れが、一番迷いにくいと感じています。

よく使うフルワイドレイアウトパターン

フルワイドブロックにパララックス演出を組み合わせるとき、レイアウトのパターンをいくつか持っておくと便利です。例えば、次のような構成はよく使います。

• ヒーローセクション型
  ・大きなキャッチコピー
  ・短めのサブコピー
  ・行動ボタン（お問い合わせ、サービス詳細など）
• コンテンツ紹介セクション型
  ・左にテキスト、右に画像（または逆）
  ・背景のパララックスで奥行きを出す
• セクション間の仕切り型
  ・中央に短いメッセージだけを入れる
  ・次のコンテンツへの橋渡しとして使う

「どのセクションで世界観をしっかり見せたいか」を先に決めておくと、フルワイドブロックの数や、どこにパララックスを入れるかも決めやすくなります。サービスサイトやLPでは、「最初の訴求」と「最後の一押し」の2カ所だけを動かして、真ん中の説明部分はシンプルにするパターンもおすすめです。

メインビジュアルやトップでSWELL パララックスを活かすコツ

メインビジュアルのパララックス風ヘッダー構成

メインビジュアルでパララックスのような見せ方をする場合、「背景を固定して、その上に最小限の情報だけを載せる」という考え方が基本になります。構成要素を整理すると、次のようなイメージです。

要素	具体例	ポイント
メインコピー	サービスをひと言で表すフレーズ	できるだけ短く、太めの文字でしっかり見せる
サブコピー	誰の、どんな悩みを解決するのか	メインコピーを少し補足する役割にとどめる
背景画像	サービスの雰囲気が伝わる写真やイメージ画像	人物写真かイメージ写真かを決めて、混在させすぎない
行動ボタン	無料相談・資料請求・メニュー一覧など	色と大きさで分かりやすく目立たせる
オーバーレイ	背景の上に乗せる薄い色のフィルター	文字が読みやすくなるように濃さを調整する

メインビジュアルでパララックス風の背景を使うときは、「写真をしっかり見せつつ、テキストを読んでもらう」という2つの目的を両立させる必要があります。私自身の経験では、背景を少し暗めにして、テキストを白や明るい色にしたほうが、ぱっと見で内容が伝わりやすくなりました。

写真を明るいまま使いたくなる気持ちもありますが、一度思い切って暗くしてみると、「こんなに読みやすくなるのか」と実感しやすいと思います。

サイト型トップページでのパララックス活用パターン

サイト型トップページでは、複数のセクションをフルワイドで積み重ねていく構成が多いです。その一部にパララックスを使うことで、ページ全体にリズムをつけることができます。

例えば、次のような流れはよくあるパターンです。

パララックスを使うセクションは、「写真で世界観を伝えたい場所」と「読んだ人に行動してほしい場所」に絞ると、自然にまとまります。逆に、説明が多いセクションでは、背景をシンプルにして文字を読みやすくしておいたほうが、結果的に伝わりやすくなります。

SWELL パララックスのトラブルと解決策

「スマホでパララックスが効かない」のはなぜか

SWELLに限らず、多くのサイトでは、スマホでの表示時に背景の固定やパララックス演出を弱めたり無効にしたりすることがあります。これは、スマホのブラウザや端末の負荷、操作性への影響を考えた仕様であることが多いです。

現象	主な原因	対策の方向性
PCでは動いて見えるのに、スマホではほとんど動かない	スマホサイズでは背景の動きを抑える設計になっている	仕様として割り切り、スマホでは静止表示を前提にデザインする
背景がガタガタして見える	画像サイズが大きすぎる、スクロールがカクついている	画像を軽くする、演出を入れるセクションを減らす
文字が読みにくい	背景画像と文字色のコントラスト不足	オーバーレイを濃くする、文字の背景に白や単色のボックスを敷く

私も最初は「どうにかしてスマホでもパララックスを効かせたい」と思って、いろいろ試していました。ただ、実際にいろんな人に見てもらうと、動きが少ないほうが読みやすいという声が多く、今ではスマホでは静止表示前提でデザインすることがほとんどです。

そのため、PCではパララックスや固定背景で世界観を出しつつ、スマホでは「シンプルで読みやすい表示」を目指す、という考え方が現実的だと思います。

表示速度や重さが気になるときのチェックポイント

もう一つよくある悩みが、「パララックス演出を入れるとページが重くならないか」という不安です。背景用の画像は、どうしてもサイズが大きくなりがちなので、次のようなポイントをチェックしてみてください。

体感としては、背景の動きを付けるセクションは1〜2カ所に抑え、それ以外は静止背景か単色の背景にしたほうが、読み込みも早く、見た目もすっきりします。特にスマホユーザーは、通信環境によって表示速度が大きく変わるので、重いページは途中で閉じられやすくなります。

私がサイト制作でいつも意識しているのは、「画像は事前に圧縮してからアップする」ということです。ほんのひと手間ですが、それだけで表示の体感速度がかなり変わるので、パララックス演出を使うときほど丁寧にやっておきたいポイントです。

デザイン・SEO・UXから見るSWELL パララックスのコツ

やりすぎを防ぐSWELL パララックスのチェックリスト

パララックス演出は楽しくて、ついあちこちに入れたくなります。ただ、やりすぎると「動きは多いけれど、内容が頭に入ってこないページ」になってしまいます。そこで、公開前に次のチェックリストを見直してみてください。

チェック項目	YESならOK	NOなら見直したいポイント
パララックスを使っているセクションは2カ所以内か	メリハリが出て、読みやすい	動きが多すぎるので、優先度の低いセクションから外していく
背景画像の上の文字が一瞬で読めるか	コピーがしっかり伝わる	文字数を減らすか、オーバーレイを強くしてコントラストを上げる
スマホで見ても違和感がないか	静止表示でもデザインが成立している	スマホだけ背景色を変えるなどレイアウトを調整する
ページの読み込みが極端に遅くないか	ユーザーのストレスが少ない	画像を圧縮したり、画像の枚数を減らしたりする

このチェックをしていくと、「どのセクションにパララックスを残すべきか」「どこは思い切ってシンプルにするか」が、自然と見えてきます。あくまで主役はコンテンツで、パララックスの動きはそれを引き立てるための脇役、という意識で調整していくとバランスが取りやすいです。

読みやすさを守りながら世界観を出す工夫

パララックス演出を使うと、背景をうまく活かして世界観を出しやすくなります。ただし、演出に寄りすぎてしまうと、文字が読みにくくなったり、情報が頭に入りづらくなったりします。

読みやすさと世界観を両立するために、次のような工夫を意識してみてください。

• 背景画像の上に載せるテキストは「短く・大きく」まとめる
• 長い文章は、背景画像の上ではなく、白いボックスや通常のセクションに置く
• 背景画像には、軽くぼかしや暗めのオーバーレイをかけて情報量を減らす
• 見出しやボタンの色をサイト全体で統一し、背景に負けないようにする

私も最初のころは、きれいな写真をそのまま見せたくて、あまり暗くせずに使ってしまい、結果として文字が見えづらくなってしまうことがよくありました。今はむしろ「写真には一歩引いてもらって、文字を前に出す」くらいの気持ちでオーバーレイをかけるようにしています。

よくある質問

Q1. SWELL パララックスはブログでも使って大丈夫ですか

A. 使って大丈夫です。ただし、使う場所と量はかなり絞ったほうが、結果として読みやすいブログになります。

特に、1つの記事の本文の中で何度もパララックス演出を使うと、読みづらさやページの重さにつながりやすくなります。ブログの場合は、次のような使い方を意識するとバランスが良くなります。

• トップページやカテゴリーページのヒーローセクション
• プロフィールページやサービス紹介ページの一部セクション
• 特集ページやLPの、印象に残したい見せ場の部分

通常のブログ記事ではシンプルなレイアウトを基本にして、世界観を見せたいページだけパララックス風の演出を使うと、訪問者にも優しい構成になります。

Q2. SWELL パララックスが重くならない画像サイズの目安はありますか

A. サイトのレイアウトや表示領域によって「正解のサイズ」は変わりますが、背景に使う画像は、「必要以上に大きくしない」「容量をしっかり圧縮する」という2点だけでもだいぶ違います。

ざっくりした考え方としては、次のようなイメージです。

• 画面いっぱいに表示しても荒れない程度の横幅にしておく
• 写真の不要な部分はトリミングして、無駄な情報を減らす
• アップロード前に画像圧縮ツールで容量を小さくしておく

「どうせ全画面で出すなら」と、カメラで撮ったそのままの大きな画像をアップしてしまうと、すぐにページが重くなります。パララックス演出を使うときこそ、画像のサイズと容量を意識しておくと安心です。

Q3. SWELL パララックスをCSSやコードでカスタマイズしたほうがいいですか

A. 基本的には、SWELLが用意してくれているフルワイドブロックや背景設定だけで十分です。どうしても特別な動きを実現したい場合だけ、CSSやJavaScriptでのカスタマイズを検討する、という順番がおすすめです。

コードでパララックスを細かく制御しようとすると、次のようなリスクも出てきます。

• テーマやWordPress本体のアップデートで動きが変わる可能性がある
• 表示速度が落ちて、Core Web Vitalsなどの指標に悪影響が出ることがある
• スマホでの挙動を別途調整する必要が出てくる

まずはSWELL標準のパララックス関連機能をしっかり使い、そのうえでどうしても足りないところが見えてきたら、最小限のカスタマイズを足していく、という進め方が一番トラブルが少ないと感じています。

まとめ

ここまでの内容を振り返ります

今日できる最初の一歩としては、「自分のサイトの中で、パララックス演出を入れてみたいセクションを1カ所だけ決めて、そこにフルワイドブロックを置いてみる」ことをおすすめします。

いきなり全ページを作り替えるのではなく、小さく試して微調整していくことで、自分のサイトにとってちょうどいいパララックスの使い方が見えてきます。