レイアウト
Last updated
Was this helpful?
Japanese 🇯🇵
Last updated
Was this helpful?
レイアウト要素は、コンバージョン率を高めるためにページ構造をより良く構築できるよう設計されています。
レイアウト要素を使用すると、ニーズに合わせて、簡単なものから複雑なものまで、さまざまなレイアウトをすばやくカスタマイズし、構築できます。
ステップ1：要素アイコンをクリックし、PageFly タブでレイアウトを選択します。
ステップ2：目的のレイアウトバリアントをエディターにドラッグ＆ドロップして使用を開始します。
レイアウト要素には、ほとんどのニーズをカバーする複数のバリエーションが用意されています。しかし、時間の節約に役立つように、今後もバリエーションを追加していく予定です。
レガシーエディターとGen 2 エディターを使用して PageFly ページを作成する場合、レイアウト要素にはいくつかの違いがあります。以下でその違いを見ていきましょう。
重要事項: Gen 2 レイアウトは、Pay-as-you-go 料金モデル（スロットプラン）でのみ利用可能です。
PageFly ページを作成する際に Flex エディターを選択すると、PageFly ページの基礎となるレイアウト要素は、ベーシックエディターのセクション、行、カラムではなく、ブランクセクションとブランクブロックになります。
これらの要素には、可能な限り最高のコンバージョン率を得るためにコンテンツの外観を細かく調整できる多数のパラメータが付属しています。
ブランクセクション
Flex セクションは、すべてのページの主要な要素です。他の PageFly 要素をブランクセクションに直接追加できます。
ページキャンバスで Flex セクションを選択すると、その設定を表示できます。一般タブとスタイルタブには、この要素に固有の設定がいくつかあります。
一般設定
一般タブには、上部固定を有効化するオプションがあります。この設定を有効にすると、スクロール時にセクションが常にページの上部に表示されます。また、トップオフセットを調整するオプションや、エレベーションを適用するオプションも表示されます。
トップオフセット：固定セクションとページ上部との間のスペースを変更します。
エレベーションを適用：z軸上のセクションを隆起させて3D効果を作成し、その下に他の要素を積み重ねることができます。
また、一般タブでは、属性、可視性、アニメーションパラメータなど、さまざまなパラメータを変更できます。一般タブの詳細については、こちらをご確認ください。
スタイル設定
ブランクセクションのスタイルタブは、他の PageFly 要素とは異なり、セクションの高さと幅を調整するオプションを提供します。
コンテンツ幅パラメータを使用してセクションの幅を変更できます。2つのオプションがあります。
最大幅：この設定はデフォルトで有効になっており、セクション内のコンテンツを固定幅にラップします。セクションの幅をカスタマイズできます。
コンテナ幅に合わせる：このセクションのコンテンツは、セクションの全幅に展開されます。
セクションの高さは、高さパラメータのサイズで調整します。このパラメータには3つのオプションがあります。
コンテナ高に合わせる：要素は画面の高さに合わせて自動的に展開されます。
コンテンツに合わせる：要素の幅はコンテンツのサイズに合わせて調整されます。
固定幅：要素の特定の幅を設定できます。
セクションの高さと幅を調整することに加えて、Flex セクションがページ全体のレイアウトと一致するように、間隔、境界線、色など、スタイルタブのさまざまなパラメータを変更できます。
スタイルタブの詳細については、こちらをご確認ください。
ブランクブロック
Flex ブロック要素の目的は、特別なレイアウト配置とスタイリングのための一連の要素を含むユニットとして機能することです。ページキャンバスにドラッグしたブランクブロックは、Flex セクション内の要素として表示されます。
Flex ブロック要素には、可能な限り最高のコンバージョン率を得るためにコンテンツの外観を細かく調整できる多数のパラメータが付属しています。この要素をページキャンバスで選択して設定を表示します。
より視覚的に理解するには、以下のビデオをご確認ください。
一般設定
Flex ブロック要素を選択し、一般タブに移動すると、その要素を調整できる多数のパラメータが表示されます。
一般タブの詳細については、こちらをご確認ください。
スタイル設定
Flex ブロック要素がページ全体のレイアウトと一致するように、要素サイズ、間隔、境界線、タイポグラフィ、色など、スタイルタブのさまざまなパラメータを変更できます。
スタイルタブの詳細については、こちらをご確認ください。
6種類のレイアウトバリエーション
Flex セクションと Flex ブロック要素に加えて、すぐに使用できる6つのプリビルドレイアウトがありますが、独自のアイデアに合わせて変更することも歓迎します。時間の節約に役立つように、今後もバリエーションを追加していく予定です。
事前に作成されたレイアウト要素を使用して、複雑なレイアウトをカスタマイズできます。Flex セクションをページキャンバスにドラッグ＆ドロップし、その中に Flex ブロックを追加するだけです。Flex ブロック要素を水平に配置することで、複数のカラムを持つセクションを作成できます。これらのブロック要素を垂直に配置すると、複数の行を持つレイアウトが生成されます。
Flex ブロックの左にある縦三点リーダーのアイコンをクリック＆ホールドし、Page Content の新しい配置にドラッグすることで、Flex セクション内のブロック要素の順序を変更することもできます。
複数の要素をフレックスブロック要素にグループ化する
Flex エディターでは、Ctrl キー（Windows デバイスの場合）または Command キー（MacOS デバイスの場合）を押したまま要素を選択することで、要素を Flex ブロック要素内にグループ化できます。このアクションにより、要素が Flex ブロック要素にグループ化されます。
レガシーエディターのレイアウト要素には、セクション、行、カラムが含まれており、これらは PageFly 要素階層の核心をなすものです。各要素には、可能な限り最高のコンバージョン率を得るためにコンテンツの外観を細かく調整できる多数のパラメータが付属しています。
セクション
セクションは、すべてのページの主要な要素です。セクションには1つ以上の行が含まれます。一般タブでセクションの行数を制御できます。
一般設定
新しい行を追加するには、「新しいアイテムを追加」ボタンをクリックします。
アイテムの左にある縦三点リーダーのアイコンをクリック＆ホールドし、新しい配置にドラッグして行を移動します。各タブアイテムの横にある2つのボタンを使用して、行を複製または削除します。
固定幅を設定: この設定はデフォルトで有効になっており、セクション内のコンテンツを固定幅にラップします。無効にすると、このセクション内のコンテンツはセクションの全幅に展開されます。
上部に固定を有効化: この設定を有効にすると、スクロール時にセクションが常にページの上部に表示されます。トップオフセットまたはエレベーションを適用するオプションも表示されます。
属性、可視性、アニメーションパラメータの詳細については、こちらをご確認ください。
詳細については、このビデオチュートリアルをご確認ください。
スタイル設定
スタイルタブの詳細については、こちらをご確認ください。
行
行には1つ以上のカラムが含まれます。行要素をクリックし、一般タブで、行内のカラム数を制御できます。
一般設定
「新しいアイテムを追加」ボタンをクリックして新しいカラムを追加します。アイテムの左にある縦三点リーダーのアイコンをクリック＆ホールドし、新しい配置にドラッグしてカラムを移動します。各タブアイテムの横にある2つのボタンを使用して、カラムを複製または削除します。
1行あたりのカラム数: - すべてのデバイスおよびデスクトップでの1行あたりの最大カラム数は12です。- タブレットでの1行あたりの最大カラム数は6です。- モバイルでの1行あたりの最大カラム数は4です。
コンテンツ配置: この行内のコンテンツの配置を指定します。
高さを等しくするを有効化: この行内のすべてのカラムの高さを等しくします。
カラム間隔: 行内のカラム間の間隔を調整します。この設定はデフォルトで30pxですが、このパラメータを編集できます。
属性、可視性、アニメーションパラメータの詳細については、こちらをご確認ください。
スタイル設定
スタイルタブの詳細については、こちらをご確認ください。
カラム
レイアウトにカラムを追加すると、自動的に行内に含まれます。すべての要素（レイアウト要素を除く）はカラムの中にネストされます。
カラムを選択してパラメータを表示します。
カラムのリサイズ機構
カラム幅を左右に増減させると、次のカラムの幅がそれに応じて増減し、行の幅には影響しません。
1行あたりのカラム数のパラメータを変更すると、行内のすべてのカラムが自動的に均等にリサイズされ、各カラムのサイズは任意で編集できます。
1行あたりのカラム数が奇数の場合、この奇数のカラムは自動的に行内で全幅にリサイズされます。
例：
カラムが4つあり、1行あたりのカラム数を3に設定した場合：
1行目：カラムが3つあります（各カラムは行の領域の1/3を占めます）
2行目：カラムが1つあります（このカラムは行内で全幅になります）
詳細については、下の画像をご確認ください。
一般設定
ページキャンバスのカラムをクリックし、一般タブで、高さパラメータにカラムの高さを設定できます。
属性、可視性、アニメーションパラメータの詳細については、こちらをご確認ください。
スタイル設定
スタイルタブの詳細については、こちらをご確認ください。
1. Shopify ではなく PageFly レイアウト要素を使用すべきなのはなぜですか？
PageFly レイアウト要素は、Shopify のデフォルトのレイアウト要素と比較して、より多くのデザインの柔軟性、カスタマイズオプション、および使いやすさを提供するため、使用すべきです。これにより、コーディングスキルなしで、ユニークでコンバージョンに最適化されたページを作成できます。
2. PageFly ページを作成する際に、Gen 2 エディターではなくレガシーエディターを使用すべきなのはなぜですか？
Gen 2 エディターを使用すると、ページレイアウトを迅速かつ柔軟にカスタマイズできます。カスタムコードを書くことなく、ページ上の各要素の幅と高さを簡単に編集できます。さらに、ページのパフォーマンスを向上させ、読み込み速度を速めるのに役立ちます。
