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のページとセクションについて
  • PageFlyのページとセクションにアクセスする方法
  • PageFlyのページとセクションを設定する方法
  • 使用例 (Use Cases)
  • よくある質問 (Frequently Asked Questions)
  • その他のリソース (Additional Resources)

Was this helpful?

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

PageFlyのページとセクションを使用する方法

PageFlyのページとセクションについて

PageFlyのページとセクションは、Shopify向けの多機能ページビルダーアプリであるPageFlyの不可欠なコンポーネントです。これらを使用すると、コーディングスキルを必要とせずに、オンラインストアのカスタムレイアウトとデザインを作成できます。PageFlyを使えば、ページ全体をゼロから構築したり、既存のページを強化するためのセクションを作成したりすることができ、ストアの外観と機能を特定のニーズに合わせて柔軟に調整できます。

PageFlyのページの種類

PageFlyは6種類のページを提供しており、それぞれShopifyストアでの特定の目的に合わせて設計されています。

  • 通常のページ (Regular Pages): 会社概要、お問い合わせ、FAQページなどの独立したコンテンツを作成するのに最適です。

  • ホームぺージ (Home Page): ストアのメインランディングページをカスタマイズして、魅力的な第一印象を与えます。

  • 商品ページ (Product Pages): 商品を効果的に紹介するためのユニークなレイアウトをデザインします。

  • コレクションページ (Collection Pages): 商品コレクションの視覚的に魅力的な表示を作成します。

  • ブログ投稿ページ (Blog Post Pages): カスタマイズされたブログレイアウトでコンテンツマーケティングを強化します。

  • パスワードページ (Password Pages): ストア用のカスタムパスワード保護ページをデザインします。

PageFlyのセクションの種類

PageFlyは、ストアをさらにカスタマイズするための2種類のセクションを提供しています。

  • 標準セクション (Standard Sections): 既存のページに簡単に​​追加できる、事前に設計されたコンポーネントです。

  • フレックスセクション (Flex Sections): より優れたデザインの柔軟性を提供し、要素の複雑な配置を可能にします。

PageFlyのページとセクションの使用時期

  • ページ (Pages): 新しいページを完全に作成したい場合や、既存のページを完全に再設計したい場合に使用します。ページでは、レイアウトとコンテンツを完全に制御できます。

  • セクション (Sections): 既存のページをゼロから再構築することなく、カスタム要素を追加するのに最適です。セクションは、現在のテーマとシームレスに統合されます。

PageFlyのページとセクションにアクセスする方法

Shopifyの管理ダッシュボードからPageFlyのページとセクションにアクセスするには、以下の手順に従ってください。

  • ステップ1: Shopifyの管理ダッシュボードから、PageFly Page Builderアプリを見つけてクリックします。

  • ステップ2: 左側のメニューバーで、PagesまたはSectionsをクリックして、PageFlyのページまたはセクションにアクセスします。

PageFlyのページとセクションを設定する方法

このセクションでは、PageFlyのページとPageFlyのセクションを設定する手順を案内します。

新しいページ/セクションを作成する

PageFlyのページでページを作成する

PageFlyのページを作成する方法は2つあります。ゼロからページを作成する (Create the page from scratch) または テンプレートからページを作成する (Create the page from templates) です。

ステップ1: PageFlyダッシュボードで、Pagesタブに移動します。

ステップ2: 2つのボタンのいずれかをクリックします: Create the page from scratch または Create the page from templates

ステップ3: ドロップダウンメニューから希望のページタイプを選択します。

ステップ4: 使用するエディターの種類を決定します。

  • Gen 2 Editor: 入れ子になったコンテナを備えたフレックスシステムを利用した高度なエディターです。

  • Legacy Editor: 従来のレイアウトオプションに焦点を当てた、分かりやすいエディターです。

PageFlyのセクションでセクションを作成する

PageFlyのページを作成するのと同様に、新しいセクションを作成するには、Blank sectionを作成する (Create blank section) または テンプレートから作成する (Create from a template) の2つのオプションがあります。ただし、PageFly Sectionsには1種類のセクションしかないため、セクションタイプを選択する必要はありません。

PageFlyページでフレックスセクションを作成する

重要事項: フレックスセクションは、Gen 2 Editorを使用してPageFlyページを作成することを選択した場合にのみ利用できます。Legacy EditorでPageFlyページを作成することを選択した場合、またはページが既にLegacy Editorで構築されている場合は、この要素は表示されません。

  • ステップ1: Pagesタブで、PageFlyページを作成するために、Create the page from scratch または Create the page from templates のいずれか2つのオプションを選択します。

  • ステップ2: Gen 2 Editorを選択します。

  • ステップ3: Elementsアイコンをクリックします > PageFlyタブでLayoutを選択します。

  • ステップ4: Blank sectionを選択し、キャンバスにドラッグアンドドロップします。

  • ステップ5: フレックスセクションに必要な要素をドラッグアンドドロップします。

ページリストとセクションリストを理解する

ページ設定

PageFlyのページでは、PageFlyで作成したすべてのページを一覧表示するテーブルが表示されます。テーブルには、ページタイトル、ページのステータス(公開済みまたは未公開)、ページタイプ、最終更新日時、分析インジケーター、およびプレビューモードでページを表示できる目のアイコンの6つのパラメーターが含まれています。

ページタイトル前のボックスをチェックしてページをハイライトし、ページリストの右側にある3つのドットをクリックしてページ機能を開き、その他の機能を表示することもできます。

  • View Analytics: ページのパフォーマンスメトリクスを確認します。

  • Preview: ページの見た目を確認します。

  • Duplicate: ページのコピーを作成します。

  • Export: ページを.pagefly形式でエクスポートします。

  • Delete: ページを削除します。

セクション設定

PageFlyのセクションにも、PageFlyで作成したすべてのセクションを一覧表示するテーブルがあります。このテーブルでは、セクションタイトル、公開済みまたは未公開のステータス、そのセクションが使用されているページ数、最終更新日時、およびプレビューモードでページを開く目のアイコンを表示できます。

PageFlyのページと同様に、セクションをハイライトし、3つのドットをクリックしてセクション機能を開くこともできます。

  • Preview: ページの見た目を確認します。

  • View page: そのセクションが使用されているページを確認します。

  • Duplicate: セクションのコピーを作成します。

  • Export: セクションを.pagefly形式でエクスポートします。

  • Delete: セクションを削除します。

ステップ3: 検索、フィルター、並べ替えを理解する

検索

検索機能を使用すると、ページまたはセクションリスト内で特定のページまたはセクションをすばやく見つけることができます。ページまたはセクションリストの右上隅にあるSearchボタンをクリックします > 探しているページまたはセクションに関連するタイトルまたはキーワードを入力します。リストは自動的にフィルターされ、検索キーワードに一致するページまたはセクションのみが表示されます。

フィルター

フィルター機能を使用すると、提供されるオプションに基づいてページまたはセクションを見つけることができます。現在、ページフィルターにはTypeとStatusの2つのオプションがあり、セクションフィルターにはStatusの1つのオプションしかありません。ページまたはセクションフィルターにアクセスするには、以下の手順に従ってください。

  • ステップ1: PagesまたはSectionsリストで > Add filterボタンをクリックします。

  • ステップ2: 使用するフィルターの種類を決定します。TypeまたはStatusのいずれか、または両方の種類を使用してフィルターできます。TypeにはRegular, Home, Product, Collection, Blog post, Passwordの7つの値があり、StatusにはPublishedまたはUnpublishedの2つの値があります。

希望するフィルター条件を選択すると、ページリストまたはセクションリストは自動的に更新され、選択したフィルターに一致するアイテムのみが表示されます。

フィルターを保存して将来使用することもできます。希望するフィルター設定を選択し > Save asボタンをクリックしてフィルター名を入力するだけです。

並べ替え (Sort)

もう一つの便利な機能として、更新時間またはアルファベット順に基づいてページとセクションを並べ替える機能があります。これにより、ページをより適切に管理できます。

使用例 (Use Cases)

  • Shopifyストアの変更: インポートおよびエクスポート機能は、プロセスを効率的にサポートします。

  • ページの管理: 好みに合わせてページの設定を調整します。

  • 各ページタイプの最適な使用方法:

    • Regular Page: セール/プロモーションページ、会社概要、お問い合わせ、FAQなどの一般的なコンテンツ。

    • Home Page: ストアのメインランディングページで、おすすめ商品やプロモーションを表示。

    • Product Page: 詳細な説明と画像を含む個々の商品リスト。

    • Collection Page: 季節ごとのセールなど、関連商品のグループ。

    • Blog Post Page: オーディエンスを引き付けるための記事、ニュース、アップデート。

    • Password Page: 公開前またはメンテナンス中のストアを保護。

よくある質問 (Frequently Asked Questions)

1. PageFlyを使用して既存のShopifyストアページを再設計できますか、それとも新しいページを作成するためだけですか?

PageFlyは、新しいページを生成するためにも、既に存在するページを再設計するためにも使用できます。PageFlyを使用すると、コードを知らなくても、ホームページ、商品ページ、ランディングページなどを迅速かつ簡単にカスタマイズできます。

2. PageFlyのSaved Sectionとは何ですか?どのように使用できますか?

PageFlyのSaved Sectionは、複数のページに追加できる再利用可能なコンテンツブロックです。PageFly SectionsでSaved sectionを作成し、PageFlyページまたはShopifyページに追加できます。この機能は、ストア全体でコンテンツを再利用することで、一貫性を維持し、時間を節約するのに役立ちます。

3. 現在のページのページタイプを変更できますか?

はい、可能です。PageFlyページエディターで、Page settingsに移動します > Page typeドロップダウンメニューで現在のページタイプを変更できます。

4. SectionとFlex sectionの違いは何ですか?

Sectionは、ユーザーがレイアウトをrow、columnでデザインすることを可能にし、PageFly SectionsとPageFlyページの両方に追加できます。一方、Flex sectionにはrow-column構造がなく、PageFlyページに直接追加することしかできません。

その他のリソース (Additional Resources)

Last updated 3 days ago

Was this helpful?

このガイドでは、PageFlyのページとセクションを効果的に使用する方法を示します。このガイドを進める前に、ShopifyストアにPageFlyをインストールしていることを確認してください。PageFlyを無料でインストールするには、をクリックしてください。

ステップ5: (Create from a templateオプションの場合のみ): PageFlyページに適したを選択します > Selectボタンをクリックして、エディターで選択して表示します。

重要事項: Gen 2 Layoutは、ペイアズユーゴー料金モデル(スロットプラン)でのみ利用できます。詳細については、で確認できます。

さらに、別のShopifyストアからPageFlyのページまたはセクションを既に持っており、それを使用したい場合は、Import機能を使用できます。この機能の詳細については、を確認してください。

既存のセクションで新しいページを作成: を使用して、新しいセクションを構築する代わりに、既存のセクションをページに追加します。これは時間を節約し、プロセスを促進するのに役立ちます。

PageFlyとShopifyテーマの連携: PageFlyのページがShopifyテーマとどのように統合されるかを包括的に理解するには、を参照してください。

こちら
PageFlyテンプレート
こちら
このビデオチュートリアル
Saved Section
詳細記事
PageFlyのページを公開または非公開にする方法
PageFly Saved Sectionの使い方
PageFlyページの3つのエクスポートとインポート手順
PageFlyでページ設定を編集する方法