画像のアップロード
会社のロゴ、商品画像、スライドショー、バナー、ブログ記事画像など、さまざまな種類の画像をオンラインストアで使用できます。画像の使用方法や場所によっては、特定のサイズやフォーマットでのアップロードが最適となる場合があります。
画像をアップロードする
オンラインストアで画像をアップロードできる場所は2つあります。
ファイルページに画像をアップロードする
管理画面のファイルページに画像をアップロードできます。テーマの編集中にこれらの画像にアクセスできるので便利です。詳細については、「ウェブサイトへのファイルのアップロード」を参照してください。
テーマエディタで画像をアップロードする
テーマエディタでテーマに画像を追加できます。
手順:
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- 編集するテーマを見つけて、[カスタマイズする] をクリックします。
- Shopifyアプリから [ストア] をタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- 編集するテーマを見つけて、[カスタマイズする] をタップします。
- [編集] をタップします。
- Shopifyアプリから [ストア] をタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- 編集するテーマを見つけて、[カスタマイズする] をタップします。
- [編集] をタップします。
-
テーマエディタツールバーで、画像を追加するセクションをクリックします。画像ピッカーを含むセクションを選択します。
![画像ピッカーが表示されているテーマエディタツールバーのセクション。[画像を選択する] のボタンと [無料の画像を探す] のリンク。](https://cdn.shopify.com/shopifycloud/help/assets/manual/themes/theme-editor/image-picker-1c964ece77978e5f35df4bcac38d1ddedf390e14d95cde7310033888d3b8f62b.png)
[画像を選択する] をクリックして画像を追加します。コンピューターから画像をアップロードするには、[アップロード] をクリックします。Burstから無料のストック画像を使用するには、[無料の画像] をクリックします。
画像をクリックしてテーマ内での画像のプレビューを表示します。使用する画像を見つけたら、[選択] をクリックします。
[保存] をクリックします。
画像フォーマット
Shopifyは以下の画像フォーマットをサポートしています。
- JPEGまたはJPG
- プログレッシブJPEG
- PNG
- GIF
Shopifyでは、サポートされているブラウザー上で、WebPフォーマットの画像を提供します。
JPEG画像を使用するケース
JPEG画像は、複雑な色の写真や静止画像に最適です。JPEGフォーマットには、数百万色のパレットがあります。JPEGには、画像の品質を著しく損なうことなく、ページの読み込み時間を高速に保つのに役立つ、非可逆圧縮機能もあります。
次の種類の画像には、JPEGフォーマットを使用します。
- 追加する
- バナーまたはスライドショー
- ページとブログ記事
PNG画像を使用するケース
PNG画像は、フラットカラーとグラデーションなしのグラフィックやアイコンに最適です。PNGフォーマットでは透過処理ができます。
次の種類の画像には、PNGフォーマットを使用します。
- ロゴ
- アイコン
- 罫線とトリム
圧縮率
読み込み時間を高速に保つため、Shopifyはオンラインストアに表示された画像を圧縮します。画像を圧縮すると、ページの読み込み速度を上げるためにファイルサイズが小さくなります。圧縮すると、所定量のディスクまたはメモリ空間に、より多くの画像を格納することができます。さらに、画像へのアクセスに要する時間が大幅に短縮されます。圧縮すると、画像のフォーマット、サイズ、元の画質に応じて、画質が変わることがあります。
圧縮後のShopifyの画質レベルは次のとおりです。
- JPEG: 65～90%
- PNG: 90%
- GIF: 品質に変化なし
JPEG画像の場合、圧縮画像の品質レベルは、元のJPEG画像の品質と出力サイズによって異なります。
| 元の画質 | 出力サイズ | 出力画質 |
|---|---|---|
| 86%以上 | 1,024ピクセル以上の高さまたは幅 | 85% |
| 65～85% | 1,024ピクセル以上の高さまたは幅 | 元の画質 |
| 64%以下 | 1,024ピクセル以上の高さまたは幅 | 65% |
| 76%以上 | 高さと幅がともに1024ピクセル未満 | 75% |
| 65～75% | 高さと幅がともに1024ピクセル未満 | 元の画質 |
| 64%以下 | 高さと幅がともに1024ピクセル未満 | 65% |
アップロード制限
Shopifyへの画像アップロードには、メガピクセルとファイルサイズ (メガバイト単位) の両方で制限があります。メガピクセルは、画像のピクセル構成数 (百万単位) を示すために使用されます。メガバイトは、画像が占めるメモリまたはディスクスペースの数 (百万単位) を示すために使用されます。
次のいずれかの制限を超える画像をShopifyにアップロードすることはできません。
- 20メガピクセル
- 20メガバイト
カラープロファイル
オンラインストアで画像を表示すると、画像の色が、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テーマには、ブラウザーの高さに合わせて拡大したり (BoundlessとBrooklyn)、画面サイズに適応したりする (Venture) 大きな画像やスライドショーがあります。
これらのテーマのいずれかを使用するか、大きなスライドショーや背景画像がある場合は、どのタイプの画像が最もよく見えるかを理解することが重要です。
大きな画像はすべてのデバイスに収まるわけではないため、使用デバイスによっては、画像の一部しか表示されないことがあります。画像スライドショーに大きな画像が多数含まれていると、画像の一部が見えないことがあります。
おすすめ
使用テーマで画像がうまく機能するよう、次の点に留意してください。
一部のテーマには、画像のどの部分が焦点かを指定するために使用できる画像の位置設定があります。テーマにこのような設定がない場合は、各画像の焦点が中央にあることを確認してください。一部の画面で画像が切り取られる場合は、焦点が表示され、周囲の領域は非表示になります。
スライドショーやバックグラウンドには、テキストのない画像を使用してください。テキストが画像自体の一部である場合は、テーマに基づいて移動、切り取り、または調整される可能性があります。テーマエディタを使用して、スライドショーにテキストやリンクを追加します。
スライドショーやバックグラウンドとして使用する画像は、上に表示されているテキストが読みやすいよう、シンプルな画像を選択してください。
高さのある画面における幅の広い画像
表示に使用するデバイスの画面に高さがある場合 (携帯電話やタブレット等)、幅の広い画像の左右が切り取られることがあります。
幅の広い画面における高さのある画像
表示に使用するデバイスの画面の幅が広い場合 (ラップトップやデスクトップ等)、高さのある画像の上下が切り取られることがあります。
