コンテンツにスキップ
Company XYZ

Alignで画像を使用する

# Getting started# Usage# Shopify settings# Imagery# Best practices# Performance# Metafields# Product gallery
ShopifyのAlignストアでレスポンシブ画像を準備・管理します。
すべての「はじめに」ガイド リファレンスドキュメント
Learn With Shopify動画：売れるEコマースストアのデザイン方法：実証済みの戦略とベストプラクティス
Learn With Shopify動画：売れるEコマースストアのデザイン方法：実証済みの戦略とベストプラクティス
Shopify Academy動画：ストアをカスタマイズする
Shopify Academy動画：ストアをカスタマイズする

ブランドを引き立て、さまざまな画面サイズでも鮮明に表示される高品質な画像を使用してください。このガイドでは、Company XYZ Alignテーマ用の画像を検索またはアップロードする方法、適切な形式の選択、焦点の設定、レスポンシブレイアウト用のバナーとスライドショーの準備について説明します。

関連リソース

Section titled “関連リソース”
  1. 画像に関するガイダンス
  2. Burstの無料ストック写真
  3. テーマ画像に関するガイダンス
  4. 画像の色を修正する

無料のストック写真を追加する

Section titled “無料のストック写真を追加する”

Burstでは、幅広いカテゴリーの無料の高解像度ストック写真を提供しています。Shopifyテーマエディターから画像を閲覧し、スライドショー、ブログ記事、商品ページなど、Alignストアの画像対応エリアで使用できます。

Burstの画像はロイヤリティフリーライセンスで提供されているため、必要に応じて使用および編集できます。帰属表示は推奨されていますが、必須ではありません。

ストック写真を追加する

Section titled “ストック写真を追加する”
  1. テーマエディターを開きます。
  2. 更新する画像ピッカーを含むセクションを選択します。
  3. Explore free imagesを選択します。
  4. 画像を検索するか、カテゴリーを閲覧します。
  5. 画像を選択してAlignでプレビューし、Selectを選択します。
  6. 必要に応じて、サイドバーで画像の外観またはアニメーション設定を調整します。
  7. Saveを選択します。

画像をアップロードする

Section titled “画像をアップロードする”

ロゴ、商品、スライドショー、バナー、ブログ記事に画像を使用します。画像のトリミングやサイズ変更を行い、テーマのメディア設定をカスタマイズして、ストア全体のメディアに一貫した枠線や影を適用できます。

各画像が意図したAlignレイアウトに適合するよう、適切な画像のアスペクト比を選択してください。

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

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

テーマエディターまたはFilesページから画像をアップロードできます。ファイル管理のガイダンスについては、ウェブサイトにファイルをアップロードするを参照してください。

  1. Shopify管理画面から、Online Store > Themesに移動します。

  2. Alignの横にあるCustomize、または編集するAlignテーマのコピーを選択します。

  3. テンプレートメニューを使用して、更新するページまたはテンプレートを選択します。

  4. テーマエディターのサイドバーで、画像を含むセクションまたはブロックを選択します。

  5. Select Imageを選択します。

    • コンピューターから画像をアップロードするには、Uploadを選択します。
    • Burstから無料のストック写真を選択するには、Explore free imagesを選択します。

  6. 画像を選択してプレビューし、Selectを選択します。

  7. Saveを選択します。

メタフィールドから画像を追加する

Section titled “メタフィールドから画像を追加する”

画像用のメタフィールドがある場合は、動的ソースピッカーを使用して画像をテーマ設定に接続します。対応画像形式や詳細については、メタフィールドのコンテンツタイプと値を参照してください。

画像バナーを使用する

Section titled “画像バナーを使用する”

画像バナーでは、1枚または2枚の画像をテキストやアクションボタンと組み合わせることができます。デスクトップ画面では2枚のバナー画像が横並びに表示されますが、小さい画面ではこのレイアウトが見づらくなる場合があります。

2枚の画像を使用する場合は、Image bannerのテーマ設定でStack images on mobileを有効にします。詳しくは、画像バナー、スライドショー、スライドショーと画像バナーのベストプラクティスを参照してください。

画像の焦点を設定する

Section titled “画像の焦点を設定する”

焦点は、画像内で最も重要なエリアを示します。Alignがさまざまなレイアウトや画面サイズに合わせて画像をトリミングする際、そのエリアをフレーム内に保ちやすくなります。

各画像には1つの焦点を設定でき、いつでも変更または削除できます。画像に設定した焦点は、その画像を使用しているすべての場所に適用されます。

焦点を使用できるのはテーマ画像のみです。商品、ブログ、コレクションの画像には使用できません。

焦点を追加する

Section titled “焦点を追加する”

Filesから、またはテーマエディターで直接、焦点を追加できます。

  1. テーマエディターで、画像を含むセクションまたはブロックを選択します。
  2. 画像のEditを選択します。
  3. Add focal pointを選択します。
  4. 青い円をドラッグするか、表示したままにするエリアを選択します。
  5. Doneを選択します。

後で焦点を移動するには、画像を再度開いて新しいエリアを選択します。

焦点を削除する

Section titled “焦点を削除する”
  1. テーマエディターで、画像を含むセクションまたはブロックを選択します。
  2. 画像のEditを選択します。
  3. Remove focal pointを選択します。
  4. Doneを選択します。

画像形式を選択する

Section titled “画像形式を選択する”

対応している画像形式は次のとおりです。

  • JPEG
  • Progressive JPEG
  • PNG
  • GIF
  • HEIC
  • WebP

各訪問者のブラウザに最適な対応形式が自動的に選択されます。画像変換機能について詳しくは、こちらをご覧ください。

写真にはJPEGを使用する

Section titled “写真にはJPEGを使用する”

JPEGは、写真や複雑な色を含むその他の静止画像に適しています。非可逆圧縮により、良好な画質を維持しながらファイルサイズを小さくできます。

JPEGは次の用途に使用します。

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

グラフィックにはPNGを使用する

Section titled “グラフィックにはPNGを使用する”

PNGは、特に透明性が必要な場合に、単色のグラフィックやアイコンに適しています。

PNGは次の用途に使用します。

  • ロゴ
  • アイコン
  • 枠線と装飾

自動最適化とアップロード上限について

Section titled “自動最適化とアップロード上限について”

Shopifyは、読み込みを高速化するために画像を自動的に圧縮し、各ブラウザに最適な配信形式を選択します。たとえば、対応ブラウザではWebPやAVIFなどの最新形式を受信できます。GIFはファイルサイズを小さくするため、アニメーションWebPに変換されます。

アップロードする画像は、次のいずれの上限も超えることはできません。

  1. 2,500万ピクセル
  2. 20メガバイト

メガピクセルは、(pixel width x pixel height)/1,000,000で計算します。たとえば、4900 × 6930の画像は33.9 MPです：(4900x6930)/1,000,000 = 33.9 MP。

カラープロファイルを管理する

Section titled “カラープロファイルを管理する”

画像に.ICCまたは.ICMカラープロファイルが含まれている場合、アップロード後に色が異なって見えることがあります。Shopifyは、デバイスやブラウザ間で画像をより一貫して表示し、ファイルサイズが大きくなるのを防ぐため、これらのプロファイルを削除します。

画像にカラープロファイルがない場合、ブラウザは最も一般的なウェブ用カラープロファイルであるsRGBを使用します。正確な色合わせが重要な場合は、埋め込まれたプロファイルを削除してから画像を保存し、アップロードしてください。

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

Section titled “Adobe IllustratorまたはPhotoshopでカラープロファイルを削除する”
  1. Edit > Assign Profileを選択します。
  2. Don’t Color Manage This Documentを選択します。
  3. OKを選択します。

Adobe InDesignでカラープロファイルを削除する

Section titled “Adobe InDesignでカラープロファイルを削除する”
  1. Edit > Assign Profileを選択します。
  2. RGB ProfileとCMYK Profileで、**Discard (Use Current Working Space)**を選択します。
  3. OKを選択します。

詳細については、カラープロファイルに関するAdobeドキュメントを参照してください。

スライドショー、バナー、全幅画像を準備する

Section titled “スライドショー、バナー、全幅画像を準備する”

大きな画像やスライドショーは利用可能な画面サイズに合わせて調整されるため、画像の一部がトリミングされることがあります。Alignの全幅レイアウトに画像を追加する前に、このトリミングを想定して計画してください。

  1. 画像自体にテキストを入れないでください。テーマエディターを使用してテキストとリンクを追加すると、レイアウトに合わせて調整できます。

  2. 画像上にテキストを表示する場合は、テキストが読みやすくなるよう、シンプルな画像を選択してください。

  3. 重要な被写体に焦点を設定します。

    • 横長の画像は、縦長の画面では左右がトリミングされることがあります。
    • 縦長の画像は、横長の画面では上下がトリミングされることがあります。

使用上の注意

Section titled “使用上の注意”
  1. 最初にレイアウトを選択します。 画像のアスペクト比を、表示するAlignセクションに合わせます。
  2. 主な被写体を保護します。 モバイルまたはデスクトップのレイアウトでトリミングされる可能性がある画像には、焦点を使用します。
  3. バナーのテキストを分けて配置します。 バナー画像に直接テキストを埋め込むのではなく、テーマエディターで見出し、コピー、リンクを追加します。
  4. 適切な形式を使用します。 写真にはJPEG、ロゴやアイコンなど透明なグラフィックにはPNGを選択します。
  5. 色に敏感な画像を確認します。 色の変化が目立つ場合は、アップロード前に埋め込まれたカラープロファイルを削除します。

あなたの成功をサポートします。

私たちについて
ShopifyパートナーShopifyパートナー