このプロジェクトについて
ヘッドレスEC（ShopifyなどのEC基盤と、見た目のページを分けて作る構成）では、商品画像の変換と配信が自分のホスティングサーバー（VercelやAWSなど）の仕事になります。商品一覧ページには1ページで数十枚の画像が並ぶため、アクセスが増えるほど画像処理がサーバーの負荷になり、変換回数に応じた超過費用も膨らんでいきます。放っておくと、月数万円規模の想定外の請求につながることもある問題です。
そこで、Shopifyの商品画像をCloudinary（クラウディナリー。画像の変換・最適化・配信を専門に行うクラウドサービス）経由で配信するフローを構築しました。商品を登録すると画像が自動でCloudinaryへ運ばれ、リサイズも軽量化も配信もCloudinary側で完結する仕組みです。自分のサーバーは画像に一切関与しなくなるため、負荷はゼロに、費用はプラン制の読める金額に収まりました。
商品担当者の作業は以前と何も変わらず、Shopifyに商品を登録するだけ。裏側の仕組みが入れ替わっただけで、運用の手間を増やさずに表示速度とコストの両方を改善できたのが、このプロジェクトの成果です。
詳しく学ぶ
この仕組みについて、3つの記事で詳しく解説しています。課題 → 解決策 → 構築手順の順で読むと理解が深まります。
なぜ画像配信が問題になるのか
ヘッドレス構成で画像配信の負荷・コストが増える理由と、実際の影響を解説します。
Cloudinaryという選択肢
Cloudinaryとは何か、なぜ選ばれるのか、Shopify CDNやVercel画像最適化との比較を行います。
実装方法とフロー構築
Shopify → Cloudinaryの同期方法、URL変換、Next.jsでの表示まで、実装の全体像を解説します。
アーキテクチャ
元画像
画像処理・CDN配信
高速表示
2つの図を一言でまとめると、「自分のサーバーが担っていた画像の仕事を、Cloudinaryに丸ごと交代させた」構成です。画像はShopifyからCloudinaryへ自動で同期され、ユーザーにはCloudinaryの配信拠点から直接届きます。
主な成果
- サーバー負荷: 画像処理による負荷をゼロに
- コスト: Vercel画像最適化の超過費用を削減し、プラン制の読める金額に
- 表示速度: 世界各地のCDN拠点から、ユーザーに近い場所で高速配信
- 変換機能: 形式の自動選択、画質の自動最適化、顔認識クロップなどを活用可能に
技術スタック
- Cloudinary（画像変換・CDN配信）
- Shopify Storefront API
- Next.js（カスタムImageローダー）
- Webhook（画像同期）