# コレクション画像 ### Shopify コレクション画像要素について [Shopify コレクション画像](https://help.pagefly.io/manual/shopify-elements-collection-image/)要素は、ページの Shopify コレクションの画像を表示し、顧客がより多くの商品リストを探索するように促し、コンバージョン率を高めるために設計されています。コレクション画像要素は、PageFly のあらゆるページとセクションで使用できます。 詳細については、こちらのビデオチュートリアルを参照してください。 {% embed url="" %} ### コレクション画像要素へのアクセス方法 * **ステップ1**: 左メニューの要素アイコンをクリックします * **ステップ2**: Shopify タブに切り替えます * **ステップ3**: ドロップダウンメニューのコレクション画像要素をクリックします * **ステップ4**: 要素をページエディタにドラッグアンドドロップして使用を開始します コレクション画像要素には一般的なバリエーションが1つありますが、今後も時間を節約できるバリエーションを追加していきます。 この要素は、サイドバーで探す代わりに検索機能を使用して検索できることに注意してください。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXckW7KL7X9MJRzw-C6mCkJnljxVkQw_fL_Ku81jvhCr7TUCE7cC6-2JA5JXrYUDzYW4DW8EC6NBEQJEp8KKCFCP4xP-McATpjqdCXujbWb7oyIxb71PzYYS12PPzWZJW6bVBEPModrMFU4wgsy7tQkeyNjzE6PgJOYdCTdAWxPI88Q.gif) ### コレクション画像要素の設定方法 コレクション画像要素には、コンバージョン率を最高にするためにコンテンツの外観を微調整できる多数のパラメータが付属しています。 レイアウトで要素を選択すると、そのパラメータが表示されます。 この要素をエディタページにドラッグアンドドロップすると、コレクションソースの選択肢が2つあります。 * **自動**: このオプションは、[コレクションページ](https://help.pagefly.io/manual/add-more-content-to-my-shopify-collection-page/)にいる場合、またはこの要素がコレクションリストやコレクション詳細に追加されている場合に自動的に適用されます。 * **カスタムコレクション**: このオプションは、コレクションページ以外のページタイプ、または要素が単独で使用されている場合に利用できます。この場合、画像を表示したいコレクションを手動で選択する必要があります。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-f3bc4d0aeac24b1cf0293a5a506ce802f3da5f52%2FAD_4nXc82BHLH4hA8OG6L2FaJ4Sk8aivphzQ0Af9zw2XuXj-WEZ3KgecbpHR4dLgKiUfhRVmWZtHayE6vYSbjf-KoybZ7T52d6YrD79FldNDjs9_cxWWNoRYnR6Els6woydE6kTv0KPxiLvHQpc0SHxv0wkeyNjzE6PgJOYdCTdAWxPI88Q.png?alt=media) カスタムコレクションを選択し、希望のコレクションを選択できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-c84c6b2132458f29ef29c838ef0f7a865b8ac2e1%2FAD_4nXcKL6lTaEpPtxERgvTjgLoxWANYLQjS7Ir9WNfOGpZYgS_XvEUBF7zb9a37IkiYJ72bvm0SLCekL07GToGyYzB_OA9DAXMZkwEYIFbwymeAkPwh2s87QEqq9Pfcwyr8M7YtR0QM6RnEE_KZDFA-xwkeyNjzE6PgJOYdCTdAWxPI88Q.gif?alt=media) 選択されたコレクションの画像が対応して表示されます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfbxKx6GG2FTxn29Ymaag83TCfGHxxzfUcgXfkqLvZYhgFLvbK_XDHZptFBLMjESjDI3W9ghnOkRYr9qrZXZXHa2BKRo9ZLIjJN0OZO5yxmUpaVZ_nZUJjaouC4f7aPPHPCFuxpcy-36p0DFUijdc4QkeyNjzE6PgJOYdCTdAWxPI88Q.png) #### 一般タブ | **フル幅を有効にする** 画像をコンテナ（例：カラム）の幅に合わせます。 | ![enable full width in Shopify collection image](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-7af4d0c94e42216954e772f96476f6ed33f3819d%2FAD_4nXdyU9Zg6STHFenvBzlK2OjU2cdJoQUrAMCujXBtU4pRc0innGNKUymPoebtboJFGwY3_qT149dzIAmF8pydjuj0RXVI9QL6kLOMr8Ac9b326CQXErgYTJpDhy6sQ6ZYoQjzP1wh818KUuHnbRjOEAkeyNjzE6PgJOYdCTdAWxPI88Q.gif?alt=media) | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **画像幅** フル幅を無効にしている場合に、画像幅を調整できます。 | ![image width Shopify collection image](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-bff5c98a04bfabb995f141aa1cdc189ed192d837%2FAD_4nXdd7bTYdSjUycJFwxYozqzzSKzlE51_6yLgEQ6Ou14agKnGpCUJ8HhwKOmKEMMCiGU3DFFlM1EviWOqoeW05dofAHaDq9loHBmT_m4F3Zt2cfP59bXxbdY-4iK21TPbi-AJC7gs1y0QmzZtAYIElQkeyNjzE6PgJOYdCTdAWxPI88Q.gif?alt=media) | |

画像比率 選択できるタイプは3つあります。

- オリジナル: 画像が元のサイズで表示されます

- 正方形: 画像が正方形で表示されます

- カスタム: 画像の高さを調整できます

| ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-e8cd232050b17ceb4462ec1855d7d5e88c539f76%2FAD_4nXeolNP8utkMNFyf0A6iBVVXaPzU45mSCs3a3qdIAW7_9GUAF3YoGWWoXf0LuM7f1AR5IBcx7zz_0t4nhE0dtLkertwjNL4CoT5ehFYYJPfHSlvZlhh4h4zmdgwU-pP55K-zkr2BHJdyEL9KmR15lwkeyNjzE6PgJOYdCTdAWxPI88Q.gif?alt=media) | | **画像高さ** カスタム画像比率を選択した場合のみ利用可能です。 | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-61d1a92aab617d2ff7e1e2367f75048c92c29f8b%2FAD_4nXcqooZuUx0nS1bzMofov1cZBUttlfEWm_MEyMzJ8UNtIRoQqSRlNHrNMD4qU8XykonUOvmWJpnUkZRTHUofL1l3wWADhS52LBAVbRO1idfP00h0anVrldAzqqt70TlxAs5f3ImKizcXGzHu2yd-QkeyNjzE6PgJOYdCTdAWxPI88Q.gif?alt=media) | |

画像オブジェクトフィット 正方形およびカスタムタイプの画像比率では、画像をコンテナに合わせてサイズ変更できます。

- カバー: 画像がコンテナに合わせて伸縮します

- コンテイン: 画像がコンテナ内に収まるように縮小されます

| ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-518e01fb7022accfca4ba597ccf0096b54128d41%2FAD_4nXeKNjT3cMQTP9YgIVG2ncXD3hweEiWXjNpRgre8r-cJKfuKbjPBNJLL0MCzwj4lQPnn9m5R10kParo-SNoD_b3gXbT-Dy-MCDsQu0-HJBQst5cSyxHy-ty6xOg7N-Dp4lQTCZHM6pqdIVvgvkJVvAkeyNjzE6PgJOYdCTdAWxPI88Q.gif?alt=media) | | **画像位置** 正方形およびカスタムタイプの画像比率では、コンテナ内の画像の特定の位置を選択できます。 | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1e3b14605419778818598ef401470917b8386045%2FAD_4nXcoeRCJssMpiNEliUMnhEpQaGzDKoJx2RHC0uOax8OSclfT44QHz8GO_cA8TGkHnEXTZnkUTCNJuwDkWFaA89Exf0PcZ0z5KETBhfFaXJ7fjkNJCFhYVUmrmaZVwvvGKyZwT-PHhGhS-pJe6YUhkeyNjzE6PgJOYdCTdAWxPI88Q.gif?alt=media) | |

画像読み込み 画像読み込みには3つのオプションがあります。

- 遅延読み込み (Lazy load): スクロールしてビューに入った時のみ画像を読み込み、ページ速度を向上させます

- 即時読み込み (Eager): 画像の読み込みを事前に開始するためにキューに入れます

- 標準 (Standard): 通常の画像読み込み

| ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-51ade31c19986b239bcc19ec618220014d5ffa0b%2FAD_4nXdTEXeCF3mgStrQTsGqCdybG59rpwr5oIxUDO1u01E48671cl1r-rXojmj-V05eCUenuUuTI5na1ug3QSFvIF-ytjx8Tyx-YylPNMQxc5CAIR8Ph1Eu33xMfwPMUqp7UhguKbSPgf-AsyLU6hhZfwkeyNjzE6PgJOYdCTdAWxPI88Q.png?alt=media) | | **コレクションへのリンク** ユーザーがクリックした際に画像を対応するコレクションページにリンクしたい場合は、このオプションを有効にします。 | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a9198d874540270d47b2c2b19d501b64e1251906%2FAD_4nXdp46lL_xYPE51h1-Fc81fhmBUy-zig6gmT7mYvm98x4C87rR1I8dqyQlF1s8v47HPZPlE3a6nJ4yFxDoyrR6Lkei-xteEXllNr3dIx9BaXLF1T07yJHtv1t7zK0b0douJN73IAKUPhIqBsa0jlaQkeyNjzE6PgJOYdCTdAWxPI88Q.png?alt=media) | **属性 (ATTRIBUTES)、表示設定 (VISIBILITY)、アニメーション (ANIMATION)** パラメータに関する詳細については、[こちら](https://help.pagefly.io/manual/elements-general-settings/)を参照してください。 #### スタイルタブ スタイルタブに関する詳細は、[この記事](https://help.pagefly.io/manual/elements-style-settings/)で確認できます。 ### よくあるケース #### コレクションに表示される画像の変更 Shopify でコレクションの表示画像を修正または新しい画像をアップロードするには： 1. Shopify 管理画面のダッシュボードに移動し、次に「商品」>「コレクション」に進みます。 2. 画像を更新したいコレクションを選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-031f07f08d0c9c2ddfe42a0c4cfccdff607c49e0%2FAD_4nXcI2_yNjONBVZN0ECkrHOAs9VTENWOosyFGqQ2GNVj1RvugmN08bBgbYh21ni-dywcVvvr6Y1pLCbb4jjlazz8LqUCc-yugdti9NLU8Fu7q00xz-YJdC5yOgR23SHdfmCiRxsNkcJoSJ6msisxAEgkeyNjzE6PgJOYdCTdAWxPI88Q.gif?alt=media) 3. コレクションの設定内で、「画像」セクションを探します。 4. 画像を変更するには、「**編集**」ボタンをクリックします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-08b50cecf74b195ae2e572362f25f32883294310%2FAD_4nXdlEApQa8Z4zSnGgBiBsDjOMRxq76Yu81RKVBeKJbDoQmwdBecgymTXgYX1cgo3B-h_niXPdOIqblM9XhSG2GSIyukZeZkfat7ICuBxrWWtFhPP_SIPor47Ghkt9-gKLaHSIOnBPskR6PsB26AvWwkeyNjzE6PgJOYdCTdAWxPI88Q.gif?alt=media) ### ヒントとベストプラクティス * コレクションを効果的に表現するために、高品質で視覚的に魅力的な画像を使用してください。 * 画像が関連性があり、各コレクション内の商品を正確に描写していることを確認してください。 * 十分な品質を維持しながら、ページ読み込み時間を短縮するために、画像ファイルサイズを最適化してください。 * 顧客にとってより魅力的で共感を呼ぶ体験を提供するために、ライフスタイル画像や使用中の商品の画像の使用を検討してください。 * ストアを新鮮で魅力的に保つために、コレクション画像を定期的に更新してください。 ### よくある質問 **1. コレクション画像要素を商品ページで使用できますか？** はい、コレクション画像要素を商品ページやあらゆるページタイプで使用して、関連するコレクションを紹介し、商品カタログのさらなる探索を促進できます。 **2. 複数のコレクション画像を並べて表示できますか？** はい、コレクション画像要素をページに複数追加し、ページビルダーのレイアウトオプションを使用して並べて配置できます。 **3. アップロードできる画像の最大サイズはいくつですか？** Shopify での画像の最大ファイルサイズは 20MB です。 **4. コレクション画像をコレクションページではなく、カスタムURLにリンクできますか？** いいえ、コレクション画像を対応するコレクションページにのみリンクできます。 ### その他のリソース * [PageFlyでコレクションリストを使用する方法](https://help.pagefly.io/manual/shopify-elements-collection-list/) * [PageFlyページにShopifyコレクション詳細を追加する方法](https://help.pagefly.io/manual/shopify-elements-collection-details/)