はじめに
Cloudinary（画像の変換・配信を専門に行うクラウドサービス）を使うと決めたあと、次に考えるのは「Shopifyにある商品画像を、どうやってCloudinary経由でユーザーに届けるか」です。
この記事では、運営しているECサイトで実際に組んだ構成をもとに、構築の全体像を3つのステップに分けて解説します。プログラムの書き方には踏み込みません。それぞれのステップで「何を決めて、どの仕組みを選ぶか」が分かれば、開発を依頼するときにもAIエージェント（AIによる開発支援）に指示するときにも、そのまま設計図として使えるはずです。
構築の全体像 — 3つのステップ
やることは大きく3つ。Shopifyの画像をCloudinaryへ渡す「同期」、どの画像をどう変換して呼び出すかを決める「URLのルール作り」、そしてページに組み込む「表示」です。
商品の作成・更新
商品データから画像を取り出す
変換・保存して配信に備える
上の図は「商品を登録すると、画像が自動でCloudinaryに運ばれる」流れを表しています。
画像をリクエスト
変換済み画像を返す
自分のサーバーは関与しない
こちらは配信側の図で、一言でいえば「ユーザーへの画像配達はCloudinaryが直接行い、自分のサーバーは通らない」形です。
ステップ1: 画像をCloudinaryへ同期する
方法A: Webhookによる自動同期
1つめの方法は、Shopifyで商品が登録・更新されたタイミングで、画像を自動的にCloudinaryへアップロードする方式です。Shopifyには「商品が作成された」「更新された」という出来事を外部へ自動通知するWebhook（何かが起きたときに知らせてくれる仕組み）があり、この通知を受け取ったら商品データから画像を取り出してCloudinaryに預ける、という一連の流れを自動化します。
一度組んでしまえば、商品担当者は普段どおりShopifyに商品を登録するだけ。画像は裏で勝手にCloudinaryへ運ばれていきます。運用の手がかからないのが、この方式の一番の利点です。
方法B: フェッチ型(オンデマンド)
2つめは、事前の同期をせず、画像が最初に呼び出されたときにCloudinaryがShopifyから取得してくる方式です。Cloudinaryには「このURLの画像を取ってきて、変換して、覚えておいて」という頼み方（フェッチ）が用意されていて、仕組みを作り込まなくてもすぐ使い始められます。
そのかわり、最初の1回だけはShopifyから取り寄せる時間がかかるため表示が遅く、Shopify側の画像URLが変わると取り直しになります。手軽さと引き換えに、速さと確実さを少し譲る方式です。
どちらを選ぶか
表を一言でまとめると、「本格運用ならWebhook同期、まず試すならフェッチ型」です。運営中のサイトでは、最初にフェッチ型で効果を確かめてから、Webhook同期に切り替える順序を取りました。段階を踏むと、効果を実感してから作り込みに投資できます。
ステップ2: 画像URLのルールを決める
URLの組み立てを1か所にまとめる
Cloudinaryの画像は「どの画像を、どう変換するか」をURLで指定して呼び出します。このURLの組み立てルールをページごとにバラバラに書くと、あとで変換の方針を変えたいときに全ページを直すことになるため、「商品IDと画像IDを渡すとCloudinaryのURLを返す」変換係を1か所に作っておきます。
実装を依頼するときは、「画像URLの組み立ては共通の関数にまとめてほしい」と伝えるだけで意図が通じます。修正が1か所で済む構造にしておくことが、このステップの目的です。
サイズと画質は「自動」に任せる
URLに含める変換指示は、幅の指定に加えて f_auto（形式の自動選択）と q_auto（画質の自動最適化)の2つを基本にしました。ブラウザごとの形式の出し分けも、画質と容量のバランス調整も、Cloudinaryに任せてしまう設定です。人が判断する項目を減らすほど運用は楽になるので、迷ったら自動に寄せるのがおすすめです。
ステップ3: Next.jsでの表示
画像表示の「接続役」を差し替える
Next.js（Webサイトを作るための土台になる仕組み）には標準の画像表示機能があり、通常はVercel側で画像を変換します。この変換先をCloudinaryに向け替えるために、「カスタムローダー」と呼ばれる接続役を設定します。役割は単純で、ページが画像を要求したときに、ステップ2で決めたルールでCloudinaryのURLを組み立てて渡すだけ。これで、ページ側の書き方はほぼ変えずに、画像の出どころだけをCloudinaryへ切り替えられます。
あわせて、Next.jsの設定でCloudinaryのドメイン（配信元のアドレス）を許可リストに登録しておきます。外部から画像を読み込むための、決まりごとのような設定です。
読み込み中の「ぼかし画像」で体感を上げる
Cloudinaryは、幅20pxほどの小さなぼかし画像を自動生成できます。これを本画像の読み込みが終わるまでの仮表示（プレースホルダー）に使うと、真っ白な空白ではなく、うっすら内容が見える状態から画像が現れるようになります。表示の速さそのものに加えて、「待たされている感じ」を減らせる小さな工夫です。
表示できないときの保険も用意する
万一Cloudinary側で画像を返せなかった場合に備えて、Shopifyの元画像に切り替えて表示する保険（フォールバック）も入れておきます。発動する場面はめったにありませんが、「画像が1枚も出ない商品ページ」という最悪の状態を避けられるので、入れておいて損はありません。
まとめ
Shopify → Cloudinaryの配信フローは、「同期の方式を選ぶ」「URLのルールを1か所に決める」「表示の接続役を差し替える」の3ステップで構築できます。組み上がってしまえば、商品担当者の作業は何も変わらないまま、画像の負荷とコストだけが自分のサーバーから消える、という構成です。
まずはフェッチ型で小さく試し、効果を確かめてからWebhook同期へ。この順序なら、リスクを抑えながら移行できます。