画像

画像エレメントについて

PageFlyの画像エレメントは、ストアページに画像を簡単に追加してカスタマイズできる強力なツールです。JPG、PNG、GIFなど、さまざまな画像形式に対応しており、商品を魅力的に見せたり、ページのデザインを強化したりするのに役立ちます。

このガイドでは、PageFlyで画像エレメントを効果的に使用するための手順を説明します。画像エレメントと背景画像の違いについて疑問がある場合は、以下の動画チュートリアルをご確認ください。

画像エレメントへのアクセス方法

PageFlyで画像エレメントにアクセスするには、以下の簡単な手順に従ってください。

ステップ1：左側のメニューにある「エレメント」ボタンをクリックし、PageFlyタブに注意してください。
ステップ2：ドロップダウンメニューから「画像」エレメントを選択します。これはメディアカテゴリの下にあります。
ステップ3：目的のバリアントをページキャンバスにドラッグアンドドロップして使用を開始します。

画像エレメントでは、「元画像比率 (Original Image Ratio)」と「正方形比率 (Square Image Ratio)」の2種類のバリアントを選択できます。

画像エレメントのデザインオプションは当初1つだけですが、GeneralタブとStylingタブを使用してさらにカスタマイズできます。バリアントをレイアウトにドラッグして、ニーズに合わせてどのように設定できるかを確認してください。

画像エレメントの設定方法

PageFlyの画像エレメントには、GeneralタブとStylingタブで、可能な限り最高のコンバージョン率を実現するためにその外観を微調整するのに役立つさまざまな設定が用意されています。設定方法は以下のとおりです。

General設定

画像エレメントを選択し、Generalタブに移動すると、以下の設定が表示されます。

画像を選択 (Select Image)：追加する画像を選択します。

Shopifyの無料画像を選択して使用するには、「無料画像を探す (Explore free images)」をクリックします。 - 無料ソースから画像を選択すると、画像はShopify コンテンツ > ファイル (Shopify Content > Files)に保存されます。 - PageFlyエディターページで画像を削除しても、画像は保存され、ライブラリで通常どおり再度選択できます。

選択した画像は、Shopify > ファイル (Files) で確認できます。

「画像を追加 (Add images)」ボタンをクリックして、デバイスから画像をアップロードします。

「URLから追加 (Add from URL)」をクリックして、インターネット上の画像URLを使用します。

「メディアファイルへ移動 (Go to media files)」ボタンをクリックして、メディアマネージャーから画像を選択します。

画像の選択を終えたら、「完了 (Done)」をクリックします。

代替テキストとタイトルテキスト (Alt Text and Title Text)：これらのテキストは、SEOとアクセシビリティの向上に役立ちます。 - 検索エンジンやスクリーンリーダーのために代替テキストを追加します。 - 追加のコンテキストのためにタイトルテキストを追加します。

画像品質 (Image quality)：すべてのデバイスで画像品質をカスタマイズし、パフォーマンスを最適化するのに役立つさまざまな値を提供します。各値は、事前定義された最小幅と最大幅の値に基づいて画像の寸法を調整します。 - 自動 (Auto) (375px - 2048px) - 元画像 (Original) (元のサイズ)：元の品質を維持します。 - サムネイル (Thumbnail)：375px - 低 (Low) (375px - 550px) - 中 (Medium) (375px-1280px) - 高 (High) (375px-1920px) - 非常に高い (Very high) (375px-2560px) - ウルトラ (Ultra) (375px-3840px)

全幅を有効にする (Enable Full Width)：これを有効にすると、画像がコンテナー（例：列）の幅に収まるようになります。

画像幅 (Image Width)：画像の幅をカスタマイズします。この設定は、「全幅を有効にする」が無効になっている場合に利用可能です。

画像比率 (Image Ratio)：画像の形状とサイズを決定します。

以下の3つのタイプから選択できます。

元画像 (Original)：画像は元のサイズで表示されます。
正方形 (Square)：画像は正方形で表示されます。

カスタム (Custom)：画像の高さを好みに合わせて調整します。

画像高さ (Image Height)：画像の高さを調整します。この設定は、画像比率が「カスタム」に設定されている場合に利用可能です。

画像オブジェクトフィット (Image Object Fit)：画像がコンテナー内にどのように収まるかを制御します。正方形およびカスタムタイプでは、画像のサイズを変更してコンテナーに収めることができます。

カバー (Cover)：画像が引き伸ばされてコンテナー全体を埋めます。
コンテイン (Contain)：画像は引き伸ばされずにコンテナー内に収まります。

画像位置 (Image Position)：コンテナー内（正方形およびカスタムの画像比率タイプ）で画像を配置します。

画像読み込み (Image loading)：画像の読み込み方法とタイミングを最適化します。

遅延読み込み (Lazy Loading)：画像はビューポートに表示されたときにのみ読み込まれ、PageSpeedが向上します。
プリロード (Preload)：ページ読み込み時に画像がすぐに読み込まれ、LCP（Largest Contentful Paint）が向上します。
標準 (Standard)：読み込み時間とユーザーエクスペリエンスのバランスを取ります。

ATTRIBUTES、VISIBILITY、ANIMATIONパラメーターに関する詳細については、こちらをご覧ください。

スタイリング設定

画像エレメントを選択し、Stylingタブに切り替えてスタイリングオプションにアクセスします。

画像のグローバルスタイルを選択します。フレームあり/なし、正方形、円形など、6つのバリアントから選択できます。

Stylingタブの詳細については、このリンクを参照してください。

この動画チュートリアルで提供されている指示に従うことで、PageFlyページで見事なレイアウトを作成するために画像を利用できます。

一般的なケース

全てのデバイスで同じ画像を使用する

すべてのデバイスで同じ画像を表示したい場合は、画像エレメントを使用します。デバイスごとに異なる画像を表示したい場合は、代わりに**背景画像 (Background image)**エレメントを使用します。

デバイスごとに画像を表示するために「非表示」を使用する

さまざまなデバイスで異なる画像を表示する必要がある場合は、以下の手順に従ってください。

画像を追加: 全デバイス表示で、異なるデバイスに表示したい画像を追加します。
表示設定: 各画像を選択し、Generalタブに移動してVISIBILITYパラメーターを見つけます。
表示を調整: 特定のデバイスで画像を表示するには、他のデバイスでは非表示にします。これにより、各デバイスで異なる画像が表示されます。

以下の図を参照してください。

よくある質問

1. 200ワードに画像は何枚含めるべきですか？

3〜4枚の画像を含めるのが理想的です。これにより、バランスの取れた表示が可能になり、読者を圧倒することなく、各画像が十分な注目を集めることができます。

2. PageFlyで使用する画像を最適化するには？

PageFlyで使用する画像を最適化するには、ファイルサイズを1MB未満に保つことをお勧めします。これにより、ページ読み込み時間が短縮され、よりスムーズなユーザーエクスペリエンスが保証されます。画像をPageFlyエディターページで直接最適化できるようになりました。画像を選択 > Generalタブに移動 > 「最適化 (Optimize)」をクリックすると、画像は自動的に最適化されます。