Touchless
Shopify 自動化2026-06-26

【Shopify】画像編集の手作業を無くす！アップロードからリサイズ・CDN配信までの自動化プロセス

EC運営者を悩ませる「画像処理の泥臭い手作業」

ECサイトの売上を大きく左右する「商品画像」。しかし、新しい商品を出品したり、仕入れ先から提供された画像を掲載する際、バックヤードでは以下のような泥臭い作業が繰り返されています。

  1. 手動での画像トリミング・リサイズ: 画像の背景を切り抜き、縦横比を正方形（1:1）に揃え、サイズをWeb表示用に縮小する。
  2. ファイル名の手動修正: SEO効果を狙って IMG_48291.jpg のような無意味な名前から leather-wallet-brown-01.jpg のように型番や名称に変更する。
  3. Shopifyへの個別アップロード: 1枚ずつShopifyのメディア管理画面から手動でドラッグ＆ドロップし、各商品ページに紐付ける。

これらの作業は、商品数やバリエーション（色・サイズ）が増えるほど指数関数的に作業時間が増大し、担当者の業務時間を圧迫します。さらに、作業者によって画像の余白やクオリティにバラつきが生じる原因にもなります。

このプロセスを、Shopify API と画像処理ライブラリ（Sharp）およびクラウドストレージを組み合わせることで、**「元の画像を専用フォルダに投げるだけで、自動的にトリミング・圧縮・ファイル名変更され、Shopifyへ反映される」**完全自動化（Touchless）の画像パイプラインが構築できます。

2. 課題解決のビフォー・アフター

項目 手作業による画像加工・アップ（Before） 画像自動処理パイプライン（After）
処理時間 1画像あたり3分〜5分（手動編集） 1画像あたり数秒（自動処理）
品質の統一性 編集者によってサイズや余白に揺れが発生 プログラム定義により余白や比率が完璧に均一化
ファイル命名 コピペ漏れによる無加工名や重複が頻発 商品SKUやタイトルに基づきSEOフレンドリーに自動生成
容量最適化 重い画像のままアップされ表示速度が低下 次世代画像フォーマット（WebP/AVIF）へ自動圧縮

3. 具体的な実装例：Node.jsとSharpを使用した画像処理とShopify登録

Google Driveなどの特定の共有フォルダに保存された画像を自動検知し、リサイズ処理してShopify API経由で紐付ける処理の実装コード例です。

import { NextResponse } from "next/server";
import sharp from "sharp";

// Shopify Admin APIの認証情報
const SHOPIFY_ADMIN_API_URL = `https://${process.env.SHOPIFY_DOMAIN}/admin/api/2024-01`;
const ACCESS_TOKEN = process.env.SHOPIFY_ACCESS_TOKEN!;

export async function processAndUploadProductImage(
  imageBuffer: Buffer,
  productSku: string,
  index: number
) {
  try {
    // 1. sharpを使用して画像を正方形（1000x1000）にリサイズ、WebP形式へ変換・圧縮
    const processedImageBuffer = await sharp(imageBuffer)
      .resize(1000, 1000, {
        fit: "contain",
        background: { r: 255, g: 255, b: 255, alpha: 1 }, // 背景を白で塗りつぶす
      })
      .webp({ quality: 80 })
      .toBuffer();

    // 2. SEOに最適化されたファイル名を作成 (例: product-sku-01.webp)
    const fileName = `${productSku.toLowerCase()}-${String(index).padStart(2, "0")}.webp`;

    // 3. Shopify Files APIまたはGraphQLを用いて画像をアップロード
    // ※以下は商品画像API（REST）を利用して紐付けるイメージ
    const base64Image = processedImageBuffer.toString("base64");
    const response = await fetch(`${SHOPIFY_ADMIN_API_URL}/products/${process.env.TARGET_PRODUCT_ID}/images.json`, {
      method: "POST",
      headers: {
        "X-Shopify-Access-Token": ACCESS_TOKEN,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        image: {
          attachment: base64Image,
          filename: fileName,
        },
      }),
    });

    if (!response.ok) {
      throw new Error(`Shopify Image Upload failed: ${await response.text()}`);
    }

    const data = await response.json();
    console.log(`Image registered successfully. URL: ${data.image.src}`);
    return { success: true, url: data.image.src };
  } catch (error) {
    console.error("Image pipeline failed:", error);
    return { success: false, error: (error as Error).message };
  }
}

4. HadayaLabのECメディア自動化ソリューション

HadayaLabでは、物販事業者様が商品画像や販促バナーの管理にかける時間を劇的に短縮する、クリエイティブ業務のBPRサービスを提供しています。

  • 自動画像クレンジング: 背景切り抜きAIと連携し、商品のみを自動抽出してブランド規定の背景に合成。
  • 一斉自動リネーム＆配置: 仕入れ先からの大量の画像を、あらかじめ定義されたマスタデータを紐付けて一元リネーム処理。
  • マルチモール画像自動最適化: 楽天市場用の制限（文字比率や白背景など）とShopify用画像を、それぞれのアウトプットに自動出し分け。

「商品登録のたびに行う画像のリサイズ・トリミング作業から解放されたい」とお望みの店舗オーナー様は、ぜひHadayaLabの画像処理自動化プランをご相談ください。

一覧に戻る自動化の無料ブループリントを依頼