画像エディタを使用する

このページはJul 18, 2023に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/shopify-admin/productivity-tools/image-editorをご覧ください。

画像エディタを使用して、使用する画像の編集やリサイズを管理画面で実行できます。

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

画像のアスペクト比を把握する

画像のアスペクト比は、幅と高さの比です。たとえば、200ピクセル × 400ピクセルの画像の縦横比は1:2です。150ピクセル × 450ピクセルの画像のアスペクト比は1:3です。

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

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

画像エディタを使用して画像をトリミングし、同じアスペクト比に調整できます。

画像エディタを使用して商品画像を編集できます。

画像をトリミングして画像の一部を削除できます。これは、画像の一部のみを表示する場合、または画像の縦横比を変更する場合に便利です。

[トリミング]をクリックします。
保持する画像の範囲を指定します。
- 画像をカスタムサイズにトリミングする場合は、[フリーフォーム]をクリックします。強調表示された領域の角をクリックしてドラッグするか、強調表示された領域内をクリックして別の位置にドラッグすることができます。
- 画像と同じアスペクト比を使用して画像をトリミングする場合は、[オリジナル]をクリックします。強調表示された領域の角をクリックしてドラッグしてサイズを変更するか、強調表示された領域内をクリックして別の位置にドラッグすることができます。サイズを変更しても、アスペクト比は元の画像と同じになります。
- 画像を正方形にトリミングする場合は、[正方形]をクリックします。正方形の角をクリックしてドラッグすることでサイズを変更するか、正方形の内側をクリックして別の位置にドラッグします。正方形のアスペクト比は、サイズを変更しても変わりません。
[適用]をクリックして画像をトリミングします。
画像エディタでの編集が終了したら、[保存]をクリックします。

線の追加、画像の一部の強調表示、デザインの追加により、画像に描画できます。

消しゴムを使用して、描画の全部または一部を削除できます。消しゴムが元の画像を削除することはありません。

リサイズすることで画像の実際のサイズを変更できます。

[リサイズ]をクリックします。
画像の新しい幅を入力します。高さは同じアスペクト比を維持するように自動的に更新されます。同じアスペクト比を維持せずに画像のサイズを変更する場合は、[アスペクト比をロック]をクリックします。[アスペクト比をロック]を無効にしないで画像のサイズを変更すると、画像が歪むことがあります。
[適用]をクリックして画像のサイズを変更します。
画像エディタでの編集が終了したら、[保存]をクリックします。

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

[回転する]をクリックします。
画像の向きを変更するには、以下の操作を実行します。
- 画像を回転させるには、[時計回りに回転する]をクリックします。
- [上下反転]または[左右反転]ボタンをクリックして画像を反転します。
画像の向きを変更するには、[適用]をクリックします。
画像エディタでの編集が終了したら、[保存]をクリックします。