メディアエディタを使用する
メディアエディタを使用して、画像、3Dモデル、ビデオを編集できます。メディアエディタはデスクトップとモバイルデバイスの両方で利用可能ですが、一部のメディア編集機能はデスクトップ版でのみ使用できます。現在、モバイル版のメディアエディタでは、画像ファイルのみを編集できます。
メディアエディタを使用すると、編集アイコンがメディアに表示される場所であれば、メディアを編集できます。これには、商品メディア、オンラインストアエディタのメディア、Shopifyメールのメディア、[コンテンツ] > [ファイル] 内のメディアが含まれます。リッチテキストエディタの画像を編集するために、メディアエディタを使用することはできません。
メディアを編集する前に、画像のアスペクト比がウェブサイトでの表示にどのように影響するかを理解しておく必要があります。
目次
画像のアスペクト比を把握する
画像のアスペクト比は、幅と高さの比です。たとえば、200ピクセル × 400ピクセルの画像の縦横比は1:2です。150ピクセル × 450ピクセルの画像のアスペクト比は1:3です。
画像のサイズが異なるもののアスペクト比が同一という場合があります。画像のアスペクト比が同じかどうかを計算するには、各画像の幅を高さで除算し、計算結果を比較します。
特定のタイプの画像すべてに一貫したアスペクト比を使用すると、すべて同じサイズで表示できるため、きれいに並べて表示できます。たとえば、コレクション内で商品画像を同じサイズで表示するには、画像を同じアスペクト比に調整する必要があります。
メディアエディタを使用して画像をトリミングし、同じアスペクト比に調整できます。
画像をトリミングする
画像をトリミングして画像の一部を削除できます。これは、画像の一部のみを表示する場合、または画像の縦横比を変更する場合に便利です。
画像のトリミングは、デスクトップとモバイルの両方のデバイスで実行できます。トリミングされた画像をモバイルデバイスで保存すると、画像の新しいコピーが作成されます。
手順
- 管理画面から、編集したいメディアファイルに移動します。
鉛筆のアイコンをクリックするか、サムネイルをクリックしてメディアエディタを開きます。
メディアエディタで、[トリミングして変換する] をクリックします。
-
保持する画像の範囲を指定します。
- 画像をカスタムアスペクト比でトリミングする場合は、[フリーフォーム] をクリックします。強調表示された領域の角またはエッジをクリックしてドラッグするか、強調表示された領域内をクリックして別の位置にドラッグすることができます。
- 画像と同じアスペクト比を使用して画像をトリミングするには、[オリジナル] をクリックします。強調表示された領域の角をクリックしてドラッグしてサイズを変更するか、強調表示された領域内をクリックして別の位置にドラッグすることができます。サイズを変更しても、アスペクト比は元の画像と同じになります。
- 画像を正方形にトリミングするには、[正方形] をクリックします。正方形の角をクリックしてドラッグしてサイズを変更するか、正方形の内側をクリックして別の位置にドラッグすることができます。正方形のアスペクト比は、サイズを変更しても変わりません。
[適用] をクリックして画像をトリミングします。
メディアエディタでの編集が終了したら、[保存] をクリックします。
- Shopifyモバイルアプリで、編集するメディアファイルに移動します。
鉛筆のアイコンをタップするか、サムネイルをタップしてメディアエディタを開きます。
メディアエディタで、[画像をトリミングする] をタップします。
画像をカスタムサイズにトリミングするには、強調表示された領域の角をタップしてドラッグするか、強調表示された領域内をタップして別の位置にドラッグします。
任意：画像を元の状態にリセットする場合は [リセット] をタップします。
メディアエディタでの編集が終了したら、[保存] をタップして画像の新しいバージョンを保存します。
画像に描画する
線の追加、画像の一部の強調表示、デザインの追加により、画像に描画できます。
手順
- 管理画面から、編集したいメディアファイルに移動します。
鉛筆のアイコンをクリックするか、サムネイルをクリックしてメディアエディタを開きます。
[描画] をクリックします。
色とブラシサイズを選択してください。
描画する画像をクリックしてドラッグします。
描画を追加するには、[適用] をクリックします。
メディアエディタでの編集が終了したら、[保存] をクリックします。
消しゴムを使用して、描画の全部または一部を削除できます。消しゴムが元の画像を削除することはありません。
画像をリサイズする
リサイズすることで画像の実際のサイズを変更できます。画像のサイズを変更してアスペクト比を調整すると、画像がゆがんで表示されます。画像をリサイズせずに、使用するアスペクト比に画像をトリミングします。
手順
- 管理画面から、編集したいメディアファイルに移動します。
鉛筆のアイコンをクリックするか、サムネイルをクリックしてメディアエディタを開きます。
[リサイズ] をクリックします。
画像の新しい幅を入力します。デフォルトでは、[アスペクト比をロック] が選択されています。この設定では、同じアスペクト比を維持するように画像の高さが自動的に変更されます。画像の高さまたは幅のみを変更するには、[アスペクト比をロック] をクリックして、設定を解除します。[アスペクト比をロック] を無効にして画像のサイズを変更すると、画像が歪むことがあります。
[完了] をクリックして画像のサイズを変更します。
メディアエディタでの編集が終了したら、[保存] をクリックします。
画像の方向を変更する
画像を反転または回転して、表示方向を変更できます。フレーム内の画像を傾けることも可能です。
手順
- 管理画面から、編集したいメディアファイルに移動します。
鉛筆のアイコンをクリックするか、サムネイルをクリックしてメディアエディタを開きます。
[回転する] をクリックします。
-
画像の向きを変更するには、以下の操作を実行します。
- 画像を回転させるには、[時計回りに回転する] をクリックします。
- [上下反転] または [左右反転] ボタンをクリックして画像を反転します。
画像の向きを変更するには、[適用] をクリックします。
メディアエディタでの編集が終了したら、[保存] をクリックします。
画像の背景を削除または変更する
Shopify Magicを使用して、メディアエディタで画像の背景を削除または変更することができます。メディアエディタを使用した画像背景の削除や変更は、デスクトップとモバイルの両方のデバイスで実行できます。
Shopify Magicを使用したメディアの生成について詳しくはこちらをご覧ください。
画像に加えた変更を元に戻す
Shopifyメディアエディタを使用して画像を変更した場合、変更を保存した後でも、すべての変更を元の画像に戻すことができます。変更した画像を元に戻す操作は取り消せません。変更を再適用する、または画像に加えた変更を保存する場合は、手動でやり直す必要があります。
手順
- 管理画面から、編集したいメディアファイルに移動します。
鉛筆のアイコンをクリックするか、サムネイルをクリックしてメディアエディタを開きます。
画像を変更します。
[元に戻す] をクリックします。
[元に戻しますか？] ダイアログで [戻す] をクリックします。
変更が完了したことを示す、[元に戻しました] というメッセージが表示されます。
3Dモデルを調整する
3Dモデルでは、以下の調整を行うことができます。
- 環境
- 背景
- カメラ初期位置
モバイルでは3Dモデルを調整することができません。
手順
- 管理画面から、編集したいメディアファイルに移動します。
鉛筆のアイコンをクリックするか、サムネイルをクリックしてメディアエディタを開きます。
[環境] セクションで、3Dモデルに適用したい環境をクリックし、スライドバーを使用して3Dモデルの露出を調整します。
[背景] セクションで、色ピッカーを使用して背景色を選択するか、16進コードを入力します。
カメラアイコンをクリックして、[カメラの初期位置] を調整します。[X回転] フィールドまたは [Y回転] フィールドに回転の度合いを入力してXとYの回転を調整し、スライドバーを高い割合に動かして3Dモデルにズームインすることができます。
[完了] をクリックします。
ビデオのサムネイルを変更する
ビデオをアップロードすると、サムネイルのデフォルトはビデオの最初のフレームになりますが、独自のサムネイルをアップロードして、デフォルトのものを置き換えることができます。
モバイル上でビデオのサムネイルを変更することはできません。
手順
- 管理画面から、編集したいメディアファイルに移動します。
鉛筆のアイコンをクリックするか、サムネイルをクリックしてメディアエディタを開きます。
[...] > [サムネイルを変更] の順にクリックします。
コンピューターからファイルを選択します。