> For the complete documentation index, see [llms.txt](https://help.pagefly.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.pagefly.io/pagefly-help-center-japanese/pjitosekushonno/sections/use-parallax-effect-in-a-section.md).

# PageFlyのセクションでパララックス効果を使用する方法

### 概要

概要：パララックス効果は、前景の要素とは異なる速度で背景要素を移動させることで3Dスクロール効果を生み出す視覚的なテクニックです。これにより、ウェブページに奥行きが加わり、サイトの視覚的な魅力を高めます。

PageFlyでは、パララックス効果はセクションにのみ適用でき、ライブページでのみ機能します。このガイドでは、PageFlyページの[セクションでパララックス効果を効果的に使用する方法](https://help.pagefly.io/manual/use-parallax-effect-in-a-section/)を紹介します。

### 要件

このガイドを開始する前に、パララックスの背景に使用する予定の少なくとも1つの高解像度画像を用意しておく必要があります。

### Gen 2レイアウト - セクションでパララックス効果を使用する方法

{% hint style="warning" %}
**重要な注意**: Gen 2レイアウトは、ペイ・アズ・ユー・ゴー価格モデル（[スロットプラン](https://help.pagefly.io/manual/pricing-plans/)）でのみ利用可能になります。
{% endhint %}

#### PageFlyセクションにパララックス効果を追加する

PageFlyセクションにパララックス効果を追加するには、次の手順に従います。

* ステップ1：PageFlyエディターで、パララックス効果を追加したい既存のセクションを選択するか、新しいセクションを作成します。
* ステップ2：左側のメニューに移動し、**スタイリング** > **背景** > **背景スタイル**を選択し、「パララックス」を選択します。
* ステップ3：**画像ソース**の下にある**画像を選択**をクリックして、セクションの背景画像をアップロードします。

![](/files/xf2wRiznfMs48uCrxv1h)

#### パララックス効果をカスタマイズする

パララックス効果を追加した後、以下の設定を変更することもできます。

* 設定の調整：画像の下にある**詳細設定**をクリックして、**パララックス速度**をカスタマイズしたり、**オーバーレイカラー**を追加したりできます。

![](/files/mpVu2CVf7T4wDzFprAsq)

* パディングの調整：セクションの[上下パディング](https://help.pagefly.io/manual/edit-spacing-margin-and-padding/)を増やして縦方向のスペースを確保することで、効果がより良く見えます。以下の例では、上下パディングをそれぞれ250pxに調整しています。

![](/files/dOeiBLIJptZQ41XV72vG)

* 高さの調整：**高さ**パラメータの値を**固定**に変更すると、フレックスセクションにカスタムの高さを設定できます。

#### モバイルデバイス向けにパララックス効果を最適化する

* ステップ1：PageFlyページエディターからモバイルビューに切り替えます。
* ステップ2：Gen 2エディターでは、フレックスセクションのパディングまたは高さを調整できます。フレックスセクションを選択します：

  * **スタイリング**タブ > **間隔** > 下パディングを0pxに設定して、セクションが画面スペースを占有しすぎないようにし、モバイルエクスペリエンスを損なわないようにします。
  * **スタイリング**タブ > **サイズ** > **高さ**パラメータの値を**固定**に設定します。

  ![](/files/mSSoC8fSJX7qXaloBNtA)
* ステップ3：**公開**をクリックして変更を有効にします。

### レガシーレイアウト - セクションでパララックス効果を使用する方法

PageFlyでは、セクションにパララックス効果を追加し、外観をカスタマイズし、異なるデバイス向けに最適化できます。

このガイドのビデオチュートリアル版をこちらで見ることができます：

{% embed url="<https://www.youtube.com/watch?v=vin4VAjjsiw>" %}

#### PageFlyセクションにパララックス効果を追加する

PageFlyセクションにパララックス効果を追加するには、次の手順に従います。

* ステップ1：PageFlyエディターで、パララックス効果を追加したい既存のセクションを選択するか、新しいセクションを作成します。
* ステップ2：左側のメニューに移動し、**スタイリング** > **背景** > **背景スタイル**を選択し、「パララックス」を選択します。
* ステップ3：**画像ソース**の下にある**画像を選択**をクリックして、セクションの背景画像をアップロードします。

![](/files/5XT322nFOSKW0jsL15qO)

#### パララックス効果をカスタマイズする

パララックス効果を追加した後、以下の設定を変更することもできます。

* 設定の調整：画像の下にある**詳細設定**をクリックして、**パララックス速度**をカスタマイズしたり、**オーバーレイカラー**を追加したりできます。
* パディングの調整：セクションの[上下パディング](https://help.pagefly.io/manual/edit-spacing-margin-and-padding/)を増やして縦方向のスペースを確保することで、効果がより良く見えます。以下の例では、上下パディングをそれぞれ350pxに調整しています。

#### モバイルデバイス向けにパララックス効果を最適化する

* ステップ1：PageFlyページエディターからモバイルビューに切り替えます。
* ステップ2：セクションを選択し、**スタイリング**タブ > **間隔** > 下パディングを0pxに設定して、セクションが画面スペースを占有しすぎないようにし、モバイルエクスペリエンスを損なわないようにします。
* ステップ3：**公開**をクリックして変更を有効にします。

![](/files/TOjwV1JsUMMXZKnuJwKb)

### 使用例

* 注目商品の強調：新着商品や注目商品を紹介するセクションでパララックス効果を使用し、ユーザーの注意を引き、ダイナミックなショッピング体験を創出します。
* 会社概要ページでのストーリーテリング：「会社概要」ページでパララックス効果を使用して、ストーリーが展開するにつれて奥行きを加えます。
* 背景アニメーション：背景画像に微妙な動きを加えて、メインコンテンツから注意をそらさずにセクションをより魅力的にします。
* イベントページ：パララックスを使用して背景画像（コンサート会場や会議場など）を表示し、その上にイベントの詳細がスクロールするようにすることで、ページをよりエキサイティングでインタラクティブにします。
* ホリデーセールセクション：季節ごとのセールセクション（例：ブラックフライデーやホリデーセール）の背景にパララックスを追加して、注目を集め、デザインをより目を引くものにします。
* サービスの特徴：パララックスを使用して画像（例：修理中の様子）を表示し、その上にサービスの説明がスムーズにスクロールするようにすることで、サービスを強調します。

### ヒントとベストプラクティス

* 適切な画像の選択：背景には、明確で層の区別がはっきりした高品質の画像を選択します。これにより、パララックス効果が奥行きの認識を高め、前景のコンテンツから注意をそらさないようにします。
* モバイル体験を念頭に置く：パララックス効果はモバイルサイトを遅くする可能性があります。モバイルデバイスでの使用を制限するか、設定を調整してパフォーマンスへの影響を減らします。
* テストと微調整：異なるブラウザ環境やデバイスで定期的にページをプレビューし、パララックス効果がスムーズに機能することを確認します。

### よくある質問

**1. 1つのページで複数のパララックス背景を使用できますか？**

はい、1つのページで複数のパララックス背景を使用できますが、それぞれの読み込み時間がページに過負荷をかけないように最適化されていることを確認してください。

**2. パララックス効果を使用しているときに読み込み時間が遅くなるのをどうすれば修正できますか？**

背景画像を最適化してファイルサイズを減らし、ページのパララックスセクションの数を減らすことを検討してください。

### 追加リソース

* [PageFlyページで全幅セクションを作成する5つのステップ](https://help.pagefly.io/manual/create-a-full-width-section/)
* [PageFlyでスティッキーセクションを作成する](https://help.pagefly.io/manual/make-a-sticky-section/)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.pagefly.io/pagefly-help-center-japanese/pjitosekushonno/sections/use-parallax-effect-in-a-section.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.