WooCommerceの商品画像ギャラリーを作成する方法（ステップバイステップ）

オンラインショッピングでは、顧客は実際に商品を手に取ったり、持ったり、調べたりすることができません。

それこそが、あなたのWooCommerce商品の画像が、販売しているものを完全に伝えるために、より一層努力する必要がある理由です。

よくデザインされた製品画像ギャラリーは、商品を展示するだけでなく、質問に答え、自信を築き、顧客があなたの製品を所有している姿を想像するのに役立ちます。

数え切れないほどの WooCommerce ストアでの経験から、適切なギャラリー設定が、単なる閲覧者を幸せな顧客に変えることができることを私たちは知っています。

一番良いところは？ギャラリーを作成するために高価なツールや専門知識は必要ありません。

プロフェッショナルに見え、商品が自然に売れるような商品画像ギャラリーを正確に設定する方法をご紹介します。

WooCommerce製品ギャラリーを作成する理由

WooCommerceは、市場で最も人気のあるWordPressのeコマースプラグインです。オンラインストアを作成して商品を販売することができます。

ほとんどのWooCommerce用WordPressテーマには、ショップページとショップカテゴリページのデフォルトテンプレートが付属しています。これらのページでは、テーマのスタイルを使用して商品を一覧表示するだけです。

製品ギャラリーを作成して、ブログ投稿やサイトの別のページ内に表示したい場合はどうなりますか？人気のブログ投稿やページに製品を表示することで、売上とコンバージョンを増やすことができます。

WooCommerceの商品画像ギャラリーを簡単に作成する方法を見てみましょう。2つの異なる方法を共有します。都合の良いオプションにジャンプするには、以下のクイックリンクを使用できます。

方法1：SeedProdでWooCommerce製品ギャラリーを作成する（推奨）

WooCommerceの商品画像ギャラリーを作成する最良の方法は、SeedProdを使用することです。これは、市場で最高のドラッグ＆ドロップWordPressページビルダーです。

私たちはSeedProdを使用して、デモウェブサイトでいくつかのページデザインを作成しましたが、その結果は印象的でした。レイアウトはプロフェッショナルに見え、スムーズに読み込まれました。

SeedProdを使用すると、コーディングなしで簡単にカスタムWordPressテーマやランディングページを作成できます。さらに、組み込みのWooCommerceブロックと統合機能が付属しており、WordPressの任意のページまたは投稿に商品画像ギャラリーを簡単に追加できます。

詳細については、すべての機能と利点を網羅したSeedProdのレビューをご覧ください。

開始するには、SeedProdプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するこのガイドに従ってください。

プラグインが有効化されたら、WordPressダッシュボードから SeedProd » Settingsに移動し、ライセンスキーを入力してください。

ライセンスキーは、SeedProdウェブサイトのアカウントで見つけることができます。ライセンスキーを入力した後、「Verify key」ボタンをクリックして続行してください。

WooCommerceテンプレートキットの選択

次に、オンラインストアに使用するWooCommerceテンプレートキットを選択する必要があります。これにより、既存のWordPressテーマが新しいカスタムデザインに置き換えられます。

単純にSeedProd » Theme Builderに移動し、「Theme Template Kits」ボタンをクリックします。

ここからSeedProdのウェブサイトキットライブラリに移動します。

ここから「WooCommerce」タブをクリックすると、オンラインストア専用に作成されたすべてのテンプレートキットが表示されます。

テンプレートキットの上にカーソルを合わせると、虫眼鏡アイコンが表示され、デザインをプレビューできます。気に入ったテンプレートキットが見つかったら、チェックマークをクリックするだけで使用できます。

このチュートリアルでは WooCommerce Starter Theme を使用しますが、お好みのテンプレートキットを使用できます。

テンプレートキットを選択すると、SeedProdがそれをインポートし、テーマダッシュボードですべてのテンプレートパーツのリストが表示されます。

SeedProdの簡単なドラッグ＆ドロップビルダーを使用して、商品ページ、ショップページ、チェックアウトページなど、テンプレートの各部分をカスタマイズできます。これで、WooCommerceの商品画像ギャラリーを追加します。

まず、カスタマイズしたいテンプレートパーツを見つけます。このチュートリアルでは、「シングル商品」パーツを選択します。

これは、すべてのWooCommerce個別商品ページの表示方法を決定するテンプレートです。カーソルを合わせ、「デザインを編集」リンクをクリックするだけです。

これにより、SeedProd のビジュアルページビルダーが開きます。

ここから、あらかじめ用意されたブロックをページにドラッグ＆ドロップしたり、任意の要素をクリックしてカスタマイズしたり、デザインがリアルタイムでどのように表示されるかのプレビューを確認したりできます。

好みのカスタマイズを行ってください。次のステップで商品画像ギャラリーを追加します。

WordPressにWooCommerce製品画像ギャラリースライダーを追加する

カスタムWooCommerceテーマのデザインができたので、美しい商品画像ギャラリーを追加する準備ができました。

そのためには、左側のパネルにある「Product Gallery Images」WooCommerceテンプレートタグブロックをクリックし、ページプレビューエリアのどこにでもドラッグします。

これにより、製品情報と画像がWooCommerceから直接取得されます。

次に、ブロックをクリックして、商品画像ギャラリーの設定をカスタマイズできます。

まず、画像のズームオプションが表示されます。これにより、訪問者は画像にカーソルを合わせると、製品のズームイン表示を取得できます。

水平スライダーをドラッグして、ズームボタンの位置を制御できます。フォントサイズ、アイコンの色、境界線の半径、背景色を変更することもできます。

下にスクロールすると、画像とサムネイルの境界線をカスタマイズすることもできます。境界線の半径、スタイル、色、幅を設定できます。

さらにカスタマイズオプションを表示するには、[高度]タブをクリックすることもできます。

これらには、スペーシング、CSS IDとクラス、デバイスの可視性、アニメーション効果などが含まれます。

商品画像ギャラリーのカスタマイズが完了したら、「保存」ボタンを押すのを忘れないでください。

WooCommerce製品画像ギャラリーの公開

最後に、商品画像ギャラリーをウェブサイトで公開する必要があります。これを行うには、ビジュアルビルダーを終了し、「テーマビルダー」ダッシュボードに戻ります。

次に、「SeedProdテーマを有効にする」 スイッチを「はい」の位置に切り替えるだけです。

これで完了です！

ウェブサイトにアクセスして、WooCommerceの製品画像ギャラリーが実際にどのように機能するかを確認できます。

これで、訪問者はスライドショーのようにギャラリー内の商品画像をクリックして、商品の詳細を拡大表示できるようになります。

方法2：Envira Galleryを使用したWooCommerce商品ギャラリーの作成

最初（方法1）の方法は実際の商品ページでのギャラリーカスタマイズに役立ちますが、この方法（方法2）は、投稿、ページ、またはサイドバー内に表示する複数の商品のギャラリーを作成したい場合に使用します。

Envira Galleryは最高のWordPress写真ギャラリープラグインであり、サイトのどこにでも商品を簡単に表示できます。

当社のウェブサイトで広範囲にテストしたところ、印象的な結果が得られました。これは、WordPressでWooCommerce製品ギャラリーを迅速に作成する方法です。

詳細については、包括的なEnvira Galleryのレビューを確認して、すべての機能と能力を調べてください。

最初に行う必要があるのは、Envira Galleryプラグインをインストールして有効化することです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

有効化後、ライセンスキーを入力するためにEnvira Gallery » Settingsページに移動する必要があります。この情報は、Envira Galleryのウェブサイトのアカウントの下で見つけることができます。

WooCommerce Products Addonのダウンロード

ライセンスキーが検証されたら、Envira Gallery » Addonsに移動して、「Featured Content」アドオンをインストールしてアクティブ化できます。

このアドオンを使用すると、EnviraギャラリーにWooCommerceの商品を表示できます。進んで、Featured Content Addonの下にある「インストール」ボタンをクリックしてください。

新しい商品ギャラリーの作成

次に、Envira Gallery » Add New ページに移動して、新しい商品ギャラリーを作成する必要があります。

ここから、新しいギャラリーのタイトルを追加することから始めることができます。

タイトルの後、「外部ギャラリー」タブに切り替え、「注目のコンテンツ」オプションをクリックする必要があります。

次に、「画像」タブまでスクロールダウンします。「投稿タイプを選択」フィールドで、「商品」オプションを選択する必要があります。

これにより、EnviraはWooCommerce商品からアイキャッチ画像（Featured Image）を自動的に取得してギャラリーを構築します。

製品が数百点ある場合は、複数のギャラリーを作成したい場合があります。

特定の商品のタグまたはカテゴリのタクソノミータームを選択することで、ギャラリーの一覧を絞り込むことができます。

新しい製品ギャラリーを作成するたびに、異なる製品タグとカテゴリでこのプロセスを繰り返すだけです。すべてのWooCommerce製品ギャラリーで、投稿タイプは常に「製品」になります。

また、タクソノミータームリレーションを選択して、ギャラリーに特定の製品を表示することもできます。

詳細については、WordPressで画像ギャラリーを作成する方法に関するガイドをご覧ください。

完了したら、商品ギャラリーを公開できます。これにより、WordPressサイトのどこにでも追加できるようになります。

WordPressにWooCommerce商品ギャラリーを追加する

次に、新しい投稿またはページを追加するか、既存の投稿またはページを編集して、WooCommerce製品ギャラリーを表示できます。

コンテンツエディターに入ったら、「+」ボタンをクリックしてEnvira Galleryブロックを追加するだけです。

その後、Envira Gallery ブロックで商品画像ギャラリーを選択できます。

ドロップダウンメニューをクリックして、先ほど作成したギャラリーを選択するだけです。

ブロックエディターにギャラリーのプレビューが表示されます。読み込まれない場合は、心配しないでください。ブログ投稿またはページをプレビューするだけで、正しく機能しているか確認できます。

次に、投稿を保存して公開できます。その後、ウェブサイトにアクセスして、商品ギャラリーが機能していることを確認してください。

WooCommerce商品ギャラリーに関するよくある質問

WooCommerceで商品ギャラリーを作成することについて、よくある質問をいくつかご紹介します。

WooCommerceの商品画像ギャラリーに動画を追加できますか？

はい、ビデオを含めることでWooCommerceの製品画像ギャラリーを改善できます。ビデオは製品をダイナミックに紹介する方法を提供し、潜在的な顧客に詳細なビューを提供します。

開始するには、WooCommerceギャラリーに製品動画を追加する方法に関するチュートリアルを参照してください。

ギャラリー画像の読み込み速度を最適化するにはどうすればよいですか？

ギャラリー画像の最適化は、ページの読み込み時間を改善し、ユーザーエクスペリエンスを向上させるために重要です。

まず、EWWW Image Optimizerのようなツールを使用して画像を圧縮することをお勧めします。これにより、品質を損なうことなくファイルサイズを大幅に削減できます。

さらに、ユーザーがどこにいても画像を迅速に配信するために、コンテンツ配信ネットワーク（CDN）の使用も検討してください。

最後に、ユーザーがページを下にスクロールしたときにのみ画像が読み込まれるように、遅延読み込みを使用します。

詳細については、品質を損なうことなくウェブパフォーマンスのために画像を最適化する方法に関する初心者向けガイドを参照してください。

この記事でWooCommerce製品画像ギャラリーの作成方法を学べたことを願っています。また、WooCommerceで製品をアップセルする方法に関するガイドや、ストアに最適なWooCommerceプラグインの専門家による選択も参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。