スマホからWooCommerce商品写真を一括アップロードする方法

WooCommerceストアを運営しているなら、商品写真はすべての基本です。商品の鮮明でよく撮れた画像が見られないお客様は購入しません。課題は写真を撮ることではなく、何十、何百もの商品を撮影する場合に、それらをスマホからWooCommerceの商品リストに効率的に取り込むことです。

このガイドでは完全なプロセスを説明します: スマホで商品写真を撮影し、WordPressメディアライブラリに一括アップロードし、WooCommerceの商品に割り当てるまで。紙の上では良さそうに見えても実際には機能しない理論的なワークフローではなく、ストアオーナーが実際に使っている実践的なツールとテクニックを紹介します。

スマホでの商品撮影が機能する理由

まず明らかな疑問に答えましょう: スマホで商品写真を撮影して、オンラインストアに十分プロフェッショナルに見えるのでしょうか？

はい。現代のスマートフォンカメラはECサイトに十分な画像を生成します。商品写真の品質を決める重要な変数は照明、背景、一貫性です — これらはどれもカメラに依存しません。

5,000円以下で揃えられる基本的な商品撮影セットアップに必要なものを紹介します。

• 白いバックドロップ — 大きな白いポスターボードや発泡スチロール板を壁に沿って曲げてシームレスな背景を作る
• デスクランプ2台 — 商品の両側に45度の角度で配置。自然な色のために昼光色の電球（5000K〜5500K）を使用。
• スマホ用三脚 — カメラのブレを防ぎ、撮影間の一貫したフレーミングを確保
• スマホ — 最近3年以内のものならどれでも可

このセットアップで、少なくともWeb向けの画像については、DSLRとスタジオ照明で撮った画像に匹敵するクリーンな商品写真が撮れます。お客様はスクリーン上で商品を見ているのであって、ビルボードに印刷するわけではありません。

商品写真の効率的な撮影

まとめて撮影する

最大の時間節約はまとめて撮影することです。1つの商品を撮影してアップロードしてリストを作成し、次の商品に移るという方法は避けてください。代わりに以下の手順で進めましょう。

1. 撮影スタジオを一度設置する
2. すべての商品を順番に撮影する
3. すべての写真を一括でアップロードする
4. 商品に写真を割り当てる

この流れ作業アプローチは、撮影、編集、アップロード、リスト作成の間でコンテキストスイッチングが発生しないため、劇的に速くなります。各ステップには独自のセットアップコストがあり、まとめて作業することでそのコストを全商品に分散できます。

各商品の標準ショット

WooCommerceはメインの商品画像と商品ギャラリー（複数の追加画像）をサポートしています。ほとんどの商品では3〜5枚の画像を目標にしましょう。

• ヒーローショット — メインの商品画像。通常は白背景に対して正面からのショット。これがショップグリッドと検索結果に表示されます。
• 45度アングル — 正面からのフラットな見た目では見えない奥行きと立体感を表現
• ディテールショット — 重要な特徴、テクスチャ、ラベル、または職人技のクローズアップ
• スケールショット — お客様がサイズを理解できるよう一般的なオブジェクト（手、硬貨、定規）と並べた商品
• 使用中のショット — 着用、保持、またはコンテキストで使用されている商品（オプションだが転換率に非常に効果的）

ファイルの命名

アップロード前に、説明的な名前にファイルをリネームしましょう。これはSEOと、メディアライブラリで何百もの商品画像を管理する際の自分自身の正気のために重要です。

良い命名パターン: 商品名-アングル.jpg

• blue-canvas-tote-front.jpg
• blue-canvas-tote-detail-stitching.jpg
• blue-canvas-tote-scale.jpg

避けるべき: IMG_4821.jpg、photo_2026_02.jpg、product1.jpg

ほとんどのモバイル写真編集アプリでは、カスタムエクスポートファイル名を設定できます。例えばLightroom Mobileでは、エクスポート設定でファイル命名テンプレートを定義できます。

商品写真の一括アップロード

写真を撮影して編集したら、WordPressメディアライブラリに取り込む必要があります。ここで一括アップロード機能が大きな違いをもたらします。

方法1: 専用アップロードアプリ（推奨）

スマホベースのワークフローに最も速いアプローチは、WordPress REST APIに直接接続してバッチアップロードをサポートするアプリを使うことです。例えばSnapPressは一度に最大20枚の写真を選択してメディアライブラリに直接送れます。50〜100枚の一般的な商品撮影では、3〜5回のアップロードバッチ、合計約2〜3分で完了します。

この方法の主なメリットは、画像がメディアライブラリにすぐに表示され、WordPressに正しく登録され、WooCommerceの商品に割り当てる準備ができていることです。余分な手順なし、ファイル登録なし、デスクトップ不要です。

複数のストアを管理している場合、マルチサイト対応により異なるWooCommerceインストール間を切り替えて、同じアプリから各ストアに商品写真をアップロードできます。

方法2: WordPressの管理画面（ブラウザ）

メディア > 新規追加に移動することで、WordPress管理画面から直接アップロードできます。デスクトップブラウザではドラッグ＆ドロップのアップローダーが動作しますが、モバイルでは標準のファイルピッカーにフォールバックします。カメラロールから複数の画像を選択できますが、体験が不便です — モバイルブラウザのアップローダーはバッチ操作向けに設計されておらず、大きなアップロードはモバイルデータ通信でよくタイムアウトまたは失敗します。

この方法はやむを得ない場合には機能しますが、定期的な一括アップロードには推奨しません。メディアライブラリの管理についての詳細は、WordPress メディアライブラリ完全ガイドをご覧ください。

方法3: WooCommerce CSVインポート（大規模カタログ向け）

何百もの商品がある新しいストアを立ち上げる場合、WooCommerceの組み込みCSVインポートツールを使って商品に画像を一括割り当てできます。プロセスは以下の通りです。

1. 最初に上記のいずれかの方法でメディアライブラリにすべての商品画像をアップロード
2. Images列に画像URLを含む商品データのCSVファイルを作成
3. WooCommerce > 商品 > インポートからCSVをインポート

このアプローチは初期ストアのセットアップや大規模なカタログ更新に強力ですが、他の方法より準備が必要です。アップロードした各画像の完全なURL（例: https://yourstore.com/wp-content/uploads/2026/02/blue-canvas-tote-front.jpg）を知っていて、CSVを正しくフォーマットする必要があります。

CSVの画像列では、複数のギャラリー画像はカンマで区切られています。最初の画像がメインの商品画像になり、後続の画像がギャラリーに追加されます。

https://yourstore.com/wp-content/uploads/2026/02/blue-canvas-tote-front.jpg, https://yourstore.com/wp-content/uploads/2026/02/blue-canvas-tote-angle.jpg, https://yourstore.com/wp-content/uploads/2026/02/blue-canvas-tote-detail.jpg

WooCommerce商品への写真割り当て

画像がメディアライブラリに入ったら、適切な商品に割り当てる必要があります。効率的に行う方法を示します。

メインの商品画像を設定する

1. WordPress管理画面の商品 > 全商品に移動
2. 編集したい商品をクリック
3. 右サイドバーの「商品画像」パネルを見つける
4. 「商品画像を設定」をクリック
5. メディアライブラリから画像を選択（アップロードした画像は最新の順で上部に表示されます）
6. 「商品画像を設定」をクリック

ギャラリー画像を追加する

1. 同じ商品編集画面で、「商品ギャラリー」パネル（商品画像の下）を見つける
2. 「商品ギャラリー画像を追加」をクリック
3. Ctrl（Windows）またはCmd（Mac）を押しながらクリック、またはモバイルで各画像をタップして複数の画像を選択
4. 「ギャラリーに追加」をクリック
5. 画像をドラッグして並べ替え（最初のギャラリー画像は通常、商品のライトボックスで2番目の画像として表示されます）

一括割り当てのヒント

一度に多くの商品に画像を割り当てる場合、いくつかの効率化のヒントを紹介します。

• クイック編集機能を使う — 商品リスト（商品 > 全商品）から商品にカーソルを合わせて「クイック編集」をクリック。クイック編集では画像を直接変更できませんが、画像更新と並行して他の商品データを一括更新するのに便利です。
• ブラウザのタブで作業する — 複数の商品編集ページを別々のタブで開くと、ページの完全な読み込みを待たずにすばやく切り替えられます。
• メディアライブラリをフィルタリングする — 画像を選択するとき、検索フィールドを使って説明的なファイル名でフィルタリングします。ファイルに適切な名前が付いていれば（例: blue-canvas-tote-*）、適切な画像を見つけるのが即座にできます。
• 商品の順序通りに画像をアップロードする — 商品を順番に撮影してアップロードすると、メディアライブラリは自然に同じ順序で表示され、割り当てが速くなります。

WooCommerceの画像最適化

商品ページの速度は転換率に直接影響します。Amazonの有名な発見、つまりレイテンシが100ms増えるごとに売上が1%失われるという法則は、すべてのオンラインストアに当てはまります。最適化されていない大きな画像は、WooCommerceページが遅い最も一般的な原因です。

画像サイズのガイドライン

画像タイプ	推奨サイズ	理由
メイン商品画像	1000〜1200px幅	ズーム機能に十分な大きさで、高速ロードに十分な小ささ
ギャラリー画像	1000〜1200px幅	ライトボックス閲覧のためにメイン画像と一致
サムネイル	WooCommerceが自動生成	WooCommerceはショップカタログとサムネイルサイズを自動的に作成
カテゴリーバナー	1920px幅、400〜600px高	カテゴリーアーカイブページでの全幅表示

圧縮とフォーマット

• 商品写真にはJPEGを使う — JPEGは写真画像のファイルサイズと品質の最良のバランスを提供します。70〜85%の品質を目標にしましょう。
• 透明度がある画像にのみPNGを使う — PNGファイルは写真コンテンツではJPEGより大幅に大きくなります。
• WebP変換を有効にする — ShortPixelやImagifyなどのプラグインが対応ブラウザ向けにWebPバージョンを自動的に提供でき、画質の損失なしにファイルサイズを25〜35%削減できます。
• EXIFデータを削除する — 商品写真にはGPS座標、カメラ設定、タイムスタンプをファイルに埋め込む必要はありません。このメタデータを削除するとファイルサイズが減り、位置プライバシーも守れます。

推奨の最適化プラグイン

• ShortPixel — 寛大な無料枠（月100枚）で優れた圧縮。WebP変換に対応し、新しいアップロードと既存の画像の両方を処理します。
• Imagify — WP Rocketの制作会社から。クリーンなインターフェース、良い圧縮、アップロード時の自動最適化。
• Smush — 一度に最大50枚の無料一括最適化。Pro版はCDN配信と次世代フォーマットのサポートを追加。

WooCommerceの画像設定

WooCommerceは各商品画像に対して複数のサイズを生成します。外観 > カスタマイザー > WooCommerce > 商品画像で設定できます。

• メイン画像幅 — 商品単体ページの画像。デフォルトは600pxですが、Retinaディスプレイには800〜1000pxを推奨します。
• サムネイル幅 — ショップカタロググリッドの画像。デフォルトは300pxで、ほとんどのテーマに適しています。
• サムネイルのトリミング — トリミングなし（元のアスペクト比）、1:1（正方形）、またはカスタムを選択できます。正方形のトリミングはショップグリッドに清潔で統一感のある外観を与えますが、一部の商品写真の重要な部分を切り取る可能性があります。

これらの設定を変更した後、既存の画像のサムネイルを再生成する必要があります。「Regenerate Thumbnails」プラグインがこれを自動的に処理します。

バリエーション商品のワークフロー

バリエーション商品（異なるサイズ、色、素材）はさらに複雑さを加えます。各バリエーションに独自の画像を持たせることができ、お客様は異なるオプションを選択したときに画像が変わることを期待しています。

バリエーション画像の設定

1. 商品編集画面で「商品データ」セクションに移動
2. 「バリエーション」タブをクリック
3. 各バリエーションを展開
4. 画像のプレースホルダーをクリックしてそのバリエーションに特定の画像を割り当て
5. メディアライブラリから適切な画像を選択

バリエーション撮影のヒント

• すべてのバリエーションを撮影する — お客様は自分が購入するものを正確に見たいと思っています。青いシャツと赤いシャツにはそれぞれ独自の写真が必要です。
• アングルとフレーミングを同一に保つ — お客様がバリエーションを切り替えるときに商品ページが洗練された印象を与えます。三脚を使って、カラーショット間でカメラを動かさないようにしましょう。
• バリエーション画像に一貫した名前を付ける — 商品名-色.jpg（例: canvas-tote-navy.jpg、canvas-tote-olive.jpg）のパターンを使うと割り当てが簡単になります。
• すべてのバリエーション画像をまとめてアップロードする — 商品のセット全体を一度にアップロードすると、メディアライブラリで時系列的にグループ化されます。

増えていく商品画像ライブラリの管理

200商品、商品あたり5枚の画像があるWooCommerceストアには、自動生成されたサムネイルサイズを含めると1,000枚以上の画像がメディアライブラリにあります。計画なしでこれを管理するのはすぐに手に負えなくなります。

整理の戦略

• 説明的なファイル名 — すでにこれは説明しましたが、最も効果的な整理ツールであるため繰り返す価値があります。メディアライブラリで「canvas-tote」を検索して関連するすべての画像を即座に見つけられれば、商品更新のたびに時間を節約できます。
• メディアフォルダープラグインを使う — WordPressはメディアライブラリのフォルダーをネイティブにサポートしていませんが、FileBirdやReal Media LibraryなどのプラグインがフォルダΦ機能を追加します。商品カテゴリー、季節、またはストアに合った任意の構造で画像を整理できます。
• 古い商品画像をアーカイブする — 商品を廃止するとき、その画像をメディアライブラリに散らかしたまま放置しないでください。もう不要なら削除するか、フォルダープラグインを使っているなら「アーカイブ」フォルダーに移動しましょう。
• 定期的な監査 — 四半期に一度、添付されていない画像（アップロードされたが商品や投稿に割り当てられていない画像）のメディアライブラリを確認しましょう。これらはストレージスペースを無駄にし、ライブラリのナビゲートを困難にします。

高度な整理と一括編集技術を含むメディアライブラリ管理の包括的な解説については、WordPressメディアライブラリガイドをご覧ください。

よくあるアップロードの問題のトラブルシューティング

「アップロード失敗」またはタイムアウトエラー

これは通常、サーバーのアップロード制限に対して画像ファイルが大きすぎることを意味します。PHPの設定でupload_max_filesizeとpost_max_sizeを確認してください。サーバーの設定を変更できない場合は、アップロード前に画像をリサイズしてください — 1200px幅のJPEGを80%品質にすると、合理的なアップロード制限内に収まるはずです。

商品ページで画像がぼやけて見える

テーマで設定した商品画像サイズより小さい画像をアップロードすると、このことが起きます。WooCommerceは表示エリアに合わせて小さい画像を引き伸ばします。元のアップロードがWooCommerceカスタマイザーの「メイン画像幅」設定以上のサイズであることを確認してください。

ギャラリー画像の順序が違う

商品編集画面でギャラリー画像をドラッグして並べ替えることができます。多数の商品の場合、一部のWooCommerce管理プラグインでは画像を一括で並べ替えることができます。

アップロード後に画像が表示されない

FTPやファイルマネージャーでアップロードした場合、画像はサーバーに存在してもWordPressのデータベースに登録されていない可能性があります。REST APIまたはWordPress管理者のアップローダーを使って画像を適切に登録する必要があります。WordPressネイティブのアップロードアプリを使えば、この問題を完全に回避できます。

まとめ: 効率的なWooCommerce商品写真ワークフロー

1. シンプルな撮影スタジオを設置する — 白背景、ランプ2台、スマホ三脚
2. すべての商品をまとめて撮影する — 商品あたり3〜5つの標準アングル
3. スマホで素早く編集する — トリミング、露出、ホワイトバランス。1200px幅、JPEG 80%品質でエクスポート。
4. ファイルに説明的な名前を付ける — 商品名-アングル.jpg
5. WordPressに一括アップロードする — バッチアップロードツールを使ってグループ単位でメディアライブラリに画像を送る
6. 商品に割り当てる — 各商品のメイン画像とギャラリーを設定
7. 最適化する — 最適化プラグインで画像を自動的に圧縮・変換

このワークフローを一貫して行えば、撮影時間を含めて10分以内に完全に撮影された商品をWooCommerceストアに追加できます。週に5〜10個の新商品を追加しているストアでは、場当たり的なワークフロー（デスクトップへの転送、手動リサイズ、1枚ずつのアップロードを含む）と比べて大幅な時間節約になります。