画像のアップロード
会社のロゴ、商品画像、スライドショー、バナー、ブログ記事画像など、さまざまな種類の画像をオンラインストアで使用できます。Shopifyでは、オンラインストアで画像を表示する際に最適な画像形式が自動的に使用されることを保証するだけなく、トリミングやサイズ変更の操作の際には画像を動的に変換する機能を提供します。
目次
画像をアップロードする
オンラインストアで画像をアップロードできる場所は2つあります。
ファイルページに画像をアップロードする
管理画面の [ファイル] ページに画像をアップロードできます。テーマの編集中にこれらの画像にアクセスできるので便利です。詳細については、「ウェブサイトへのファイルのアップロード」を参照してください。
テーマエディタで画像をアップロードする
テーマエディタでテーマに画像を追加できます。
手順:
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- 編集するテーマを見つけて、[カスタマイズする] をクリックします。
- Shopifyアプリから [ストア] をタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [すべてのテーマを管理する] をタップします。
- 編集するテーマを見つけて、[カスタマイズする] をタップします。
- [編集] をタップします。
- Shopifyアプリから [ストア] をタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [すべてのテーマを管理する] をタップします。
- 編集するテーマを見つけて、[カスタマイズする] をタップします。
- [編集] をタップします。
- ドロップダウンメニューを使用して、編集するテンプレートを選択します。
- テーマエディタサイドバーで、画像を追加するセクションまたはブロックをクリックします。
-
[画像を選択] をクリックし、次のいずれかの操作を実行します。
- コンピューターから画像をアップロードするには、[アップロード] をクリックします。
- Burstの無料ストック画像を使用するには、[無料の画像を探す] をクリックします。
画像をクリックしてテーマ内での画像のプレビューを表示します。使用する画像を見つけたら、[選択] をクリックします。
[保存] をクリックします。
メタフィールドを使用して画像を追加する
画像にメタフィールドを設定している場合、動的ソースピッカーを使用して画像を追加できます。メタフィールドとサポートされている画像フォーマットの詳細については、「メタフィールドのコンテンツタイプと値」を参照してください。
画像バナー
次の要素を使用して画像バナーを作成できます。
- 1つまたは2つの画像
- text
- アクションボタン
デスクトップコンピューターでは、バナー画像は横並びで表示されます。このフォーマットはモバイルデバイスには適していないので、[画像バナー] のテーマ設定で [モバイルで画像を重ねる] オプションを選択して、画像バナー写真を重ねて表示することができます。画像バナーとスライドショーについて詳しくは、「スライドショーと画像バナーのベストプラクティス」を参照してください。
テーマ画像にフォーカルポイントを設定する
フォーカルポイントを使用して、オンラインストアのテーマで画像の最も重要な部分を定義できます。画像にフォーカルポイントを設定すると、その部分にピントが合うようになります。フォーカルポイントは、レイアウトに合わせて画像がトリミングされるテーマを使用している場合でも、常に枠内に表示されます。フォーカルポイントを設定すると、異なるアスペクト比を使用しているテーマや、異なる画面サイズでの画像の表示方法を調整しやすくなります。
フォーカルポイントは、1個の画像につき1つしか設定できませんが、いつでも変更したり削除したりできます。
フォーカルポイントを設定するには、無料のShopifyテーマの次のバージョンで利用できます。
- Craftバージョン5.0.0以降
- Craveバージョン5.0.0以降
- Colorblockバージョン3.0.0以降
- Dawnバージョン7.0.0以降
- Refreshバージョン2.0.0以降
- Rideバージョン3.0.0以降
- Senseバージョン5.0.0以降
- Studioバージョン4.0.0以降
- Tasteバージョン4.0.0以降
外部サービスのテーマを使用している場合、利用しているテーマでフォーカルポイントを使用できるかどうかは、テーマのドキュメントを確認してください。
画像にフォーカルポイントを追加する
フォーカルポイントは、[ファイル] セクション、およびテーマエディタから画像に追加できます。画像にフォーカルポイントを追加し、その画像を複数箇所で使用した場合、どの画像にも同一のフォーカルポイントが設定されます。
フォーカルポイントは、テーマ画像にのみ追加できます。商品、ブログ、コレクションの画像にフォーカルポイントを追加することはできません。
手順:
- テーマエディタで、画像を含むセクション、またはブロックをクリックします。
- 画像の [編集] をクリックします。
- [フォーカルポイントを追加する] をクリックします。
- 青い円をクリックしてドラッグするか、画像の最も重要な部分をクリックしてフォーカルポイントを設定します。
- [完了] をクリックします。
手順:
- テーマエディタで、画像を含むセクションまたはブロックをタップします。
- 画像の [編集] をタップします。
- [フォーカルポイントを追加する] をタップします。
- 画像の最も重要な部分をタップしてフォーカルポイントを設定します。
- [完了] をタップします。
手順:
- テーマエディタで、画像を含むセクションまたはブロックをタップします。
- 画像の [編集] をタップします。
- [フォーカルポイントを追加する] をタップします。
- 画像の最も重要な部分をタップしてフォーカルポイントを設定します。
- [完了] をタップします。
フォーカルポイントを削除する
手順:
- テーマエディタで、画像を含むセクション、またはブロックをクリックします。
- 画像の [編集] をタップします。
- [フォーカルポイントを削除する] をクリックします。
- [完了] をクリックします。
手順:
- テーマエディタで、画像を含むセクションまたはブロックをタップします。
- 画像の [編集] をタップします。
- [フォーカルポイントを削除する] をタップします。
- [完了] をタップします。
手順:
- テーマエディタで、画像を含むセクションまたはブロックをタップします。
- 画像の [編集] をタップします。
- [フォーカルポイントを削除する] をタップします。
- [完了] をタップします。
画像フォーマット
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では、そのファイル形式で画像が表示されます。
ファイルサイズを小さくしてパフォーマンスを向上させるために、GIFはアニメーション付きWebPフォーマットに自動的に変換されます。
アップロード制限
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を使用してカラープロファイルを削除するには
[編集] > [プロファイルの割り当て] をクリックします。
[このドキュメントのカラー管理をしない] を選択します。
[OK] をクリックします。
Adobe InDesignを使用してカラープロファイルを削除する
Adobe InDesignを使用してカラープロファイルを削除するには
[編集] > [プロファイルの割り当て] をクリックします。
RGBプロファイルとCMYKプロファイルの場合は、[破棄 (現在の作業スペースを使用)] を選択します。
[OK] をクリックします。
詳細については、カラープロファイルに関するAdobeのドキュメントを参照してください。
スライドショー、画像バナー、フルサイズ画像のベストプラクティス
多くのShopifyテーマには、ブラウザの高さに合わせて拡大したり、画面サイズに適応したりする大きな画像やスライドショーがあります。
これらのテーマのいずれかを使用するか、大きなスライドショーや背景画像がある場合は、どのタイプの画像が最もよく見えるかを理解することが重要です。
大きな画像はすべてのデバイスに収まるわけではないため、使用デバイスによっては、画像の一部しか表示されないことがあります。画像スライドショーに大きな画像が多数含まれていると、画像の一部が見えないことがあります。
おすすめ
使用テーマで画像がうまく機能するよう、次の点に留意してください。
スライドショーやバックグラウンドには、テキストのない画像を使用してください。テキストが画像自体の一部である場合は、テーマに基づいて移動、切り取り、または調整される可能性があります。テーマエディタを使用して、スライドショーにテキストやリンクを追加します。
スライドショーやバックグラウンドとして使用する画像は、上に表示されているテキストが読みやすいよう、シンプルな画像を選択してください。
高さのある画面における幅の広い画像
画面が縦長のデバイス (携帯電話やタブレットなど) を使用して幅の広い画像を表示すると、その画像の左右がトリミングされる場合があります。以下の例のように、人物が画像の最も重要な部分である場合は、画像の右側にフォーカルポイントを設定します。
幅の広い画面における高さのある画像
画面の幅が広いデバイス (ラップトップやデスクトップなど) を使用して縦長の画像を表示すると、その画像の上下がトリミングされる場合があります。以下の例のように、靴が画像の最も重要な部分である場合、画像の下部にフォーカルポイントを設定してトリミングされないようにします。
