商品画像とは
商品画像とはShopifyにおいては下図のように商品管理ページからそれぞれの商品の詳細を編集するページにある「メディア」にあたる部分のことです
商品画像は販売する商品のディテール（細部）を掲載しておくことで購入者にとって商品を購入するかどうかの重要な判断基準となります
販売する商材によっても異なりますが、どのような画像を掲載しておくことがその商品の良さを伝えることができるのか、購入するお客様が購入を迷わないかの視点で選ぶとよいと思います
アップロードできる商品画像の制限は下記Shopify本家のサイトをご確認ください
商品メディアのタイプ
https://help.shopify.com/ja/manual/products/product-media/product-media-types#images
商品画像の編集の基本
商品画像をアップロードすると下記のような状態になるので編集したい画像をクリックします
そうすると対象の画像に対する編集画面が開きます
①商品名と商品に付随するアップロードした画像数
②対象の商品画像を削除
③対象の商品画像を手元のデバイスにダウンロード
④画像編集の終了
⑤対象の商品画像のファイル名、サイズ、代替テキストの編集
⑥トリミング
⑦描画
⑧リサイズ
⑤に関して、ファイル名の変更はこの箇所ではできません
コンテンツ > ファイルページで変更が可能です
詳しくは別記事「ファイル管理の最適化2/3 – 画像名の変更」に説明しています
サイズは⑧のリサイズで詳細を説明します
代替テキストはaltのことで、補足でも表記のあるように視覚障害者にとっては読み上げ機能をオンにしている場合に読み上げられる必要な情報となっています
また検索順位にも影響があるようです
その画像がどのような内容のものなのか簡潔に記入するようにしましょう
アスペクト比について
アスペクト比とは画像の縦横それぞれの長さの比率のことです
この「アスペクト比」というのが画像編集においてついて回りますので抑えておきましょう
商品画像の編集からできる便利な機能
先程基本の編集箇所で述べた⑥⑦⑧についてもう少し詳しくまとめます
トリミング
トリミングとは画像を任意のサイズに切り取ることができる機能です
ここでは画像の反転・回転も編集できます
- オリジナル
- フリーフォーム
- 正方形
- 8:10
- 5:7
- 4:3
上記6パターンからトリミングのサイズを選ぶことができます
「オリジナル」と「フリーフォーム」の違いは、アスペクト比を保つかどうかが変わります
「オリジナル」では、オリジナルのアスペクト比を保ったままトリミングの位置を縮小することができる一方「フリーフォーム」では比率を考えることなく自由に好きなサイズにトリミングできることが特徴です
その他「正方形」「8:10」「5:7」「4:3」はそれぞれ指定のアスペクト比を保持してサイズ調整が可能です
失敗したなと思ったらリセットで変更もできますし、間違って「完了」ボタンを押してしまっても最終的に保存しなければ画像編集はなかったことにできます
思い切って編集してみましょう
描画
描画はあまり使い所がないようにも思いますが、手書きで修正を加えられる・・・でしょうか
テキストを入れ込むことは現状できないようなので使い時があれば教えてほしいです
リサイズ
リサイズではアップロードした画像の大きさを変更できます
デフォルトは「アスペクト比をロック」にチェックが入っていますので、幅もしくは高さのどちらかのサイズを変更すると自動的にアスペクト比を保った数字に置き換えられます
「アスペクト比をロック」のチェックを外すことで自由な大きさにリサイズすることも可能です
少し本題からはずれますが、下記のサイトに画像のURLを貼り付けることでパラメーターでリサイズしたURLを取得することもできます
https://cdn.shopify.com/
最後に保存を忘れずに
ひと通りの編集を終えたら「保存」ボタンを忘れず押しましょう
「リセット」で編集をキャンセルすることもできますので後戻りは可能です！
臆することなく変更を行ってみましょう
商品画像についての疑問と注意点
商品画像の編集に関して注意点は大きく3つあります
商品ページ以外に画像を流用している場合、流用側を考慮する
商品画像をアップすると保存される場所は下図にあるように、コンテンツ > ファイルページの「商品のメディア」で絞り込むと商品管理で使用した画像だけを絞り込むことができます
ここで注意をしておきたいことは、画像編集を行った場合この箇所も同様に編集後の画像に置き換えられる ということです
画像のリサイズ、トリミングだけでなく代替テキスト（alt）も置換されます
ですので商品ページ以外にその画像を流用していた場合にサイズが意図した表示から変わっている可能性もあるため注意が必要です
はじめて商品画像をアップロードする際には画像の保存は自動で行われる
商品登録をする際に画像も同じく登録する場合、画像に関しては保存ボタンを押すことなく保存が実行されます
編集時は保存ボタンを押さない限り変更は保存されませんのでその違いに注意が必要です
Shopアプリを考慮した画像サイズを意識する
現状Shopアプリでは画面表示の商品画像サイズは正方形と縦長の長方形の箇所があります（商品ページはアップロードしたままの比率で表示されるようです）
ですので横長もしくは正方形の場合両端が切れて表示される場合があります
テキストなどを入れ込んだ画像の場合は特に注意が必要です
Shopアプリではどのような表示になるのか見ることも大事です
