画像とテキストを含む基本セクションを作成する方法

概要

このガイドでは、PageFlyで画像とテキストを含むセクションを作成する方法を紹介します。これらの手順に従うことで、ウェブページに視覚要素とテキスト要素を効果的に統合する方法を学ぶことができます。

要件

• PageFlyインストール: ストアのページを作成する前に、PageFlyアプリをインストールする必要があります。

• 画像とテキストコンテンツの準備：セクション用に高画質な画像と明確なテキストコンテンツを準備します。

Gen 2 レイアウト - 画像とテキストで基本的なセクションを作成する方法

重要事項: Gen 2 レイアウトは、従量課金制モデル（スロットプラン）専用となります。

このセクションでは、Gen 2 エディターを使用してPageFlyで基本的なセクションを作成する方法をガイドします。含まれる内容は以下の通りです。

• 1カラム

• 2カラム

• パララックス効果

• スティッキー

1カラムセクションを作成する方法

ステップ 1: 背景画像を追加する

1. PageFlyに移動し、左サイドバーの[要素]オプションにアクセスします。[レイアウト]を選択し、[ブランクセクション]レイアウトを選択してページにドラッグします。

1. Flexセクションを選択 > スタイリングタブを選択 > 背景 > 「画像を選択」をクリックして、セクションの背景画像を挿入します。

1. セクションをバナーにするには、間隔パラメーターでパディングとマージンを調整し、その他の設定を使用して背景画像を中央に配置して拡大します。

この例では、セクションの上下のパディングは200pxに設定されています。背景の位置は中央、背景サイズはカバーです。

または、Flexセクションの幅を設定してバナーにすることもできます。Flexセクションを選択し、スタイリングタブのサイズパラメーターに移動 > 固定幅を選択し、Flexセクションの希望する幅を設定します。

ステップ 2: 見出しを追加する

1. 要素 > 見出しに移動し、いずれかのバリエーションをセクションにドラッグします。お好みに合わせてスタイルを設定します。必要に応じて、[ボタン]要素でも同様の操作を繰り返します。

2. 配置については、Flexセクションを選択 > スタイリングタブに移動 > スクロールダウンしてレイアウトパラメーターの下にある「アイテムを配置」機能を見つける > 希望するオプションを選択します。レイアウト設定の詳細については、こちらをご覧ください。

上記は、見出しとボタンを含む1カラムセクションのデザイン例です。

ステップ 3: モバイルデザインを最適化する

1. トップバーにあるデバイススイッチャーでモバイルアイコンをクリックして、モバイルビューに切り替えます。

1. スタイリングタブに移動し、マージンとパディングをモバイルビューに適するように変更します。モバイルビューモードでの変更は、他のビューモードには影響しません。

2. 見出しとボタンのサイズを、画像とモバイルビューモードに合うように編集します。

3. 公開をクリックし、ライブビューでページを確認します。

2カラムセクションを作成する方法

ステップ 1: レイアウトを構築する

1. 要素 > レイアウトに移動し、左サイドバーから1/2 – 1/2 レイアウトを選択します。

2. 見出しとボタン要素を左カラムにドラッグします。スタイリングタブでスタイルを変更できます。

3. 要素を選択 > 画像要素を右カラムにドラッグします。

4. 画像ソースに画像をアップロードします。

ステップ 2: モバイルデザインを最適化する

1. トップバーにあるデバイススイッチャーでモバイルアイコンをクリックして、モバイルビューに切り替えます。

1. スタイリングタブに移動し、マージンとパディングをモバイルビューに適するように変更します。モバイルビューモードでの変更は、他のビューモードには影響しません。

2. 見出しと段落のサイズを、画像とモバイルビューモードに合うように編集します。

3. 公開をクリックし、ライブビューでページを確認します。

パララックス効果セクションを作成する方法

セクションを選択し、スタイリングタブに移動して、背景設定でパララックスオプションを有効にする必要があります。詳しい手順はこちらでご確認ください。

スティッキーセクションを作成する方法

セクションを選択し、一般タブに移動して、上部固定オプションをオンにするだけです。詳細については、レガシーエディターの手順をこちらでご確認ください。

レガシーレイアウト - 画像とテキストで基本的なセクションを作成する方法

このセクションでは、レガシーエディターを使用してPageFlyで基本的なセクションを作成する方法をガイドします。含まれる内容は以下の通りです。

• 1カラム

• 2カラム

• パララックス効果

• 全幅

• スティッキーセクション

視覚的なステップバイステップの手順については、こちらのビデオチュートリアルをご覧ください。

1カラムセクションを作成する方法

ステップ 1: 背景画像を追加する

1. PageFlyに移動し、左サイドバーの要素オプションにアクセスします。レイアウトを選択 > 1/1 セクションレイアウトを選択し、ページにドラッグします。

2. スタイリングタブを選択 > 背景 > セクションの背景画像を挿入します。

3. セクションをバナーにするには、間隔パラメーターでパディングとマージンを調整し、その他の設定を使用して背景画像を中央に配置して拡大できます。

この例では、セクションの上下のパディングは200pxに設定されています。背景の位置は中央、背景サイズはカバーです。

ステップ 2: 見出しを追加する

1. 要素 > 見出しに移動し、いずれかのバリエーションをセクションにドラッグします。お好みに合わせてスタイルを設定します。必要に応じて、段落要素とボタン要素でも同様の操作を繰り返します。

2. 配置については、スタイリングタブでカラムのマージンを調整します。

上記は、見出しとボタンを含む1カラムセクションのデザイン例です。

ステップ 3: モバイルデザインを最適化する

1. トップバーにあるデバイススイッチャーでモバイルアイコンをクリックして、モバイルビューに切り替えます。

1. スタイリングタブに移動し、マージンとパディングをモバイルビューに適するように変更します。モバイルビューモードで行われた変更は、他のビューモードには影響しません。

2. 見出しとボタンのサイズを、画像とモバイルビューモードに合うように編集します。

3. 公開をクリックし、ライブビューでページを確認します。

2カラムセクションを作成する方法

ステップ 1: レイアウトを構築する

1. 要素 > レイアウトに移動し、左サイドバーから1/2 – 1/2 レイアウトを選択します。

2. 要素を選択 > 画像要素を右カラムにドラッグし、画像を画像ソースにアップロードします。

3. 見出しと段落要素を左カラムにドラッグします。スタイリングタブでスタイルを変更できます。

ステップ 2: モバイルデザインを最適化する

1. トップバーにあるデバイススイッチャーでモバイルアイコンをクリックして、モバイルビューに切り替えます。

1. スタイリングタブに移動し、マージンとパディングをモバイルビューに適するように変更します。モバイルビューモードで行われた変更は、他のビューモードには影響しません。

2. 見出しと段落のサイズを、画像とモバイルビューモードに合うように編集します。

3. 公開をクリックし、ライブビューでページを確認します。

パララックス効果セクションを作成する方法

ウェブデザインにおけるパララックス効果は、スクロール時に背景画像を前景コンテンツよりも遅く動かすことで、奥行き感を演出するものです。この技術はウェブページのインタラクティビティとダイナミズムを高め、より没入感のある体験をユーザーに提供します。

ステップ 1: パララックス背景画像を設定する

1. パララックス背景を追加したいセクションを選択します。

2. インスペクターパネルで、スタイリングタブを選択します。

3. 背景パラメーターを見つけ、パララックスオプションを選択します。

4. 次に、背景として設定したい画像を選択します。

ステップ 2: 設定を調整する

1. パララックス画像を設定した後、その他の設定ボタンをクリックします。

2. パララックスの速度とオーバーレイ色の設定が表示されます。

パララックス効果を確認するには、プレビューとライブビューの両方でページをチェックする必要があります。

全幅セクションを作成する方法

ウェブデザインにおける全幅セクションとは、ブラウザウィンドウの幅全体（左から右まで）に広がり、あらゆる画面サイズに適応する水平ブロックのことです。このデザインは、ウェブページのセクションを区別しやすくし、視覚的に魅力的で読みやすくするのに役立ちます。

ステップ 1: 全幅セクションを設定する

1. 全幅に設定したいセクションを選択します。

2. インスペクターパネルで、一般タブを選択します。

3. 固定幅を設定パラメーターを見つけ、いいえに変更します。

ステップ 2: セクションのパディングを設定する

1. インスペクターパネルで、スタイリングタブを選択します。

2. パディングパラメーターを見つけ、左右のパディングを調整します。コンテンツが端に押し出されないように、セクションには水平パディングを使用する必要があります。

スティッキーセクションを作成する方法

ウェブサイト上のスティッキーセクションは、スクロールしてもその場に固定され、常に表示されたままになります。

ステップ 1: スティッキーセクションを設定する

1. スティッキーにしたいセクションを選択します。

2. インスペクターパネルで、一般タブを選択します。

3. 上部固定を有効にするパラメーターを見つけ、はいに変更します。

これでセクションが上部に固定され、セクションに小さなスティッキーインジケーターが表示されます。

ステップ 2: 設定を調整する

スティッキーセクションについて、以下の設定を調整します。

• 上部オフセット: これは、セクションと画面上部の間のスペースを設定します。例えば、20pxの上部オフセットは、上部から20ピクセル離れた位置に留まることを意味します。

• エレベーションを適用: これは、重なりがある場合にどの要素が上に表示されるかを決定します。エレベーションが高いほど、スティッキーセクションはエレベーションが低い他のコンテンツを覆い、視認性を確保します。

スティッキーセクションの作成に関する詳細な手順については、こちらをご確認ください。

ユースケース

• ホームページデザイン: 全幅バナーを使用して魅力的なホームページを作成し、訪問者を歓迎します。

• 製品の特徴: 2カラムレイアウトを使用して、画像とともに製品の特徴を詳細に説明します。

• ストーリーテリング: パララックス効果を利用して、ダイナミックなストーリーテリングや会社の歴史セクションを作成します。

• 連絡先情報: 連絡先情報やコールトゥアクションボタンをスティッキーにして、簡単にアクセスできるようにします。

• ランディングページ: これらのセクションタイプを組み合わせて、訪問者をコンテンツやセールスファネルに誘導する魅力的なランディングページをデザインします。

ヒントとベストプラクティス

パララックス効果には高画質な画像を選択する

高画質な画像を選択して、フォーカスを維持し、奥行き効果を高めます。これにより、ユーザーを圧倒することなく、ページをエレガントで魅力的に保つことができます。

全幅セクションには高解像度画像を使用する

高解像度画像を使用すると、大画面での画質劣化を防ぐことができます。これにより、セクションが視覚的に印象的になり、重要なメッセージやコールトゥアクションを強調するのに効果的です。

スティッキーセクションを使いすぎない

これらの機能は、ナビゲーションや主要なCTAなどの重要な要素に使用して、アクセスしやすく保ちます。ただし、画面の煩雑さや主要コンテンツからの注意散漫を防ぐために、使いすぎは避けてください。

カラムを切り替える

複数のカラムを含むセクションがあり、カラムの位置を切り替えたい場合は、以下の手順に従ってください。

• カラムを含む行を選択します

• 一般タブ > コンテンツ > カラムに移動します

• 各カラムのハンドルをクリックして長押しし、お好みの位置に切り替えます

この操作は、すべてのビューモードでカラムの順序を変更することに注意してください。

モバイルのみでカラムの位置を切り替える

• レガシーエディターで

画像またはビデオ用のカラムとテキスト用のカラムから構成されるレイアウトのセクションでは、モバイルユーザー向けにその配置をカスタマイズできます。簡単なガイドを以下に示します。

1. カラムを含む行を選択します

2. スタイリングタブに移動し、表示スタイルでFlexを選択します

3. Flex WrapをWrap Reverseに設定します。

この操作によりカラムの順序が変更され、モバイル表示専用にその配置をカスタマイズできるようになります。

例：モバイルではテキストが画像の上に表示されるセクションがあるとします。モバイルビューでそれらを反転させ、他のビューモードでは現在のレイアウトを維持するには、Flex wrap > Wrap reverse を適用すると、画像がテキストの上に移動します。

Flexオプションの使用に関する詳細なヒントについては、こちらの記事をご確認ください。

• Gen 2 エディターで：

Gen 2 エディターでは、レイアウトパラメーターの順序を反転機能を使用して、モバイルでのカラム位置を切り替えることができます。

1. カラムを含むFlexセクションを選択します

2. スタイリングタブに移動 > レイアウトパラメーターを探します

3. Directionを上から下に設定し、順序を反転をはいに選択します。

よくある質問

1. モバイルデバイスでパララックス効果を使用できますか？

はい、ただしパフォーマンスと可読性に注意してください。過度な動きはモバイルデバイスで気を散らしたり、サイトを遅くしたりする可能性があります。

1. 画面サイズごとに背景画像を変更するにはどうすればよいですか？

PageFlyでは、デバイスごとに背景をカスタマイズできます。デバイススイッチャーとスタイリングオプションを使用して、モバイル、タブレット、デスクトップビューに固有の背景を設定してください。

その他のリソース

• PageFlyページに全幅セクションを作成するための5つのステップ

• PageFlyの保存済みセクションと既製セクションの使用方法