# 画像 ### 画像エレメントについて PageFlyの[画像エレメント](https://help.pagefly.io/manual/image-element/)は、ストアページに画像を簡単に追加してカスタマイズできる強力なツールです。JPG、PNG、GIFなど、さまざまな画像形式に対応しており、商品を魅力的に見せたり、ページのデザインを強化したりするのに役立ちます。 このガイドでは、PageFlyで画像エレメントを効果的に使用するための手順を説明します。画像エレメントと背景画像の違いについて疑問がある場合は、以下の動画チュートリアルをご確認ください。 {% embed url="" %} ### 画像エレメントへのアクセス方法 PageFlyで**画像エレメント**にアクセスするには、以下の簡単な手順に従ってください。 * ステップ1：左側のメニューにある「**エレメント**」ボタンをクリックし、PageFlyタブに注意してください。 * ステップ2：ドロップダウンメニューから「**画像**」エレメントを選択します。これはメディアカテゴリの下にあります。 * ステップ3：目的のバリアントをページキャンバスにドラッグアンドドロップして使用を開始します。 ![](/files/nHzKju9mqnTre5vANQEn) 画像エレメントでは、「**元画像比率 (Original Image Ratio)**」と「**正方形比率 (Square Image Ratio)**」の2種類のバリアントを選択できます。 ![](/files/9U53p20p0zVG9FIAJKHJ) 画像エレメントのデザインオプションは当初1つだけですが、GeneralタブとStylingタブを使用してさらにカスタマイズできます。バリアントをレイアウトにドラッグして、ニーズに合わせてどのように設定できるかを確認してください。 ### 画像エレメントの設定方法 PageFlyの画像エレメントには、GeneralタブとStylingタブで、可能な限り最高のコンバージョン率を実現するためにその外観を微調整するのに役立つさまざまな設定が用意されています。設定方法は以下のとおりです。 #### General設定 画像エレメントを選択し、**General**タブに移動すると、以下の設定が表示されます。 ![](/files/AFvZGNSekEeMYvgrKq44) | | | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **画像を選択 (Select Image)**：追加する画像を選択します。 |



新しい画像を追加するための複数のオプションがあります。

| |


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

| ![](/files/xS2o4LBTwAh6cUZRiKQj) | | 選択した画像は、Shopify > ファイル (Files) で確認できます。 | ![](/files/ocUcT3Vt2JV0c1eiLC4T) | | 「**画像を追加 (Add images)**」ボタンをクリックして、デバイスから画像をアップロードします。 | ![](/files/QMlvR5qTTc0jSwcr2Pi4) | | 「**URLから追加 (Add from URL)**」をクリックして、インターネット上の画像URLを使用します。 | ![](/files/W9YK4SY1X39Bd9VgDFbJ) | | 「**メディアファイルへ移動 (Go to media files)**」ボタンをクリックして、メディアマネージャーから画像を選択します。 | ![](/files/76N7s6Ktv5YFR4Suci6H) | | 画像の選択を終えたら、「**完了 (Done)**」をクリックします。 | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXeYJS3p2cniBMs4DkjdGd7ZbqWVCqSoi4Wrqni35Qg8v6YbBTy2hGVTUjSi3pLLbvFsGWrsu4zMOj0w_SYkevpw8QS6YbBTy2hGVTUjSi3pLLbvFsGWrsu4zMOj0w_SYkevpw8QS6Kp2-fuTR9d0wrH8qUP48PeXW0OVqVJZswGEJMriTQDsDi_zKbGW92uwoXQkeyEMBbOfB9b6qTCV-PFqIzVQ.png) | | **TinyIMGで画像を最適化 (Optimize image with TinyIMG)** Generalタブに最適化機能があります。クリックするだけで、画像は自動的に最適化されます。詳細については、[こちら](https://help.pagefly.io/manual/how-to-optimize-images-with-tinyimg-in-the-pagefly-editor/)をご覧ください。 | ![](/files/iVkLyn5o06JnNFmxW2N5) | |

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

| ![](/files/qZDoQSajm2ztVviHGzmu) | |

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

| ![](/files/Q3PgWF3SPTVd1aLyIuRf) | | **全幅を有効にする (Enable Full Width)**：これを有効にすると、画像がコンテナー（例：列）の幅に収まるようになります。 | ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXe21xbTx-qTTukFYiTwP9t_gnDL7UY7wokBRTnqUMOzahaP-yjMcYHb7NEVyGAZJS3T-aKc4V1oooHTeJC_KwrpuFhyB_FS_KkZ6zwls87-4WGvgwcMYrJtPgLijBonvy0nSJSutl4STXUNP-mdS4yea49M?key=EMBbOfB9b6qTCV-PFqIzVQ) | | 画像幅 (Image Width)：画像の幅をカスタマイズします。この設定は、「全幅を有効にする」が無効になっている場合に利用可能です。 | ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdace-9vynIz4uURT3v8l3JhvX4NvLNdqeL6j0GtVp2OEZxRvxtvJCZP9w-_QcJnyLbUIpuVTSM5YFt346b74cJ8E0gFtvfiNsXAi_UqpnSBFSTsKZhFwxbYgclar4xwdHUURUnBTxXAN4OuCa6Zx_4JipX?key=EMBbOfB9b6qTCV-PFqIzVQ) | |

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

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

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

| ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXeB2DgvUgAqWH6a4VAPN6Y78ZbgLCOC7mzQzCcrf-ktGTRop7YQnwmDztyBSZF7eGw4eCbFr2kYONk0J0736K-gNqL3BCcRqvNSYeFrR8Um_CVQZQa1d2hr9L5d_NbSPmFYS8C_KvxMPPzrixLj5kfuXo2-?key=EMBbOfB9b6qTCV-PFqIzVQ) | | 画像高さ (Image Height)：画像の高さを調整します。この設定は、画像比率が「カスタム」に設定されている場合に利用可能です。 | ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXcJJUXhYnhXRp-qIjZAgAfIrPmmBXOxodLytdxfVzz2jebP_oIWHfp57z5C1mMENre6xHBzKLUeqXVeVMj9FkLriH6Pr_XzWj5Sr88ur1WF3UcFnKG3vqK70ytDK3KCH4Y2Azr9kkObqq1GeDPxpsl9SHg-?key=EMBbOfB9b6qTCV-PFqIzVQ) | |

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

| ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXeV54lYvEmS3I2z7xhyF8PiN_Le1xm6cotWp85allbG95OBuiNKKrG8oD_IlD_tLrZj4BuFk77s1bPOM-ylSV6uWGKG6-zdPTXJOqRSu44C2fG0FtcXMLtN7LfS_lyXR_d1-x8qtp96AwEUrP5R4qykZpZX?key=EMBbOfB9b6qTCV-PFqIzVQ) | | 画像位置 (Image Position)：コンテナー内（正方形およびカスタムの画像比率タイプ）で画像を配置します。 | ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXf3rwrhZI80l-cPqsTS_EmMF9SSrBHN1uGmF3I5LGwewFsINqR2HFVYHLme6vttHBtGsvkYRkF94qfPUWI4N4g02tmc4RIEmP8c_BygcNhTZzKSqyqESJX9DvbqSi9VxPxE6_Z3XlTp3uhG_7Jv1w9RSmiz?key=EMBbOfB9b6qTCV-PFqIzVQ) | |

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

| ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXecchWWtMzJHRHQjsd6f4DWdm60FNLfZcn4FEri-hFWZBzY_wZGPbBAYUdS-9BPxGiEU2LVcFle-msvRpzq6Lplzr9qX6yY_KTnwyrdtvte1QJKlBmB0ryZUYHF_I4tZvrooYq5Y-4_39zBmbWb_5AM2UKK?key=EMBbOfB9b6qTCV-PFqIzVQ) | ![](/files/jrXVARFQG9nsMaSH57p3) | ATTRIBUTES、VISIBILITY、ANIMATIONパラメーターに関する詳細については、[こちら](https://help.pagefly.io/manual/elements-general-settings/)をご覧ください。 #### スタイリング設定 画像エレメントを選択し、Stylingタブに切り替えてスタイリングオプションにアクセスします。 * 画像のグローバルスタイルを選択します。フレームあり/なし、正方形、円形など、6つのバリアントから選択できます。 ![](/files/YMlTfkRS9tlcAWon0HjM) * Stylingタブの詳細については、この[リンク](https://help.pagefly.io/manual/elements-style-settings/)を参照してください。 この動画チュートリアルで提供されている指示に従うことで、PageFlyページで見事なレイアウトを作成するために画像を利用できます。 {% embed url="" %} ### 一般的なケース #### 全てのデバイスで同じ画像を使用する すべてのデバイスで同じ画像を表示したい場合は、画像エレメントを使用します。デバイスごとに異なる画像を表示したい場合は、代わりに\*\*背景画像 (Background image)\*\*エレメントを使用します。 #### デバイスごとに画像を表示するために「非表示」を使用する さまざまなデバイスで異なる画像を表示する必要がある場合は、以下の手順に従ってください。 1. **画像を追加**: 全デバイス表示で、異なるデバイスに表示したい画像を追加します。 2. **表示設定**: 各画像を選択し、Generalタブに移動してVISIBILITYパラメーターを見つけます。 3. **表示を調整**: 特定のデバイスで画像を表示するには、他のデバイスでは非表示にします。これにより、各デバイスで異なる画像が表示されます。 以下の図を参照してください。 ![](/files/dvn8iVQkDLpMpD9X4sm2) ### よくある質問 **1. 200ワードに画像は何枚含めるべきですか？** 3〜4枚の画像を含めるのが理想的です。これにより、バランスの取れた表示が可能になり、読者を圧倒することなく、各画像が十分な注目を集めることができます。 **2. PageFlyで使用する画像を最適化するには？** PageFlyで使用する画像を最適化するには、ファイルサイズを1MB未満に保つことをお勧めします。これにより、ページ読み込み時間が短縮され、よりスムーズなユーザーエクスペリエンスが保証されます。画像をPageFlyエディターページで直接最適化できるようになりました。画像を選択 > Generalタブに移動 > 「**最適化 (Optimize)**」をクリックすると、画像は自動的に最適化されます。 ### バージョンアップデート PageFlyバージョン4.15のリリースにより、メディアマネージャーが強化され、より優れた体験を提供できるようになりました。主な機能は以下のとおりです。 * Shopifyの無料画像ライブラリへのアクセスにより、最適な画像を見つけるための広範な検索が不要になります。 * アップロードしたメディアの管理を効率化し、すべての画像と動画を1か所で簡単に整理および追跡できます。 * よりユーザーフレンドリーなモーダルインターフェースによる最適化された画像選択プロセスにより、よりスムーズで効率的なワークフローが保証されます。 ![](/files/3SwOtCU3HDKcg5Wopi8P) ### 追加リソース * [PageFlyエレメントのスタイリング | 効果的な編集のための究極ガイド](https://help.pagefly.io/manual/elements-style-settings/) * [画像とテキストでセクションを作成する方法](https://help.pagefly.io/manual/create-a-section-with-image-and-text/) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.pagefly.io/pagefly-help-center-japanese/pjito/pagefly-elements/media/image-element.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.