# リスト

### リスト要素について

PageFlyのリスト要素を使用すると、ページにアイテムのリストを追加でき、コンバージョン率の向上に役立ちます。

この要素は、段落要素の箇条書きや番号付きリストの代わりに使用でき、より多くのカスタマイズオプションを提供します。さらに、リスト要素はより高速に動作します。

詳細な手順に入る前に、概要についてはこのビデオをご覧ください。

{% embed url="https://www.youtube.com/watch?v=QSv3mYWP2Q0\&t=92s" %}

### リスト要素へのアクセス方法

* ステップ1：**要素**アイコンをクリック > **PageFly**タブで**リスト**要素を選択します
* ステップ2：必要な**リストバリアント**をエディターにドラッグアンドドロップし、使用を開始します

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ebb1c3589a1e445bef6e8ef251cfc9edc0748f42%2FAD_4nXcwQui7BhPlwDT11PVHu-ywaBHIhmv0GbaMgO9sLdCXdTrKhWcLcGYpPD7YBTu7RL5PN6JxmKjKYqdpb-GpnI0pXX00ACRiq-_XaCP8qD_PWYNTHMK9sbyt1D5H7dTYwp9L0COyWqLGMYx-8oCOkeySiSqBQDxHhLVltlrlundTw.gif?alt=media)

リスト要素には、ほとんどのニーズをカバーする3つのバリエーションが付属しています。ただし、時間を節約するために、さらにバリエーションを追加し続けます。

###

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-41954fc04beb030d5cbfd1da5e50a97aff1db3d2%2FAD_4nXeSaRNA-1EHpXr3Utoxg2c4g5HPtHExCWX8rb-40jS8Bon2DseeuqsxAJCqvdU-CYtyNI8Hp3yfA0e3r791a1aUm5fGAMEbLVqA3ptzmZZFcQHPsYipA3wgXUBiWbX09MvsvCrGMW_LvvngtLxv3AkeySiSqBQDxHhLVltlrlundTw.png?alt=media)

### リスト要素の設定方法

リスト要素には、可能な限り最高のコンバージョン率を得るためにコンテンツの外観を細かく調整できる多くのパラメータが付属しています。

レイアウトで要素を選択すると、その設定が表示されます。

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-9dd73457b354f0dea9c04378e2b507d110f037d2%2FAD_4nXfw2kphEqIDqfT0ALd_xqdhEu91n1BQ-O7KRsdGp51yXzlFcoCPeNWwXDqLDR2zvEqTwPIyXf3d7w5CZAnGKjQCoPT2xWya68SkbgdSVkINLlYltO9o9R9noELVDGIenoShJ360-xhGDy3GGOlH8wkeySiSqBQDxHhLVltlrlundTw.png?alt=media)

#### 一般設定

| <p><strong>リストアイテム:</strong></p><p>- [新しいアイテムを追加]ボタンをクリックして、新しいリストアイテムを追加します。</p><p>- アイテムの左側にある省略記号アイコンをクリックして保持し、新しい配置にドラッグしてアイテムを移動します。</p><p>- 各タブアイテムの隣にある2つのボタンを使用して、リストアイテムを複製または削除します。</p>                         | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-f96a352b610456e9a87392ef3eb6a55ee45bf972%2FAD_4nXcuzZWcO6QY78-cJnwpBhdsw6yDNp0GzUTEB_gujNBxjQFRk25qlNDCpb1T5xDO4-4_622suOqDM3waFtW5SfXqVNU5NZOMWyRVafrtKyV09qwtFQshQJnM9o2mRQgY-5f6LnElswH75umMSBsPngkeySiSqBQDxHhLVltlrlundTw.gif?alt=media) |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>マーカータイプ:</strong> リストに対して14種類の異なるマーカータイプから選択できます。</p><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p><strong>注意</strong>: リストアイテムの前にマーカーを表示したくない場合は「なし」を選択できます。</p></div> | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfkbFrvsj1lHsXQkH-mAEMak0NPuaKCXbc-xztH1CtQdKc-p6kEUiogtyb6s5Z9NqaLhBW2JHYMFxni9oYmVdF0VRhdzimkGAoWmKghu7TBRtyB6nEll2FAzQn6SkCiQi-6vOmR3r0Mc3zKLbricQkeySiSqBQDxHhLVltlrlundTw.png)                                                                                                              |
| **マーカー位置:** リストアイテム内のマーカーの位置（外側または内側）を選択します。                                                                                                                                                                               | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-90f84238d702c34375b541c9d82d547425ddf811%2FAD_4nXeySUlDTDo-ZR0I7luSQcJIjf0gQN_tagOn3pSlDB9QJLAHHtyMYS5kyWvmY8faA21bhmFv44ONyWJqzpCtmyr_lvIDEOQ4orXNcfbkzYZgRPVbhHK7e-bx0ckAFdzHkV7b5SGCTGru27bW_ytrYgkeySiSqBQDxHhLVltlrlundTw.gif?alt=media) |
| **テキストインデント**: テキストとリストアイテムのアイコンの間のスペースを調整します。                                                                                                                                                                             | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-d1f55b31badfdf46ac4ddb78086b3f0c1fd303ae%2FAD_4nXf3HFZPWHm2Nb7V95Mt35rDvjhHpDRJU_Vh8WQHsDqR1Y8WGRKrCSen7H8os-DGFJn6dxLX8Lvp-q5gTO7ts_oj8AEG_u24CVQYDKgOySUdQkFn9ANM9pJ1TMmICErXKMhsJxD6SXhatGJg9wOo_wkeySiSqBQDxHhLVltlrlundTw.gif?alt=media) |

属性、表示設定、アニメーションパラメータに関する詳細情報は[こちら](https://help.pagefly.io/manual/elements-general-settings/)で取得できます。

#### スタイリング設定

スペーシング、ボーダー、タイポグラフィ、色など、スタイリングタブでさまざまなパラメータを変更して、リスト要素がページの全体レイアウトと一致することを保証できます。

スタイリングタブの詳細については[こちら](https://help.pagefly.io/manual/elements-style-settings/)を確認してください。

![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdBGwZv8oBR01LVAWiikijt2fp0wJlGdIEoweXE6Cfee3i5d6c4VvuRNDDajs5SVYaiQv5LDSnJ5DpCr-4vgg3T_C2ovcpma1p5VnYwbpafRJhDtIX2nLRnXhWoojiP0CX4XI2mlUrUj47At1kj4AkeySiSqBQDxHhLVltlrlundTw.png)

### リストアイテム要素の設定方法

リスト要素には個別のリストアイテムが含まれています。特定のアイテムをクリックすることで、各リストアイテムの設定を個別に構成できます。

#### 一般設定

\| **リストアイテム:** - \[新しいアイテムを追加]ボタンをクリックして新しいリストアイテムを追加します。 - アイテムの左側にある省略記号アイコンをクリックして保持し、新しい配置にドラッグしてアイテムを移動します - 各タブアイテムの隣にある2つのボタンを使用してリストアイテムを複製または削除します。 |

| <p><strong>リストアイテム:</strong></p><p>- [新しいアイテムを追加]ボタンをクリックして、新しいリストアイテムを追加します。</p><p>- アイテムの左側にある省略記号アイコンをクリックして保持し、新しい配置にドラッグしてアイテムを移動します。</p><p>- 各タブアイテムの隣にある2つのボタンを使用して、リストアイテムを複製または削除します。</p> | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-40fd81e8d23fa4f900ac5ff270817a28d91afdf1%2FAD_4nXdUuJeaM9OpUfG33FgzrMfMXX8sPKU2JL25rEu_alwqDT3UTKuP-Rv67Nyx0ru3D0eKusZNDaVCKv83j4jbDqltGn1ENuZ7n-knqQk8jAzumnOnvhFp2aJFNwU-VRSfGmSKWQPtOpU8z9s01o0iTAkeySiSqBQDxHhLVltlrlundTw.png?alt=media) |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **アイテムテキスト**: リストアイテムのコンテンツを挿入します。                                                                                                                                                                 | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-83369ceaf6314320d637b90b34a19c2d921e782e%2FAD_4nXcoZp8pecDHtIlsyyT9WlrtqZzcJZcUApG3v7p1KFv4EzygAViTajY7ey5FUqTaKaLuFwlGsa9Rr901plefvN56u7_BZJBolnVuTsR91Pal0KNqHLmWQWoYLsWHKfAFAbUI1ryhwdFfdvAnaJlQkeySiSqBQDxHhLVltlrlundTw.gif?alt=media)   |
| **アイコンを表示**: リストアイテムのアイコンを表示または非表示にするかを選択します。                                                                                                                                                      | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-c9f420ee18a83d3d748ce06555b97ca2d6846364%2FAD_4nXddFehF05hGLfS6U3azPxRU0sK_ukScmd8ewJPIzOCKCw1oTyRwPCesTE1dpfzfxI7UgTdwCbllliYwklS1lv88P1F887NnIY1D7ydnlhQenPxCvQcjIdPAVimZVjdqqbSjx0WZx80RQJaauZ7fDAkeySiSqBQDxHhLVltlrlundTw.png?alt=media) |

#### スタイリング設定

スタイリングタブの詳細については[こちら](https://help.pagefly.io/manual/elements-style-settings/)を確認してください。

### ユースケース

#### チェックリストまたはステップバイステップガイドの作成

リスト要素は、ウェブサイトにチェックリストまたはステップバイステップガイドを作成するのに最適です。異なるマーカータイプ（例：番号またはチェックボックス）を使用し、スペーシングとインデントをカスタマイズして、リストを読みやすく、フォローしやすくすることができます。

#### 主要な機能または利点の表示

製品またはサービスの主要な機能または利点を強調したい場合は、リスト要素を使用してそれらを視覚的に魅力的で整理された方法で提示できます。マーカータイプとスタイリングをブランドに合わせてカスタマイズしてください。

#### ランディングページの強化

ランディングページでリスト要素を使用して、情報を消化しやすいチャンクに分割します。これにより、可読性が向上し、重要なポイントに注意を引きつけ、コンバージョンを増加させる可能性があります。

### よくある質問

**1. PageFlyリスト要素とは何ですか？**

リスト要素を使用すると、ページにアイテムのリストを追加でき、コンバージョン率の向上に役立ちます。

**2. リスト要素のマーカーとは何ですか？**

マーカーとは、箇条書きや番号など、各リストアイテムに使用される形状またはシンボルです。PageFlyリスト要素には14種類の異なるマーカータイプがあります。

**3. リストアイテムにアイコンを追加できますか？**

はい、「アイコンを表示」オプションを使用して、リストアイテム構成設定で各リストアイテムのアイコンを表示または非表示にするかを選択できます。
