LogoLogo
Back to PageFly.ioVideo Tutorials
Japanese 🇯🇵
Japanese 🇯🇵
  • PageFlyヘルプセンター
  • はじめに
    • 概要
    • クイックスタート
      • PageFlyのインストール方法
      • PageFlyの使用方法 | 5分で始める
      • PageFlyテンプレートから新しいページを作成する方法
      • PageFly LiveChatにアクセスする方法
      • PageFlyはShopifyテーマとどのように連携しますか?
    • 価格と請求
      • 概要
      • PageFlyの料金プラン
      • PageFlyの請求の仕組み
      • PageFlyをアンインストールするとどうなりますか?
      • PageFlyの返金ポリシー
  • ページとセクションの作成
    • 概要
    • 一般
      • PageFlyページのセットアップ
      • PageFlyがサポートするページの種類
      • PageFlyのページとセクションを使用する方法
      • PageFlyのページとセクションをエクスポート・インポートする方法
    • ページ
      • PageFlyでホームページを作成する方法
      • PageFlyで商品ページを作成する方法
      • PageFlyでコレクションページを作成する方法
      • PageFlyでブログ記事ページを作成する方法
      • PageFlyでパスワード保護ページを作成する方法
      • PageFlyでよくある質問(FAQ)ページを作成する方法
      • PageFlyで公開予定ページを作成する方法
      • PageFlyで会社概要ページを作成する方法
      • PageFlyでお問い合わせページを作成する方法
      • PageFlyでランディングページを作成する方法
      • PageFlyでA/Bテストページを作成する方法
    • セクション
      • プリメイドセクションと保存済みセクションを使用してページを作成する方法
      • 画像とテキストを含む基本セクションを作成する方法
      • PageFlyセクションでパララックス効果を使用する方法
      • PageFlyで全幅セクションを作成する方法
      • PageFlyでコードなしで固定セクションを作成する方法
  • ページ構造と要素
    • 概要
    • エディター
      • ユーザーインターフェース
        • PageFlyエディターでの作業方法
        • PageFlyをモバイルで使用する方法
        • ページエディター – 要素インスペクター
        • ページエディター - 全般タブ
        • ページエディター - スタイルタブ
        • ページ構成を使用してページレイアウトを整理する方法
        • 魅力的なモバイルレスポンシブページを作成する方法
        • 自動保存とバージョン履歴を使用する方法
      • 追加機能
        • 商品バリエーションのカスタムオプションスウォッチを管理する方法
        • グローバルスタイルを使用して、すべてのPageFlyページで使用するスタイルをカスタマイズする方法
        • ゴミ箱を使用して、削除されたページ、セクション、メディアファイルを管理する方法
        • PageFlyにカスタムフォントを追加する方法
        • PageFlyで画像と動画を管理する方法
    • PageFly要素
      • ユニバーサル要素
      • コンテナ
        • レイアウト
        • スライドショー
        • タブ
        • アコーディオン
        • コンテンツリスト
      • 基本
        • 見出し
        • 段落
        • ボタン
        • リスト
        • アイコン
        • 区切り線
        • HTML/Liquid
      • メディア
        • 画像
        • Youtube動画
        • Vimeo動画
        • HTML動画
        • Soundcloud
      • ソーシャル
        • Instagramフィード
        • Facebook「いいね!」とシェア
        • Facebookフィード
        • Twitterフィード
      • 詳細
        • QRコード
        • テーブル
        • カウントダウン
        • Googleマップ
        • プログレスバー
        • Mailchimpフォーム
    • Shopify要素
      • カスタムコンテンツ
        • アプリブロック
      • 商品
        • 商品バリエーションメタフィールド
        • 商品リスト
        • 商品詳細
        • 商品メディア
        • 商品タイトル
        • 商品ベンダー
        • 商品価格
        • 商品詳細説明
        • 商品バリエーション
        • 商品数量
        • 商品カートに追加
        • 商品詳細を見る
        • 商品メタフィールド
        • 動的チェックアウトボタン
      • コレクション
        • コレクションタイトル
        • コレクション画像
        • コレクションリスト
        • コレクション詳細を見る
        • コレクション詳細
        • コレクション説明
      • フォーム
        • 顧客フォーム
        • 顧客フォームフィールド
        • 顧客フォームボタン
        • お問い合わせフォーム
        • お問い合わせフォームフィールド
        • お問い合わせフォームボタン
        • 検索フォーム
      • ブログ記事
        • ブログ記事リスト
        • ブログ記事詳細
        • ブログ記事画像
        • ブログ記事タイトル
        • ブログ記事内容
        • ブログ記事メタデータ
    • 最適化
      • カスタムコードエディターを使用してページをカスタマイズする方法
      • ページ分析
      • Shopifyストアの速度を上げる方法
      • Facebookピクセルを設定して、ウェブサイト上でのユーザーアクションを理解する方法
      • PageFlyページをShopifyメニューナビゲーションに公開する方法
      • PageFlyページでZakeke Product Customizerを使用する方法
      • Langifyを使用してページを翻訳する方法
      • Weglotを使用してページを翻訳する方法
      • T Labを使用してPageFlyのページを翻訳する方法
      • PageFlyでのJSONテンプレート
      • PageFlyエディターでTinyIMGを使用して画像を最適化する方法
      • PageFlyでShoplift A/Bテストを使用する方法
      • PageFlyでSEOAnt:AI SEO & 画像最適化を使用する方法
      • ブラックフライデーセールアイデア
      • PageFly要素でCRO向けページを最適化
      • バレンタインデーのセールを最適化
      • PageFlyでクリスマスセールページを設定する方法 | 2023年ベストガイド
      • フラッシュセールセクションを作成する方法 - 新学期
      • 母の日に向けてストアを最適化: PageFlyでギフトガイドを作成
    • 主なユースケース
      • ページ上の要素を整列
      • リンク、セクション、ポップアップへの直接リンク
      • スペーシング、マージン、パディングの編集
      • Flex機能
      • ページへのファイルアップロード
  • 連携機能
    • サードパーティ要素
      • 連携されたサードパーティShopifyアプリをページで使用するためにアクティベートする方法
      • PageFlyと連携するアプリは何ですか?
      • レビューと評価
      • アップセルとクロスセル
      • バッジとシール
      • 予約システム
      • 配送と受け取り
      • サブスクリプション
      • 注文追跡
      • ファイルアップロードフィールド
      • メールマーケティング
      • 商品情報
      • プッシュ通知
      • リファーラルとアフィリエイトマーケティング
      • 画像とメディア
      • ロイヤリティとリワード
      • 持続可能性
      • ギフト
      • 国際化
      • 広告
      • サポート
      • SMSマーケティング
  • FAQとトラブルシューティング
    • 概要
    • FAQ
      • PageFly使用時のShopifyテーマに関する問題
      • GDPRへの準拠方法
      • 私のページのURLアドレス
      • PageFlyページエディター - FAQ
      • 要素 - FAQ
    • トラブルシューティング
      • ライブサイトの問題
        • カートドロワーが自動的に更新されない
        • モバイルレスポンシブの横スクロール問題
        • YouTube、HTML動画の自動再生問題
        • テーマプレビューモードでページが完全に表示されない
        • ロケールファイルを作成できない
        • theme.pagefly.liquidを作成できない
        • Shopifyのデフォルト商品詳細を非表示にする方法
        • PageFlyページリストのロードが終わらない
        • ページ上部の空白スペースを削除する
        • ブログページが正常に更新されない
        • ページのスタイルが崩れている
      • エラーメッセージ
        • PageFlyページリストのロードが終わらない
        • ページサイズ制限
        • ページ上の要素数制限
        • データをインポートできません
        • 画像サイズ制限
        • 不明なエラー
  • 最新アップデート
    • PageFlyがOnline Store 2.0に対応しました
    • PageFlyリファーラルプログラム
    • PageFly旧料金プラン
  • PageFlyアフィリエイトプログラム
    • アフィリエイトサクセス:PageFlyがマーチャントのためにできること
    • アフィリエイトサクセス:DOs & DON'Ts - PageFlyアフィリエイトとして成功するために知っておくべきすべて
    • アフィリエイトサクセス:よくある質問
Powered by GitBook
LogoLogo

製品

  • テンプレート
  • 価格
  • ハッピー顧客

リソース

  • ブログ
  • アカデミー
  • ビデオチュートリアル
  • コミュニティ
  • フィードバック

パートナー

  • 私たちのパートナー
  • アフィリエイトプログラム

会社

  • 私たちについて
  • キャリア
  • プライバシーポリシー
  • 利用規約

Copyright © 2025 PageFly. All rights reserved.

On this page
  • PageFlyランディングページについて
  • Gen 2レイアウト - PageFlyでランディングページを作成する方法
  • レガシーレイアウト - PageFlyでランディングページを作成する方法
  • よくある質問
  • バージョンアップデート

Was this helpful?

Edit on GitHub
  1. ページとセクションの作成
  2. ページ

PageFlyでランディングページを作成する方法

Last updated 4 days ago

Was this helpful?

PageFlyランディングページについて

ランディングページは、特定のマーケティング目標を達成するために設計された単一目的のウェブページです。ストアのホームページとは異なり、販売やリード獲得などのコンバージョンに最適化されています。PageFlyを使用すると、コーディングなしで素晴らしいランディングページを作成できます。

この記事では、PageFlyでランディングページを作成する手順をステップバイステップでご紹介します。

詳細については、こちらのビデオチュートリアルをご覧ください。

Gen 2レイアウト - PageFlyでランディングページを作成する方法

通常ページを作成する

  • ステップ1: PageFlyダッシュボードで、「Pages」をクリックします。

  • ステップ2: 「Create blank page」ボタンをクリック > ドロップダウンメニューで「Regular」を選択し、「Gen 2 Editor」を選択します。

ヒーローバナーを追加する

ページキャンバスにセクションを追加する

  • ステップ2: スタイリングタブで、「Size」セクションに移動し、高さに「Fill screen」を選択します。

バナーに背景画像を追加する

  • ステップ1: スタイリングタブで、Backgroundパラメーターまでスクロールダウン > Background Imageオプションから画像を選択します。

  • ステップ2: フレックスセクションの高さを調整して、選択した背景画像と位置を合わせます。

コンテンツを追加する

Heading要素を追加する

  • ステップ2: Generalタブで、見出しテキストを変更します。

  • ステップ3: Stylingタブをクリック > Content color > 白色を選択します。

  • ステップ4: Spacingで、マージントップとボトムを0pxに調整します。

  • ステップ5: Typographyパラメーターまでスクロールダウン > フォントファミリーにLibre Baskervilleを選択し、フォントサイズを50pxに設定します。

Paragraph要素を追加する

  • ステップ2: 説明についても同様に設定します。

ボタンを追加する

  • ステップ2: 「Button Text」オプションにコンテンツを適用し、「Button Type」オプションを変更します(任意)。

  • ステップ3: 「Styling」タブに切り替えます。テキストの色、フォントサイズ、背景色を変更し、効果を追加してボタンをより魅力的にします。

製品リストセクションを追加する

Heading要素を追加する

Product List要素を追加する

  • ステップ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: コンテンツと画像をブランドデザインに合わせて変更します。

お客様の声セクションを追加する

同様に、あらかじめ作成されたセクションを使用して、お客様の声をページに追加できます。

トラストバッジを追加する

  • ステップ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」を選択します。

ヒーローバナーを追加する

ページキャンバスにセクションを追加する

  • ステップ2: パンくずリストの「Section」をクリック > 「General tab」に移動 > 「Set fixed width」オプションをオフにします。

バナーに背景画像を追加する

  • ステップ1: 「Styling」タブで、「Background parameter」までスクロールダウン > Background Imageオプションから画像を選択します。

このケースでは、パディングトップとボトムの両方に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: 説明についても同様に設定します。

ボタンを追加する

  • ステップ2: 「Button Text」オプションにコンテンツを適用し、「Button Type」オプションを変更します(任意)。

  • ステップ3: Stylingタブに切り替えます。テキストの色、フォントサイズ、背景色を変更し、効果を追加してボタンをより魅力的にします。

製品リストセクションを追加する

Heading要素を追加する

Product List要素を追加する

  • ステップ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: コンテンツと画像をブランドデザインに合わせて変更します。

お客様の声セクションを追加する

同様に、あらかじめ作成されたセクションを使用して、お客様の声をページに追加できます。

トラストバッジを追加する

  • ステップ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レイアウトが追加され、直感的で使いやすいインターフェースが備わっています。

重要事項: Gen 2レイアウトは、ペイ・アズ・ユー・ゴー料金モデル()でのみ利用可能です。

または、「Create from template」ボタンをクリックして、ランディングページにを使用することもできます。

ステップ1: 要素カタログで、左側のツールバーにある「Add element」アイコンをクリック > 「PageFly」タブでを選択 > 「Blank Section」オプションをページエディターにドラッグ&ドロップします。

Image Managerで利用可能な画像をアップロードするか、インターネットからアップロードできます。で詳細をご覧ください。

注: Flexエディターのスタイリングタブには、要素の幅と高さを設定するための追加設定「Size」があります。詳細については、を参照してください。

ステップ1: 要素カタログで、「Add element」アイコンをクリック > 「PageFly」タブで を選択 > 最初のバリアントをページエディターにドラッグ&ドロップします。

ステップ1: 要素カタログで、「Add element」アイコンをクリック > 「PageFly」タブで を選択 > 最初のバリアントをページエディターにドラッグ&ドロップします。

ステップ1: 要素カタログで、「Add element」アイコンをクリック > 「PageFly」タブで elementを選択 > 最初のバリアントをページエディターにドラッグ&ドロップします。

要素カタログで、「Add element」アイコンをクリック > elementを選択 > 最初のバリアントをページエディターにドラッグ&ドロップします。ヒーローバナーセクションと同様にカスタマイズします。

ステップ1: 要素カタログで、「Shopify」リストにある「Add Shopify element」アイコンをクリック > elementを選択 > 最初のバリアントをページエディターにドラッグ&ドロップします。

をページエディターに追加できます。

ステップ1: 要素カタログで、「Add Shopify element」アイコンをクリック > 「PageFly」タブで elementを選択 > バリアントをページエディターにドラッグ&ドロップします。

モバイルフレンドリーな表示を改善するには、を確認してください。

または、「Create from template」ボタンをクリックして、ランディングページにを使用することもできます。

ステップ1: 要素カタログで、左側のツールバーにある「Add element」アイコンをクリック > 「PageFly」タブでを選択 > 「Full Section」オプションをページエディターにドラッグ&ドロップします。

Image Managerで利用可能な画像をアップロードするか、インターネットからアップロードできます。で詳細をご覧ください。

ステップ2: Stylingタブで、Spacingセクションまでスクロールダウン > トップパディングとボトムパディングの値を編集して、セクションの高さを画像に合わせて変更します。中央の小さなボックスは、の4辺すべてに同じ値を設定します。

ステップ1: 要素カタログで、「Add element」アイコンをクリック > 「PageFly」タブで を選択 > 最初のバリアントをページエディターにドラッグ&ドロップします。

ステップ1: 要素カタログで、「Add element」アイコンをクリック > 「PageFly」タブで を選択 > 最初のバリアントをページエディターにドラッグ&ドロップします。

ステップ1: 要素カタログで、「Add element」アイコンをクリック > 「PageFly」タブでを選択 > 最初のバリアントをページエディターにドラッグ&ドロップします。

要素カタログで、「Add element」アイコンをクリック > elementを選択 > 最初のバリアントをページエディターにドラッグ&ドロップします。Hero bannerセクションと同様にカスタマイズします。

ステップ1: 要素カタログで、「Shopify」リストにある「Add Shopify element」アイコンをクリック > elementを選択 > 最初のバリアントをページエディターにドラッグ&ドロップします。

をページエディターに追加できます。

ステップ1: 要素カタログで、「Add Shopify element」アイコンをクリック > 「PageFly」タブで elementを選択 > バリアントをページエディターにドラッグ&ドロップします。

モバイルフレンドリーな表示を改善するには、を確認してください。

スロットプラン
PageFlyテンプレート
Layout element
こちら
Pagefly Editor - Styling Tab
Heading
element
Paragraph
element
Button
Heading
Product List
あらかじめ作成されたセクション
Content List
この記事
PageFlyテンプレート
Layout element
こちら
Padding and Margin
Heading
element
Paragraph
element
Button element
Heading
Product List
あらかじめ作成されたセクション
Content List
この記事