PageFlyエディターでの作業方法
Last updated
Was this helpful?
Japanese 🇯🇵
Last updated
Was this helpful?
概要：
PageFlyエディターは、強力なドラッグアンドドロップツールを使用してShopifyページを直接構築できる場所であり、コーディングスキルなしで要素やレイアウトを配置および調整できます。この記事は、PageFlyエディターを効果的に操作できるよう理解を深めることを目的としています。その特徴と機能について説明し、コーディングスキルなしで視覚的に魅力的で機能性の高いページを構築できるようになります。
以下の手順に従ってください：
Shopifyの管理ダッシュボードから、PageFly Page Builderアプリに移動します。
「新しいページを作成」をクリックするか、既存のページ/セクションを選択します。
希望するPageFlyエディターを選択します。利用可能なエディターは2つあります：
レガシーエディター: 行と列の構造を持つエディター。
Gen 2エディター: 行と列の構造を持たないエディター。PageFlyページに要素を直接追加でき、Flexブロックにより柔軟なカスタマイズレイアウトが可能です。
重要なお知らせ: Gen 2レイアウトは、従量課金制()でのみ利用可能です。
ヘッダーには、調整できるいくつかのオプションがあります：
破棄/保存：これらのボタンは、新しいページで作業しているとき、または保存されていない変更があるときに表示されます：
- 破棄：保存されていないすべての変更をクリアし、最初からやり直すか、現在の編集を破棄できます。
- 保存：ページに対して行われたすべての変更を保存します。正常に保存され、それ以上の編集がない場合、これらのボタンは「公開」ボタンに置き換わります。
公開：このボタンをクリックすると、保存された変更がストアでライブ表示されます。
デバイス表示モードの切り替え：異なるデバイスビュー（すべてのデバイス、ノートパソコン、タブレット、モバイル）を簡単に切り替えて、さまざまな画面でページがどのように表示されるかを確認できます。
キャンバスサイズの設定：キャンバスサイズをカスタマイズして、デバイスの異なる画面サイズでレイアウトがどのように表示されるかをプレビューします。カスタマイズできる最小値と最大値は、選択したデバイス表示モードによって異なります：
- すべてのデバイス：1200px以上
- ノートパソコン：1025px - 1199px
- タブレット：768px - 1024px
- モバイル：767px以下
ページエディター設定：オプションは3つあります：
- テーマスタイルの有効化：現在のPageFlyページをShopifyテーマスタイルに合わせます。PageFlyエディターでテーマスタイリングをオンにすると、PageFly上のエディターがテーマと競合しないようにするのに役立ちます。場合によっては、テーマスタイリングをオンにした後、空白の画面が表示される場合は、オフにしてください。その理由は、ページにインストールした他の要素に基づくテーマとの競合である可能性があります。テーマの競合を避けるには、こちらのビデオチュートリアルを確認してください：https://youtu.be/ESEMMkd3c8Y
- ページ構造の表示：セクション、行、列などの構造を表示します。
- キャンバスサイズの表示：パンくずリストの下に表示されるバーは、各デバイス（モバイル、タブレット、ノートパソコン、デスクトップ）のサイズを示します。
やり直し＆元に戻す：編集時のアクションをやり直し/元に戻します。
プレビュー＆ライブ表示：
- プレビュー：公開前にページがどのように表示されるかをプレビューするには、クリックします。
- ライブ表示：ページが顧客にどのように表示されるかの最終バージョンを確認します。このボタンは、ページがまだ公開されていない場合はグレー表示（非アクティブ）になります。
エディターカウントアイコン：同じページが複数のタブで開かれているか、複数のユーザーによって開かれている場合に表示され、上書きの問題を防ぐのに役立ちます。
パンくずリストは、ページ構造内の要素の位置を示す視覚的なガイドです。要素がどこに配置されているかをよりよく理解するのに役立ちます。
要素の典型的な構造は次のようになります：セクション > 行 > 列 > 要素。他のセクションはより複雑になる場合があります。
これは、Googleがブログやウェブページをよりよく理解するためのガイダンスでもあります。
ページパンくずリストの使い方
どのように機能するかを見てみましょう。私たちの例では、セクションには多くの行、列、および要素が含まれています。パンくずリストの項目をクリックすると、特定の階層にネストされている要素を選択できます。
エディターで要素にマウスオーバーすると、ページパンくずリストのテキストの色が要素に基づいて変わります。
新しいページを作成し、既成のテンプレートを選択しない場合、キャンバスは空白で表示され、パネルから要素をドラッグアンドドロップするように指示されます。
垂直ツールバーは、PageFlyエディターの左サイドバーにあります。すべての異なるPageFly要素を見つけることができる場所です。したがって、これらの種類の要素についてより深い知識を持っている方がはるかに良いです。上から下の順に、すべてのオプションは次のとおりです：
ページコンテンツ
要素
サードパーティ要素
ページテンプレート
ページ割り当て
ページ設定
バージョン履歴
カスタムコードを追加
ライブチャットを開く
| ページコンテンツ: ここでページコンテンツの概要を確認したり、要素を移動/削除/複製したりできます。 |
要素: PageFlyとShopifyの2つの要素タブがあります：- PageFly このタブでは、コンテナ、基本要素、メディア要素、ソーシャル要素、およびカウントダウンタイマー、Mailchimpフォーム、Googleマップ、プログレス、テーブルなどの高度な要素を見つけることができます。これらはすべてのWebページに標準です。- Shopify このリストには、商品リスト、商品詳細、コレクションリスト、顧客フォーム、ブログなど、Shopifyからのデータを必要とする要素があります。
エディターで任意の要素を選択すると、インスペクターツールバーがすぐに表示されます。パネルとしてその要素に固定されたツールバーに気づくでしょう。パネルの色と機能は、異なるコンテナ要素によって変わります。
要素
|
1. 移動（またはドラッグアンドドロップ）：要素を選択して移動します。2. 複製：要素のコピーを作成します。3. 削除：要素を削除します。4. スタイルのコピー：要素のスタイルをコピーします。5. スタイルの貼り付け：コピーしたスタイルを要素に貼り付けます。6. 折りたたむ：ツールバーを折りたたむ
セクション要素とカラム要素には、それぞれの要素固有の機能があります。
セクション
|
1. 移動（またはドラッグアンドドロップ）：要素を選択して移動します。2. 複製：要素のコピーを作成します。3. 削除：要素を削除します。4. スタイルのコピー：要素のスタイルをコピーします。5. スタイルの貼り付け：コピーしたスタイルを要素に貼り付けます。6. セクションの保存：セクションを保存し、他のページで再利用します。7. 折りたたむ：ツールバーを折りたたむ
カラム
|
1. 移動（またはドラッグアンドドロップ）：要素を選択して移動します。2. 複製：要素のコピーを作成します。3. 削除：要素を削除します。4. 右にカラムを追加：右に1つのカラムを追加します。5. 左にカラムを追加：左に1つのカラムを追加します。6. スタイルのコピー：要素のスタイルをコピーします。7. スタイルの貼り付け：コピーしたスタイルを要素に貼り付けます。8. 折りたたむ：ツールバーを折りたたむ
この機能により、要素インスペクター内でパラメータを迅速かつ効率的に検索できます。たとえば、「色」のようなキーワードを入力すると、背景やボーダースタイルなど、異なる設定でそれがどこに表示されるかを確認できます。これにより、編集とレビューがより迅速になります。
ドキュメント表示ボタンは、PageFlyヘルプセンターに直接接続し、現在編集している要素に関連する記事やガイドに即座にアクセスできます。
ストアページのカスタマイズ：ブランドの美学に合わせて、ホームページ、商品ページ、コレクションページのレイアウトをパーソナライズし、カスタム要素を追加します。
マーケティングキャンペーン用ランディングページの作成：マーケティングキャンペーン、商品ローンチ、特別プロモーションのために、視覚的に魅力的でコンバージョン率の高いページを設計し、リードを獲得して売上を促進します。
情報量の多いブログページの構築：画像、動画、その他のメディアを含む魅力的なブログ記事を作成およびフォーマットし、ユーザーエンゲージメントとSEOを向上させます。
お客様の声（証言）ページの設計：整理され、魅力的な方法で顧客の証言やレビューを表示し、潜在的な顧客との信頼と信用を構築します。
1. PageFlyエディターを使用して既存のShopifyページをカスタマイズできますか？
はい、そのページがPageFlyで作成されていれば可能です。その特定のページのページエディターに移動するだけです。
既存のページのPageFlyエディターは、「PageFlyで編集」ボタンを使用して開くこともできます。ただし、注意してください：
そのページがPageFlyで作成されたものである場合、ボタンをクリックすると直接ページエディターに移動します。
そのページがPageFlyで作成されたものでない場合、ボタンをクリックすると「PageFlyで新しいページを作成」モーダルが開かれ、最初からページを構築する必要があることを意味します。
2. セクションとフレックスセクション（Gen 2）の違いは何ですか？
セクションは、行と列のコンテナ構造でページレイアウトを設計できるもので、PageFlyセクションとPageFlyページの両方に追加できます。一方、フレックスセクションには行と列の構造がありません。PageFlyページに要素を直接追加でき、Flexブロックにより柔軟なカスタマイズレイアウトが可能です。
3. PageFlyページがモバイルフレンドリーであることを確認するにはどうすればよいですか？
PageFlyエディターには、ノートパソコン、タブレット、モバイルデバイスなど、さまざまな画面サイズでページをプレビューおよびカスタマイズできるデバイス表示モードが含まれています。これにより、ページが完全にレスポンシブであり、すべてのデバイスで見栄えがよくなります。
従来のページ構築メカニズム（行、列）に加えて、PageFly 4.23.0ではGen 2エディターが追加されました。これは、複雑で高度にカスタマイズ可能なレイアウトの作成を可能にする、より柔軟で効率的なテクノロジーであり、直感的で使いやすいインターフェースを備えています。
| | サードパーティ要素: このリストでは、PageFlyと連携した他のアプリからのすべての要素を見つけることができます。 |
| | ページテンプレート: 事前にデザインされたテンプレートを参照して使用し、迅速にページの構築を開始します。 |
| | ページ割り当て: 商品ページを構築している場合にのみ表示されます。この機能を使用すると、商品をページに割り当てることができます。 | |
| | ページ設定: ページタイトル、ページタイプ、ページのURL、テーマセクションなどのページ設定を構成し、テーマテンプレート名を確認します。 | |
| | バージョン履歴: ページの以前のバージョンを表示および元に戻します。詳細については、を確認できます。 | |
| | カスタムコードエディター: 高度なカスタマイズのためにカスタムコードを追加します。詳細については、を確認できます。 | |
| | ライブチャットを開く: 24時間年中無休のライブチャットサポートに即座に接続します。 | |
|
PageFlyのコピー＆ペーストスタイル機能の詳細については、を参照してください。
