画像のアップロド

このペジは2022年12月02日に印刷されています。最新のバージョンについては,https://help.shopify.com/ja/manual/online-store/images/theme-imagesをご覧ください。

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

画像をアップロドする

オンラ2。

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

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

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

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

手順:

  1. 管理画面から[オンランストア]>[テマ]の順に移動します。
  2. 編集するテマを見けて，[カスタマズする]をクリックします。
  1. 购物アプリから[ストア]をタップします。
  2. 販売チャネルセクションで，[オンランストア]をタップします。
  3. [テマを管理する]をタップします。
  4. 編集するテマを見けて，[カスタマズする]をタップします。
  5. [編集]をタップします。
  1. 购物アプリから[ストア]をタップします。
  2. 販売チャネルセクションで，[オンランストア]をタップします。
  3. [テマを管理する]をタップします。
  4. 編集するテマを見けて，[カスタマズする]をタップします。
  5. [編集]をタップします。
  1. ドロップダウンメニュを使用して，編集するテンプレトを選択します。
  2. テマエディタサ。

  3. [画像を選択]をクリックし，次のいずれかの操作を実行します。

    • コンピュタから画像をアップロドするには，[アップロド]をクリックします。
    • 破裂の無料ストック画像を使用するには，[無料の画像を探す]をクリックします。

  4. 画像をクリックしてテマ内での画像のプレビュを表示します。使用する画像を見けたら，[選択]をクリックします。

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

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

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

画像バナ

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

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

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

テマ画像にフォカルポントを設定する

フォ。画像にフォカルポントを設定すると，その部分にピントが合うようになります。フォカルポントは，レイアウトに合わせて画像がトリミングされるテーマを使用している場合でも、常に枠内に表示されます。フォーカルポイントを設定すると、異なるアスペクト比を使用しているテーマや、異なる画面サイズでの画像の表示方法を調整しやすくなります。

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

フォ。

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

画像にフォカルポ

フォカルポントは，[ファル]セクション，およびテマエディタから画像に追加できます。画像にフォカルポを追加し、その画像を複数箇所で使用した場合、どの画像にも同一のフォーカルポイントが設定されます。

フォ。商品、ブログ、コレクションの画像にフォーカルポイントを追加することはできません。

手順:

  1. テマエディタで，画像を含むセクション，またはブロックをクリックします。
  2. 画像の[編集]をクリックします。
  3. [フォカルポントを追加する]をクリックします。
  4. 青い円をクリックしてドラッグするか,画像の最も重要な部分をクリックしてフォーカルポイントを設定します。
  5. [完了]をクリックします。

手順:

  1. テマエディタで，画像を含むセクションまたはブロックをタップします。
  2. 画像の[編集]をタップします。
  3. [フォカルポントを追加する]をタップします。
  4. 画像の最も重要な部分をタップしてフォカルポ。
  5. [完了]をタップします。

手順:

  1. テマエディタで，画像を含むセクションまたはブロックをタップします。
  2. 画像の[編集]をタップします。
  3. [フォカルポントを追加する]をタップします。
  4. 画像の最も重要な部分をタップしてフォカルポ。
  5. [完了]をタップします。

フォカルポ

手順:

  1. テマエディタで，画像を含むセクション，またはブロックをクリックします。
  2. 画像の[編集]をタップします。
  3. [フォカルポントを削除する]をクリックします。
  4. [完了]をクリックします。

手順:

  1. テマエディタで，画像を含むセクションまたはブロックをタップします。
  2. 画像の[編集]をタップします。
  3. [フォカルポントを削除する]をタップします。
  4. [完了]をタップします。

手順:

  1. テマエディタで，画像を含むセクションまたはブロックをタップします。
  2. 画像の[編集]をタップします。
  3. [フォカルポントを削除する]をタップします。
  4. [完了]をタップします。

画像フォマット

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

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

jpeg画像を使用するケス

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

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

  • 商品
  • バナまたはスラ
  • ペジとブログ記事

png画像を使用するケス

png画像は，フラットカラ。pngフォマットでは透過処理ができます。

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

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

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

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

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

ファイルサイズを小さくしてパフォーマンスを向上させるために,GIFはアニメーション付きWebPフォーマットに自動的に変換されます。

アップロド制限

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

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

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

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

カラプロファ

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

カラプロファ。

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

画像からカラプロファ

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

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

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

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

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

  3. (好的)をクリックします。

Adobe InDesignを使用してカラ

Adobe InDesignを使用してカラ

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

  2. rgbプロファereplicationルとcmykプロファereplicationルの場合は，[破棄(現在の作業スペスを使用)]を選択します。

  3. (好的)をクリックします。

詳細にいては，カラプロファAdobeのドキュメントを参照してください。

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

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

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

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

おすすめ

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

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

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

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

画面が縦長のデバイス(携帯電話やタブレットなど)を使用して幅の広い画像を表示すると,その画像の左右がトリミングされる場合があります。以下の例のように，人物が画像の最も重要な部分である場合は，画像の右側にフォカルポを設定します。

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

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

画面の幅が広いデバイス(ラップトップやデスクトップなど)を使用して縦長の画像を表示すると,その画像の上下がトリミングされる場合があります。以下の例のように，靴が画像の最も重要な部分である場合，画像の下部にフォカルポを設定してトリミングされないようにします。

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

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

無料体験を試す