Shopify の商品画像、動画、3D モデルを最適化するための総合ガイド

この記事では、Shopify での商品画像の設定とアップロードについて説明します。システムアップデート後、商品画像をアップロードするセクションの名前が「メディア」に変更されました。つまり、商品画像だけでなく、動画や 3D モデルもアップロードできるようになり、商品を宣伝する方法が増えました。ただし、最終的な目標は変わりません。トラフィックを注文に変えることです。

Shopifyが推奨する画像形式 – JPG または PNG

Shopify はほとんどの画像ファイル形式をサポートしていますが、推奨されるのは PNG、JPEG、GIF です。PSD、TIFF、BMP、HEIC、WebP などの他の画像形式もサポートされています。Shopify が推奨する製品画像形式は次のとおりです。

JPG形式の画像

JPEG/JPG 画像は、撮影した写真など、比較的リッチで複雑な静止画像を表示するのに適しています。JPEG/JPG 画像は色彩が豊富で、表示効果を確保しながら画質を維持できます。つまり、画像をロスレス圧縮できます。これにより、ファイルサイズが削減され、画像の表示効果と Web サイトの起動速度の両方が確保されます。同じファイルサイズでは、JPG 画像の色は GIF や PNG よりも大幅に明るくなります。

そのため、Shopify と「知っておくべき 10 の画像最適化のヒント」の著者はどちらも、独立した電子商取引サイトの商品画像には JPG 形式の画像を第一候補としています。「商品画像に最適なファイル形式は .jpg です。」GIF 画像はできる限り避けるべきです。ただし、必要に応じて、GIF 画像のサイズを制御して Web サイトのパフォーマンスを良好に保つことを条件に、GIF アニメーションを作成して商品の説明に挿入し、注文のコンバージョン率を高めることができます。

したがって、JPEG/JPG 画像は、製品画像、Web サイトのバナー、カルーセル画像、Web サイトのページ、ブログ投稿画像に適しています。

PNG形式の画像

PNG 画像はグラフィックアイコンファイルに最適な形式であり、透明性もサポートしているため、Web サイトのロゴやソーシャルアイコンファイルなどの画像に適しています。

WebP 形式の画像商品画像を作成するときに、Shopify にアップロードするために WebP 形式のファイルを意図的に作成する必要はありません。Shopify の画像サービスは、顧客がサポートするブラウザに基づいて、利用可能な最適な形式で画像を自動的に表示します。

たとえば、Google Chromeブラウザを使用してShopifyウェブサイトの任意のページを開くと、ShopifyはそのページにあるすべてのJPG形式の画像を自動的に「WebP」形式の画像に置き換えます。IEブラウザなど、「WebP」形式をサポートしていないブラウザを使用して同じページにアクセスすると、そのページにあるすべての画像はJPG形式のままになります。Shopifyが画像を自動的にJPG形式またはWebP形式に変換する理由は、これらのタイプのファイルが色のレンダリングとファイルサイズ、つまり開く速度の点で最適化を実現できるためです。プロセス全体はShopifyによって完了し、私たちは何もする必要はありません。

WebPは、画像の読み込みを高速化するためにGoogleが開発した画像フォーマットです。画像の圧縮サイズはJPEGの約2/3で、サーバーの帯域幅とデータスペースを大幅に節約できます。画像読み込みリソースのサイズを削減し、ユーザートラフィックリソースを節約し、サーバーのトラフィックリソースを削減できます。Googleが開発したサービスであるため、互換性はそれほど包括的ではありません。ただし、Shopifyは顧客のブラウザ環境に基づいて、JPG形式の画像を表示するか、Webp形式の画像を表示するかを自動的に決定するため、これについて心配する必要はありません。

Google Chrome ブラウザで製品ページを開いて、画像をダウンロードしてみます。通常、アップロードした画像の形式が JPG または PNG であっても、保存されるデフォルトのファイル形式は WebP です。

Shopify が推奨する商品画像のサイズ、寸法、比率:

理想的な製品画像のサイズは 2048 x 2048 ピクセルです。
理想的な画像サイズは 200KB を超えないようにしてください。

画像サイズは正方形である必要はありません。たとえば、Fashion Nova の Web サイトにある商品画像はすべて、一貫したアスペクト比の長方形です。この表示効果は、特に衣料品の場合、携帯電話の画面全体を埋めることができるため、より効果的です。商品リンクを開くと、画面全体に商品画像が表示され、視覚的なインパクトが大幅に高まります。

商品画像のピクセル数が多いほど、鮮明に表示されます。ただし、ピクセル数が多いと通常、画像ファイルも大きくなり、Web サイトの読み込み時間が遅くなる可能性があります。したがって、ピクセル数とファイルサイズのバランスを取る必要があります。

Shopifyの画像ファイルに関する制限

Shopify ウェブサイトにアップロードされる画像には、ピクセル寸法とファイルサイズの両方に制限があります。次の制限を超えるファイルは、アップロード時にエラーが表示されます。

ピクセル寸法制限: 4472×44722000万ピクセル（画像の幅と高さのピクセルの積）
ファイルサイズの制限: 20MB
1つの商品につき、商品画像の数は 250 画像。
Shopifyは商品画像のサイズを推奨しています 2048×2048 ピクセル。

達成するために高品質の写真、使用する必要があるかもしれません画像編集ツールウェブ用に最適化してサイズを変更します。画像が大きいと、ページの読み込み時間が遅くなる可能性があります。理想的な画像サイズは 200 KB を超えてはならず、小さいほど良いです。

画像を圧縮する際は、過度に圧縮すると斑点が現れることがあるので注意してください。

画質を可能な限り維持しながら画像ファイルサイズを制御する方法

デスクトップコンピューターで Web サイトが 3 秒以内に開かない場合、多くの人がそのサイトを離れるという話を聞いたことがあるかもしれません。モバイルデバイスでは、この時間は 5 秒にまで長くなります。Amazon のデータ調査によると、Web サイトの読み込みが 1 秒遅くなると、年間約 $16 億ドルの売上が失われます。Google のランキングアルゴリズムでは、Web サイトの読み込み速度も上位ランキングを達成するための重要な要素の 1 つです。

したがって、ウェブサイトの読み込みが遅い場合、ほとんどの人は読み込みが完了する前にページを閉じることを選択し、注文への変換が行われなくなります。Shopify は CDN 技術や画像圧縮技術など、さまざまなウェブページ加速技術を使用していますが、ウェブサイトでよく使用される 2 MB サイズのバナー画像や大きな商品画像など、多くの大きなファイルを読み込む必要がある場合、これらは依然としてウェブサイトの読み込み速度に影響を与える重要な要素になります。

したがって、画像の品質を確保しながら画像ファイルのサイズを制御することをお勧めします。この目的のためのツールは、Tinypng など多数あります。以下に、試すことができる推奨の圧縮ツールをいくつか示します。

タイニーpng: https://tinypng.com/
コンプレッサー.io: https://compressor.io/compress
クラーケン: https://kraken.io/web-interface
オプティミジラ: https://optimizilla.com/

Shopify の画像の自動圧縮と変換

ウェブサイトの読み込みを高速化し、ページの読み込み時間を短縮し、特定の数のディスクに多くの画像を保存するために、Shopify は特定の条件下で特定の要件を満たす画像を圧縮します。画像圧縮により、画像の品質が変化する場合があります。圧縮された画像の解像度は、アップロードした画像の解像度と画像サイズに関係します。通常、圧縮後の圧縮画像の解像度は次のとおりです。

JPEG: 65～90
PNG: 90
GIF: 圧縮なし

画像の具体的な解像度は、PS（ショートカット Ctrl+Alt+I）を使用して表示および調整できます。下の図に示すように、図の解像度「72」は画像の DPI 値です。

Shopifyストアの商品画像の要件と画像の最適化
JPEG 形式のファイルの場合、Shopify は元の画像の解像度に基づいて画像を圧縮するかどうかを決定します。たとえば、アップロードした画像の解像度が 86 より大きく、画像のどちらかの辺が 1024 ピクセル以上の場合、Shopify は画像を圧縮し、圧縮された画像の解像度は 85 になります。

アップロード前の画像の解像度が 65 ～ 85 で、画像のどちらかの辺が 1024 ピクセル以上の場合、Shopify は画像を一切処理せず、アップロードした元の画像を使用します。

元の解像度	画像サイズ	圧縮解像度
86以上	画像の幅または高さ >= 1024 ピクセル	85
65 – 85	画像の幅または高さ >= 1024 ピクセル	オリジナル品質
64以下	画像の幅または高さ >= 1024 ピクセル	65
76以上	画像の幅と高さ < 1024 ピクセル	75
65 – 75	画像の幅と高さ < 1024 ピクセル	オリジナル品質
64以下	画像の幅と高さ < 1024 ピクセル	65

Shopify 製品のメイン画像としてシーン画像を選択する

良い商品写真を撮る方法については、内容が専門的すぎるため、現時点では十分に説明する能力がありません。しかし、良い商品写真を撮ることは、独立系ウェブサイトの運営やウェブサイトのコンバージョン率の向上に非常にプラスの影響を与え、重要な影響を与えます。皆さんもGoogleにもっと尋ねてみることをお勧めします。「電子商取引では、実際に販売されているのは画像です」という格言があります。しかし、私が知っていることは、独立系ウェブサイトの場合、Amazonの商品画像の要件に準拠する必要がないということです。メイン画像は白い背景の画像ではなく、商品のシーン画像である必要があります。

iFotoフォトエディターは、高度な AI テクノロジーを活用して画像の解像度を効率的に高め、ビジネスと個人の両方で高品質の出力を保証する最先端の画像編集ツールです。背景の削除、写真の強化、画像のクリーンアップ、色調整などの実用的な機能を幅広く提供しており、Shopify ストアの商品画像を強化するのに最適です。iFoto Photo Editor を使用すると、商品情報ページの更新が簡単になり、顧客エンゲージメントの向上、クリックスルー率 (CTR) の改善、Shopify でのランキングの向上につながります。

iFoto Photo Editor は、Shopify に重点を置いた機能に加えて、Web ベースのプラットフォームや iOS/Android アプリケーションとしても提供されており、さまざまなシナリオでユーザーにシームレスな画像編集エクスペリエンスを提供します。最高の AI 搭載画像編集ツールの 1 つとして知られる iFoto Photo Editor は、高い評価を得ており、世界中に多くの忠実なユーザーを擁しています。

主な特徴:

高度な AI 技術を活用して、画像解像度を効率的に向上します。
電子商取引のニーズに合わせて特別に設計されたカスタマイズされた機能。
高解像度を維持し、最高の画質を保証します。
CTR の向上と顧客エンゲージメントの促進に効果的です。

極端な例ですが、下の写真のように、Revolights の自転車用ライトの場合、左側の画像は製品画像で、右側の画像は使用シーンの画像です。どちらの画像の方が魅力的でしょうか?

製品画像ファイルの適切な命名

説明的でキーワードを豊富に含むファイル名を作成します。検索エンジンは Web ページ上のテキストをクロールするだけでなく、画像ファイル名内のキーワードも検索します。

通常、カメラ/携帯電話で写真を撮影した後、その写真をコンピューターにインポートすると、写真のファイル名は英数字の文字列とファイル拡張子になります。たとえば、DCMIMAGE10.jpg などです。Shopify にアップロードする前に製品画像を最適化する最初の手順は、コンピューター上の画像のファイル名を変更することです。たとえば、次のように変更します: 2012-Ford-Mustang-LX-Red.jpg。

なぜでしょうか? 前述のように、検索エンジンは Web ページのテキストをクロールするだけでなく、画像ファイル名内のキーワードも検索します。画像がデフォルトで DCMIMAGE10.jpg という名前になっている場合、検索エンジンはこの画像にどのようなコンテンツが含まれているかを知ることができません。画像が 2012-Ford-Mustang-LX-Red.jpg という名前になっている場合、検索エンジンは画像名内のキーワードをインデックスします。

では、2012 Red Ford Mustang LX、Ford Mustang LX Red 2012、Red Ford Mustang LX 2012 の 3 つの名前のうち、どれがより良いのでしょうか。私の意見では、どちらも同じですが、記事の著者は、ウェブサイトの分析データに基づいて訪問者がどのキーワードの並べ替え方法を使用しているかを確認し、名前を変更して画像を再アップロードすることを提案しています。顧客の検索と完全に一致することはもちろん優れていますが、製品イメージを正確に説明でき、語順が論理的であれば十分だと思います。

実際、Shopify に限らず、どの画像もアップロードする前にこのように名前を変更する必要があり、これを習慣にする必要があります。

Tips: When naming images, use “-” instead of spaces between words, otherwise, spaces will be replaced by “%20” after the image is uploaded to the server. For example, “2012 Ford Mustang LX Red.jpg” will become “2012%20Ford%20Mustang%20LX%20Red.jpg”.

また、変更する画像が多数ある場合は、バッチファイル名変更ツールを使用して変更することもできます。

Shopify製品画像のALT属性の入力

ALT は英語の「Alternate」の略語で、交換や置き換えを意味します。画像の ALT 属性は、画像に必要な属性です。画像が表示できない場合や、ユーザーが画像の表示を無効にした場合に、ブラウザに表示される画像を置き換えるために使用されます。次の理由で画像が表示できないとします。

ネットワーク速度が遅い;
src 属性にエラーがあります。
ブラウザは画像を無効にします。
ユーザーはスクリーンリーダーを使用します。

画像を追加する場合、画像の ALT 属性値は「チューリップ」と定義されます。ユーザーがブラウザを開いて閲覧すると、通常はチューリップの画像が表示されます。ネットワーク速度の問題で画像を開けない場合は、画像の位置に表示されるコンテンツは「チューリップ」です。

現時点では、ユーザーはここにチューリップの写真があることは知っていますが、その写真が具体的にどのようなものかは想像することしかできません。

画像が開けないときにユーザーが画像の内容を理解するのを助けることに加えて、ALT のもう 1 つの重要な機能は、検索エンジンが画像の内容をよりよく理解できるようにすることです。ALT 内のキーワードは、検索エンジンが画像の内容を理解するのに役立ち、検索エンジン、特に Google 画像などの画像検索エンジンで画像のランキングが向上します。したがって、画像 SEO の最適化について話すとき、必要なことは各製品画像に Alt タグを追加することです。

現在、製品画像を表示する際の一般的な傾向として、さまざまな角度から製品の詳細写真を撮影することが挙げられます。したがって、画像の Alt 属性を入力する際は、画像ごとに異なる Alt タグを入力するようにしてください。たとえば、画像 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg の場合、Alt タグ: alt = “2012 Ford Mustang LX Red Leather Interior Trim” を使用します。別の画像 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg の場合、Alt タグ: alt = “2012 Ford Mustang LX Red Rear View Air Spoiler” を使用します。

下の図に示すように、アップロードした画像をクリックすると、ポップアップウィンドウで商品画像の「代替テキスト」を追加できます。ALT設定プロセスでは、Shopifyウェブサイトのタイトルと説明を設定するときと同じように、ロングテールキーワードのマイニングとレイアウトをうまく行い、より正確なトラフィックを獲得します。現在、Shopifyシステム自体はALTコンテンツのオンライン一括追加や編集をサポートしておらず、各画像を開いて1つずつ追加または編集することしかできず、それでもかなり面倒です。テーブルを使用してALTを一括追加するか、アプリマーケットで「ALT」を検索して適切なプラグインを検索し、ALTを一括追加または編集することができます。

Google の製品画像最適化に関する公式推奨事項

より良いランキングを達成するために画像を最適化するための Google の公式 Web サイトからのいくつかの提案を以下に示します (個人的により重要だと思う提案の一部を抜粋)。元のテキストの完全版は、support.google.com/webmasters/answer/114016 で確認できます。

Google 画像検索でコンテンツの可視性を高めるには、優れたユーザーエクスペリエンスを提供することを優先します。Web ページを設計するときは、検索エンジンではなくユーザーに焦点を当てます。次にいくつかの提案を示します。

関連情報を提供してください: ビジュアルコンテンツが、その Web ページのテーマに関連していることを確認してください。Web ページに独自の価値を追加する画像のみを表示することをお勧めします。Web ページで完全にオリジナルではない画像やテキストコンテンツを使用することは強くお勧めしません。
配置を最適化: 画像は関連するテキストのできるだけ近くに配置してください。必要に応じて、最も重要な画像を Web ページの上部近くに配置することを検討してください。
重要なテキストを画像に埋め込まないでください。 画像にテキスト（特にウェブページのタイトルやメニュー項目などの重要なテキスト要素）を埋め込むことは避けてください。すべてのユーザーがそのようなテキストにアクセスできるわけではないためです（また、ウェブページの翻訳ツールは画像では機能しません）。できるだけ多くのユーザーがコンテンツにアクセスできるようにするには、テキストには HTML 形式を使用し、画像には代替テキストを指定します。
情報量が豊富で高品質な Web サイトを作成します。 Google 画像検索では、高品質のウェブページコンテンツはビジュアルコンテンツと同じくらい重要です。背景情報を提供でき、検索するユーザーからのクリック数を増やすことができます。ウェブページコンテンツを使用して画像のテキストサマリーを生成できます。Google は、対応するウェブページコンテンツの品質を画像のランク付け時に考慮します。
さまざまなデバイスでアクセスできる Web サイトを作成します。 ユーザーは、デスクトップデバイスよりもモバイルデバイスを使用して Google 画像検索を行う可能性が高くなります。そのため、あらゆるタイプとサイズのデバイスに適した Web サイトを設計する必要があります。モバイルデバイス互換性テストツールを使用して、Web ページがモバイルデバイスでどのように機能するかをテストし、修正が必要なコンテンツに関するフィードバックを取得します。
画像に適した URL 構造を作成します。 Google は URL パスとファイル名を使用して画像を認識します。URL 構造を論理的にするために、画像コンテンツを適切に整理することをおすすめします。

Shopify商品ページのメイン画像を変更する

メディアファイルセクションでは、最初に表示される大きな画像が商品のメイン画像です。非バリエーション商品ページ、ホームページ、商品一覧ページなどでこの商品情報を呼び出して表示する場合、デフォルトで表示される画像はこの大きな画像です。商品のメイン画像として設定したい画像を手動で大きな画像の位置にドラッグして、メイン画像を置き換えることができます。

同時に、ここで画像の位置を調整して、商品ページのフロントエンド上のさまざまな画像の表示順序を変更することもできます。

Shopifyに商品ビデオをアップロードする

Shopifyに動画をアップロードするか、YouTube/Vimeoの動画を埋め込む

動画をShopifyバックエンドに直接アップロードすることも、最初にYouTubeやVimeoに動画をアップロードしてから、動画を埋め込む方法でShopifyバックエンドに追加することもできます。私は簡単なテストを行いました。それは、約15MBのサイズの動画をそれぞれShopifyとYouTubeにアップロードし、動画ソースを変更せずにWebpagetestとPageSpeedInsightを使用して2つのページの開く速度をテストすることです。結論は基本的に違いはありません。

アップロードしたビデオのサイズは 15 MB ですが、お客様がページを開くと、ビデオファイル全体ではなく、ビデオのサムネイルのみが読み込まれます。お客様が再生ボタンをクリックした場合にのみ、システムがビデオの読み込みと再生を開始します。

Shopify にビデオをアップロードするには、ビデオが次の要件を満たしている必要があります。

ビデオの長さ: 最長 10 分
ビデオサイズ: 最大 1 GB
ビデオ解像度: 最大 4K (4096 x 2160 ピクセル)
ビデオファイルの種類: .mp4 または .mov

動画の解像度は、480P、720P、1080P、4K から選択できます。動画の解像度が高いほど、ファイルサイズが大きくなります。ただし、お客様が動画を視聴する際に、クライアントが解像度調整をサポートしている場合、システムはお客様のネットワーク速度に基づいて、どの解像度で再生するかを自動的に決定します。たとえば、1080P の動画をアップロードした場合、ネットワーク速度が遅いお客様は自動的に 480P の動画を再生し、ネットワーク速度が速いお客様は自動的に 1080P の動画を再生します。

YouTube や Vimeo に動画をアップロードする場合、そのような制限はありませんが、アップロードする動画は YouTube や Vimeo のルールに準拠している必要があります。

Shopify製品ビデオのサムネイルを変更する

商品画像の ALT タグコンテンツを変更するのと同様に、商品編集ページでビデオをクリックし、ポップアップビデオ編集ウィンドウのダウンロードボタンの右側にあるオプションボタンをクリックし、「サムネイルの置き換え」ボタンをクリックして、独自のビデオサムネイルをアップロードします。サムネイルのサイズも制御する必要があることに注意してください。画像の鮮明さを確保しながら、200 KB 未満に保つようにしてください。小さいほど良いです。ファイルが大きすぎると、Web サイトのページの読み込み速度に影響します。

YouTubeまたはVimeoを使用する

Shopify 製品に埋め込みによってビデオを挿入する場合、現在 YouTube または Vimeo のリンクのみがサポートされています。この 2 つを比較すると、YouTube の関連ビデオの推奨事項はユーザーを当社の Web サイトから引き離す傾向があるため、Vimeo の方が優れたエクスペリエンスを提供します。

Vimeo の無料版では、ビデオのサポートとプレーヤースタイルの設定が制限されています。条件が許せば、有料版の使用を検討してください。

商品の3DモデルをShopifyにアップロードする

画像や動画と比較して、商品の 3D モデルは顧客により多くの商品情報と詳細を示すことができます。Shopify は、ファイルサイズが 500 MB を超えない 3D モデルファイルタイプ GLB と USDZ をサポートしています。3D モデルファイルが 15 MB を超える場合、Shopify はモデルの構造とテクスチャを最適化し、3D ファイルを短時間でパッケージ化します。

私はオンライン（sketchfab.com）から 5MB の GLB ファイルをダウンロードしました。WebPageSpeed でページ読み込みのウォーターフォールフローをチェックしたところ、動画のように、ページにはシステムによって自動生成された 3D モデルのサムネイルのみが読み込まれました。そのため、GLB ファイルは大きいですが、Web ページの起動速度に特に大きな影響を与えません。顧客がモデルの参照ボタンをクリックした場合にのみ、システムはこの 5MB のファイルのダウンロードとページの読み込みを開始します。