> 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/create-a-section-with-image-and-text.md).

# 画像とテキストで基本的なセクションを作成する方法

### 概要

このガイドでは、PageFlyで[画像とテキストを含むセクションを作成する方法](https://help.pagefly.io/manual/create-a-section-with-image-and-text/)を紹介します。これらの手順に従うことで、ウェブページに視覚要素とテキスト要素を効果的に統合する方法を学ぶことができます。

### 要件

* [PageFly](https://pagefly.link/mEPbwpPx)[インストール](https://pagefly.link/mEPbwpPx): ストアのページを作成する前に、PageFlyアプリをインストールする必要があります。
* 画像とテキストコンテンツの準備：セクション用に高画質な画像と明確なテキストコンテンツを準備します。

### Gen 2 レイアウト - 画像とテキストで基本的なセクションを作成する方法

{% hint style="warning" %}
**重要事項**: Gen 2 レイアウトは、従量課金制モデル（[スロットプラン](https://help.pagefly.io/manual/pricing-plans/)）専用となります。
{% endhint %}

このセクションでは、Gen 2 エディターを使用してPageFlyで基本的なセクションを作成する方法をガイドします。含まれる内容は以下の通りです。

* 1カラム
* 2カラム
* パララックス効果
* スティッキー

#### 1カラムセクションを作成する方法

**ステップ 1: 背景画像を追加する**

1. PageFlyに移動し、左サイドバーの\[要素]オプションにアクセスします。\[レイアウト]を選択し、\[ブランクセクション]レイアウトを選択してページにドラッグします。
2. **Flexセクション**を選択 > **スタイリング**タブを選択 > **背景** > 「**画像を選択**」をクリックして、セクションの背景画像を挿入します。

![](/files/BVL3XSBfYKIwtj9Ns9cM)

3. セクションをバナーにするには、**間隔**パラメーターで**パディング**と**マージン**を調整し、**その他の設定**を使用して背景画像を中央に配置して拡大します。

![](/files/Ly0EX7ywlnJf1fYyFUC9)

この例では、セクションの上下のパディングは200pxに設定されています。**背景**の位置は**中央**、背景サイズは**カバー**です。

または、Flexセクションの幅を設定してバナーにすることもできます。Flexセクションを選択し、**スタイリング**タブの[サイズ](https://help.pagefly.io/manual/elements-style-settings/%23size-settings)[パラメーター](https://help.pagefly.io/manual/elements-style-settings/%23size-settings)に移動 > **固定幅**を選択し、Flexセクションの希望する幅を設定します。

![](/files/CFsDdcPpvDSPOUsfkJwV)

**ステップ 2: 見出しを追加する**

1. **要素** > [見出し](https://help.pagefly.io/manual/heading-element/)に移動し、いずれかのバリエーションをセクションにドラッグします。お好みに合わせてスタイルを設定します。必要に応じて、\[ボタン]要素でも同様の操作を繰り返します。
2. 配置については、Flexセクションを選択 > **スタイリング**タブに移動 > スクロールダウンして**レイアウト**パラメーターの下にある「**アイテムを配置**」機能を見つける > 希望するオプションを選択します。**レイアウト**設定の詳細については、[こちら](https://help.pagefly.io/manual/elements-style-settings/%23layout-settings)をご覧ください。

![](/files/kREk4cydwX2C6slZHsgZ)

上記は、見出しとボタンを含む1カラムセクションのデザイン例です。

**ステップ 3: モバイルデザインを最適化する**

1. トップバーにあるデバイススイッチャーで**モバイル**アイコンをクリックして、モバイルビューに切り替えます。

![](/files/Ly0EX7ywlnJf1fYyFUC9)

2. **スタイリング**タブに移動し、マージンとパディングをモバイルビューに適するように変更します。モバイルビューモードでの変更は、他のビューモードには影響しません。
3. 見出しとボタンのサイズを、画像とモバイルビューモードに合うように編集します。
4. **公開**をクリックし、**ライブビュー**でページを確認します。

#### 2カラムセクションを作成する方法

**ステップ 1: レイアウトを構築する**

1. **要素** > レイアウトに移動し、左サイドバーから**1/2 – 1/2 レイアウト**を選択します。
2. **見出し**と**ボタン**要素を左カラムにドラッグします。**スタイリング**タブでスタイルを変更できます。
3. **要素**を選択 > **画像**要素を右カラムにドラッグします。
4. **画像**ソースに画像をアップロードします。

![](/files/5HBDiuuyF4dc4IaTj2pI)

**ステップ 2: モバイルデザインを最適化する**

1. トップバーにあるデバイススイッチャーで**モバイル**アイコンをクリックして、モバイルビューに切り替えます。

![](/files/5uPZEY3jI5fz2AMUQw0S)

2. **スタイリング**タブに移動し、マージンとパディングをモバイルビューに適するように変更します。モバイルビューモードでの変更は、他のビューモードには影響しません。
3. 見出しと段落のサイズを、画像とモバイルビューモードに合うように編集します。
4. **公開**をクリックし、**ライブビュー**でページを確認します。

#### パララックス効果セクションを作成する方法

セクションを選択し、**スタイリング**タブに移動して、**背景**設定で**パララックス**オプションを有効にする必要があります。詳しい手順は[こちら](https://help.pagefly.io/manual/create-a-section-with-image-and-text/#how-to-create-a-parallax-effect-section)でご確認ください。

![](/files/IiHmz6v8iAiNx4os3UJO)

#### スティッキーセクションを作成する方法

セクションを選択し、**一般**タブに移動して、**上部固定**オプションをオンにするだけです。詳細については、レガシーエディターの手順を[こちら](https://help.pagefly.io/manual/create-a-section-with-image-and-text/#how-to-create-a-sticky-section)でご確認ください。

![](/files/IUgLH5k2l5Ow7iAuk8nV)

### レガシーレイアウト - 画像とテキストで基本的なセクションを作成する方法

このセクションでは、レガシーエディターを使用してPageFlyで基本的なセクションを作成する方法をガイドします。含まれる内容は以下の通りです。

* 1カラム
* 2カラム
* パララックス効果
* 全幅
* スティッキーセクション

視覚的なステップバイステップの手順については、こちらのビデオチュートリアルをご覧ください。

{% embed url="<https://youtu.be/-jTSSrEXGi8>" %}

#### 1カラムセクションを作成する方法

**ステップ 1: 背景画像を追加する**

1. PageFlyに移動し、左サイドバーの**要素**オプションにアクセスします。**レイアウト**を選択 > **1/1 セクションレイアウト**を選択し、ページにドラッグします。
2. **スタイリングタブ**を選択 > **背景** > セクションの背景画像を挿入します。
3. セクションをバナーにするには、**間隔**パラメーターで**パディング**と**マージン**を調整し、その他の設定を使用して背景画像を中央に配置して拡大できます。

![](/files/36UUsCepzn9UH8OLZiID)

この例では、セクションの上下のパディングは200pxに設定されています。背景の位置は中央、背景サイズはカバーです。

**ステップ 2: 見出しを追加する**

1. **要素** > [見出し](https://help.pagefly.io/manual/heading-element/)に移動し、いずれかのバリエーションをセクションにドラッグします。お好みに合わせてスタイルを設定します。必要に応じて、**段落**要素と**ボタン**要素でも同様の操作を繰り返します。
2. 配置については、**スタイリング**タブでカラムのマージンを調整します。

![](/files/wTA4kslEBCG6wlOr0oSE)

上記は、見出しとボタンを含む1カラムセクションのデザイン例です。

**ステップ 3: モバイルデザインを最適化する**

1. トップバーにあるデバイススイッチャーで**モバイル**アイコンをクリックして、モバイルビューに切り替えます。

![](/files/iJIavcFRAjZyRqN8FEvn)

2. **スタイリング**タブに移動し、マージンとパディングをモバイルビューに適するように変更します。モバイルビューモードで行われた変更は、他のビューモードには影響しません。
3. 見出しとボタンのサイズを、画像とモバイルビューモードに合うように編集します。
4. **公開**をクリックし、**ライブビュー**でページを確認します。

#### 2カラムセクションを作成する方法

**ステップ 1: レイアウトを構築する**

1. **要素** > **レイアウト**に移動し、左サイドバーから**1/2 – 1/2 レイアウト**を選択します。
2. **要素**を選択 > 画像要素を右カラムにドラッグし、画像を画像ソースにアップロードします。
3. **見出し**と**段落**要素を左カラムにドラッグします。**スタイリング**タブでスタイルを変更できます。

![](/files/ILLfawtSgKrpce5DEioy)

**ステップ 2: モバイルデザインを最適化する**

1. トップバーにあるデバイススイッチャーで**モバイル**アイコンをクリックして、モバイルビューに切り替えます。

![](/files/BzZCcJeMo1Yl8CTSYB8R)

2. **スタイリング**タブに移動し、マージンとパディングをモバイルビューに適するように変更します。モバイルビューモードで行われた変更は、他のビューモードには影響しません。
3. 見出しと段落のサイズを、画像とモバイルビューモードに合うように編集します。
4. **公開**をクリックし、**ライブビュー**でページを確認します。

#### パララックス効果セクションを作成する方法

ウェブデザインにおけるパララックス効果は、スクロール時に背景画像を前景コンテンツよりも遅く動かすことで、奥行き感を演出するものです。この技術はウェブページのインタラクティビティとダイナミズムを高め、より没入感のある体験をユーザーに提供します。

**ステップ 1: パララックス背景画像を設定する**

1. パララックス背景を追加したいセクションを選択します。
2. インスペクターパネルで、**スタイリング**タブを選択します。
3. **背景**パラメーターを見つけ、**パララックス**オプションを選択します。
4. 次に、背景として設定したい画像を選択します。

![](/files/IiHmz6v8iAiNx4os3UJO)

**ステップ 2: 設定を調整する**

1. パララックス画像を設定した後、**その他の設定**ボタンをクリックします。
2. パララックスの速度とオーバーレイ色の設定が表示されます。

パララックス効果を確認するには、プレビューとライブビューの両方でページをチェックする必要があります。

![](/files/rPEnPxrJBsyNwqlBAnQ5)

#### 全幅セクションを作成する方法

ウェブデザインにおける全幅セクションとは、ブラウザウィンドウの幅全体（左から右まで）に広がり、あらゆる画面サイズに適応する水平ブロックのことです。このデザインは、ウェブページのセクションを区別しやすくし、視覚的に魅力的で読みやすくするのに役立ちます。

**ステップ 1: 全幅セクションを設定する**

1. 全幅に設定したいセクションを選択します。
2. インスペクターパネルで、**一般**タブを選択します。
3. **固定幅を設定**パラメーターを見つけ、**いいえ**に変更します。

![](/files/ZM889w0TSZ9qWmB3G8xb)

**ステップ 2: セクションのパディングを設定する**

1. インスペクターパネルで、**スタイリング**タブを選択します。
2. **パディング**パラメーターを見つけ、左右のパディングを調整します。コンテンツが端に押し出されないように、セクションには水平パディングを使用する必要があります。

![](/files/3GRE6EwEtTIYYyl2ZjZY)

#### スティッキーセクションを作成する方法

ウェブサイト上のスティッキーセクションは、スクロールしてもその場に固定され、常に表示されたままになります。

**ステップ 1: スティッキーセクションを設定する**

1. スティッキーにしたいセクションを選択します。
2. インスペクターパネルで、**一般**タブを選択します。
3. **上部固定を有効にする**パラメーターを見つけ、はいに変更します。

これでセクションが上部に固定され、セクションに小さなスティッキーインジケーターが表示されます。

![](/files/sSGJkDOQOoIzxDSKZl60)

**ステップ 2: 設定を調整する**

スティッキーセクションについて、以下の設定を調整します。

* **上部オフセット**: これは、セクションと画面上部の間のスペースを設定します。例えば、20pxの上部オフセットは、上部から20ピクセル離れた位置に留まることを意味します。
* **エレベーション**を適用: これは、重なりがある場合にどの要素が上に表示されるかを決定します。エレベーションが高いほど、スティッキーセクションはエレベーションが低い他のコンテンツを覆い、視認性を確保します。

スティッキーセクションの作成に関する詳細な手順については、[こちら](https://help.pagefly.io/manual/make-a-sticky-section/)をご確認ください。

### ユースケース

* **ホームページデザイン**: 全幅バナーを使用して魅力的なホームページを作成し、訪問者を歓迎します。
* **製品の特徴**: 2カラムレイアウトを使用して、画像とともに製品の特徴を詳細に説明します。
* **ストーリーテリング**: パララックス効果を利用して、ダイナミックなストーリーテリングや会社の歴史セクションを作成します。
* **連絡先情報**: 連絡先情報やコールトゥアクションボタンをスティッキーにして、簡単にアクセスできるようにします。
* **ランディングページ**: これらのセクションタイプを組み合わせて、訪問者をコンテンツやセールスファネルに誘導する魅力的なランディングページをデザインします。

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

#### パララックス効果には高画質な画像を選択する

高画質な画像を選択して、フォーカスを維持し、奥行き効果を高めます。これにより、ユーザーを圧倒することなく、ページをエレガントで魅力的に保つことができます。

#### 全幅セクションには高解像度画像を使用する

高解像度画像を使用すると、大画面での画質劣化を防ぐことができます。これにより、セクションが視覚的に印象的になり、重要なメッセージやコールトゥアクションを強調するのに効果的です。

#### スティッキーセクションを使いすぎない

これらの機能は、ナビゲーションや主要なCTAなどの重要な要素に使用して、アクセスしやすく保ちます。ただし、画面の煩雑さや主要コンテンツからの注意散漫を防ぐために、使いすぎは避けてください。

#### カラムを切り替える

複数のカラムを含むセクションがあり、カラムの位置を切り替えたい場合は、以下の手順に従ってください。

* カラムを含む行を選択します
* **一般**タブ > **コンテンツ** > **カラム**に移動します
* 各カラムのハンドルをクリックして長押しし、お好みの位置に切り替えます

この操作は、すべてのビューモードでカラムの順序を変更することに注意してください。

![](/files/P6c6Os11SWzOIkwjZySc)

#### モバイルのみでカラムの位置を切り替える

* レガシーエディターで

画像またはビデオ用のカラムとテキスト用のカラムから構成されるレイアウトのセクションでは、モバイルユーザー向けにその配置をカスタマイズできます。簡単なガイドを以下に示します。

1. カラムを含む行を選択します
2. **スタイリング**タブに移動し、**表示**スタイルで**Flex**を選択します
3. **Flex Wrap**を**Wrap Reverse**に設定します。

この操作によりカラムの順序が変更され、モバイル表示専用にその配置をカスタマイズできるようになります。

例：モバイルではテキストが画像の上に表示されるセクションがあるとします。モバイルビューでそれらを反転させ、他のビューモードでは現在のレイアウトを維持するには、**Flex wrap** > **Wrap reverse** を適用すると、画像がテキストの上に移動します。

![](/files/k82xh3f0DqCZpmN8OoAF)

Flexオプションの使用に関する詳細なヒントについては、[こちら](https://help.pagefly.io/manual/flex-feature/)の記事をご確認ください。

* Gen 2 エディターで：

Gen 2 エディターでは、**レイアウト**パラメーターの**順序を反転**機能を使用して、モバイルでのカラム位置を切り替えることができます。

1. カラムを含むFlexセクションを選択します
2. **スタイリング**タブに移動 > **レイアウト**パラメーターを探します
3. Directionを**上から下**に設定し、**順序を反転**を**はい**に選択します。

![](/files/J6AFbuBy6UXOIVZwlqrT)

### よくある質問

1. **モバイルデバイスでパララックス効果を使用できますか？**

はい、ただしパフォーマンスと可読性に注意してください。過度な動きはモバイルデバイスで気を散らしたり、サイトを遅くしたりする可能性があります。

2. **画面サイズごとに背景画像を変更するにはどうすればよいですか？**

PageFlyでは、デバイスごとに背景をカスタマイズできます。デバイススイッチャーとスタイリングオプションを使用して、モバイル、タブレット、デスクトップビューに固有の背景を設定してください。

### その他のリソース

* [PageFlyページに全幅セクションを作成するための5つのステップ](https://help.pagefly.io/manual/create-a-full-width-section/)
* [PageFlyの保存済みセクションと既製セクションの使用方法](https://help.pagefly.io/manual/saved-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/create-a-section-with-image-and-text.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.