メディアエディタを使用する

メディアエディタを使用して、画像、3D モデル、ビデオを編集できます。メディアエディタはデスクトップデバイスとモバイルデバイスの両方で利用できますが、一部のメディア編集機能はデスクトップ版でのみ利用可能です。現在、モバイル版のメディアエディタでは、画像ファイルのみ編集できます。

メディアに編集アイコンが表示される場所であればどこでも、メディアエディタを使用してメディアを編集できます。これには、商品メディア、オンラインストアエディタのメディア、Shopify Messaging メールのメディア、[コンテンツ] > [ファイル] のメディアが含まれます。リッチテキストエディタ内の画像は、メディアエディタでは編集できません。

メディアを編集する前に、画像のアスペクト比がウェブサイトでの表示にどのように影響するかを理解しておく必要があります。

画像のアスペクト比について

画像のアスペクト比とは、幅と高さの比率のことです。たとえば、幅 200 px、高さ 400 px の画像のアスペクト比は 1:2 となります。幅 150 px、高さ 450 px の画像のアスペクト比は 1:3 となります。

画像はサイズが異なっていても、アスペクト比が同じである場合があります。画像のアスペクト比が同じかどうかを計算するには、それぞれの画像の幅を高さで割り、その結果を比較します。

特定の種類のすべての画像でアスペクト比を統一すると、画像がすべて同じサイズで表示されるため、並べたときにきれいに見えます。たとえば、コレクション内で商品画像を同じサイズで表示するには、アスペクト比を同じにする必要があります。

メディアエディタを使用すると、画像をトリミングして、アスペクト比を統一することができます。

代替テキストの追加または編集

代替テキストは画像を説明するもので、アクセシビリティと SEO にとって重要です。メディアエディタで画像の代替テキストを追加または編集できます。

メディアエディタでは、代替テキストがまだ設定されていない画像に対して、代替テキストが提案される場合があります。この提案は、AI を使用して画像コンテンツを説明するために生成されます。提案された代替テキストは、そのまま使用することも、編集または置換することもできます。代替テキストは簡潔で、内容がわかるように記述してください。125 文字以内にすることをおすすめします。メディアへの代替テキストの追加について、詳しくはこちらをご覧ください。

手順：

1. 管理画面から、編集するメディアファイルに移動します。

2. サムネイルをクリックしてファイルエディタを開きます。

3. 「情報の編集」セクションで、「代替テキスト」フィールドをクリックします。

4. 以下のいずれかの操作を行います。

   • 提案された代替テキストがある場合は、その内容を確認し、「承認」をクリックして使用するか、必要に応じて編集します。
   • 提案された代替テキストがない場合、または独自のテキストを記述する場合は、画像の簡単な説明を入力します。

5. メディアエディタでの編集が完了したら、「保存」をクリックします。

画像をトリミングする

画像をトリミングして、その一部を削除できます。この機能は、画像の一部のみを表示する場合や、画像のアスペクト比を変更する必要がある場合に便利です。

画像のトリミングは、デスクトップとモバイルの両方のデバイスで行うことができます。モバイルデバイスでトリミングした画像を保存すると、画像の新しいコピーが作成されます。

手順：

画像に描画する

画像に描画すると、線を追加したり、画像の一部をハイライトしたり、デザインを追加したりできます。

手順：

1. 管理画面から、編集するメディアファイルに移動します。

2. サムネイルをクリックしてファイルエディタを開きます。

3. 「描画」をクリックします。

4. 色と筆の大きさを選択します。

5. 画像上をクリックしてドラッグし、描画します。

6. 「適用」をクリックして描画を追加します。

7. メディアエディタでの編集が完了したら、「保存」をクリックします。

消しゴムを使用すると、描画の全部または一部を削除できます。消しゴムを使用しても、元の画像からは何も削除されません。

画像のサイズを変更する

画像のサイズを変更して、実際のサイズを変更することができます。画像のサイズを変更してアスペクト比を調整しようとすると、画像が歪む場合があります。代わりに、使用したいアスペクト比に合わせて画像をトリミングしてください。

手順：

1. 管理画面から、編集するメディアファイルに移動します。

2. サムネイルをクリックしてファイルエディタを開きます。

3. 「サイズ変更」をクリックします。

4. 画像の新しい幅を入力します。デフォルトでは、「アスペクト比をロック」が選択されており、画像のアスペクト比を維持するために、画像の高さが自動的に更新されます。画像の高さまたは幅のみを調整する場合は、「アスペクト比をロック」をクリックして設定の選択を解除します。「アスペクト比をロック」を無効にして画像のサイズを変更すると、画像が歪む可能性があります。

5. 「完了」をクリックして画像のサイズを変更します。

6. メディアエディタでの編集が完了したら、「保存」をクリックします。

画像の向きを変更する

画像を反転または回転させて、表示の向きを変更できます。また、フレーム内で画像を傾けることもできます。

手順：

1. 管理画面から、編集するメディアファイルに移動します。

2. サムネイルをクリックしてファイルエディタを開きます。

3. 「回転」をクリックします。

4. 画像の向きを変更するには：

   • 「時計回りに回転」をクリックして画像を回転させます。
   • 「上下に反転」または「左右に反転」ボタンをクリックして、画像を反転させます。

5. 「適用」をクリックして、画像の向きを変更します。

6. メディアエディタでの編集が完了したら、「保存」をクリックします。

画像の背景の削除または置き換え

Shopify Magicを使用すると、デスクトップとモバイルの両方のメディアエディタで画像の背景を削除または置き換えることができます。

Shopify Magicのメディア生成について、詳しくはこちら。

画像への変更を元に戻す

Shopifyメディアエディタを使用して画像を変更した場合、変更を保存した後でも、すべての変更を元の画像に戻すことができます。変更した画像を元に戻すと、その操作は取り消せません。そのため、画像への変更を再度適用または維持したい場合は、手動でやり直す必要があります。

手順：

1. 管理画面から、編集するメディアファイルに移動します。

2. サムネイルをクリックしてファイルエディタを開きます。

3. 画像を編集します。

4. 「オリジナルに戻す」をクリックします。

5. 「画像をオリジナルに戻しますか？」ダイアログで、「元に戻す」をクリックします。

変更が完了したことを示す「オリジナルに復元済み」メッセージが表示されます。

3Dモデルの調整

3Dモデルでは、以下を調整できます。

• 環境
• 背景
• 初期カメラ位置

モバイルでは3Dモデルを調整できません。

手順：

1. 管理画面から、編集するメディアファイルに移動します。

2. サムネイルをクリックしてファイルエディタを開きます。

3. 「環境」セクションで、3Dモデルに適用する環境をクリックし、スライドバーを使用して3Dモデルの露出を調整します。

4. 「背景」セクションで、カラーピッカーを使用して背景色を選択するか、16進数コードを入力します。

5. カメラアイコンをクリックして、「初期カメラ位置」を調整します。「X回転」フィールドか「Y回転」フィールドに回転角度を入力してX回転とY回転を調整できます。また、スライドバーをより高いパーセンテージに動かして、3Dモデルをズームインできます。

6. 「完了」をクリックします。

3DモデルのXまたはYのカメラ回転を調整し、保存時に変更が元に戻ってしまう場合は、希望のカメラ回転を設定する前に、まずカメラのズームを調整してください。

動画のサムネイルの置き換え

動画をアップロードすると、サムネイルはデフォルトで動画の最初のフレームに設定されますが、独自のサムネイルをアップロードして、デフォルトのサムネイルを置き換えることができます。

モバイルでは、動画のサムネイルを置き換えることはできません。

手順：

1. 管理画面から、編集するメディアファイルに移動します。

2. サムネイルをクリックしてファイルエディタを開きます。

3. […] > 「サムネイルを置き換える」の順にクリックします。

4. コンピューターからファイルを選択します。