ECサイトの運営で大切なのは商品のイメージを伝える画像です。ECサイトで商品やサービスを購入したり利用したりする方は、画像や映像、商品説明しか判断する基準がないためです。
Shopify（ショッピファイ）で使用されているテーマは、写真サイズが大きいことが特徴です。画像を見て「商品を買いたい」「サービスを利用したい」と思ってもらえなければ、購入せずに離脱されてしまうでしょう。
商品やサービスに直接触れることができないインターネットショッピングは、購入者が購入した後の未来を想像できるものでなければなりません。商品がいくら良いものであっても、画像をきちんと用意していなければ、ECサイトの売上は伸びないでしょう。
そこで今回は、ECサイト制作サービスのなかでも写真を多く使用するテーマが多いShopifyをもとに、ECサイトを制作する際に推奨される画像サイズを紹介します。また、画像を適切にリサイズする方法も解説します。これからShopifyでECサイトを制作する方や、画像を新しく掲載したい方はぜひご覧ください。
Contents
Shopify（ショッピファイ）で推奨される商品画像サイズ
Shopify（ショッピファイ）では、写真のアップロード枚数が多いことが特徴です。Shopifyで1商品ごとにアップロードできる枚数と写真サイズは次のとおりです。
| 1商品ごとにアップロードできる枚数 | 250枚 |
| 写真アップロードが可能なサイズ |
|
ピクセルとdpiとは？
ピクセルは、デジタルの画像で使われる単位で最小単位を表します。デジタル画像は1つずつ小さな点で成り立ちます。点（ドット）に色を加えたものが画素（ピクセル）ともいえるでしょう。「2048ｘ2048」の画像は、縦に2048個、横に2048個のピクセルが組み合わさった画像です。ピクセル数が多いほどハッキリと鮮明な画像になります。
画像の判断では、ピクセル以外に解像度（dpi）という基準もあります。ピクセルは画像の最小単位ですが、大きさを表すものではありません。解像度（dpi）とは画像の密度を表します。
1インチ(2.54cm)あたりのピクセル数です。Shopifyでは1枚の画像サイズは最大20メガまでと上限設定があります。解像度は72dpi以上のものを使用するのがおすすめです。
Shopifyでアップロードできる画像フォーマット
デジタル画像には複数のフォーマットがあります。Webページで使用される画像フォーマットは、主に次のとおりです。
| 画像フォーマット形式 | 概要 |
|---|---|
| JPG |
|
| PNG |
|
| GIF |
|
Shopifyでは「JPG」や「PNG」が推奨されており、JPGやPNG以外のフォーマットでアップロードをしてもJPGやPNGに自動変換されます。PSD、TIFF、BMPなどのフォーマットもアップロードは可能ですが、20メガを超える可能性があるため、Shopifyの商品画像に使用するのはJPGかPNG形式にしましょう。
JPGの画像は商品の色合いが鮮やかな写真や、色使いが複雑な写真を表現するのに適しています。PNGの画像は、圧縮率が90%と高いので読み込み速度が速いことが特徴です。さらに、JPGでは不可能な透過処理が可能なので、ロゴやアイコンの作成に適しています。
| 画像フォーマット | フォーマットの最適な使用例 |
|---|---|
| JPG | 色数の多い写真に適しているが圧縮回数を重ねると画質が劣化 |
| PNG | 画像を透過させて使用したい場合。文字や図が含まれるものに最適 |
| GIF | 簡単なアニメーションをつくるときに使用 |
画像フォーマットのそれぞれの特徴や使用例を踏まえつつ、つづいてShopifyのページごとにアップロードする推奨サイズを紹介します。
| 掲載箇所 | 推奨サイズ |
|---|---|
| Shopifyコレクション | 2048×2048ピクセル |
| スライドショー |
※使用するテーマにより推奨サイズが異なります |
| ロゴ画像 | 最大450×250ピクセル |
Shopifyバナー画像のおすすめサイズは特に指定はありません。Shopifyには画像を自動でトリミングする機能があるため、調整されるからです。画像の端をトリミングされてしまうので、掲載された画像を確認しながら微調整することをおすすめします。
ShopifyのテーマはPCとモバイルで表示が最適になるようにレスポンシブデザインに対応しているテーマがほとんどです。とはいえ、PCでキレイに見える画像でも、スマートフォンなどのモバイルで同じように自動調整されるとは限りません。PCとモバイルと両方チェックしておきましょう。
昨今、ECサイトでショッピングをするユーザーの多くは、スマートフォンから検索する割合が高いです。モバイル端末でトリミングにより不自然に引き伸ばされた写真になったり、ぼやけたりしないように、修正を忘れないで行いましょう。
Shopify（ショッピファイ）で運営するECサイトにとって画像サイズが重要である理由
ECサイトでオンラインショッピングを楽しむユーザーは、商品の閲覧や購入までの判断は短時間で行います。ECサイト内の画像表示が遅くなると、3秒以上は待たずに立ち去ってしまうといわれています。せっかくECサイトにたどり着いたユーザーも、画像の表示に時間がかかってしまうとページを閉じてしまいます。
商品を販売しているにも関わらず、購入前に離脱されてしまうのは死活問題といえるでしょう。ユーザーに魅力を感じてもらえるような高品質な写真で、かつ表示スピードの早さが求められるのです。画像は高品質で容量の大きいものをアップロードするのではなく、Shopifyが推奨する適切なサイズに最適化しましょう。画像サイズを最適化すると、さまざまな効果を得られます。
- ページ読み込み速度を高速化できる
- 画像表示が意図した表示にできる
- 検索エンジン最適化ができる
Shopifyの画像サイズは、1枚につき最大20メガまで対応していますが、1枚の画像を20メガでアップロードしてしまうとページの読み込みには時間がかかります。ページの表示速度が遅いとすぐ離脱されてしまうため、表示速度の高速化を心がけて画像をアップロードしましょう。
Shopifyの便利な機能として、アップロードされた画像を自動トリミングする機能があります。最適なサイズでアップロードされていない画像は、Shopify側で自動的にトリミングして表示します。写真の画質が良く綺麗な写真でも構図がおかしかったり途中で切れたりしている画像では、商品やサイトの魅力が減少してしまいます。
解像度やサイズと画像ファイル名を適切なものにすると、Googleなどの検索エンジンで最適な画像と評価されるため、SEOの効果も高まるでしょう。ECサイトは商品画像や全体に表示される画像のクオリティの良し悪しは、売上に直接影響を及ぼすものなので、画像は最適な方法でアップロードしましょう。
Shopify（ショッピファイ）で画像サイズを編集する方法
Shopify（ショッピファイ）の商品登録時に画像のサイズを編集する方法は次のとおりです。
Shopify管理画面の左側にある商品管理から「商品を追加する」をクリックします。商品の説明の下にある「メディア」の部分に、使用したい商品画像をドラッグ＆ドロップしてアップロードを行います。いったんアップロードした商品画像のリサイズや編集をしたいときの手順は次のとおりです。
- 商品ページの画像をクリックする
- 画面の右側に表示される『代替テキスト』で画像の説明文を入力する
画面左下にはそれぞれ『画像のトリミング』『画像のリサイズ』『画像の描画』ができるコマンドがあるので、こちらでトリミングやリサイズを行いましょう。さらに画像形式で正方形を選択すると、縦横比が同一の画像にリサイズされます。
Shopifyの商品管理画面の中で、画像編集が手軽にできるのはとても便利です。ただし、この変更方法だとトリミングなどの変更は1枚ずつ行わなければなりません。商品点数が多く、まとめて画像を編集したいときは不便です。複数の画像を編集したいときは、リサイズツールやアプリの利用をおすすめします。
商品の画像サイズを編集したいときに便利なShopifyアプリ
Shopify（ショッピファイ）で商品の画像サイズを編集するときに便利なアプリを紹介します。編集アプリを利用すると、効率良く画像のリサイズやトリミングができるため便利です。操作方法や特性について解説していきましょう。
公式オプティマイザー
Shopifyが公式に提供している無料の画像サイズ変更ツールです。公式オプティマイザーは、Shopifyで推奨される正方形の画像サイズにリサイズできるツールです。使用方法はとても簡単です。
- 公式オプティマイザーのページにアクセスする
- サイズ変更したい画像をドラッグ＆ドロップする
- リサイズしたい画像サイズを選択して「送信」をクリックする
- リサイズされた画像をダウンロード＆保存する
公式オプティマイザーのページに画像を直接ドラッグ＆ドロップするだけで簡単にリサイズできます。一度に6枚までリサイズ可能です。リサイズできる画像サイズは次の3種類です。
- 大（4472×4472）
- 中（2048×2048）
- 小（1024×1024）
初心者でも安心！画像のリサイズ方法やおすすめアプリ
初心者でも安心して画像のリサイズやトリミングができる画像編集アプリをご紹介します。Shopifyと連携して使用するアプリ1つと、オンライン上で編集できるサイトを2つご紹介します。ぜひ参考にしてください。
Bulk Image Edit ‑ Image SEO
Bulk Image Editは海外製のアプリですが、画像のリサイズやトリミングといった編集だけでなく画像ファイルの代替テキストの設定も可能です。画像形式の変換（JPG⇔PNG）にも対応しています。主に使用する機能は次の内容が挙げられます。
- 画像のファイルサイズを縮小できる（品質はそのままで）
- 使用しているテンプレートがカスタマイズ可能なものであれば、画像の代替テキストやファイル名を一括更新
- 縦横比を統一した画像を生成・編集
画像は見たイメージも大切ですが、画像が何を示しているのかを表す「代替テキスト」とGoogleがクロールして情報を読み取るファイル名の設定も大事です。画像検索からECサイトへの流入を促進したり、サイト全体のSEO効果を高めたりすることも可能です。
Bulk Image Editでは、さらに画像を無断転用されないようにウォーターマークの表示もできます。料金体系は次のとおりです。
| 料金体系 | 料金 | 利用条件 |
|---|---|---|
| 無料プラン | 無料 | 月50回まで編集可能。30日間バックアップ保存 |
| ベーシックプラン | 9.99ドル/月 | 月1,000回まで編集可能 |
| プロプラン | 19.99ドル/月 | 月3,000回まで編集可能 |
| アドバンスプラン | 49.99/月 | 月10,000回まで編集可能 |
オンラインサイト上で画像編集可能なサイト
画像のトリミングやリサイズはオンラインサイト上でも行えます。一部機能制限はありますが、無料で利用できるサイトを紹介しましょう。
| サイト名 | 機能 |
|---|---|
| Fotor |
|
| pixlr |
|
まとめ
ECサイト運営は、商品画像のクオリティの良し悪しで売上が左右するといっても過言ではありません。商品の画像がボヤけて見づらい場合や、アスペクト比が統一されていない画像だと商品に対する良いイメージを持たれずにスグに離脱されてしまう可能性が高くなるでしょう。
商品画像は、ユーザーが最初に目に触れるポイントです。画像のクオリティを統一して、ユーザーが商品を見て安心してショッピングを楽しめる環境づくりが大切です。
商品で使用する画像はすべて同じ規格で用意されるわけではありません。そのため、トリミングやリサイズの作業は手間もかかります。今回紹介したツールやアプリを活用して、商品画像のクオリティやアスペクト比を統一させて、見映えの良いECサイトにしていきましょう。
Shopifyは簡単にECサイトを構築できるサービスですが、効果的な集客や販売対策を行って、売り上げを上げるには専門的なノウハウや経験が必要です。自社でECサイト運営経験がない場合や成果が出せない場合でも、コンサルを受けることで現状の問題を解決できる可能性があります。
Shopify Guideは、メディアの運営によってShopifyに関する幅広く情報を得ているため、Shopifyでの運営ノウハウを共有することができます。商品画像のクオリティに限らず、Shopifyの運営に関してお困りの場合は、こちらの問い合わせフォームからお気軽にお問い合わせください。ShopifyでECサイトの運営を始めるなら、知識を持ったパートナーと始めることをおすすめします。
