# PageFlyでランディングページを作成する方法 ### PageFlyランディングページについて ランディングページは、特定のマーケティング目標を達成するために設計された単一目的のウェブページです。ストアのホームページとは異なり、販売やリード獲得などのコンバージョンに最適化されています。PageFlyを使用すると、コーディングなしで素晴らしいランディングページを作成できます。 この記事では、PageFlyでランディングページを作成する手順をステップバイステップでご紹介します。 詳細については、こちらのビデオチュートリアルをご覧ください。 {% embed url="" %} ### Gen 2レイアウト - PageFlyでランディングページを作成する方法 {% hint style="warning" %} **重要事項**: Gen 2レイアウトは、ペイ・アズ・ユー・ゴー料金モデル（[スロットプラン](https://help.pagefly.io/manual/pricing-plans/)）でのみ利用可能です。 {% endhint %} #### 通常ページを作成する * ステップ1: PageFlyダッシュボードで、「**Pages**」をクリックします。 * ステップ2: 「**Create blank page**」ボタンをクリック > ドロップダウンメニューで「**Regular**」を選択し、「**Gen 2 Editor**」を選択します。 ![](/files/9mRzsy9T2fefq8Agy2rV) または、「Create from template」ボタンをクリックして、ランディングページに[PageFlyテンプレート](https://pagefly.link/sZKZHnFY)を使用することもできます。 ![](/files/GTxJ0SbmuAatooJJKGkn) #### ヒーローバナーを追加する **ページキャンバスにセクションを追加する** * ステップ1: 要素カタログで、左側のツールバーにある「Add element」アイコンをクリック > 「**PageFly**」タブで[Layout element](https://help.pagefly.io/manual/layout-element/)を選択 > 「**Blank Section**」オプションをページエディターにドラッグ＆ドロップします。 ![](/files/FbtCmvIp2yhCRu0h9rnc) * ステップ2: スタイリングタブで、「**Size**」セクションに移動し、高さに「**Fill screen**」を選択します。 ![](/files/QkZREDOt5NC7QPfsfyBm) **バナーに背景画像を追加する** * ステップ1: スタイリングタブで、Backgroundパラメーターまでスクロールダウン > Background Imageオプションから画像を選択します。 ![](/files/86KwVExEk2CCiVSu0xKy) Image Managerで利用可能な画像をアップロードするか、インターネットからアップロードできます。[こちら](https://help.pagefly.io/manual/use-image-manager-to-upload-media-files)で詳細をご覧ください。 * ステップ2: フレックスセクションの高さを調整して、選択した背景画像と位置を合わせます。 ![](/files/uWUSbWZlnKA0lNuFpqmw) **コンテンツを追加する** 注: Flexエディターのスタイリングタブには、要素の幅と高さを設定するための追加設定「**Size**」があります。詳細については、[Pagefly Editor - Styling Tab](https://help.pagefly.io/manual/elements-style-settings/)を参照してください。 **Heading要素を追加する** * ステップ1: 要素カタログで、「Add element」アイコンをクリック > 「**PageFly**」タブで[Heading](https://help.pagefly.io/manual/heading-element/) [element](https://help.pagefly.io/manual/heading-element/)を選択 > 最初のバリアントをページエディターにドラッグ＆ドロップします。 ![](/files/EYO3eCmApBOiwL04HSdI) * ステップ2: Generalタブで、見出しテキストを変更します。 * ステップ3: Stylingタブをクリック > Content color > 白色を選択します。 * ステップ4: Spacingで、マージントップとボトムを0pxに調整します。 * ステップ5: Typographyパラメーターまでスクロールダウン > フォントファミリーにLibre Baskervilleを選択し、フォントサイズを50pxに設定します。 ![](/files/XrNkZWAIXJOiQIUECFPg) **Paragraph要素を追加する** * ステップ1: 要素カタログで、「Add element」アイコンをクリック > 「PageFly」タブで[Paragraph](https://help.pagefly.io/manual/paragraph-element/) [element](https://help.pagefly.io/manual/paragraph-element/)を選択 > 最初のバリアントをページエディターにドラッグ＆ドロップします。 ![](/files/lFkVi59ftXHnpJNbnmxe) * ステップ2: 説明についても同様に設定します。 ![](/files/I8hxCdLgJYYvvlIKIAKh) **ボタンを追加する** * ステップ1: 要素カタログで、「**Add element**」アイコンをクリック > 「**PageFly**」タブで[**Button**](https://help.pagefly.io/manual/button-element/) elementを選択 > 最初のバリアントをページエディターにドラッグ＆ドロップします。 ![](/files/NApZJaRO6IA0w8qOEoW5) * ステップ2: 「**Button Text**」オプションにコンテンツを適用し、「**Button Type**」オプションを変更します（任意）。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcupkROONA7zT_3eBfBrAx5bMmGDhj35xMJoiqtLD9dDM3kdSyKwC6amfZDlIhvnxl3FjkgPauk341yf_Q5Ek4zKHoNvRlGc3muN7BweuuVrDzyIVmrY_EmE6rRr1aURTFZfpp7B7R5TbHcwURSsg) * ステップ3: 「**Styling**」タブに切り替えます。テキストの色、フォントサイズ、背景色を変更し、効果を追加してボタンをより魅力的にします。 ![](/files/ZjTwa08nALIXPxr9L56D) #### 製品リストセクションを追加する **Heading要素を追加する** 要素カタログで、「**Add element**」アイコンをクリック > [**Heading**](https://help.pagefly.io/manual/heading-element/) elementを選択 > 最初のバリアントをページエディターにドラッグ＆ドロップします。ヒーローバナーセクションと同様にカスタマイズします。 ![](/files/98ZX5M1g1klmeSzdQYIk) **Product List要素を追加する** * ステップ1: 要素カタログで、「**Shopify**」リストにある「Add Shopify element」アイコンをクリック > [Product List](https://help.pagefly.io/manual/shopify-elements-product-list/) elementを選択 > 最初のバリアントをページエディターにドラッグ＆ドロップします。 ![](/files/rdhE1RfNQ6vjNqTj3y5C) * ステップ2: Generalタブで、Product sourceの下にあるcollectionを選択します。 ![](/files/RK2Bn6SkqsX55QIeuXVx) さらに設定をカスタマイズするためにスクロールダウンします。Layout type、Items per loading、Items per row、Item spacing、Loading modeなどを調整できます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXeKv3KHTsb6XuN5kTUTMKzpL4W6Tn-QVL5_GO00hNMRHjeNVB7jXm2dHMAQ542MERgi8VLN_e-TBq_uu10j14hrXemeVpYbmhZKguIFSBmMJ2nEbb0eI1VHvWggNYDSUDwW3ao7OnPYp0crartkeydd6Nh3BxkcRjbZqUqjj06g-1%20\(1\).png) * ステップ3: Stylingタブで、製品リストまたは各要素のスタイルを調整できます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcT9DMCN16eubeds3XdJ7B5huw5DH18pRkKBfwOSRB1bjdAIwxPcxnSRwKDaDyjXnpRFnZX7Hyz2dwa2LVno23-qDso0t9kHkEvJVZiVA6hLrTzhyU6TO_TU1xNvir0G05jt7AyQUCWPWBu0pBHdgkeydd6Nh3BxkcRjbZqUqjj06g-1%20\(1\).png) Collection list要素をページエディターに追加することもできます。設定はProduct list要素とほぼ同じです。 #### セールバナーを追加する [あらかじめ作成されたセクション](https://help.pagefly.io/manual/saved-section/%23how-to-use-premade-sections-on-your-pagefly-pages)をページエディターに追加できます。 * ステップ1: 「**Add a section**」アイコンをクリック > 「**Template**」を選択します。 ![](/files/xCC9DY3tCxejKkOIPWRh) * ステップ2: コンテンツと画像をブランドデザインに合わせて変更します。 #### お客様の声セクションを追加する 同様に、あらかじめ作成されたセクションを使用して、お客様の声をページに追加できます。 ![](/files/gClKZyGE7zDxbwwyeZXw) #### トラストバッジを追加する * ステップ1: 要素カタログで、「Add Shopify element」アイコンをクリック > 「**PageFly**」タブで[Content List](https://help.pagefly.io/manual/content-list-element-2/) elementを選択 > バリアントをページエディターにドラッグ＆ドロップします。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdooCnrpw7qgnHhUYxFqKEHtbPr21RZ06A-SzOpOKMRrfAeOvZfr13nBko8QX7H9x1Nl6Ykmb4TW1qty015KkWwBBOlzNz5QddYjACcVCU7ZYsDJmJ-hhxaVTJ5_9gs3UuvIqe0gkwGcYouZZVgkeydd6Nh3BxkcRjbZqUqjj06g-1%20\(1\).png) * ステップ2: Generalタブで、コンテンツリスト全体または各コンテンツリスト項目をカスタマイズできます。Layout type、Items per row、Item spacing、Content positionを調整できます。 ![](/files/dBXi8qTIFWxb1joXnOMf) * ステップ3: Stylingタブで、Content color、Font family、Font sizeなどを調整できます。 ![](/files/VFLeS0YQTKsd7LY1hm1H) #### モバイルフレンドリーなランディングページを作成する * ステップ1: 「**All devices**」ボタンをクリック > 「**Mobile**」を選択します。 ![](/files/Ws8ec5DhNFW7aUM3Lfcp) * ステップ2: パディング、フォントサイズなどを調整して、モバイル画面サイズに合わせます。 ![](/files/UsEZTG4H4T6BlNvZPsEQ) モバイルフレンドリーな表示を改善するには、[この記事](https://help.pagefly.io/manual/make-my-page-mobile-responsive/)を確認してください。 ### レガシーレイアウト - PageFlyでランディングページを作成する方法 #### 通常ページを作成する * ステップ1: PageFlyダッシュボードで、「**Pages**」をクリックします。 * ステップ2: 「**Create blank page**」ボタンをクリック > ドロップダウンメニューで「**Regular**」を選択し、「**Legacy Editor**」を選択します。 ![](/files/cyFwdrhD6K9pLoIeiN59) または、「**Create from template**」ボタンをクリックして、ランディングページに[PageFlyテンプレート](https://pagefly.link/sZKZHnFY)を使用することもできます。 ![](/files/GTxJ0SbmuAatooJJKGkn) #### ヒーローバナーを追加する **ページキャンバスにセクションを追加する** * ステップ1: 要素カタログで、左側のツールバーにある「Add element」アイコンをクリック > 「**PageFly**」タブで[Layout element](https://help.pagefly.io/manual/layout-element/)を選択 > 「**Full Section**」オプションをページエディターにドラッグ＆ドロップします。 ![](/files/hZF7DirwVhRzAUe1kN93) * ステップ2: パンくずリストの「**Section**」をクリック > 「**General tab**」に移動 > 「**Set fixed width**」オプションをオフにします。 ![](/files/ZV8LSCBsrwU4XMvC9dBV) **バナーに背景画像を追加する** * ステップ1: 「**Styling**」タブで、「**Background parameter**」までスクロールダウン > Background Imageオプションから画像を選択します。 ![](/files/OzMOkSSC2DmiJ5DtAmxz) Image Managerで利用可能な画像をアップロードするか、インターネットからアップロードできます。[こちら](https://help.pagefly.io/manual/use-image-manager-to-upload-media-files)で詳細をご覧ください。 * ステップ2: Stylingタブで、Spacingセクションまでスクロールダウン > トップパディングとボトムパディングの値を編集して、セクションの高さを画像に合わせて変更します。中央の小さなボックスは、[Padding and Margin](https://help.pagefly.io/manual/edit-spacing-margin-and-padding)の4辺すべてに同じ値を設定します。 このケースでは、パディングトップとボトムの両方に200pxを設定します。 ![](/files/tjrLi3qAnPoSEEtteUMH) * ステップ3: Background parameterまでスクロールダウン > More Settingsボタンをクリック > Background PositionにCenterを、Background SizeにCoverを選択します。 ![](/files/JZsQbvNCHQhZlge8sdQc) **コンテンツを追加する** **Heading要素を追加する** * ステップ1: 要素カタログで、「**Add element**」アイコンをクリック > 「**PageFly**」タブで[Heading](https://help.pagefly.io/manual/heading-element/) [element](https://help.pagefly.io/manual/heading-element/)を選択 > 最初のバリアントをページエディターにドラッグ＆ドロップします。 ![](/files/AoOI8Iu2ai59Xl3mb26Y) * ステップ2: Generalタブで、見出しテキストを変更します。 * ステップ3: Stylingタブをクリック > Content color > 白色を選択します。 * ステップ4: Spacingで、マージントップとボトムを0pxに調整します。 * ステップ5: 「**Typography**」パラメーターまでスクロールダウン > フォントファミリーにLibre Baskervilleを選択し、フォントサイズを50pxに設定します。 ![](/files/CH5YS2Pkgu56K3Ap8sRY) **Paragraph要素を追加する** * ステップ1: 要素カタログで、「**Add element**」アイコンをクリック > 「**PageFly**」タブで[Paragraph](https://help.pagefly.io/manual/paragraph-element/) [element](https://help.pagefly.io/manual/paragraph-element/)を選択 > 最初のバリアントをページエディターにドラッグ＆ドロップします。 ![](/files/d6U0VnoiZCmnro07UU6T) * ステップ2: 説明についても同様に設定します。 ![](/files/XK42MmmCgF3TNZKvjmBV) **ボタンを追加する** * ステップ1: 要素カタログで、「**Add element**」アイコンをクリック > 「**PageFly**」タブで[Button element](https://help.pagefly.io/manual/button-element/)を選択 > 最初のバリアントをページエディターにドラッグ＆ドロップします。 ![](/files/OdgrPx4KjwxDp6i9bBze) * ステップ2: 「**Button Text**」オプションにコンテンツを適用し、「**Button Type**」オプションを変更します（任意）。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcupkROONA7zT_3eBfBrAx5bMmGDhj35xMJoiqtLD9dDM3kdSyKwC6amfZDlIhvnxl3FjkgPauk341yf_Q5Ek4zKHoNvRlGc3muN7BweuuVrDzyIVmrY_EmE6rRr1aURTFZfpp7B7R5TbHcwURSsg) * ステップ3: Stylingタブに切り替えます。テキストの色、フォントサイズ、背景色を変更し、効果を追加してボタンをより魅力的にします。 ![](/files/a3DnM8MJe2cYHzggPXIw) #### 製品リストセクションを追加する **Heading要素を追加する** 要素カタログで、「**Add element**」アイコンをクリック > [**Heading**](https://help.pagefly.io/manual/heading-element/) elementを選択 > 最初のバリアントをページエディターにドラッグ＆ドロップします。**Hero banner**セクションと同様にカスタマイズします。 ![](/files/98ZX5M1g1klmeSzdQYIk) **Product List要素を追加する** * ステップ1: 要素カタログで、「**Shopify**」リストにある「Add Shopify element」アイコンをクリック > [Product List](https://help.pagefly.io/manual/shopify-elements-product-list/) elementを選択 > 最初のバリアントをページエディターにドラッグ＆ドロップします。 ![](/files/rdhE1RfNQ6vjNqTj3y5C) * ステップ2: Generalタブで、Product sourceの下にあるCollectionを選択します。 ![](/files/RK2Bn6SkqsX55QIeuXVx) さらに設定をカスタマイズするためにスクロールダウンします。Layout type、Items per loading、Items per row、Item spacing、Loading modeなどを調整できます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXeKv3KHTsb6XuN5kTUTMKzpL4W6Tn-QVL5_GO00hNMRHjeNVB7jXm2dHMAQ542MERgi8VLN_e-TBq_uu10j14hrXemeVpYbmhZKguIFSBmMJ2nEbb0eI1VHvWggNYDSUDwW3ao7OnPYp0crartkeydd6Nh3BxkcRjbZqUqjj06g-1%20\(1\).png) * ステップ3: Stylingタブで、製品リストまたは各要素のスタイルを調整できます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcT9DMCN16eubeds3XdJ7B5huw5DH18pRkKBfwOSRB1bjdAIwxPcxnSRwKDaDyjXnpRFnZX7Hyz2dwa2LVno23-qDso0t9kHkEvJVZiVA6hLrTzhyU6TO_TU1xNvir0G05jt7AyQUCWPWBu0pBHdgkeydd6Nh3BxkcRjbZqUqjj06g-1%20\(1\).png) Collection list要素をページエディターに追加することもできます。設定はProduct list要素とほぼ同じです。 #### セールバナーを追加する [あらかじめ作成されたセクション](https://help.pagefly.io/manual/saved-section/%23how-to-use-premade-sections-on-your-pagefly-pages)をページエディターに追加できます。 * ステップ1: 「**Add a section**」アイコンをクリック > 「**Template**」を選択します。 ![](/files/xCC9DY3tCxejKkOIPWRh) * ステップ2: コンテンツと画像をブランドデザインに合わせて変更します。 #### お客様の声セクションを追加する 同様に、あらかじめ作成されたセクションを使用して、お客様の声をページに追加できます。 ![](/files/gClKZyGE7zDxbwwyeZXw) #### トラストバッジを追加する * ステップ1: 要素カタログで、「Add Shopify element」アイコンをクリック > 「**PageFly**」タブで[Content List](https://help.pagefly.io/manual/content-list-element-2/) elementを選択 > バリアントをページエディターにドラッグ＆ドロップします。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdooCnrpw7qgnHhUYxFqKEHtbPr21RZ06A-SzOpOKMRrfAeOvZfr13nBko8QX7H9x1Nl6Ykmb4TW1qty015KkWwBBOlzNz5QddYjACcVCU7ZYsDJmJ-hhxaVTJ5_9gs3UuvIqe0gkwGcYouZZVgkeydd6Nh3BxkcRjbZqUqjj06g-1%20\(1\).png) * ステップ2: Generalタブで、コンテンツリスト全体または各コンテンツリスト項目をカスタマイズできます。Layout type、Items per row、Item spacing、Content positionを調整できます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdcY_ROkkD-KLiEkpFB0fiUfrNYNaq2zD0jpf4gevdXfnDYhszYLDx2vbE6TR_lCTRM_hC0D1Aj_ZPzxq8GVn1AVgEirHzpTNKGeHC9xhoOECIj9H87_Sc5tZJ8UjVlr4Zk9ftIM_BIMFU9Q8ZfAkeydd6Nh3BxkcRjbZqUqjj06g-1%20\(1\).png) * ステップ3: Stylingタブで、Content color、Font family、Font sizeなどを調整できます。 ![](/files/VFLeS0YQTKsd7LY1hm1H) #### モバイルフレンドリーなランディングページを作成する * ステップ1: 「**All devices**」ドロップダウンボタンをクリック > 「**Mobile**」を選択します。 ![](/files/Ws8ec5DhNFW7aUM3Lfcp) * ステップ2: パディング、フォントサイズなどを調整して、モバイル画面サイズに合わせます。 ![](/files/UsEZTG4H4T6BlNvZPsEQ) モバイルフレンドリーな表示を改善するには、[この記事](https://help.pagefly.io/manual/make-my-page-mobile-responsive/)を確認してください。 ### よくある質問 **1. PageFlyでどのような種類のランディングページを作成できますか？** PageFlyを使用すると、製品の発売、リード獲得キャンペーン、プロモーションオファー、イベント登録など、さまざまな目的のための様々なランディングページを作成できます。 **2. PageFlyは事前に作成されたランディングページテンプレートを提供していますか？** はい、PageFlyはクリエイティブプロセスを開始するための、事前にデザインされたランディングページテンプレートのコレクションを提供しています。それらを簡単にカスタマイズして、ブランドやキャンペーンの目標に合わせることができます。 **3. SectionとFlex sectionの違いは何ですか？** Sectionは、行と列でページレイアウトを設計でき、PageFly SectionとPageFlyページの両方に追加できます。一方、Flex sectionは行と列の構造を持たず、PageFlyページに直接のみ追加できます。 ### バージョンアップデート 従来のページ構築メカニズム（行、列）に加えて、PageFly 4.23.0では、複雑で高度にカスタマイズ可能なレイアウトの作成を可能にする、より柔軟で効率的なテクノロジーであるGen 2レイアウトが追加され、直感的で使いやすいインターフェースが備わっています。 --- # Agent Instructions: 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: ``` GET https://help.pagefly.io/pagefly-help-center-japanese/pjitosekushonno/pages/how-to-create-a-landing-page-with-pagefly.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.