画像のアップロード

会社のロゴ、商品画像、スライドショー、バナー、ブログ記事画像など、さまざまな種類の画像をオンラインストアで使用できます。Shopifyでは、オンラインストアで画像を表示する際に最適な画像形式が自動的に使用されることを保証するだけなく、トリミングやサイズ変更の操作の際には画像を動的に変換する機能を提供します。

画像をアップロードする

オンラインストアで画像をアップロードできる場所は2つあります。

ファイルページに画像をアップロードする

管理画面のファイルページに画像をアップロードできます。テーマの編集中にこれらの画像にアクセスできるので便利です。詳細については、「ウェブサイトへのファイルのアップロード」を参照してください。

テーマエディターで画像をアップロードする

テーマエディターでテーマに画像を追加できます。

手順:

  1. ドロップダウンメニューを使用して、編集するテンプレートを選択します。
  2. テーマエディターサイドバーで、画像を追加するセクションまたはブロックをクリックします。
  3. [画像を選択] をクリックし、次のいずれかの操作を実行します。

    • コンピューターから画像をアップロードするには、[アップロード] をクリックします。
    • Burstの無料ストック画像を使用するには、[無料の画像を探す] をクリックします。
  4. 画像をクリックしてテーマ内での画像のプレビューを表示します。使用する画像を見つけたら、[選択] をクリックします。

  5. [保存] をクリックします。

メタフィールドを使用して画像を追加する

画像にメタフィールドを設定している場合、動的ソースピッカーを使用して画像を追加できます。メタフィールドとサポートされている画像フォーマットの詳細については、「メタフィールドのコンテンツタイプと値」を参照してください。

画像バナー

次の要素を使用して画像バナーを作成できます。

  • 1つまたは2つの画像
  • text
  • アクションボタン

デスクトップコンピューターでは、バナー画像は横並びで表示されます。このフォーマットはモバイルデバイスには適していないので、[画像バナー]テーマ設定[モバイルで画像を重ねる] オプションを選択して、画像バナー写真を重ねて表示することができます。画像バナースライドショーについて詳しくは、「スライドショーと画像バナーのベストプラクティス」を参照してください。

画像フォーマット

Shopifyは以下の画像フォーマットをサポートしています。

  • JPEG
  • プログレッシブJPEG
  • PNG
  • GIF
  • HEIC
  • WebP
  • AVIF

JPEG画像を使用するケース

JPEG画像は、複雑な色の写真や静止画像に最適です。JPEGフォーマットには、数百万色のパレットがあります。JPEGには、画像の品質を著しく損なうことなく、ページの読み込み時間を高速に保つのに役立つ、非可逆圧縮機能もあります。

次の種類の画像には、JPEGフォーマットを使用します。

  • 商品
  • バナーまたはスライドショー
  • ページとブログ記事

PNG画像を使用するケース

PNG画像は、フラットカラーとグラデーションなしのグラフィックやアイコンに最適です。PNGフォーマットでは透過処理ができます。

次の種類の画像には、PNGフォーマットを使用します。

  • ロゴ
  • アイコン
  • 罫線とトリム

自動画像圧縮と自動画像ファイル形式選択

画像の読み込み時間を短縮するために、Shopifyは、オンラインストアに表示される画像を自動的に圧縮されます。画像を圧縮すると、ファイルサイズが縮小されるため、ページの読み込み速度が上がります。

画像を圧縮することに加え、Shopifyでは、画像を表示する際に使用する最適なファイル形式が自動的に判別されます。たとえば、購入者のウェブブラウザーがWebPやAV1 Image File Format (AVIF)などの最新の画像ファイル形式に対応していることが検出されると、Shopifyでは、そのファイル形式で画像が表示されます。

アップロード制限

Shopifyへの画像アップロードには、メガピクセルとファイルサイズ (メガバイト単位) の両方で制限があります。メガピクセルは、画像のピクセル構成数 (百万単位) を示すために使用されます。メガバイトは、画像が占めるメモリまたはディスクスペースの数 (百万単位) を示すために使用されます。

次のいずれかの制限を超える画像をShopifyにアップロードすることはできません。

  • 20メガピクセル
  • 20メガバイト

画像のメガピクセルを知るには、(pixel width x pixel height)/1,000,000を使用します。たとえば、解像度4900 x 6930の画像は、(4900x6930)/1,000,000 = 33.9 MPなので、33.9メガピクセルとなります。

カラープロファイル

オンラインストアで画像を表示すると、画像の色が、Shopifyにアップロードした元の画像と異なる場合があります。.ICC または .ICM の拡張子が付いたファイルに格納される一連のデータであるカラープロファイルが画像にある場合、こうした現象が発生します。通常、カラープロファイルは、さまざまなデバイスでのカラー表示方法を標準化するために画像に埋め込まれます。オンラインストアで画像が表示される際、そのカラープロファイルは削除されます。

カラープロファイルが削除される理由はいくつかあります。

  • すべてのデバイスで .ICC または .ICM のカラープロファイルを読み込めるわけではないため、そのまま維持されるとデバイス間で画像の色の不一致が生じる場合があります。
  • アップロードされた画像にカラープロファイルが含まれていない場合、ウェブブラウザーではsRGB (ウェブ上に画像を表示する際に使用される最も一般的なカラープロファイル) を使用します。これにより、すべての主要なウェブブラウザーやデバイスで画像の見え方が統一されます。
  • カラープロファイルは大量のディスク領域を占める場合があり、読み込み時間が長くなることがあります。

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

Shopifyにアップロードする前にカラープロファイルなしで保存して、画像からカラープロファイルを削除することができます。この処理は、画像編集プログラムによって異なります。

Adobe IllustratorまたはAdobe Photoshopを使用してカラープロファイルを削除する

Adobe IllustratorまたはAdobe Photoshopを使用してカラープロファイルを削除するには

  1. [編集] > [プロファイルの割り当て] をクリックします。

  2. [このドキュメントのカラー管理をしない] を選択します。

  3. [OK] をクリックします。

Adobe InDesignを使用してカラープロファイルを削除する

Adobe InDesignを使用してカラープロファイルを削除するには

  1. [編集] > [プロファイルの割り当て] をクリックします。

  2. RGBプロファイルとCMYKプロファイルの場合は、[破棄 (現在の作業スペースを使用)] を選択します。

  3. [OK] をクリックします。

詳細については、カラープロファイルに関するAdobeのドキュメントを参照してください。

スライドショー、画像バナー、フルサイズ画像のベストプラクティス

多くのShopifyテーマには、ブラウザーの高さに合わせて拡大したり、画面サイズに適応したりする大きな画像やスライドショーがあります。

これらのテーマのいずれかを使用するか、大きなスライドショーや背景画像がある場合は、どのタイプの画像が最もよく見えるかを理解することが重要です。

大きな画像はすべてのデバイスに収まるわけではないため、使用デバイスによっては、画像の一部しか表示されないことがあります。画像スライドショーに大きな画像が多数含まれていると、画像の一部が見えないことがあります。

おすすめ

使用テーマで画像がうまく機能するよう、次の点に留意してください。

  • 一部のテーマには、画像のどの部分が焦点かを指定するために使用できる画像の位置設定があります。テーマにこのような設定がない場合は、各画像の焦点が中央にあることを確認してください。一部の画面で画像が切り取られる場合は、焦点が表示され、周囲の領域は非表示になります。

  • スライドショーやバックグラウンドには、テキストのない画像を使用してください。テキストが画像自体の一部である場合は、テーマに基づいて移動、切り取り、または調整される可能性があります。テーマエディターを使用して、スライドショーにテキストやリンクを追加します。

  • スライドショーやバックグラウンドとして使用する画像は、上に表示されているテキストが読みやすいよう、シンプルな画像を選択してください。

高さのある画面における幅の広い画像

表示に使用するデバイスの画面に高さがある場合 (携帯電話やタブレット等)、幅の広い画像の左右が切り取られることがあります。

高さのある画面における幅の広い画像

幅の広い画面における高さのある画像

表示に使用するデバイスの画面の幅が広い場合 (ラップトップやデスクトップ等)、高さのある画像の上下が切り取られることがあります。

幅の広い画面における高さのある画像

Shopifyで販売を開始する準備はできていますか?

無料体験を試す