画像をアップロードする

会社のロゴ、商品画像、スライドショー、バナー、ブログ記事の画像など、さまざまな種類の画像を使用できます。また、切り抜きやサイズ変更のアクションで画像を変換したり、テーマのメディア設定をカスタマイズしたりして、ストアに表示されるすべてのメディアの枠線や影を変更することもできます。

オンラインストアに画像を意図したとおりに表示するには、正しい画像のアスペクト比を使用する必要があります。画像は、Shopifyコンテンツデリバリーネットワーク (CDN) によってストアフロント用に自動的に最適化されます。

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

テーマエディタでテーマに画像を追加できます。また、管理画面の コンテンツ > ファイル セクションで画像をアップロードすることもできます。詳細については、「ファイルのアップロードと管理」を参照してください。

手順：

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

画像にメタフィールドが設定されている場合は、動的ソースピッカーを使用してオンラインストアに画像を追加できます。メタフィールドとサポートされている画像形式に関する詳細については、Adding values to metafieldsを参照してください。

画像にフォーカルポイントを設定する

フォーカルポイントを使用すると、オンラインストアの画像で最も重要な部分を定義できます。画像にフォーカルポイントを設定すると、その部分が焦点領域になります。レイアウトに合わせて画像を切り取るテーマがある場合でも、フォーカルポイントは常にフレーム内に表示されます。フォーカルポイントを使用すると、さまざまな画面サイズや、テーマで異なるアスペクト比が使用されている場合に、画像の表示方法をより細かく管理できるようになります。

画像ごとにフォーカルポイントは1つしか設定できませんが、いつでもフォーカルポイントを変更または削除できます。

Shopifyの無料テーマとフォーカルポイントの互換性

Shopifyの無料テーマの以下のバージョンでは、フォーカルポイントを設定できます。

• Horizonファミリーのすべてのテーマ
• 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 以降
• Rise バージョン 1.0.0 以降
• Sense バージョン 5.0.0 以降
• Spotlight バージョン 0.0.1 以降
• Studio バージョン 4.0.0 以降
• Taste バージョン 4.0.0 以降
• Trade バージョン 1.0.0 以降

外部サービスのテーマを使用している場合は、そのテーマがフォーカルポイントの使用をサポートしているかどうかについて、テーマのドキュメントで確認してください。

画像にフォーカルポイントを追加する

画像にフォーカルポイントを追加し、オンラインストアの複数の場所でその画像を使用すると、画像を使用する場所すべてに同じフォーカルポイントが適用されます。

テーマによる画像の切り取り方法やサイズ変更の方法によっては、フォーカルポイントが視覚的に中央に配置されない場合があります。

手順：

1. Shopifyの管理画面で、以下のいずれかの場所にある画像をクリックします。
   • [コンテンツ] > [ファイル] セクション
   • テーマエディタ
   • [商品] セクションにある商品リストの [メディア] セクション
   • Shopify Messaging のメールエディタ
   • 画像を追加するためのファイル参照タイプのメタフィールドがあるリソースの [メタフィールド] セクション
2. フォーカルポイントを設定する画像の部分を選択するには、画像をクリックするか、青い点をドラッグします。
3. [保存] をクリックします。

画像からフォーカルポイントを削除する

手順：

1. Shopifyの管理画面で、以下のいずれかの場所にある画像をクリックします。
   • [コンテンツ] > [ファイル] セクション
   • テーマエディタ
   • [商品] セクションにある商品リストの [メディア] セクション
   • Shopify Messaging のメールエディタ
   • 画像を追加するためのファイル参照タイプのメタフィールドがあるリソースの [メタフィールド] セクション
2. [削除] をクリックします。
3. [新規として保存] をクリックします。

画像形式

以下の画像形式がサポートされています。

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

JPEG画像を使用する

JPEG画像は、写真や、複雑な色を持つその他の静止画像に最適です。JPEG形式には、数百万色のパレットがあります。また、JPEGには非可逆圧縮方式が採用されており、画質を著しく損なうことなく、ページのロード時間を短縮するのに役立ちます。以下の種類の画像には、JPEG形式を使用してください。

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

PNG 画像の使用

PNG 画像は、単色でグラデーションのないグラフィックやアイコンに最適です。また、PNG 形式は画像の透過処理にも対応しています。以下の種類の画像には PNG 形式を使用してください。

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

画像の自動圧縮と形式選択

Shopify の管理画面に画像をアップロードする際、元の品質を維持するために画像は圧縮されません。しかし、お客様のページのロード時間を短縮するために、以下のような処理が行われることがあります。

• ストアのテーマを通して画像が表示される際、高画質の画像が圧縮される場合があります。
• Shopify が、画像配信時に使用する最適なファイル形式を自動的に判断します。
• お客様のウェブブラウザが WebP や AVIF (AV1 画像ファイル形式) などの最新の画像形式に対応している場合、画像はそれらの形式で配信されます。
• GIF は、ファイルサイズを縮小してパフォーマンスを向上させるために、アニメーション WebP 形式に自動的に変換されます。

最高の画質を得るには、次の対応を検討してください。

• 最大 5000 px x 5000 px または 25 メガピクセルまでの、より解像度の高い画像をアップロードします。
• 線画、テキスト、透過性のあるアイコンには、PNG など、劣化の少ない画像タイプを選択します。
• 商品画像やスライドショーには JPEG を使用します。
• SVG ファイルはサポートされていますが、ラスター形式 (JPEG、WebP、PNG) をリクエストしないと変形 (サイズ変更、切り抜きなど) できないという制限があります。

PSD (Photoshop ドキュメント)、TIFF (Tagged Image File Format)、BMP (ビットマップ) などの他のファイルタイプも受け付けられますが、アップロード時に JPEG/PNG に変換されます。

画像のアップロード制限

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

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

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

画像のメガピクセル値は、次の計算式で確認できます。

(画像の幅 (ピクセル数) x 画像の高さ (ピクセル数)) / 1,000,000

たとえば、解像度が 4900 px × 6930 px の画像は、計算式 (4900 × 6930) / 1,000,000 = 33.9 MP に基づいて 33.9 メガピクセルになります。

画像のカラープロファイル

オンラインストアで画像を表示すると、Shopify にアップロードした元の画像とは色が異なって表示される場合があります。これは、画像にカラープロファイル (.ICC または .ICM の拡張子を持つファイルに保存されたデータセット) が含まれている場合に発生する現象です。

カラープロファイルは、さまざまなデバイスで色が同じように表示されるように標準化するため、画像に埋め込まれていることがよくあります。オンラインストアで画像が表示される際、そのカラープロファイルは削除されます。

カラープロファイルが削除される理由は、以下のとおりです。

• すべてのデバイスが .ICC または .ICM のカラープロファイルを読み取れるわけではないため、プロファイルを維持すると、デバイスによって画像の色に不整合が生じる可能性があります。
• アップロードされた画像にカラープロファイルが含まれていない場合、ウェブブラウザは、ウェブ上で画像を表示するために使用される最も一般的なカラープロファイルである sRGB を想定します。これにより、すべての主要なウェブブラウザとデバイスで画像が同じように表示されるようになります。
• カラープロファイルはディスク容量を大量に消費する可能性があり、その結果、ページのロード時間が長くなることがあります。

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

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

カラープロファイルの割り当てまたは削除 (Illustrator、Photoshop) および カラープロファイルの割り当てまたは削除 (InDesign) の方法については、Adobe のドキュメントをご覧ください。

スライドショー、画像バナー、全幅画像のベストプラクティス

Shopify の多くのテーマで採用されている大きな画像やスライドショーは、ブラウザの高さや画面サイズに合わせてサイズが変更されます。

これらのテーマのいずれかを使用している場合、または大きなスライドショーや背景画像を使用している場合は、どの種類の画像が最適に表示されるかを理解する必要があります。

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

スライドショーや画像バナーに画像を使用する際の考慮事項

画像がテーマで適切に機能するように、以下の点に留意してください。

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

• スライドショーや背景に使用する画像には、重ねて表示されるテキストが読みやすいように、シンプルな画像を選択してください。

縦長の画面に表示される横長の画像

横長の画像は、携帯電話や縦向きで表示したタブレットなど、縦長の画面を持つデバイスで表示すると、左右が切り取られる場合があります。下の例では、人物が画像の最も重要な部分である場合、画像の右側に焦点を配置することができます。

横長の画面に表示される縦長の画像

縦長の画像は、ノートパソコンやデスクトップモニターなど、横長の画面を持つデバイスで表示すると、上下が切り取られる場合があります。下の例では、靴が画像の最も重要な部分である場合、画像の下部に焦点を配置することができます。

画像の読み込み動作

オンラインストアのページにアクセスすると、最初は画像が少しぼやけて表示され、少し経ってから鮮明になることがあります。これは、ストアの読み込み速度とユーザーエクスペリエンスを向上させるための意図された動作です。

Shopify のテーマでは、遅延読み込みと呼ばれる技術が使用されています。この技術では、フル解像度の画像がバックグラウンドで読み込まれている間に、まず小さいバージョンの画像を読み込みます。これにより、お客様はサイズの大きな画像が完全に読み込まれるのを待つことなく、すぐにコンテンツを確認できます。このプロセスは通常 1 秒未満で完了しますが、ストアの読み込みが速くなったように感じられます。

この技術は、ページの初回読み込み時間を大幅に改善し、お客様に即座に視覚的なフィードバックを提供するため、画像を多用するストアに特に有効です。

画像のトラブルシューティング