Cloudflare Imagesで画像に文字を入れる方法：実装・料金・活用例

Cloudflare Imagesで画像に文字を入れる最短パイプライン

まずは、何度でも再現できるレイアウトを1つ用意します。次の例では1200×630のプロダクトカードを生成し、見出しを?text=から受け取り、ブランド指定の固定フォントで描画してWebPを返します。2つのexample.comのアセットURLは、自分で管理するURLに置き換えてください。

Wranglerの設定にImages Bindingを追加し、Workers Cacheを有効にします。

{
  "images": {
    "binding": "IMAGES"
  },
  "cache": {
    "enabled": true
  }
}

続いて、WorkerからBindingを利用します。

const CARD_IMAGE = "https://assets.example.com/product-card.jpg";
const BRAND_FONT = "https://assets.example.com/fonts/Brand-Bold.woff2";

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const headline = (url.searchParams.get("text") || "AUTUMN DROP").trim();

    // This is a layout limit for this card, not Cloudflare's 1,000-character ceiling.
    if (!headline || [...headline].length > 120) {
      return new Response("Text must contain 1 to 120 characters", { status: 400 });
    }

    const source = await fetch(CARD_IMAGE);
    if (!source.ok || !source.body) {
      return new Response("Source image unavailable", { status: 502 });
    }

    const textLayer = env.IMAGES.text(headline, {
      font: { url: BRAND_FONT },
      size: 72,
      color: "#FFFFFF"
    });

    const result = await env.IMAGES
      .input(source.body)
      .transform({ width: 1200, height: 630, fit: "cover" })
      .draw(textLayer, { left: 72, bottom: 72 })
      .output({ format: "image/webp" });

    return result.response({
      headers: {
        "Cache-Control": "public, max-age=86400, stale-while-revalidate=604800"
      }
    });
  }
};

/card?text=Autumn%20Dropへリクエストすると、指定した文言が左端と下端からそれぞれ72ピクセルの位置に入った1200×630のWebPが返ります。変化するテキストが画像URLに含まれるため、この例ではキャプションごとに自然と固有のURLが割り当てられます。本番環境では、可能であれば固定のキャンペーンIDや商品IDを使ってください。公開クエリ文字列で自由入力を受け付けると、バリエーション数に上限がなくなり、コストと不正利用の両面で問題になります。

画像ソースとフォントのオリジンは固定するか、許可リストで制限します。このサンプルでは、訪問者が任意の取得先を指定できないようにしています。公開Workerがリモートアセットを取得する場合、この境界は欠かせません。

Cloudflareの内部では何が起きているのか

テキストのラスタライズとは、文字をピクセルに変換する処理です。.text()は、透明なステッカーに文字を印刷する小さな組版機だと考えると分かりやすいでしょう。.draw()がそのステッカーを写真に重ね、.output()が両者を1つの最終ファイルにまとめます。

この捉え方をすると、APIの設計も理解しやすくなります。テキストはブラウザ上で画像の手前に浮かぶHTML要素ではありません。レンダリング後は、画像を構成するピクセルの一部です。

最終キャンバスのサイズはベース画像で決まります。テキストの位置は、top、left、bottom、rightのピクセルオフセットで指定します。位置を指定しなければ中央揃えです。同じオーバーレイにleftとright、またはtopとbottomを同時指定することはできません。不透明度は0から1の範囲で、デフォルトの合成モードはoverです。

.draw()は複数回つなげられます。呼び出し順がレイヤー順となり、最後に描画したものが最前面に来ます。CloudflareはURLベースの変換向けに、cf.image.draw配列へtextエントリも追加しました。ただし、ベース画像がすでにR2、Cloudflare Images、リクエストボディ、別のfetchから生バイトとして届くなら、Bindingのほうが適しています。

重要なのは、レイアウトを判断する機能がない点です。Cloudflareが現在テキストスタイルとして文書化しているのはfont、size、colorです。テキストボックス、折り返し、自動フィット、行の高さ、字間、配置、縁取り、影、代替フォントは文書化されていません。改行位置やセーフゾーン、商品名が長すぎる場合の処理は、アプリケーション側で決める必要があります。

元画像だけでなく完成したカードをキャッシュする

Images Bindingのレスポンスは自動ではキャッシュされません。Workers Cacheがなければ、同じリクエストが来るたびにWorkerが動き、元画像のデコードとエンコードも繰り返されます。キャッシュを有効にしてCache-Controlを設定すれば、その処理を再実行せずに完成済みのレスポンスをCloudflareから配信できます。

キャッシュとImagesの課金は、別々の問題を解決します。CloudflareはBindingをユニーク変換単位で課金します。元画像とパラメーターの組み合わせが1つなら、1暦月につき1回として数えられ、同じ月に同一変換を繰り返してもImagesの使用量は増えません。それでもキャッシュヒットには、Workerの再実行と画像処理の待ち時間を避けられる価値があります。

ユニーク判定の中でテキスト文字列がどのように正規化されるかについて、Cloudflareは個別に説明していません。自社の利用データで確認できるまでは、ベース画像、キャプション、スタイル、出力の組み合わせが異なるたびに新しい変換になると見積もるのが安全です。2,000商品に5種類のカードサイズを用意するカタログなら、各カードが何千回閲覧されても、10,000バリエーションとして扱われる可能性があります。

レイアウトをすでに持っているなら、採算は大きく変わる

Cloudflare Images Freeには、毎月5,000件のユニーク変換が含まれます。有料プランでも最初の5,000件は料金に含まれ、それを超える分は1,000件あたり$0.50です。Cloudflare自身が示す10,000変換の例では、その月のImages変換料金は$2.50になります。

Bannerbearが現在掲載している料金は、Automateプランが月額$49で1,000 APIクレジット、Scaleが月額$149で10,000クレジットです。通常の画像レンダリング1回で1クレジットを消費し、追加フォーマット、スケール、AIレイヤーにはさらに倍率がかかります。

$146.50の差額を、そのまま完成品同士の節約額と捉えることはできません。Bannerbearが提供するのは、テンプレートエディター、連携機能、チーム向けワークフローを備えた実用的なデザイン製品です。一方、Cloudflareが提供するのはレンダリングの構成要素であり、設計、実装、検証、監視、保守は自分たちで担います。Imagesの変換料金に加えて、元画像のストレージ費用とエンジニアリング工数が発生する場合もあります。Cloudflare Images内のストレージには別料金が設定されています。

それでも判断基準は明確です。デザインルールをチームですでに管理し、画像リクエストもCloudflare上で処理しているなら、別のレンダリングサービス契約は必須ではなくなります。マーケターが毎週レイヤーを視覚的に動かす必要があるなら、その契約で購入しているのは高価なピクセルではなく、エディターと運用モデルです。

効果が大きい7つのワークフロー

1. カタログ販促カード

数百SKUを扱う小売事業者なら、承認済みの背景レイアウトを1つ維持し、現在の商品名、価格、在庫注記、キャンペーン情報を各カードに描画できます。在庫データやキャンペーンデータをトリガーにWorkerが動き、マーケットプレイス用またはSNS用の完成画像を返します。価格変更のたびに手作業の書き出し待ちが発生せず、元写真に触れずに同じ承認済みレイアウトから再生成できるため、効果が見込めます。

相性がよいのは、長さを制限できるコピーです。2行の商品名と1つの価格バッジなら予測できますが、販促文の段落はそうはいきません。

2. メディア・CMS向けソーシャルカード

記事の公開時に、見出しまたは固定の記事IDを渡して1つのエンドポイントを呼び出す構成です。Workerがヒーロー画像を取得してタイトルを描画し、Open Graph画像またはソーシャルカードを返します。共有画像の欠落や更新漏れが減り、公開処理の途中でスクリーンショット用ブラウザの完了を待つ必要もなくなります。

CMSがすでにCloudflareの背後で動いている場合は、特に有力です。画像を配信するのと同じエッジ層で生成し、完成版URLをキャッシュして繰り返し共有できます。

3. マーケットプレイスのステータス画像

マーケットプレイスでは、出品カードにNEW、RESERVED、SOLD、商品の状態、所在地などを刻印できます。出品サービス側で短いテキスト値を変えると、画像エンドポイントが新しい見た目の状態を生成します。出品者が元写真を編集しなくても、カードが埋め込まれた先で購入者が画像内のステータスを確認できます。

ビジネス上の効果は情報の正確さです。古いステータスのカードは問い合わせ対応を増やし、期待外れのクリックにつながります。決定論的なオーバーレイなら、データベースのレコードに合わせて切り替えられます。

4. フランチャイズと地域別オファーのクリエイティブ

飲食店やサービス業のフランチャイズなら、ブランドの構図を固定したまま、地域ごとに都市名、オファー、日付、価格を変更できます。1つのキャンペーン定義から多数のローカル版を作れるため、反復的な制作作業を減らしつつ、フォント、色、配置といったリスクの高い要素を現地担当者の操作対象から外せます。

落とし穴は長い地名です。安全に自動化するには、実測したテキスト幅、代替サイズ、または事前承認済みの略称が必要です。

5. イベント・スケジュールカード

イベントプラットフォームなら、登壇者名、セッション時刻、部屋番号、直前のCANCELLED表示を固定ポスターに描画できます。元のスケジュールを正として維持し、カード生成を出力工程にします。イベント間近に詳細が変わっても、デザイナーに何十ものファイルを開き直してもらわず、すばやく反映できるのが利点です。

6. 顧客レポートのスナップショット

レポーティング製品では、メールやメッセージ用のブランド付きグラフ画像に、対象期間、顧客名、主要指標を追加できます。Workerはすでにレンダリングされたグラフをベースに、変動する少数のラベルを加え、軽量な最終形式で返します。配信先でダッシュボード自体を動かせない場合に有効です。

テキストレイヤーでダッシュボード全体を描こうとしてはいけません。最後に決定論的なラベルを付ける工程で最も力を発揮します。

7. 社内業務用ラベル

倉庫、フィールドサービス、モデレーションの各チームでは、検査状況、バッチ、ルート、レビュー結果などの短いステータスを対象物の写真に描画できます。周辺のメタデータが削除されるシステムを経由しても、画像内の表示は残ります。文脈のない画像を受け取ったときに、確認の手間を減らせるのが利点です。

これは業務上の利便性を高めるものであり、元の記録を置き換えるものではありません。ステータスはデータベースに保持し、画像はそのビューとして扱ってください。

開発する価値のある3つのプロダクト

最有力：業種特化型ソーシャルカードAPI

固定レイアウトはあるものの、ブラウザレンダリング基盤を運用したくないメディア、代理店、多拠点ビジネス向けに、ブランドルールを守るカード生成サービスを構築します。購入者がヒーロー画像と承認済みのコピー項目を渡すと、サービスが少数のアスペクト比に対応した固定URLを返す仕組みです。

米国のキーワードデータでは、social media post makerの月間検索数は480、クリック単価は$19.95と推定されています。この完全一致フレーズはAPI購入者より広い層を含みますが、CPCが非常に高いことから、各社がこの制作業務の顧客獲得を競っていると分かります。Bannerbearの月額$49と$149のプランは、自動レンダリングにすでに予算を投じるチームにとって、現時点の比較基準になります。

販売可能な最小構成は、1つのWorker、固定された3種類のカードレイアウト、管理画面でのプレビュー、CMS Webhook、厳格なソース許可リスト、固定キャッシュキー、収まりきらないテキストの失敗キューです。売るべき価値は.text()呼び出しそのものではなく、公開システムとの接続が安定して動くことです。

課題はテンプレートの管理責任です。Cloudflareは顧客向けのビジュアルエディターを提供しないため、新しいレイアウトのたびに個別対応が増える可能性があります。それでもこれが最有力なのは、新しいプリミティブによって継続的かつ商業価値のあるワークフローからレンダラーを取り除きつつ、連携とブランド統制を製品価値として残せるからです。

カタログ向け販促ラベルエンジン

価格、セール状態、配送予定、コレクション名を商品画像に追加する、ECチーム向けのフィード駆動型コンポジターを構築します。CSV、PIM、コマースWebhookからデータを更新し、変更されたバリエーションだけを再生成します。

Product label makerの米国での推定月間検索数は320です。商用意図があり、CPCは$6.03、広告主間の競争も激しくなっています。ラベル作成に有料需要がある証拠ではありますが、この検索にはカタログ画像ではなく印刷用ラベルを求める人も多く含まれます。

MVPに必要なのは、商品フィードとのコネクター、少数の固定バッジ、アスペクト比プリセット、プレビュー、長い商品名や価格欠落への対応ルールです。課題は対象範囲です。実物パッケージでは、印刷解像度、塗り足し、バーコード、法規制の確認が必要であり、このラスターオーバーレイだけでは解決できません。そうした仕組みまで製品に含めない限り、販促画像へのラベル追加に範囲を絞るべきです。

組み込み型の文字入れツール

既存のクリエイター向け製品、マーケットプレイス、コミュニティ製品に、小さなエディター部品を組み込みます。画像を選び、短いテキストを入力し、承認済みのフォントと色から選択し、セーフエリア内に配置して書き出す流れです。Cloudflareが製品独自のUIの背後で最終ラスタライズを担います。

Add text to imageの米国での推定月間検索数は6,600です。より取引意図の強いadd text to image appも約320件あり、同じデータセットでは前年比23%増えています。需要は確かにありますが、多くの検索者が期待しているのは無料の汎用エディターです。

MVPは、制約付きプレビュー、4〜6種類のテキストプリセット、1つの書き出しエンドポイント、完成版URL用のストレージで構成できます。課題は差別化の弱さです。独立した汎用ツールでは、成熟した無料エディターと競うことになります。画像、ユーザー、公開先をすでに抱える製品の有料機能として提供するほうが理にかなっています。

この用途には向かないケース

Cloudflare Imagesはテキストを描画して合成できます。しかし、表示する文言を決めたり、タイポグラフィをレスポンシブにしたり、ブランドレイアウトを承認したり、マーケター向けのテンプレートエディターを提供したりはしません。それらが仕事の難所なら、フル機能のデザイン自動化製品を利用するほうが、内製保守より安く済む場合があります。ブランドシステム全体を変えるアプローチについては、Canva AI 2.0のブランド刷新テストも参照してください。

実用上、導入を止めるべきサインは5つあります。

• コピーに高度な折り返し、自動フィット、リッチテキスト、または選択したフォントで未検証の言語固有シェーピングが必要です。
• 編集者がレイヤーを視覚的に移動し、開発者を介さず新しいテンプレートを公開する必要があります。
• 公開エンドポイントが、許可リストなしで任意の画像ソースURLやフォントURLを受け付けます。
• バリエーション生成を制限できず、ランダムなクエリ文字列によってFree枠の5,000変換を使い切り、新しいリクエストがエラー9422で失敗する可能性があります。
• ローカルテストがテキスト描画に依存します。低忠実度のローカルImages実装が対応するのは幅、高さ、回転、形式だけなので、この機能ではnpx wrangler dev --remoteを使ってください。

フォントとテキストの上限は厳格です。カスタムフォントは20 MB以下、描画する内容は1,000文字以下、ラスターレイヤーは4096×4096ピクセル以下でなければなりません。ラベルや見出しには十分余裕のある上限ですが、画像APIをページレイアウトエンジンとして使ってよいという意味ではありません。

自社のカタログや公開システムに合わせた信頼できる画像エンドポイントが必要なら、AIプロダクションシステムからご相談ください。