PageFlyでランディングページを作成する方法
PageFlyランディングページについて
ランディングページは、特定のマーケティング目標を達成するために設計された単一目的のウェブページです。ストアのホームページとは異なり、販売やリード獲得などのコンバージョンに最適化されています。PageFlyを使用すると、コーディングなしで素晴らしいランディングページを作成できます。
この記事では、PageFlyでランディングページを作成する手順をステップバイステップでご紹介します。
詳細については、こちらのビデオチュートリアルをご覧ください。
Gen 2レイアウト - PageFlyでランディングページを作成する方法
重要事項: Gen 2レイアウトは、ペイ・アズ・ユー・ゴー料金モデル（スロットプラン）でのみ利用可能です。
通常ページを作成する
ステップ1: PageFlyダッシュボードで、「Pages」をクリックします。
ステップ2: 「Create blank page」ボタンをクリック > ドロップダウンメニューで「Regular」を選択し、「Gen 2 Editor」を選択します。
または、「Create from template」ボタンをクリックして、ランディングページにPageFlyテンプレートを使用することもできます。
ヒーローバナーを追加する
ページキャンバスにセクションを追加する
ステップ1: 要素カタログで、左側のツールバーにある「Add element」アイコンをクリック > 「PageFly」タブでLayout elementを選択 > 「Blank Section」オプションをページエディターにドラッグ＆ドロップします。
ステップ2: スタイリングタブで、「Size」セクションに移動し、高さに「Fill screen」を選択します。
バナーに背景画像を追加する
ステップ1: スタイリングタブで、Backgroundパラメーターまでスクロールダウン > Background Imageオプションから画像を選択します。
Image Managerで利用可能な画像をアップロードするか、インターネットからアップロードできます。こちらで詳細をご覧ください。
ステップ2: フレックスセクションの高さを調整して、選択した背景画像と位置を合わせます。
コンテンツを追加する
注: Flexエディターのスタイリングタブには、要素の幅と高さを設定するための追加設定「Size」があります。詳細については、Pagefly Editor - Styling Tabを参照してください。
Heading要素を追加する
ステップ2: Generalタブで、見出しテキストを変更します。
ステップ3: Stylingタブをクリック > Content color > 白色を選択します。
ステップ4: Spacingで、マージントップとボトムを0pxに調整します。
ステップ5: Typographyパラメーターまでスクロールダウン > フォントファミリーにLibre Baskervilleを選択し、フォントサイズを50pxに設定します。
Paragraph要素を追加する
ステップ2: 説明についても同様に設定します。
ボタンを追加する
ステップ1: 要素カタログで、「Add element」アイコンをクリック > 「PageFly」タブでButton elementを選択 > 最初のバリアントをページエディターにドラッグ＆ドロップします。
ステップ2: 「Button Text」オプションにコンテンツを適用し、「Button Type」オプションを変更します（任意）。
ステップ3: 「Styling」タブに切り替えます。テキストの色、フォントサイズ、背景色を変更し、効果を追加してボタンをより魅力的にします。
製品リストセクションを追加する
Heading要素を追加する
要素カタログで、「Add element」アイコンをクリック > Heading elementを選択 > 最初のバリアントをページエディターにドラッグ＆ドロップします。ヒーローバナーセクションと同様にカスタマイズします。
Product List要素を追加する
ステップ1: 要素カタログで、「Shopify」リストにある「Add Shopify element」アイコンをクリック > Product List elementを選択 > 最初のバリアントをページエディターにドラッグ＆ドロップします。
ステップ2: Generalタブで、Product sourceの下にあるcollectionを選択します。
さらに設定をカスタマイズするためにスクロールダウンします。Layout type、Items per loading、Items per row、Item spacing、Loading modeなどを調整できます。
ステップ3: Stylingタブで、製品リストまたは各要素のスタイルを調整できます。
Collection list要素をページエディターに追加することもできます。設定はProduct list要素とほぼ同じです。
セールバナーを追加する
あらかじめ作成されたセクションをページエディターに追加できます。
ステップ1: 「Add a section」アイコンをクリック > 「Template」を選択します。
ステップ2: コンテンツと画像をブランドデザインに合わせて変更します。
お客様の声セクションを追加する
同様に、あらかじめ作成されたセクションを使用して、お客様の声をページに追加できます。
トラストバッジを追加する
ステップ1: 要素カタログで、「Add Shopify element」アイコンをクリック > 「PageFly」タブでContent List elementを選択 > バリアントをページエディターにドラッグ＆ドロップします。
ステップ2: Generalタブで、コンテンツリスト全体または各コンテンツリスト項目をカスタマイズできます。Layout type、Items per row、Item spacing、Content positionを調整できます。
ステップ3: Stylingタブで、Content color、Font family、Font sizeなどを調整できます。
モバイルフレンドリーなランディングページを作成する
ステップ1: 「All devices」ボタンをクリック > 「Mobile」を選択します。
ステップ2: パディング、フォントサイズなどを調整して、モバイル画面サイズに合わせます。
モバイルフレンドリーな表示を改善するには、この記事を確認してください。
レガシーレイアウト - PageFlyでランディングページを作成する方法
通常ページを作成する
ステップ1: PageFlyダッシュボードで、「Pages」をクリックします。
ステップ2: 「Create blank page」ボタンをクリック > ドロップダウンメニューで「Regular」を選択し、「Legacy Editor」を選択します。
または、「Create from template」ボタンをクリックして、ランディングページにPageFlyテンプレートを使用することもできます。
ヒーローバナーを追加する
ページキャンバスにセクションを追加する
ステップ1: 要素カタログで、左側のツールバーにある「Add element」アイコンをクリック > 「PageFly」タブでLayout elementを選択 > 「Full Section」オプションをページエディターにドラッグ＆ドロップします。
ステップ2: パンくずリストの「Section」をクリック > 「General tab」に移動 > 「Set fixed width」オプションをオフにします。
バナーに背景画像を追加する
ステップ1: 「Styling」タブで、「Background parameter」までスクロールダウン > Background Imageオプションから画像を選択します。
Image Managerで利用可能な画像をアップロードするか、インターネットからアップロードできます。こちらで詳細をご覧ください。
ステップ2: Stylingタブで、Spacingセクションまでスクロールダウン > トップパディングとボトムパディングの値を編集して、セクションの高さを画像に合わせて変更します。中央の小さなボックスは、Padding and Marginの4辺すべてに同じ値を設定します。
このケースでは、パディングトップとボトムの両方に200pxを設定します。
ステップ3: Background parameterまでスクロールダウン > More Settingsボタンをクリック > Background PositionにCenterを、Background SizeにCoverを選択します。
コンテンツを追加する
Heading要素を追加する
ステップ2: Generalタブで、見出しテキストを変更します。
ステップ3: Stylingタブをクリック > Content color > 白色を選択します。
ステップ4: Spacingで、マージントップとボトムを0pxに調整します。
ステップ5: 「Typography」パラメーターまでスクロールダウン > フォントファミリーにLibre Baskervilleを選択し、フォントサイズを50pxに設定します。
Paragraph要素を追加する
ステップ2: 説明についても同様に設定します。
ボタンを追加する
ステップ1: 要素カタログで、「Add element」アイコンをクリック > 「PageFly」タブでButton elementを選択 > 最初のバリアントをページエディターにドラッグ＆ドロップします。
ステップ2: 「Button Text」オプションにコンテンツを適用し、「Button Type」オプションを変更します（任意）。
ステップ3: Stylingタブに切り替えます。テキストの色、フォントサイズ、背景色を変更し、効果を追加してボタンをより魅力的にします。
製品リストセクションを追加する
Heading要素を追加する
要素カタログで、「Add element」アイコンをクリック > Heading elementを選択 > 最初のバリアントをページエディターにドラッグ＆ドロップします。Hero bannerセクションと同様にカスタマイズします。
Product List要素を追加する
ステップ1: 要素カタログで、「Shopify」リストにある「Add Shopify element」アイコンをクリック > Product List elementを選択 > 最初のバリアントをページエディターにドラッグ＆ドロップします。
ステップ2: Generalタブで、Product sourceの下にあるCollectionを選択します。
さらに設定をカスタマイズするためにスクロールダウンします。Layout type、Items per loading、Items per row、Item spacing、Loading modeなどを調整できます。
ステップ3: Stylingタブで、製品リストまたは各要素のスタイルを調整できます。
Collection list要素をページエディターに追加することもできます。設定はProduct list要素とほぼ同じです。
セールバナーを追加する
あらかじめ作成されたセクションをページエディターに追加できます。
ステップ1: 「Add a section」アイコンをクリック > 「Template」を選択します。
ステップ2: コンテンツと画像をブランドデザインに合わせて変更します。
お客様の声セクションを追加する
同様に、あらかじめ作成されたセクションを使用して、お客様の声をページに追加できます。
トラストバッジを追加する
ステップ1: 要素カタログで、「Add Shopify element」アイコンをクリック > 「PageFly」タブでContent List elementを選択 > バリアントをページエディターにドラッグ＆ドロップします。
ステップ2: Generalタブで、コンテンツリスト全体または各コンテンツリスト項目をカスタマイズできます。Layout type、Items per row、Item spacing、Content positionを調整できます。
ステップ3: Stylingタブで、Content color、Font family、Font sizeなどを調整できます。
モバイルフレンドリーなランディングページを作成する
ステップ1: 「All devices」ドロップダウンボタンをクリック > 「Mobile」を選択します。
ステップ2: パディング、フォントサイズなどを調整して、モバイル画面サイズに合わせます。
モバイルフレンドリーな表示を改善するには、この記事を確認してください。
よくある質問
1. PageFlyでどのような種類のランディングページを作成できますか？
PageFlyを使用すると、製品の発売、リード獲得キャンペーン、プロモーションオファー、イベント登録など、さまざまな目的のための様々なランディングページを作成できます。
2. PageFlyは事前に作成されたランディングページテンプレートを提供していますか？
はい、PageFlyはクリエイティブプロセスを開始するための、事前にデザインされたランディングページテンプレートのコレクションを提供しています。それらを簡単にカスタマイズして、ブランドやキャンペーンの目標に合わせることができます。
3. SectionとFlex sectionの違いは何ですか？
Sectionは、行と列でページレイアウトを設計でき、PageFly SectionとPageFlyページの両方に追加できます。一方、Flex sectionは行と列の構造を持たず、PageFlyページに直接のみ追加できます。
バージョンアップデート
従来のページ構築メカニズム（行、列）に加えて、PageFly 4.23.0では、複雑で高度にカスタマイズ可能なレイアウトの作成を可能にする、より柔軟で効率的なテクノロジーであるGen 2レイアウトが追加され、直感的で使いやすいインターフェースが備わっています。
Last updated
Was this helpful?