Shopifyでオンラインショップを運営するときに使用する画像は、とても重要です。
というのも、ネットユーザーは、実際に商品やサービスを手にすることができないので、商購入するときは品画像だけで判断するから。
つまり、商品やサービスの画像は、ユーザーに購入後の未来をイメージさせなければならないという、とても重要な役割を持っているのです。
なので、商品やサービス画像の良し悪しによって、オンラインショップの売上は大きく変わります。
そこで、ここでは、Shopifyを始めたて、あるいは、これらからオンラインショップを構築したい方向けに推奨の画像サイズや画像を最適にリサイズする方法をまとめました。
Shopifyで開設したオンラインショップに、商品やサービス画像を上手くアップロードできていない人は必見ですよ。
Contents
Shopifyの推奨商品画像サイズとは
Shopifyは、ストアでアイテムごとにそれぞれ250枚の画像をアップロードすることができます。
アップロードできる画像サイズは、最大で4472×4472ピクセルまで、また1枚のファイルサイズは20MB未満までです。
なお、Shopifyのデザイナーや専門家がオススメするサイズは
- 正方形の製品画像で2048×2048ピクセル
となっています。
ちなみに、ピクセルとは画素のことのこと。
1枚の写真は、ピクセル(画素)という小さな四角いマスの集合体から出来ています。
その四角いマスが、画像の上で様々な色となり、縦・横たくさん並べることで色鮮やかな写真となって見えるのです。
なので、この四角いマスが画面上に多ければ多いほど、より鮮明でクッキリとした画像になります。
このピクセルは画像を構成する最小単位で、ピクセル数とは1つの画像に対して何マスあるのか?ということ。
つまり、2048×2048ピクセルの正方形の画像だと、1辺にそれぞれ2048マスが配置されていることになり、ピクセルが多いのできめ細やかな見栄えのする画像だということです。
Shopifyでは2048×2048ピクセルの正方形の画像が最も理想的な画像サイズで、画質も良く見え、なおかつ高速でサイト読み込みできます。
なお、Shopifyで使用する画像の解像度数でオススメなのは、
- 72dpi画像のファイル
ちなみにdpiとは画像の密度のことで、1インチ(2.54cm)あたりのピクセル数です。
なので、Shopifyでは72dpi画像のファイルを利用すればイイということ。
72dpi以下の低解像度の画像も使用は可能ですが、製品画像の品質に影響を与える可能性がありますから注意しましょう。
Shopifyで推奨の画像フォーマット
画像のフォーマットとは、デジタル画像を整理および保存するための標準化された手段のことで、どのような法則で画像を保存しておくかということ。
インターネット上で標準的に使われているフォーマットにはGIF形式やJPEG形式などがよく利用されています。
Shopifyで推奨されている画像のフォーマットは次のとおりです。
- JPEGまたはJPG
- プログレッシブJPEG
- PNG
- GIF
以上のフォーマットでアップロードするようにしましょう。
なお、Shopifyでは上記以外のフォーマットでアップロードしても、画像に変更を加えられることなく自動的にJPEGまたはPNGに変換されます。
PSD、TIFF、BMPなどのフォーマットも、上記同様に自動で変換されます。
なお、Shopify商品画像に使用するときは、JPEG形式かPNG形式がオススメです。
JPEG形式で保存された画像は、品質を損なわずにページの読み込み速度を高速に保つことができ、複雑な色の写真や静止画像を表現するのに適しているからです。
また、PNG形式の画像は、圧縮率が90%と高いので、読み込み速度を高速化でき、なおかつ透過処理ができる形式で、ロゴやアイコンに適したフォーマット形式ですが、商品画像にも充分使えます。
ですから、Shopifyでは商品画像はJPEGもしくはPNG形式でアップロードし、商品の魅力を最大限に伝えるようにしましょう。
以上を考慮しつつ、次のエリアごとにアップロードする推奨サイズをお教えします。
1.Shopifyコレクション画像のオススメサイズ
画像は2048×2048ピクセルの正方形サイズがオススメです。
正方形の商品画像は、ユーザーがズームイン・ズームアウトするときも最高の品質を提供してくれます。
2.スライドショー画像のオススメサイズ
スライドショー画像でオススメのサイズは、幅1200×2000ピクセル、高さ400×600ピクセルです。
3.Shopifyヘッダー画像のオススメサイズ
Shopifyのヘッダーに最適なShopify画像サイズは100ピクセル~250ピクセルです。
なお高さはユーザーの視認性を高めるうえでも120ピクセル以下がオススメです。
4.Shopifyバナー画像のオススメサイズ
Shopifyバナーは、特にオススメサイズの指定がありません。
というのも、Shopifyバナーセクションに合うように画像の端を自動的にトリミングするからです。
なので、自動トリミングされた画像を確認しながら微調整をしていきましょう。
ちなみに、PCのデスクトップ上でキレイに見えるバナー画像であっても、モバイルデバイスでは必ずしも同じようにキレイに自動調整されるとは限らないので、都度確認が必要です。
また、多くのユーザーはスマホから検索するのがほとんどですから、スマートフォンやタブレットで画像が自動トリミングで不適切に引き伸ばされたり、ぼやけたりしないように確認・修正をするようにしてください。
5.Shopifyロゴのオススメサイズ
Shopifyのオススメロゴサイズは最大450×250ピクセルです。
Shopifyのサイドバー幅は250ピクセルなので、ロゴが制限を超えないサイズにしましょう。
Shopifyストアにとって画像サイズが重要な理由
ネットでオンラインショッピングをするユーザーは、せっかちです。
たとえば、ページ内の画像表示が遅いと3秒以上は待ってくれずに立ち去ると言われています。
つまり、せっかくオンラインショップを訪れてくれたユーザーは、画像が重くて開かずに見られない状態になると、他のサイトへスグに移ってしまうのです。
このような状態はストアにとって死活問題。
だから、画像の最適化は重要なのです。
画像の最適化を行なえば、オンラインショップのサイズ容量を大幅に削減できますから、ショップ内を回遊するときのパフォーマンス改善にもなります。
つまり、画像サイズの最適化は次のような効果を得られるのです。
- 処理の高速化
画像ファイルが大きければ大きいほど、ページの読み込みには時間がかかりますから、ユーザーにとっては不都合です。
なので、画像の最適化は、表示速度の高速化をしたいときにとても有効な方法です。
- 意図した表示ができる
画像が最適サイズでないと、使用しているシーンによってShopifyアプリケーションが画像を自動調整します。
そうなると、一番伝えたい重要な部分が自動切り取りされしまって、想いどおりに表示されないこともあります。
- 検索エンジン最適化(SEO)ができる
適切な画像サイズや画像ファイル名を使うと、Googleなどの検索エンジンで最適と評価されSEOの効果も期待できます。
- プロっぽい見た目になる
適切なサイズの画像を使えば、オンラインショップ全体を洗練されたイメージに統一し、いかにもプロ仕様のサイトに見た目を仕上げることができます。
このように、商品画像のクオリティの良し悪しは、オンラインショップの売り上げに直接影響しますから、最適な方法でアップロードしましょう。
【Shopify】商品画像サイズの編集方法
Shopifyに商品画像をアップロードする方法は次のとおりです。
- 管理画面左側にある『商品管理』で『商品を追加する』をクリック
- メディアに商品画像をドラッグ&ドロップ
以上の操作で画像を追加できます。
また、商品画像サイズを編集したいときの操作方法は、
- 追加した商品画像をクリック
- 画面右側の『代替テキスト』で画像の説明文章を入力
さらに、画面左下の項目で次のような編集を行えます。
- 画像のトリミング
- 画像のリサイズ
- 画像の描画
ここで画像フレームを調節したり、リサイズをすることができます。
また、『正方形』を選択すると、縦横比が統一された画像サイズに編集できます。
他にも、画像に色やブラシで描画することができます。
なおShopifyでは、画像を利用したいシーンに応じて、つねに正方形の比率になるよう画像をリサイズしなければなりません。
ですが、このShopify画像編集機能では、1枚ずつの編集しかできません。
このため、多くの画像を利用したい場合は、効率的にアップロードすることができないのです。
なので、複数枚の画像を効率良く処理したい場合は、まとめてリサイズできるツールやアプリを使うと便利です。
商品画像サイズを編集する際に便利なShopifyアプリ
Shopifyの商品画像サイズを編集するのにおすすめのツールやアプリは、次のとおりです。
- 公式オプティマイザー
- Photo Resize
- Bulk Image Edit – Image SEO
上記のツールやアプリを使えば、すべて画像を効率良くリサイズできます。
また、一括で編集できるかどうかや、SEO対策に適した点などで特性も違うので、それぞれ解説していきます。
公式オプティマイザー
Shopifyの提供している画像サイズ変更ツールで、無料で使えます。
公式オプティマイザーは、Shopifyのさまざまなアプリケーションに適したサイズにできます。
使用方法も簡単で、
- オプティマイザーにリサイズしたい画像をドラッグ&ドロップ
- 『今すぐアップロード』をクリックして画像を選択
のいずれかでOKで、画像は最大6枚まで同時リサイズ可能です。
また、リサイズできるサイズは次の3種類で、スグにリサイズでき、ダウンロード保存できます。
- 大(4472×4472)
- 中(2048×2048)
- 小(1024×1024)
Photo Resize
Shopifyに登録した画像を一括でリサイズできるアプリです。
使い方も非常に簡単で、使用したい商品画像の数が少ない人は、無料プランでも大丈夫です。
Photo Resizeはすべての画像を自動で一括読み取りし、簡単に指定のアスペクト比に次の3ステップでリサイズできます。
- アプリをインストール
- 正方形の比率になっていない画像を選ぶ
- 『全ての画像を正方形にする』を選択
料金プランは無料から79ドルまでの4種類で、それぞれリサイズ可能数や元ファイルの保存期間が違ってきます。
なお、無料プランでは50枚まで正方形にのみ一括リサイズが可能です。
ただし、超過した場合は1枚あたり0.05ドルの費用が発生します。
有料プランになるとアスペクト比を選択することもできるようになります。
また、無料プランだとリサイズするまでに時間がかかるようになっていますが、有料プランだとShopifyに画像を追加すると自動で画像が読み込むようにできます。
Bulk Image Edit ‑ Image SEO
画像のリサイズだけでなく、画像代替テキストの設定やファイル名を最適化することができるアプリです。
これらの最適化はSEO対策になりますから、Googleなどの検索で有利になることが期待できます。
Bulk Image Edit ‑ Image SEOの機能は次の通りで
- 画像のファイルサイズや品質を保ったまま圧縮できる
- 代替テキストとファイル名を一括で更新できる
- 縦横比が統一された画像に編集できる
複数の画像を一括で編集でき、画像容量を自動的に51%削減できます。
また、代替テキストとファイル名の一括更新ができますから、画像検索からの流入を期待できたり、オンラインショップ全体のSEO評価を高めることも期待できます。
また、商品画像を無断使用されないよう、画像にウォーターマーク表示することができます。
他にも、編集ログ機能や商品プレビュー機能で画像を元に戻すことができる点も便利です。
料金プランは無料から月額49.99ドルまで4種類。
無料プランは月に50回まで画像編集でき、30日間のバックアップ保存ができます。
有料プランだと、1,000回で月額9.99ドル、3,000回で月額19.99ドル、10,000回で月額49.99ドルになります。
なので、月50回までの編集であれば無料なので、とてもオススメです。
まとめ:【初心者必見】Shopify推奨の画像サイズとは?リサイズ方法やおすすめアプリも紹介
Shopifyのオンラインショップ運営は、商品画像の良し悪しで決まると言っても過言ではありません。
というのも、商品画像が荒くボヤけてたり、画像のアスペクト比が統一されていないチグハグな仕上がりだと、ユーザーはショップからスグに離脱する可能性が高くなるからです。
なので、ショップの商品画像クオリティを統一させ、ユーザーが不安を抱くことなく安心してネットショッピングを楽しめるようにしましょう。
Shopify制作のお見積もり・ご相談
また、初めてのお取組みで不安のある方などもご不明点などはお気軽にご連絡ください。