Shopifyで画像をアップロードする方法は?表示される色にも注意

こんにちは。中川瞬(@shun01224)です。

中川
Shopifyでの画像のアップロードについて知りたい
という方のために、Shopifyでの画像のアップロード方法について解説をします。

この記事を読むことで、

  1. Shopifyで画像を登録する方法がわかる
  2. 表示される色と元画像の色の違いのトラブルを解決できる
  3. 画像を最適化する方法がわかる

この記事を書かせて頂いている私は、現在、

輸出・輸入・国内の転売のノウハウをお伝えしています。

時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、

忙しくても副業で収入を得てもらっています。

それでは、Shopifyでの画像のアップロード方法について解説していきます。

 

ECサイトにおいて画像は重要な要素です。

ユーザーは画像を見て商品の情報を得ることが多く、

画像が荒かったりわかりにくかったりすれば、その商品を購入しないかもしれません。

画像のアップロード方法が適していないと、ユーザーに商品の魅力が伝わらないばかりか、

間違った情報を伝えてしまうこともあるでしょう。

ページを開くまでに時間がかかってしまうこともあります。

そのようなことがないよう、正しい方法で画像をアップロードする必要があります。

Shopifyの画像のアップロード方法

Shopifyでの画像のアップロードは「テーマ」からできます。

操作はシンプルで、難しくはありません。

Shopifyの「テーマ」から画像をアップロードする方法を紹介します。

デスクトップとスマホ、それぞれの方法について解説します。

「テーマ」からアップロード

Shopifyのストアに画像をアップロードするには、

管理画面のファイルページにアップロードする方法と、テーマエディタを利用する方法があります。

ファイルページからのアップロードは、

管理画面→設定→ファイルから「ファイルをアップロード」を選択します。

「テーマ」から画像をアップロードする方法は、次の手順で行います。

デスクトップの場合

デスクトップで画像をアップロードする手順は次の通りです。

  1. 管理画面→オンラインストア→テーマをクリック
  2. 手を加えるテーマを選択し、「カスタマイズする」をクリック
  3. テーマエディタツールバーで画像を追加するセクション(画像ピッカーを含む)を選択
  4. 「画像を選択する」を選び、追加したい画像を選択
  5. コンピュータから追加する場合は「アップロード」を、無料のストック画像を使用する場合は「無料の画像」を選択
  6. 使用する画像を選択し保存

iPhone・Androidの場合

iPhone・Androidなどのスマートフォンから画像をアップロードする手順は次の通りです。

  1. Shopifyアプリから「ストア」を選択
  2. 販売チャネルセクションで「オンラインストア」を選択
  3. 「テーマを管理する」を選択
  4. 編集するテーマから「カスタマイズする」を選択
  5. 「編集」を選択
  6. テーマエディタツールバーで画像を追加するセクション(画像ピッカーを含む)を選択
  7. 「画像を選択する」を選び、追加したい画像を選択
  8. スマートフォンの中から追加する場合は「アップロード」を、無料のストック画像を使用する場合は「無料の画像」を選択
  9. 使用する画像を選択し保存

使用可能な画像フォーマット

Shopifyで使用可能な画像フォーマットは、JPEG・JPG・プログレッシブJPEG・PNG・GIFです。

主に使用される画像フォーマットの特徴を解説します。

JPEG

JPEGは1670万色のフルカラーをサポートする画像フォーマットで、

デジタルカメラのほとんどがJPEGです。

サポートする色の数が多く、大きな画像を使用したい場合や複雑な色の写真、

静止画像におすすめ。

グラデーションなど色の変化にも対応しているので、美しい色を再現してくれます。

圧縮率も高くファイルサイズを小さくすることもできるので、

ページの読み込み速度をアップすることが可能です。

ただし、非可逆圧縮方式のため、元の画像の品質に戻せないので注意しましょう。

GIF

GIFはモノクロ2色から256色をサポートする画像フォーマットで、

高い圧縮ができるのが特徴です。

ファイルサイズを小さくできるため、ページの読み込みの速度を上げることができます。

サポートする色がJPEGと比べると多くはないため、

ロゴ・アイコン・ボタンなどシンプルなデザインの画像におすすめです。

また、透過やアニメーション設定ができ、

アイコンにちょっとした動きをつけることもできます。

PNG

PNGはフルカラー・最大で約280兆色をサポートする画像フォーマットです。

ただし、サポートできるのはRGBのみです。

圧縮率も高く、GIFフォーマットの10~30%ほど、ファイルサイズを小さくできます。

可逆圧縮で圧縮してから画像が劣化することもありません。

さらに、透過・不透明のほか半透明を実現できるのも特徴です。

ただし、フルカラーにするとJPEGよりファイルサイズが大きくなってしまうので注意が必要です。

Shopifyでアップロードできる画像の種類

画像があれば、ストアの商品情報をより詳しく魅力的に伝えられます。

Shopifyでアップロードできるのは写真のほかに、3Dや動画です。

商品をわかりやすく伝える方法や、魅力的に見せる方法などを考えることが大切です。

そして、ストアや商品に適した画像を作成して、アップロードをしましょう。

正しい方法でアップロードしなければ、せっかくの努力も水の泡になってしまいます。

Shopifyでアップロードできるそれぞれの画像について解説します。

写真

Shopifyの商品画像に適しているファイル形式は、PNG、その次がJPEG、GIFです。

ほかにも、PSD、TIFF、BMPなどがあります。

商品画像とコレクション画像は、最大4472✕4472ピクセル、

または20メガピクセルまでのサイズが可能です。

ファイルサイズは20MB未満であることが必要です。

写真は美しく、詳細までわかるものでなければ、

正しい情報を伝えられず魅力も半減してしまいます。

そのためにも解像度を高めることが大切です。

Shopifyでは正方形画像の場合、2048✕2048ピクセルのサイズを推奨しています。

3D

3Dモデルなら、商品のサイズやスケールなどをより正確に把握することができます。

さまざま角度から商品を閲覧ができるため、よりリアルに商品をイメージすることが可能です。

そのため、購入につながりやすくなります。

Shopifyでは管理画面の商品ページから、画像やビデオ、

3D一括を編集・管理することができます。

3Dモデルを作成する方法の一つは、アプリケーションの利用です。

写真から、3Dモデルの自動生成ができる無料のWEBサービスアプリがあるので、

それを使うのがおすすめです。

よりクオリティの高い3Dを作成するなら、有料アプリもあります。

CAD作成などのスキルがあれば、

3Dモデリングソフトを使って自分で3Dモデルを作成することもできます。

どちらの方法も難しそうでできないという場合は、

3Dモデルを作成してくれる業者に依頼するとよいでしょう。

動画

動画を追加する方法は次の2つ。

ビデオファイルをアップロードするか、

YouTubeまたはVimeoのビデオリンクを埋め込む、といった方法です。

ビデオファイルをアップロードする際には、以下の条件を守りましょう。
• ビデオの長さは最大60秒
• ビデオサイズは最大1GB
• ビデオ解像度は最大4K(4096✕2160ピクセル)
• ビデオファイルは.mp4もしくは.mov

YouTubeやVimeoの場合は、上記のような条件は関係ありません。

すでにYouTubeなどを作成している場合は、そちらを利用したほうが簡単です。

3Dや動画を表示するには、

テーマがきちんと対応していること最新バージョンであることが必要です。

対応していない場合でも、変更を加えることが可能な場合もあるので確認してみましょう。

Shopifyで商品画像をCSVで登録する方法

Shopifyで、画像をアップロードするのは商品登録の画面から簡単にできます。

枚数が多いなど、より本格的に画像登録する場合、CSVによる一括管理が便利です。

CSVによる商品画像登録は、画像登録→登録した画像ファイルを指定するといった流れとなります。

画像の登録は商品追加の画面「メディア」に写真をドラッグ&ドロップするだけです。

画像の指定方法は、「Image Src」に画像ファイルがあるURLを指定します。

その際、Shopifyとは異なるサーバーの画像ファイルを取りにいかなければならないので、

画像ファイルを取り扱えるWebサーバーが必要です。

Webサーバーがない場合は、Shopifyサーバーのファイル管理を利用できます。

Shopifyで元画像と表示画像の色が違う!を解決

Shopifyストアに画像をアップロードしたら、元の画像と色が違うということも少なくありません。

商品によっては、色の違いは重要な問題です。

色の違いで、返品やクレームになるのは避けたいものです。

もちろん、実際に見る色と全く同じにするのは難しいでしょう。

しかし、できるだけ色を再現できたほうが、

色違いによるクレームは確実に減らすことができます。

ここでは元画像と色が違う原因と解決方法について解説します。

元画像と表示画像の色が異なる原因

オンラインストアで画像を表示した際、元画像の色と異なる原因の一つは、

カラープロファイルによるものです。

色の身分証明書とも言われるカラープロファイルには、複数のものが存在します。

主に画像に使用されているのがsRGBとadobeRGBです。

この2つは、それぞれに表現できる色の範囲が異なるため、

埋め込まれているカラープロファイルが異なると、色の違いが生じます。

また、なかにはカラープロファイルが埋め込まれていないものもあります。

それらの違いで、表示画像の色に違いが生じてしまうのです。

画像からカラープロファイルを削除する

通常、カラープロファイルは複数のデバイスでカラーの表示方法を標準化するためのものです。

しかし、種類が違うまたはカラープロファイルの有無などで、

表示される画像の色が異なることがあります。

Shopifyのオンラインストアでは、画像が表示する際にカラープロファイルが削除されます。

カラープロファイルを削除する理由は、

読み込みを短くするためやデバイス間で画像の色の不一致を少なくするなどさまざまです。

カラープロファイルを削除する方法

Shopifyにアップロードをする前に、カラープロファイルを削除することも可能です。

方法は画像アプリケーションソフトによっても異なりますが、

Adobe Illustrator、Adobe Photoshopでは、

次のような手順でカラープロファイルの削除が可能です。

  1. 「編集」→「プロファイルの割り当て」を選択
  2. 「このドキュメントのカラー管理をしない」を選択

Adobe InDesignの場合は次の通りです。

  1. 「編集」→「プロファイルの割り当て」を選択
  2. RGBプロファイルとCMYKプロファイルの場合は「破棄(現在の作業スペースを使用)」を選択

カラープロファイルを削除するメリット

Shopifyのオンラインストアでカラープロファイルが削除されるのは、

主に次のようなメリットがあります。

一つは画像の色の不一致を最小限にすることです。

カラープロファイルが削除されないままだと、

ユーザーのデバイスですべての拡張子を読み込めるわけではありません。

拡張子が読み込めないと、色が一致しないというトラブルが起こりやすくなるでしょう。

アップロードされた画像にカラープロファイルが埋め込まれていなければ、

通常ブラウザでは、sRGBを使用します。

その結果、すべてのブラウザやデバイスで画像の不一致を少なくすることが可能です。

また、先にも述べましたが、カラープロファイルはディスク領域を大量に占めるケースがあり、

そういった場合、読み込み時間が長くなってしまいます。

カラープロファイルを削除すれば、そのようなデメリットが解消されます。

Shopifyの画像を最適化するツール

Shopifyストアでは、画像サイズやページ展開のスピードなどに配慮が必要です。

デザインの勉強をして専門的な知識があれば簡単かもしれませんが、そうでない限り、

最適な画像サイズを選択するのは簡単ではありません。

そこで、Shopifyの画像を最適化できるツールを紹介します。

Bulk Image Edit-Image SEO

画像サイズ・代替テキスト・ファイル名を最適化してSEO対策につなげてくれます。

画像のファイルサイズを保ったまま小さくでき、

縦横比率が統一された画像を簡単に作成できます。

更新前には、商品イメージをプレビューが見れるのも安心できるポイントです。

編集した商品を確認できます。

画像リサイザー

それぞれのアプリケーションに適したサイズで画像の作成が可能です。

オンラインストアの商品画像のほか、ニュースレターやプロフィールなど、

それぞれの目的や用途にあわせて簡単に適したサイズに画像をリサイズしてくれます。

ストアの画像は重要!知識と操作を習得しよう

Shopifyストアで画像は売上に関係する重要なものです。

Shopifyでの画像の取り扱い方を把握し、見やすくわかりやすいページ作成をしましょう。

また、画像サイズなどによってはページ展開が遅くなってしまいます。

ページが開くのが遅いのはデメリットとなるので、画像の最適化が必要です。

商品の情報をわかりやすくすると同時に、快適に閲覧できるページ作成を目指してください。

物販を実践して結果を出されている方で、丁寧に教えてくれる方をご紹介していますので、

下の記事ぜひ読んでください。