この記事でわかること
EC-CUBEの商品画像アップロードについて、4系の標準機能、ドラッグ＆ドロップの操作イメージ、複数画像の追加と商品CSV一括登録の使い分けを解説します。メイン画像・表示順・ファイル名の管理や、画像の取り違えを防ぐ確認点も整理します。
商品登録では、写真を選ぶ、アップロードする、順番を整える、表示を確認する、といった作業が発生します。ドラッグ＆ドロップは、画像を選んで追加する操作を簡単にする方法です。
確認したEC-CUBE 4.3.1-p1では、商品画像のドラッグ＆ドロップと並び替えが標準機能に含まれています。まず現在の機能を確認し、商品数や登録頻度に合わせて、画面からの操作と一括登録を使い分けます。
EC-CUBE 4系では商品画像のドラッグ＆ドロップが標準機能
EC-CUBE4公式マニュアル（4.3.1-p1版）では、商品画像をドラッグ＆ドロップ、またはファイル選択で追加する方法が案内されています。登録エリア内で画像を移動して並び順を変えたり、不要な画像を削除したりする操作もあります。
画像登録の操作を改善するときは、利用中のバージョン・プラグイン・既存のカスタマイズを確認し、標準機能で対応できる範囲を先に整理します。商品への自動振り分けや独自の画像加工など、残る作業に応じて追加機能を検討します。
画像の追加後は、商品情報の登録と表示確認まで行う
商品編集画面では、対象の商品を開き、画像を追加して並び順を確認し、商品情報を登録します。画像のプレビューが見えただけで、商品の更新まで完了したと判断しないようにします。
確認した4.3.1-p1の処理では、アップロードされた画像を一時領域に保存し、商品情報の登録時に商品との関連付けと保存先への移動を行っています。入力エラーや画像の送信失敗がある場合は内容を確認し、登録完了後に画面を開き直して確かめます。
形式・容量・枚数は、利用環境の条件を確認する
確認した4.3.1-p1の標準の商品画像アップロードでは、JPEG・PNG・GIFを扱います。画面側の設定は最大10枚、1ファイル10,000,000バイト（約10MB）です。サーバー側の設定や追加機能によって、実際に受け付けられる条件が変わる場合があります。
この数値をすべてのバージョンの共通仕様とは扱いません。また、上限以内でも、撮影したままの大きな画像はアップロードやページ表示の負担になり得ます。表示に必要な解像度と画質を保ちつつ、容量を整える運用を検討します。WebPやAVIFなどを使う場合も、対応状況を個別に確認します。
ドラッグ＆ドロップで複数画像を追加する操作イメージ
以下は、従来の記事で掲載していた操作イメージです。画像を追加するエリアへファイルを移動し、複数の写真が一覧に表示される流れを紹介しています。EC-CUBE 4系の標準画面として掲載するものではありません。
1．画像を追加するエリアを確認する
画像アップロード用エリアの操作イメージ
2．追加する画像をまとめて選び、エリアへ移動する
複数の画像ファイルをドラッグ＆ドロップする操作イメージ
3．追加された画像の内容と順番を確認する
追加した画像が一覧表示された状態
掲載画像内の枚数表示やボタン配置は、この操作イメージのものです。利用中のEC-CUBEの画面や制限を示すものではありません。掲載画像の対象バージョンや個別案件の実装範囲は、元の記事では明示されていません。導入する機能や条件は、利用環境に合わせて確認します。
1商品の複数画像追加と、複数商品の一括登録を使い分ける
複数の写真を一度に追加することと、複数の商品へ画像を振り分けることは、別の処理です。例えば、商品Aの正面・背面・細部の写真を追加する操作は、商品A・B・Cそれぞれに写真を割り当てる操作とは異なります。
| 作業内容 | 主な方法 | 確認するポイント |
|---|---|---|
| 1商品の写真を数枚追加・差し替え | 商品編集画面でドラッグ＆ドロップやファイル選択 | 対象商品、残す画像、メイン画像、保存後の表示 |
| 複数商品の画像をまとめて登録・変更 | 画像ファイルを準備し、商品CSV等で各商品と紐付け | 商品IDと画像の対応、保存先の名前、既存画像の扱い |
| 商品コードからの自動振り分けや独自の加工 | プラグインや個別のカスタマイズを検討 | 命名規則、例外の確認、処理結果、やり直しの方法 |
件数だけで決めず、作業頻度や画像の準備状況も考えます。画面で確認しながら追加した方が早い作業もあれば、ファイル名と商品データを揃えて一括処理した方が適している作業もあります。
メイン画像・表示順・商品との対応を確認する
先頭の画像と、購入者に見せたい順番を揃える
確認した4系の標準機能では、先頭の画像がメイン画像として扱われます。正面、背面、細部、使用例、寸法図など、購入者が確認しやすい順番を決めます。
ファイル名に01・02と番号を付けていても、その番号どおりに表示されるとは決めつけません。追加後の画面で順番を確認し、商品情報を登録した後の商品一覧・詳細ページも確認します。画像の切り抜き方やサムネイルの見え方は、テンプレートによって異なります。
似た商品や色違いの画像を取り違えない
同じシリーズで形が似ている商品や、色・サイズ・セット内容が異なる商品は、写真だけでは見分けにくい場合があります。撮影時から商品コードや管理用の番号を付け、どの商品に使う画像かを追えるようにします。
商品に複数の規格がある場合は、登録する画像が商品全体の説明用なのか、特定の色・規格の説明用なのかを整理します。画像を追加するだけで規格選択に応じた切り替えまで実現するとは限らないため、必要な表示を別途確認します。
画像を削除・差し替えする前には、元画像を保管します。更新後は、誤った商品の写真、重複、古いパッケージ、不要な画像が残っていないかを確認します。
商品CSVでは、画像ファイルの準備と紐付けを分ける
EC-CUBEには商品情報をCSVで登録・更新する機能があります。ただし、CSVの商品画像欄にファイル名を入力しただけで、パソコン内の画像が自動的に転送されるわけではありません。
商品ID・画像の保存名・表示順を対応させる
一括登録では、画像ファイルを利用環境に合った方法で配置したうえで、どの商品へどの画像を紐付けるかをCSVに指定します。画像の配置方法や保存先は、管理者・開発担当者と確認します。
確認した4.3.1-p1の処理では、商品画像欄に指定したファイル名をカンマで区切り、記載した順に画像の関連付けを作成します。CSVの1項目内にカンマを含むため、利用環境の雛形とCSV形式に合わせて作成します。
管理画面からアップロードした画像は、保存時にファイル名が変更されます。手元の元画像名とEC-CUBEに保存された名前を取り違えると、意図した画像を参照できません。ファイル名の大文字・小文字、拡張子、商品との対応を確認します。
既存画像への追加か、一覧の置き換えかを確認する
CSVで新しい画像名を指定すれば、既存画像の後ろに追加されるとは限りません。確認した4.3.1-p1では、商品画像欄に値がある場合、その商品の画像の関連付けをいったん外し、指定された一覧で作り直す処理になっています。
そのため、残したい画像がある場合は、既存分と追加分を含めた一覧を指定します。一方、同バージョンでは商品画像欄を空にしただけで画像の関連付けを削除する処理にはなっていません。削除や差し替えの方法は、利用中の機能で確認します。
作業前の商品CSVと画像を保管し、少数の商品で表示まで確認してから対象を広げます。商品IDの取り違えや、画像以外の価格・在庫・公開状態などを意図せず更新しないことにも注意します。
追加カスタマイズは、標準機能で残る作業から考える
標準の追加・並び替えで対応できる場合は、画像の準備方法や確認手順を整えることで運用できます。繰り返し発生する作業が残る場合には、次のような追加機能を検討します。
| 残っている作業 | 検討できる機能 |
|---|---|
| 商品ごとに画像を振り分ける | 商品コード等の命名規則による候補提示と、登録前の対応確認 |
| 寸法や容量を揃えて加工する | 原本を保管したうえでのリサイズ・圧縮・切り抜き条件の設定 |
| 大量の画像の登録漏れを探す | 商品別の処理結果、未登録・失敗した画像、再処理対象の表示 |
| 担当者と確認者で公開前に点検する | 変更前後の確認、操作権限、承認や公開の手順を業務に合わせて設計 |
これらは追加機能の検討例です。掲載画像で実装済みとするものではありません。自動振り分けを行う場合も、同じコードや例外的なファイル名をどう扱うか決め、確認できない画像を誤った商品へ登録しない設計にします。
登録完了と失敗した画像が分かるようにする
複数画像の処理では、どこまで完了したかを確認できることが重要です。失敗したファイルがあるときに、結果を見ずにすべてを再送して重複させないようにします。
- 対象の商品ID・商品コードと、追加する画像の対応が正しいか
- 形式・容量・枚数の条件を満たし、アップロードが完了したか
- 残す画像、削除する画像、メイン画像と表示順が意図どおりか
- 商品情報の登録が完了し、開き直しても画像が表示されるか
- 商品一覧・詳細ページとスマートフォン表示で、画像や文字が見切れていないか
- 一括処理後に未登録・誤登録・重複がなく、失敗分を確認できるか
アップロード機能を追加する場合は、拡張子だけで判断せず、ファイルの内容、容量、保存先、操作権限も検証します。登録時に必要な制御と、画像を公開する範囲を確認します。
相談時には、利用中のEC-CUBEのバージョン、商品数、1商品あたりの画像数、更新頻度、現在のファイル名の付け方、作業に時間がかかる箇所を整理すると、必要な対応を具体化できます。サンクユーでは、EC-CUBE構築・カスタマイズやBtoB-EC構築のご相談に対応しています。
商品表示・管理画面改善の関連記事
EC-CUBEの商品画像アップロードに関するよくある質問
EC-CUBEで画像をドラッグ＆ドロップするには、カスタマイズが必要ですか？
確認したEC-CUBE 4.3.1-p1では、商品編集画面にドラッグ＆ドロップで画像を追加し、並び順を変更する機能があります。まず利用中のバージョン、プラグイン、既存のカスタマイズを確認します。商品への自動振り分けや独自の画像加工など、標準機能で足りない要件を整理して追加開発を検討します。
複数の画像をまとめて追加すれば、複数の商品へ自動登録されますか？
商品編集画面での複数画像追加は、編集中の商品に複数の写真を追加する操作です。別々の商品へ画像を割り当てる処理とは異なります。複数商品の一括登録では、各商品と画像ファイルの対応を用意し、商品CSVなどの方法で紐付けを行います。
登録できる画像の形式・容量・枚数は決まっていますか？
確認したEC-CUBE 4.3.1-p1の標準の商品画像アップロードでは、JPEG・PNG・GIFを扱い、画面側の設定は最大10枚、1ファイル10,000,000バイトです。実際の制限はサーバー設定やプラグイン、カスタマイズの影響も受けるため、利用環境で確認します。他のバージョンでも同じ上限とは限りません。
メイン画像や画像の順番は変更できますか？
確認した4系の標準機能では、商品編集画面で画像を並び替えられ、先頭の画像がメイン画像として扱われます。並び替え後は商品情報を登録し、商品一覧と詳細ページで意図した画像が表示されるか確認します。実際の見え方は利用中のテンプレートやカスタマイズによって異なります。
商品CSVに画像のファイル名を書けば、画像もアップロードされますか？
CSVにファイル名を書くだけでは、パソコン内の画像ファイルは転送されません。画像ファイルを利用環境に合った方法で配置し、CSVに指定する名前と一致させる必要があります。管理画面からアップロードした画像は保存名が変わるため、元の名前と保存された名前を取り違えないようにします。
商品CSVで既存商品に画像を追加する場合、元の画像は残りますか？
追加扱いになると決めつけないことが大切です。確認したEC-CUBE 4.3.1-p1では、商品画像欄に値を指定すると、その商品の画像の関連付けを指定した一覧へ置き換える処理です。残す画像と新しい画像を含めた指定が必要になります。空欄による削除も前提にせず、利用環境と少数のテストデータで動作を確認します。
EC-CUBEの商品画像登録・管理画面改善をご相談ください
商品数や画像の準備方法、日々の更新作業を確認し、標準機能の活用、一括登録、追加カスタマイズを整理します。
投稿者プロフィール
- EC-CUBE・WordPressを中心に、サイト構築やカスタマイズを担当。
要件に応じた柔軟な実装を心がけています。
Movable Type案件の増加に伴い、対応領域拡大のためスキル強化中です。
ネイビー色が好きで「navy」という名前をよく使いますが、海軍好きと勘違いされることも。
でも軍モノ古着は好きです。
