オンラインショッピングでは、顧客は実際に商品を手に取ったり、持ったり、調べたりすることができません。
それこそが、あなたのWooCommerce商品の画像が、販売しているものを完全に伝えるために、より一層努力する必要がある理由です。
よくデザインされた製品画像ギャラリーは、商品を展示するだけでなく、質問に答え、自信を築き、顧客があなたの製品を所有している姿を想像するのに役立ちます。
数え切れないほどの WooCommerce ストアでの経験から、適切なギャラリー設定が、単なる閲覧者を幸せな顧客に変えることができることを私たちは知っています。
一番良いところは？ギャラリーを作成するために高価なツールや専門知識は必要ありません。
プロフェッショナルに見え、商品が自然に売れるような商品画像ギャラリーを正確に設定する方法をご紹介します。
WooCommerce製品ギャラリーを作成する理由
WooCommerceは、市場で最も人気のあるWordPress eコマースプラグインです。オンラインストアを作成して商品を販売できます。
ほとんどのWooCommerce用WordPressテーマには、ショップページとショップカテゴリページのデフォルトテンプレートが付属しています。これらのページには、テーマのスタイルを使用して商品が一覧表示されます。
製品ギャラリーを作成して、ブログ投稿やサイトの別のページ内に表示したい場合はどうなりますか？人気のブログ投稿やページに製品を表示することで、売上とコンバージョンを増やすことができます。
WooCommerceの商品画像ギャラリーを簡単に作成する方法を見てみましょう。2つの異なる方法を共有します。都合の良いオプションにジャンプするには、以下のクイックリンクを使用できます。
方法1：SeedProdでWooCommerce製品ギャラリーを作成する（推奨）
WooCommerce製品画像ギャラリーを作成する最良の方法は、SeedProdを使用することです。これは、市場で最高のドラッグ＆ドロップWordPressページビルダーです。
私たちはSeedProdを使用して、デモウェブサイトでいくつかのページデザインを作成しましたが、その結果は印象的でした。レイアウトはプロフェッショナルに見え、スムーズに読み込まれました。
SeedProdを使用すると、コーディング不要で簡単にカスタムWordPressテーマやランディングページを作成できます。さらに、WooCommerceブロックが組み込まれており、WordPressの任意のページや投稿に商品画像ギャラリーを簡単に追加できる連携機能も備わっています。
詳細については、すべての機能とメリットを網羅した SeedProd の詳細なレビューをご覧ください。
開始するには、SeedProd プラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPress プラグインのインストール方法に関するこのガイドに従ってください。
注意: SeedProd の無料版もありますが、WooCommerce ブロックにアクセスするには SeedProd の Elite プランが必要です。
プラグインが有効化されたら、WordPressダッシュボードから SeedProd » Settingsに移動し、ライセンスキーを入力してください。
ライセンスキーは、SeedProdウェブサイトのアカウントで見つけることができます。ライセンスキーを入力した後、「Verify key」ボタンをクリックして続行してください。
WooCommerceテンプレートキットの選択
次に、オンラインストアに使用するWooCommerceテンプレートキットを選択する必要があります。これにより、既存のWordPressテーマが新しいカスタムデザインに置き換えられます。
単純にSeedProd » Theme Builderに移動し、「Theme Template Kits」ボタンをクリックします。
ここからSeedProdのウェブサイトキットライブラリに移動します。
ここから「WooCommerce」タブをクリックすると、オンラインストア専用に作成されたすべてのテンプレートキットが表示されます。
テンプレートキットの上にカーソルを合わせると、虫眼鏡アイコンが表示され、デザインをプレビューできます。気に入ったテンプレートキットが見つかったら、チェックマークをクリックするだけで使用できます。
このチュートリアルでは WooCommerce Starter Theme を使用しますが、お好みのテンプレートキットを使用できます。
テンプレートキットを選択すると、SeedProdがそれをインポートし、テーマダッシュボードですべてのテンプレートパーツのリストが表示されます。
SeedProdの簡単なドラッグアンドドロップビルダーを使用して、商品ページ、ショップページ、チェックアウトページなど、テンプレートの各部分をカスタマイズできます。このようにして、WooCommerceの商品画像ギャラリーを追加します。
まず、カスタマイズしたいテンプレートパーツを見つけます。このチュートリアルでは、「Single Post」パーツを選択します。これは、個々のブログ投稿の外観を決定するテンプレートです。
マウスカーソルを合わせるだけで、「デザインを編集」リンクをクリックできます。
これにより、SeedProd のビジュアルページビルダーが開きます。
ここから、あらかじめ用意されたブロックをページにドラッグ＆ドロップしたり、任意の要素をクリックしてカスタマイズしたり、デザインがリアルタイムでどのように表示されるかのプレビューを確認したりできます。
好みのカスタマイズを行ってください。次のステップで商品画像ギャラリーを追加します。
WordPressにWooCommerce製品画像ギャラリースライダーを追加する
カスタムのWooCommerceテーマのデザインができたので、美しい商品画像ギャラリーを追加する準備が整いました。
そのためには、左側のパネルにある「Product Gallery Images」WooCommerceテンプレートタグブロックをクリックし、ページプレビューエリアのどこにでもドラッグします。
これにより、製品情報と画像がWooCommerceから直接取得されます。
次に、ブロックをクリックして、商品画像ギャラリーの設定をカスタマイズできます。
まず、画像のズームオプションが表示されます。これにより、訪問者は画像にカーソルを合わせると、製品のズームイン表示を取得できます。
水平スライダーをドラッグして、ズームボタンの位置を制御できます。フォントサイズ、アイコンの色、境界線の半径、背景色を変更することもできます。
下にスクロールすると、画像とサムネイルの境界線をカスタマイズすることもできます。境界線の半径、スタイル、色、幅を設定できます。
さらにカスタマイズオプションを表示するには、[高度]タブをクリックすることもできます。
これらには、スペーシング、CSS IDとクラス、デバイス表示、アニメーション効果などが含まれます。
商品画像ギャラリーのカスタマイズが完了したら、「保存」ボタンを押すのを忘れないでください。
WooCommerce製品画像ギャラリーの公開
最後に、製品画像ギャラリーをウェブサイトで公開する必要があります。これを行うには、ビジュアルビルダーを終了し、「テーマビルダー」ダッシュボードに戻ります。
次に、「SeedProdテーマを有効にする」 スイッチを「はい」の位置に切り替えるだけです。
これで完了です！
ウェブサイトにアクセスして、WooCommerceの製品画像ギャラリーが実際にどのように機能するかを確認できます。
これで、訪問者はスライドショーのようにギャラリー内の商品画像をクリックして、商品の詳細を拡大表示できるようになります。
方法2：Envira Galleryを使用したWooCommerce商品ギャラリーの作成
Envira Galleryは最高のWordPress写真ギャラリープラグインであり、サイトのどこにでも商品を簡単に表示できます。
当社のウェブサイトで広範囲にテストしたところ、印象的な結果が得られました。これは、WordPressでWooCommerce製品ギャラリーを迅速に作成する方法です。
詳細については、Envira Galleryの包括的なレビューを確認して、そのすべての機能と能力を探索できます。
まず、Envira Gallery プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化後、ライセンスキーを入力するためにEnvira Gallery » Settingsページに移動する必要があります。この情報は、Envira Galleryのウェブサイトのアカウントの下で見つけることができます。
ライセンスキーが検証されたら、Envira Gallery » Addonsに移動して、「Featured Content」アドオンをインストールしてアクティブ化できます。
このアドオンを使用すると、Envira ギャラリーに WooCommerce 製品 を表示できます。次に、[Featured Content Addon] の下にある [Install] ボタンをクリックしてください。
次に、Envira Gallery » Add New ページに移動して、新しい商品ギャラリーを作成する必要があります。
ここから、新しいギャラリーのタイトルを追加することから始めることができます。
タイトルの後、「外部ギャラリー」タブに切り替え、「注目のコンテンツ」オプションをクリックする必要があります。
次に、「Images」タブまで下にスクロールします。「Select Your Post Type(s)」フィールドで、「Product」オプションを選択する必要があります。これは、WooCommerce商品のカスタム投稿タイプです。
製品が数百点ある場合は、複数のギャラリーを作成したい場合があります。
特定の製品のタグまたはカテゴリのタクソノミー用語を選択することで、ギャラリーの一覧を絞り込むことができます。
新しい製品ギャラリーを作成するたびに、異なる製品タグとカテゴリでこのプロセスを繰り返すだけです。すべてのWooCommerce製品ギャラリーで、投稿タイプは常に「製品」になります。
また、タクソノミータームリレーションを選択して、ギャラリーに特定の製品を表示することもできます。
詳細については、WordPressで画像ギャラリーを作成する方法のガイドを確認してください。
完了したら、商品ギャラリーを公開できます。これにより、WordPressサイトのどこにでも追加できるようになります。
WordPressにWooCommerce商品ギャラリーを追加する
次に、新しい投稿またはページを追加するか、既存のものを編集して、WooCommerce商品ギャラリーを表示します。
コンテンツエディターに入ったら、「+」ボタンをクリックしてEnvira Galleryブロックを追加するだけです。
その後、Envira Gallery ブロックで商品画像ギャラリーを選択できます。
ドロップダウンメニューをクリックして、先ほど作成したギャラリーを選択するだけです。
ブロックエディターにギャラリーのプレビューが表示されます。読み込まれない場合は、心配しないでください。ブログ投稿またはページをプレビューするだけで、正しく機能しているか確認できます。
次に、投稿を保存して公開できます。その後、ウェブサイトにアクセスして、商品ギャラリーが機能していることを確認してください。
よくある質問
WooCommerceで商品ギャラリーを作成することについて、よくある質問をいくつかご紹介します。
WooCommerceの商品画像ギャラリーに動画を追加できますか？
はい、ビデオを含めることでWooCommerceの製品画像ギャラリーを改善できます。ビデオは製品をダイナミックに紹介する方法を提供し、潜在的な顧客に詳細なビューを提供します。
開始するには、WooCommerceギャラリーに商品動画を追加する方法のチュートリアルをご覧ください。
ギャラリー画像の読み込み速度を最適化するにはどうすればよいですか？
ギャラリー画像の最適化は、ページの読み込み時間を改善し、ユーザーエクスペリエンスを向上させるために重要です。
まず、EWWW Image Optimizerのようなツールを使用して画像を圧縮することをお勧めします。これにより、品質を損なうことなくファイルサイズを大幅に削減できます。
さらに、ユーザーがどこにいても画像を迅速に配信するために、コンテンツ配信ネットワーク（CDN）の使用も検討してください。
最後に、ユーザーがページを下にスクロールしたときにのみ画像が読み込まれるように、遅延読み込みを使用します。
詳細については、ウェブパフォーマンスのために品質を損なわずに画像を最適化する方法に関する初心者向けガイドをご覧ください。
この記事がWooCommerceの商品画像ギャラリーの作成方法を学ぶのに役立ったことを願っています。また、WooCommerceで商品をアップセルする方法に関するガイドや、ストアに最適なWooCommerceプラグインの専門家による選択もご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
イジー・ヴァネック
この記事には本当に興奮しています！WooCommerceで簡単に画像ギャラリーを作成する方法が非常によく説明されており、オンラインストアの運営についてまだ学んでいる私のような人間には最適です。幸いなことに、この旅は一人ではありません :)。記事の最後にCTAとしてOptin Monsterを使用するのは素晴らしいアイデアです。特に、WooCommerceだけでなく、ブログや会社のウェブサイトでもOptin Monster（およびランディングページ用のSeed Prod）を使用しているためです。これにより、Wooプラットフォームでのeコマースに関する私の知識が再び広がりました。