画像のアップロード
会社のロゴ、商品画像、スライドショー、バナー、ブログ記事の画像など、さまざまなタイプの画像を使用できます。また、トリミングやサイズ変更の操作によって、画像を編集できます。さらに、テーマのメディア設定をカスタマイズすることにより、ストアに表示されているメディアすべての枠線や影を変更できます。
オンラインストアで画像を希望どおりに表示させるには、正しい画像アスペクト比を使用する必要があります。画像は、Shopifyのコンテンツ配信ネットワーク (CDN) を使用して、ストアフロント用に自動的に最適化されます。
目次
テーマエディタで画像をアップロードする
テーマエディタでテーマに画像を追加できます。管理画面の [コンテンツ] > [ファイル] セクションで、画像をアップロードすることもできます。詳細については、「ファイルのアップロードと管理」を参照してください。
手順:
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- 画像をアップロードするテーマの [カスタマイズ] をクリックします。
- 任意：ストアのホームページ以外のページに画像を追加する場合は、[ホームページ] ドロップダウンメニューをクリックして、編集するテンプレートを選択します。
- テーマエディタサイドバーで、画像を追加するセクションまたはブロックをクリックします。
-
[画像] フィールドで、以下のいずれかの操作を行います。
- コンピューターから画像をアップロードするには、以下の手順を実行します。
- [画像を選択] > [画像を追加] の順にクリックします。
- コンピューター上の画像を検索して開きます。
- [完了] をクリックします。
- コンピューターから画像をアップロードするには、以下の手順を実行します。
- Burstの無料のストック画像を使用するには、以下の手順を実行します。 1. [無料の画像を探す] をクリックします。 2. 使用する画像を見つけます。 3. [選択] をクリックします。
- [保存] をクリックします。
Shopifyアプリで [...] ボタンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
画像をアップロードするテーマの [カスタマイズ] をタップします。
任意：ストアのホームページ以外のページに画像を追加する場合は、[ホームページ] ドロップダウンメニューをタップして、編集するテンプレートを選択します。
[セクション] をタップし、画像を追加するセクションまたはブロックをタップします。
-
[画像] フィールドで、以下のいずれかの操作を行います。
- デバイスから画像をアップロードするには、以下の手順を実行します。
- [画像を選択] > [画像を追加] の順にタップします。
- デバイス上の画像を検索して開きます。
- [完了] をタップします。
- デバイスから画像をアップロードするには、以下の手順を実行します。
- Burstの無料のストック画像を使用するには、以下の手順を実行します。 1. [無料画像を探す] をタップします。 2. 使用する画像を見つけます。 3. [完了] をタップします。
- [保存] をタップします。
Shopifyアプリで [☰] ボタンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
画像をアップロードするテーマの [カスタマイズ] をタップします。
任意：ストアのホームページ以外のページに画像を追加する場合は、[ホームページ] ドロップダウンメニューをタップして、編集するテンプレートを選択します。
[セクション] をタップし、画像を追加するセクションまたはブロックをタップします。
-
[画像] フィールドで、以下のいずれかの操作を行います。
- デバイスから画像をアップロードするには、以下の手順を実行します。
- [画像を選択] > [画像を追加] の順にタップします。
- デバイス上の画像を検索して開きます。
- [完了] をタップします。
- デバイスから画像をアップロードするには、以下の手順を実行します。
- Burstの無料のストック画像を使用するには、以下の手順を実行します。 1. [無料画像を探す] をタップします。 2. 使用する画像を見つけます。 3. [完了] をタップします。
- [✓] をタップします。
メタフィールドを使用して画像を追加する
画像にメタフィールドを設定している場合、動的ソースピッカーを使用してオンラインストアに画像を追加できます。メタフィールド、および対応している画像フォーマットの詳細については、「メタフィールドに値を追加する」を参照してください。
画像にフォーカルポイントを設定する
フォーカルポイントを使用して、オンラインストア上の画像の最も重要な部分を定義できます。画像にフォーカルポイントを設定すると、その部分にピントが合うようになります。フォーカルポイントは、レイアウトに合わせて画像がトリミングされるテーマを使用している場合でも、常に枠内に表示されます。フォーカルポイントを使用すると、さまざまな画面サイズで画像を表示する方法や、テーマで異なるアスペクト比が使用されている場合に、画像の表示方法を調整しやすくなります。
フォーカルポイントは、1個の画像につき1つしか設定できませんが、いつでもフォーカルポイントを変更したり削除したりできます。
Shopifyの無料テーマとのフォーカルポイントの互換性
Shopifyの無料テーマの以下のバージョンでフォーカルポイントを設定できます。
- Colorblockバージョン3.0.0以降
- Craftバージョン5.0.0以降
- Craveバージョン5.0.0以降
- Dawnバージョン7.0.0以降
- Originバージョン1.0.0以降
- Publisherバージョン1.0.0以降
- Refreshバージョン2.0.0以降
- Rideバージョン3.0.0以降
- Rideバージョン1.0.0以降
- Senseバージョン5.0.0以降
- Spotlightバージョン0.0.1以降
- Studioバージョン4.0.0以降
- Tasteバージョン4.0.0以降
- Tradeバージョン1.0.0以降
外部サービスのテーマを使用している場合、利用しているテーマでフォーカルポイントを使用できるかどうかは、テーマのドキュメントを確認してください。
画像にフォーカルポイントを追加する
画像にフォーカルポイントを追加し、その画像をオンラインストア上の複数箇所で画像を使用した場合、画像を使用する場所に同じフォーカルポイントが適用されます。
テーマで画像のトリミングやサイズ変更を行う方法によっては、フォーカルポイントが視覚的に中央に表示されないことがあります。
手順:
-
管理画面で、以下のいずれかのロケーションから画像をクリックします。
- [コンテンツ] > [ファイル] セクション。
- テーマエディタ。
- [商品管理] セクションの商品リストの [メディア] セクション。
- Shopifyメールエディタ。
- 画像を追加するための [ファイル参照] タイプのメタフィールドがあるリソースの [メタフィールド] セクション。
フォーカルポイントを設定する画像の部分を選択するには、画像をクリックするか、青色のドットをドラッグします。
[保存] をクリックします。
画像からフォーカルポイントを削除する
手順:
-
管理画面で、以下のいずれかのロケーションから画像をクリックします。
- [コンテンツ] > [ファイル] セクション。
- テーマエディタ。
- [商品管理] セクションの商品リストの [メディア] セクション。
- 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) などの最新の画像形式に対応していることが検出されると、画像はその形式で表示されます。
ファイルサイズを小さくしてパフォーマンスを向上させるために、GIFはアニメーション付きWebPフォーマットに自動的に変換されます。
画像のアップロード制限
Shopifyへの画像アップロードには、メガピクセルとメガバイトのファイルサイズの両方で制限があります。メガピクセルは、画像のピクセル構成数 (百万単位) を示すために使用されます。メガバイトは、画像が占めるメモリまたはディスクスペースの数 (百万単位) を示すために使用されます。
次のいずれかの制限を超える画像をShopifyにアップロードすることはできません。
- 20メガピクセル
- 20メガバイト
画像のメガピクセル値を見つけるには、以下の式を使用します。
(pixel width x pixel height)/1,000,000
たとえば、解像度4900ピクセル × 6930ピクセルの画像は、(4900x6930)/1,000,000 = 33.9 MPなので、33.9メガピクセルになります。
画像のカラープロファイル
オンラインストアで画像を表示すると、画像の色が、Shopifyにアップロードした元の画像と異なって表示される場合があります。これは、画像にカラープロファイル (.ICCや.ICMの拡張子が付くファイルに格納されているデータセット) がある場合に発生します。
カラープロファイルは、多くの場合、画像に埋め込まれていて、さまざまなデバイスでの色の表示方法を標準化できるようになっています。オンラインストアで画像が表示される際、そのカラープロファイルは削除されます。
カラープロファイルは、以下の理由で削除されます。
- すべてのデバイスで
.ICCまたは.ICMのカラープロファイルを読み込めるわけではないため、そのまま維持されるとデバイス間で画像の色の不一致が生じる場合があります。 - アップロードされた画像にカラープロファイルが含まれていない場合、ウェブブラウザでは
sRGB(ウェブ上に画像を表示する際に使用される最も一般的なカラープロファイル) を使用します。これにより、すべての主要なウェブブラウザやデバイスで画像が同じように表示されます。 - カラープロファイルは大量のディスク領域を占める場合があり、ページのロード時間が長くなることがあります。
画像からカラープロファイルを削除する
Shopifyにアップロードする前にカラープロファイルなしで保存して、画像からカラープロファイルを削除することができます。この処理は、画像編集プログラムによって異なります。
カラープロファイル (Illustrator、Photoshop) の割り当てまたは削除方法、およびカラープロファイル (InDesign) の割り当てまたは削除方法については、Adobeのドキュメントを参照してください。
スライドショー、画像バナー、フルサイズ画像のベストプラクティス
多くのShopifyテーマには、ブラウザの高さに合わせて拡大したり、画面サイズに適応したりする大きな画像やスライドショーがあります。
これらのテーマのいずれかを使用するか、大きなスライドショーや背景画像がある場合は、どのタイプの画像が適切に表示されるかを理解する必要があります。
大きな画像はすべてのデバイスに収まるわけではないため、使用デバイスによっては、画像の一部しか表示されないことがあります。画像スライドショーに大きな画像が多数含まれていると、画像の一部が見えないことがあります。
スライドショーや画像バナーに画像を使用する際の考慮事項
テーマで画像がうまく機能するために、以下の点に注意してください。
スライドショーやバックグラウンドには、テキストのない画像を使用してください。テキストが画像自体の一部である場合は、テーマに基づいて移動、切り取り、または調整される可能性があります。テーマエディタを使用して、スライドショーと背景にテキストやリンクを追加します。
スライドショーやバックグラウンドとして使用する画像は、上に表示されているテキストが読みやすいよう、シンプルな画像を選択してください。
高さのある画面における幅の広い画像
画面が縦長のデバイス (縦長モードで表示した携帯電話やタブレットなど) を使用して幅の広い画像を表示すると、その画像の左右がトリミングされる場合があります。以下の例のように、人物が画像の最も重要な部分である場合は、画像の右側にフォーカルポイントを設定します。
幅の広い画面における高さのある画像
画面の幅が広いデバイス (ラップトップやデスクトップのモニターなど) を使用して縦長の画像を表示すると、その画像の上下がトリミングされる場合があります。以下の例のように、靴が画像の最も重要な部分である場合は、画像の下部にフォーカルポイントを設定します。
