LogoLogo
Back to PageFly.ioVideo Tutorials
Japanese 🇯🇵
Japanese 🇯🇵
  • PageFlyヘルプセンター
  • はじめに
    • 概要
    • クイックスタート
      • PageFlyのインストール方法
      • PageFlyの使用方法 | 5分で始める
      • PageFlyテンプレートから新しいページを作成する方法
      • PageFly LiveChatにアクセスする方法
      • PageFlyはShopifyテーマとどのように連携しますか?
    • 価格と請求
      • 概要
      • PageFlyの料金プラン
      • PageFlyの請求の仕組み
      • PageFlyをアンインストールするとどうなりますか?
      • PageFlyの返金ポリシー
  • ページとセクションの作成
    • 概要
    • 一般
      • PageFlyページのセットアップ
      • PageFlyがサポートするページの種類
      • PageFlyのページとセクションを使用する方法
      • PageFlyのページとセクションをエクスポート・インポートする方法
    • ページ
      • PageFlyでホームページを作成する方法
      • PageFlyで商品ページを作成する方法
      • PageFlyでコレクションページを作成する方法
      • PageFlyでブログ記事ページを作成する方法
      • PageFlyでパスワード保護ページを作成する方法
      • PageFlyでよくある質問(FAQ)ページを作成する方法
      • PageFlyで公開予定ページを作成する方法
      • PageFlyで会社概要ページを作成する方法
      • PageFlyでお問い合わせページを作成する方法
      • PageFlyでランディングページを作成する方法
      • PageFlyでA/Bテストページを作成する方法
    • セクション
      • プリメイドセクションと保存済みセクションを使用してページを作成する方法
      • 画像とテキストを含む基本セクションを作成する方法
      • PageFlyセクションでパララックス効果を使用する方法
      • PageFlyで全幅セクションを作成する方法
      • PageFlyでコードなしで固定セクションを作成する方法
  • ページ構造と要素
    • 概要
    • エディター
      • ユーザーインターフェース
        • PageFlyエディターでの作業方法
        • PageFlyをモバイルで使用する方法
        • ページエディター – 要素インスペクター
        • ページエディター - 全般タブ
        • ページエディター - スタイルタブ
        • ページ構成を使用してページレイアウトを整理する方法
        • 魅力的なモバイルレスポンシブページを作成する方法
        • 自動保存とバージョン履歴を使用する方法
      • 追加機能
        • 商品バリエーションのカスタムオプションスウォッチを管理する方法
        • グローバルスタイルを使用して、すべてのPageFlyページで使用するスタイルをカスタマイズする方法
        • ゴミ箱を使用して、削除されたページ、セクション、メディアファイルを管理する方法
        • PageFlyにカスタムフォントを追加する方法
        • PageFlyで画像と動画を管理する方法
    • PageFly要素
      • ユニバーサル要素
      • コンテナ
        • レイアウト
        • スライドショー
        • タブ
        • アコーディオン
        • コンテンツリスト
      • 基本
        • 見出し
        • 段落
        • ボタン
        • リスト
        • アイコン
        • 区切り線
        • HTML/Liquid
      • メディア
        • 画像
        • Youtube動画
        • Vimeo動画
        • HTML動画
        • Soundcloud
      • ソーシャル
        • Instagramフィード
        • Facebook「いいね!」とシェア
        • Facebookフィード
        • Twitterフィード
      • 詳細
        • QRコード
        • テーブル
        • カウントダウン
        • Googleマップ
        • プログレスバー
        • Mailchimpフォーム
    • Shopify要素
      • カスタムコンテンツ
        • アプリブロック
      • 商品
        • 商品バリエーションメタフィールド
        • 商品リスト
        • 商品詳細
        • 商品メディア
        • 商品タイトル
        • 商品ベンダー
        • 商品価格
        • 商品詳細説明
        • 商品バリエーション
        • 商品数量
        • 商品カートに追加
        • 商品詳細を見る
        • 商品メタフィールド
        • 動的チェックアウトボタン
      • コレクション
        • コレクションタイトル
        • コレクション画像
        • コレクションリスト
        • コレクション詳細を見る
        • コレクション詳細
        • コレクション説明
      • フォーム
        • 顧客フォーム
        • 顧客フォームフィールド
        • 顧客フォームボタン
        • お問い合わせフォーム
        • お問い合わせフォームフィールド
        • お問い合わせフォームボタン
        • 検索フォーム
      • ブログ記事
        • ブログ記事リスト
        • ブログ記事詳細
        • ブログ記事画像
        • ブログ記事タイトル
        • ブログ記事内容
        • ブログ記事メタデータ
    • 最適化
      • カスタムコードエディターを使用してページをカスタマイズする方法
      • ページ分析
      • Shopifyストアの速度を上げる方法
      • Facebookピクセルを設定して、ウェブサイト上でのユーザーアクションを理解する方法
      • PageFlyページをShopifyメニューナビゲーションに公開する方法
      • PageFlyページでZakeke Product Customizerを使用する方法
      • Langifyを使用してページを翻訳する方法
      • Weglotを使用してページを翻訳する方法
      • T Labを使用してPageFlyのページを翻訳する方法
      • PageFlyでのJSONテンプレート
      • PageFlyエディターでTinyIMGを使用して画像を最適化する方法
      • PageFlyでShoplift A/Bテストを使用する方法
      • PageFlyでSEOAnt:AI SEO & 画像最適化を使用する方法
      • ブラックフライデーセールアイデア
      • PageFly要素でCRO向けページを最適化
      • バレンタインデーのセールを最適化
      • PageFlyでクリスマスセールページを設定する方法 | 2023年ベストガイド
      • フラッシュセールセクションを作成する方法 - 新学期
      • 母の日に向けてストアを最適化: PageFlyでギフトガイドを作成
    • 主なユースケース
      • ページ上の要素を整列
      • リンク、セクション、ポップアップへの直接リンク
      • スペーシング、マージン、パディングの編集
      • Flex機能
      • ページへのファイルアップロード
  • 連携機能
    • サードパーティ要素
      • 連携されたサードパーティShopifyアプリをページで使用するためにアクティベートする方法
      • PageFlyと連携するアプリは何ですか?
      • レビューと評価
      • アップセルとクロスセル
      • バッジとシール
      • 予約システム
      • 配送と受け取り
      • サブスクリプション
      • 注文追跡
      • ファイルアップロードフィールド
      • メールマーケティング
      • 商品情報
      • プッシュ通知
      • リファーラルとアフィリエイトマーケティング
      • 画像とメディア
      • ロイヤリティとリワード
      • 持続可能性
      • ギフト
      • 国際化
      • 広告
      • サポート
      • SMSマーケティング
  • FAQとトラブルシューティング
    • 概要
    • FAQ
      • PageFly使用時のShopifyテーマに関する問題
      • GDPRへの準拠方法
      • 私のページのURLアドレス
      • PageFlyページエディター - FAQ
      • 要素 - FAQ
    • トラブルシューティング
      • ライブサイトの問題
        • カートドロワーが自動的に更新されない
        • モバイルレスポンシブの横スクロール問題
        • YouTube、HTML動画の自動再生問題
        • テーマプレビューモードでページが完全に表示されない
        • ロケールファイルを作成できない
        • theme.pagefly.liquidを作成できない
        • Shopifyのデフォルト商品詳細を非表示にする方法
        • PageFlyページリストのロードが終わらない
        • ページ上部の空白スペースを削除する
        • ブログページが正常に更新されない
        • ページのスタイルが崩れている
      • エラーメッセージ
        • PageFlyページリストのロードが終わらない
        • ページサイズ制限
        • ページ上の要素数制限
        • データをインポートできません
        • 画像サイズ制限
        • 不明なエラー
  • 最新アップデート
    • PageFlyがOnline Store 2.0に対応しました
    • PageFlyリファーラルプログラム
    • PageFly旧料金プラン
  • PageFlyアフィリエイトプログラム
    • アフィリエイトサクセス:PageFlyがマーチャントのためにできること
    • アフィリエイトサクセス:DOs & DON'Ts - PageFlyアフィリエイトとして成功するために知っておくべきすべて
    • アフィリエイトサクセス:よくある質問
Powered by GitBook
LogoLogo

製品

  • テンプレート
  • 価格
  • ハッピー顧客

リソース

  • ブログ
  • アカデミー
  • ビデオチュートリアル
  • コミュニティ
  • フィードバック

パートナー

  • 私たちのパートナー
  • アフィリエイトプログラム

会社

  • 私たちについて
  • キャリア
  • プライバシーポリシー
  • 利用規約

Copyright © 2025 PageFly. All rights reserved.

On this page
  • 商品メディア要素について
  • 商品メディア要素へのアクセス方法
  • 商品メディア要素の構成方法
  • レガシーエディター - 商品メディアのメインメディアサブ要素の構成方法
  • Gen 2エディター - 商品メディアのメインメディアサブ要素の構成方法
  • 商品メディアのメディアリストサブ要素の構成方法
  • 商品メディアのメディアリストアイテムサブ要素の構成方法
  • よくあるケース
  • ヒントと実践
  • よくある質問
  • 追加リソース

Was this helpful?

Edit on GitHub
  1. ページ構造と要素
  2. Shopify要素
  3. 商品

商品メディア

Last updated 3 days ago

Was this helpful?

商品メディア要素について

概要:要素は、お客様のShopify商品をページに表示するために設計されています。商品メディア要素を使用して、画像、動画、3Dモデルでお客様の商品をアピールできます。

以下の動画チュートリアルで詳細を確認できます。

商品メディアは、メインメディアとメディアリストの2つのサブ要素で構成されています。各サブ要素にアクセスし、構成する方法については、以下のセクションをご覧ください。

  • メインメディア

  • メディアリスト

商品メディア要素へのアクセス方法

  • ステップ1: エディターの左側サイドバーにある「要素」をクリックします。

  • ステップ2: 「Shopify」タブで、「商品メディア」要素をクリックします。

  • ステップ3: 要素をページエディターにドラッグアンドドロップし、編集を開始します。

検索ボックスで商品メディア要素を検索してアクセスすることもできます。

注: 商品メディア要素は、商品ページ以外のページでも使用できます。商品ページで使用する場合は、商品詳細セクションの中に配置する必要があります。

商品メディア要素には、3つの一般的なバリエーションがあります。商品をより魅力的にアピールするために、商品メディア要素は以下の3つのメディアタイプに対応しています。

  • 画像

  • 3Dモデル

  • 動画

商品メディア要素の構成方法

商品メディア要素をクリックすると、外観を細かく調整するのに役立つさまざまな種類のパラメータが表示されます。

一般設定

一般タブでは、商品メディアを設定するためのすべてのカスタマイズが可能です。

商品ソース

商品メディア要素をエディターページにドラッグアンドドロップすると、「商品ソース」オプションには以下の2つの選択肢があります。

  • Auto(自動):ページ割り当てを通じてこのページに割り当てられた商品が、ページエディターに表示されます。このオプションは、商品ページ、または商品メディア要素が商品詳細要素内に配置されている場合にのみ適用されます。その他の状況では、以下のカスタム商品オプションを選択する必要があります。

  • Custom Product(カスタム商品):カスタム商品を選択し、希望する商品を選択できます。

注: 商品ページにいて商品メディア要素を使用している場合は、「商品ソース」オプションを選択できます。通常ページにいてこの要素を使用している場合、「商品ソース」オプションは無効になり、「カスタム商品」がデフォルトで選択されます。

フル幅を有効にする

フル幅オプションを有効にすると、メディアは画面のフル幅サイズになります。有効にしない場合は、黒い点をドラッグするか、右側のボックスに数値を入力してメディア幅を調整できます。

メインメディアソース

「デフォルトバリアントメディア」がデフォルトで選択されます。

ドロップダウンメニューには他に2つのオプションがあります。

  • Featured Media(特集メディア):Shopify内の商品のメディアセクションにあるメディアを表示します。特集メディアを変更するには、Shopify管理画面で商品の詳細に移動してください。

  • First Variant Media(最初のバリアントメディア):Shopify内で設定した商品の最初のバリアントメディアを表示します。

注: 最初のバリアントメディア機能は、ライブページでのみ動作します。

変更を行う場合は、Shopify管理画面 > 商品をクリック > 全商品を選択 > 編集したい商品を選択します。商品の画像とその並べ替えを追加/変更できます。

メディアリストを表示

メディアリストを表示するには「はい」を選択します。非表示にするには「いいえ」を選択します。

メディアリストの位置

上記の「メディアリストを表示」で「はい」を選択すると、メディアリストの位置オプションが有効になります。

選択できるオプションは4つあります。

  • 上部 (Top)

  • 右 (Right)

  • 下部 (Bottom)

  • 左 (Left)

バッジを表示

商品バッジは、割引や残り在庫を動的に表示します。

商品メディアにバッジを表示したい場合は、「バッジを表示」オプションを有効にします。

バッジをクリックすると、「一般」タブで商品バッジのテキストを編集することもできます。デフォルトの「Discount(割引)」パラメータと「Stock(在庫)」パラメータは、選択された商品のバリアントの値に基づいて計算されます。

さらに、「商品の条件を適用」トグルを使用すると、バッジを表示する前に特定の条件を満たす必要があるかどうかを制御できます。「はい」を選択すると、特定の条件が満たされた場合にのみバッジが表示されるオプションが有効になります。これらの条件は、プレースホルダー {{count}} と {{total}} で定義されるルールの数に基づいています。

  • Belongs to Collection(s)(コレクションに属する):バッジが表示されるために、商品が特定のコレクションに属する必要があるかどうかを選択できます。「すべてのコレクション」を選択すると条件は無視されますが、特定のコレクションを選択すると、それらの商品にバッジ表示が限定されます。

  • Contain Tag(s)(タグを含む):このオプションを使用すると、特定の商品のタグを指定できます。

例えば、Shopifyの商品ページで商品価格を$15に設定し、比較対象価格を20%に設定した場合、デフォルトでは25%の割引が計算され表示されます。デフォルトの在庫は、在庫に残っている商品の数にも基づいています。

加えて、特定の商品のバリアントに対してカスタムの割引と在庫数を入力することも可能です。

バッジの位置

利用可能なオプションに応じて、商品画像の上下左右のいずれかにバッジを配置することを選択できます。

「スタイリング」タブでは、商品バッジの間隔、余白、フォントサイズなどのその他のスタイリング設定が可能です。

注: ラップトップ、タブレット、モバイル表示の場合、ユーザーがメディアの幅、比率、またはメディアリストの表示に関して何も変更していない場合、それは未設定の状態を示し、すべてのデバイスから継承されます。

スタイリング設定

レガシーエディター - 商品メディアのメインメディアサブ要素の構成方法

メインメディアは商品メディアのサブ要素です。商品メディア要素内の最大の商品画像をクリックすることで、メインメディアにアクセスできます。

一般設定

  • ナビゲーションタイプ

ナビゲーションタイプは5種類あります。デスクトップとラップトップでは、一部のオプションはマウスオーバー時にのみ表示されます。

  • ページネーションタイプ

設定できるスタイルは3種類あります。

  • メディアホバーアクション

メディアホバーアクションは、動画、3Dモデル、タブレットやスマートフォンなどのタッチデバイスでは機能しません。

  • メディアクリックアクション

商品メディアをクリックした際に選択できるオプションは3つあります。

None
メディアをクリックしても何も変更したくない場合はこのオプションを選択します

Link to Product

画像を対応する商品にリンクさせたい場合はこのオプションを選択します

Show Media Gallery

メディアをタップ/クリックしてフルスクリーンで表示したい場合はこのオプションを選択します

  • メディア比率

選択できるタイプは3種類あります。

  • Original(オリジナル):メディアは元のサイズで表示されます

  • Square(正方形):メディアは正方形の形状で表示されます

  • Custom(カスタム):メディアの高さを調整できます

Gen 2エディター - 商品メディアのメインメディアサブ要素の構成方法

メインメディアは商品メディアのサブ要素です。商品メディア要素内の最大の商品画像をクリックすることで、メインメディアにアクセスできます。

一般設定

メディア比率

選択できるタイプは3種類あります。

  • Original(オリジナル):メディアは元のサイズで表示されます

  • Square(正方形):メディアは正方形の形状で表示されます

  • Custom(カスタム):メディアの高さを調整できます

メディアオブジェクトフィット

正方形タイプとカスタムタイプでは、メディアをコンテナに合わせてリサイズできます。

Cover
メディアはコンテナに合わせて引き伸ばされます

Contain

メディアはコンテナ内に収まるように縮小されます

注: オリジナルのメディア比率を選択した場合、このオプションは無効になります。

メディアの高さ

メインメディアサブ要素の高さを調整できます。

注: オリジナルおよび正方形のメディア比率を選択した場合、このオプションは無効になります。

メディアの位置

正方形タイプとカスタムタイプでは、コンテナ内のメディアの位置を選択できます。

注: オリジナルのメディア比率を選択した場合、このオプションは無効になります。

画像の読み込み

オプションは3つあります。

  • Lazy loading(遅延読み込み):スクロールして表示された場合にのみ画像を読み込み、ページ速度を向上させます

  • Eager(積極的):画像を事前に読み込みキューに追加します

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

メディアタイプ

メインメディア要素を表示するために、スライドショーまたは単一画像のどちらかに切り替えることができます。

メディアホバーアクション

選択できるオプションは2つあります。

None
商品メディアをホバーしない場合はこのオプションを選択します

Enable Image Magnifier

各商品メディアのメディアリストにホバーすると、それぞれが拡大されます。

メディアホバーアクションは、動画、3Dモデル、タブレットやスマートフォンなどのタッチデバイスでは機能しないことに注意してください。

メディアクリックアクション

商品メディアをクリックした際に選択できるオプションは3つあります。

None
メディアをクリックしても何も変更したくない場合はこのオプションを選択します

Link to Product

画像を対応する商品にリンクさせたい場合はこのオプションを選択します

Show Media Gallery

メディアをタップ/クリックしてフルスクリーンで表示したい場合はこのオプションを選択します。モバイルデバイスでは、ダブルタップで拡大してすべての詳細を確認し、再度ダブルタップで縮小できます。これはメディアギャラリーを開いた場合にのみ機能することに注意してください。

ナビゲーションタイプ

選択できるナビゲーションタイプは5種類あります。

注: ナビゲーション1のスタイルがデフォルトオプションです。

ページネーションタイプ

設定できるスタイルは3種類あります。

スタイリング設定

商品メディアのメディアリストサブ要素の構成方法

メディアリストは商品メディアのサブ要素です。商品メディア要素内で多数の商品画像が表示されているセクションをクリックすることで、メディアリストにアクセスできます。

一般設定

コンテンツメディアリストレイアウト:メディアリストのレイアウトを選択でき、グリッドまたはスライドショーの2つのオプションで表示されます。

グリッド

  • 行ごとのアイテム数:ここに列に表示されるアイテム数を設定できます。最大数は12アイテムです。

  • アイテム間隔:スライダーを調整して、各アイテム間の間隔をカスタマイズします。最大間隔は100pxです。

スライドショー

  • 表示されるアイテム数:列内に表示されるアイテム数をカスタマイズします。最大数は12アイテムです。

  • スクロールするアイテム数:ここにスクロールあたりのアイテム数を調整できます。

  • アイテム間隔:スライダーを調整して、各アイテム間の間隔をカスタマイズします。最大間隔は100pxです。

  • 部分的なアイテムを表示(スライドショーレイアウトのみ):前後のアイテムを部分的に表示したい場合は「はい」をクリックします。

  • ナビゲーションタイプ(スライドショーレイアウトのみ):このオプションは、メディアリストにナビゲーション矢印アイコンを追加します。

スタイリング設定

商品メディアのメディアリストアイテムサブ要素の構成方法

メディアリストアイテムはメディアリストのサブ要素です。メディアリストアイテムをクリックすると、右側サイドバーに「スタイリング」タブが表示され、メディアをカスタマイズするための多くのパラメータが表示されます。

ボーダー

ボーダースタイル:各状態に対して4つのボーダースタイルから1つを選択できます。「その他の設定」ボタンをクリックすると、ボーダー幅とボーダー半径を設定できます。

注: ボーダー幅オプションは、マウスオーバー状態またはアクティブ/選択状態を選択した場合に利用可能です。

効果

  • 不透明度:このバーをドラッグして不透明度を調整できます。

  • 影:メディアに影の効果を適用したい場合は、このオプションをオンにします。

よくあるケース

商品メディアを変更する方法

PageFlyはShopifyで構成された商品データのみを使用するため、商品メディアを変更したい場合は、PageFlyではなくShopifyで行う必要があります。

  • ステップ1: Shopify管理画面 > 商品 > 商品を選択

ステップ2: メディアセクションで編集をクリックして、選択した商品のメディアを変更します

商品メディアの並べ替え方法

PageFlyはShopifyで構成された商品データのみを使用するため、商品メディアの並べ替えを変更したい場合は、PageFlyではなくShopifyで行う必要があります。

  • ステップ1: Shopify管理画面 > 商品 > 商品を選択

  • ステップ2: 商品メディアを目的の位置にドラッグします

ヒントと実践

  • 高解像度の商品画像(メイン画像および利用可能な場合はズーム機能)を使用し、さまざまな角度や使用時の商品(該当する場合)を紹介します。

  • 商品画像がサイズ、色、テクスチャ、機能などの重要な詳細を明確に表示していることを確認します。

  • 商品ページのできるだけ「カートに追加」ボタンの近くに、商品メディア要素を目立つように配置します。関連するすべての要素は、連携して機能するように商品詳細要素に入れる必要があります。

よくある質問

1. Shopify商品メディアとは何ですか?

商品メディアには、画像、3Dモデル、動画の3種類があります。

2. Shopify商品メディアのサイズはどのくらいですか?

最大4472 x 4472 pxまたは20メガピクセル、最大20MBです。

3. Shopifyの商品画像数はいくつですか?

1つの商品につき最大250枚の写真を、.png、.gif、.jpg形式でアップロードできます。

追加リソース

**ATTRIBUTES(属性)、VISIBILITY(表示)、ANIMATION(アニメーション)**パラメータの詳細については、をご確認ください。

SPACING(間隔)、BACKGROUND(背景)、BORDER(ボーダー)、DISPLAY(表示)、CUSTOM CSS(カスタムCSS)パラメータの詳細については、をご覧ください。

重要: Gen 2レイアウトは、従量課金制 () のお客様にのみ利用可能になります。

SPACING(間隔)、BACKGROUND(背景)、BORDER(ボーダー)、DISPLAY(表示)、CUSTOM CSS(カスタムCSS)パラメータの詳細については、をご覧ください。

SPACING(間隔)、BACKGROUND(背景)、BORDER(ボーダー)、DISPLAY(表示)、CUSTOM CSS(カスタムCSS)パラメータの詳細については、をご覧ください。

**ATTRIBUTES(属性)とVISIBILITY(表示)**パラメータの詳細については、をご確認ください。

この記事
こちら
スロットプラン
こちら
こちら
こちら
PageFlyを使ってShopify商品ページに商品詳細を表示する方法
Shopify商品詳細 | PageFlyで作成する方法
Shopifyの商品メディア