ナビゲーション

基本ガイド

用途別レシピ

ソーシャルカード、商品バナー、証明書、請求書、配送ラベル、チケットなどの用途に合わせて、テンプレートとリクエストを作る方法を説明します。

各レシピでは、テンプレートに追加するレイヤーと、それを埋めるリクエストを示します。手順は、どのレシピでも同じです。

  1. 表のレイヤーを追加し、レイヤーに名前を付けると同じ方法で、それぞれに名前を付けます。
  2. テンプレートを保存し、カードの Copy Template ID で ID をコピーします。
  3. リクエストを送ります。YOUR_API_KEY を API Keys ページのキーに、テンプレート ID を自分のものに置き換えてください。

ソーシャルカード

ソーシャルカードは、固定サイズの画像に、見出しと著者を表示します。ブログ記事やリンクのプレビューに向いています。キャンバスには、ソーシャルのプリセットから Open Graph(1200 × 630 ピクセル)を選びます。

レイヤー名 レイヤー リクエストのフィールド
title テキスト text
author テキスト text
avatar 画像 src
curl --request POST \
  --url https://api.bannerify.co/v1/templates/createImage \
  --header 'Content-Type: application/json' \
  --output card.jpg \
  --data '{
    "apiKey": "YOUR_API_KEY",
    "templateId": "tpl_social_card",
    "format": "jpeg",
    "quality": 85,
    "modifications": [
      { "name": "title", "text": "How we cut render time in half" },
      { "name": "author", "text": "An Nguyen" },
      { "name": "avatar", "src": "https://example.com/an.png" }
    ]
  }'

見出しの長さはまちまちなので、title のボックスは、最も長い見出しが収まる高さにしてください。行数を厳密に制限したい場合は、Text fit セクションの Max lines を設定します。このカードを Open Graph タグで使うには、同じテンプレートと modification で署名付き URLを作成します。

商品バナー

商品バナーは、写真、名前、価格を表示し、セールのバッジを表示することもできます。キャンバスには、Square(1080 × 1080 ピクセル)を選びます。

レイヤー名 レイヤー リクエストのフィールド
product-photo 画像 src
product-name テキスト text
price テキスト text
sale-badge テキスト visible

sale-badge レイヤーに Sale と書き、Background セクションで背景を付けてバッジらしくし、Layers リストの目のアイコンでそのレイヤーを非表示にします。次のリクエストは、バッジを表示します。セールでない商品では、sale-badge をリクエストに含めないか、"visible": false を設定します。

curl --request POST \
  --url https://api.bannerify.co/v1/templates/createStoredImage \
  --header 'Content-Type: application/json' \
  --data '{
    "apiKey": "YOUR_API_KEY",
    "templateId": "tpl_product_banner",
    "modifications": [
      { "name": "product-photo", "src": "https://example.com/shoes.png" },
      { "name": "product-name", "text": "Trail runner" },
      { "name": "price", "text": "$89" },
      { "name": "sale-badge", "visible": true }
    ]
  }'

レスポンスには、保存したファイルのアドレスが含まれます。

{
  "url": "https://images.bannerify.co/files/0b3c1c1e-5d6f-4c52-9e0a-8f6a4c0f2a11.png"
}

バナーを再描画しなくて済むように、url を商品と一緒に保管してください。カタログ全体では、商品ごとに 1 つのリクエストを送ります。1 つのキーが送信できるリクエスト数は、クォータと制限にまとめています。

証明書

証明書は、受講者の名前、コース、署名者、確認ページへのリンクになる QR コードを含む PDF です。PDF のページは、キャンバスのサイズがそのままポイントになるため、横長の A4 ページになるように、Size を 842 × 595 に設定します。

レイヤー名 レイヤー リクエストのフィールド
recipient テキスト text
course テキスト text
signature 署名 text, title, date
verify QR コード qrcode
curl --request POST \
  --url https://api.bannerify.co/v1/templates/createPdf \
  --header 'Content-Type: application/json' \
  --output certificate.pdf \
  --data '{
    "apiKey": "YOUR_API_KEY",
    "templateId": "tpl_certificate",
    "modifications": [
      { "name": "recipient", "text": "Mai Tran" },
      { "name": "course", "text": "Advanced image automation" },
      { "name": "signature", "text": "An Nguyen", "title": "Director", "date": "2026-02-02" },
      { "name": "verify", "qrcode": "https://example.com/certificates/1042" }
    ]
  }'

請求書

請求書は、番号、顧客、明細項目の表、合計、支払いに関する注記を含む PDF です。縦向きの A4 ページになるように、Size を 595 × 842 に設定します。

レイヤー名 レイヤー リクエストのフィールド
invoice-number テキスト text
customer テキスト text
line-items 表 columns, rows
totals キー・バリュー rows
payment-note アラート title, text
curl --request POST \
  --url https://api.bannerify.co/v1/templates/createPdf \
  --header 'Content-Type: application/json' \
  --output invoice.pdf \
  --data '{
    "apiKey": "YOUR_API_KEY",
    "templateId": "tpl_invoice",
    "modifications": [
      { "name": "invoice-number", "text": "INV-1042" },
      { "name": "customer", "text": "Acme Studio" },
      {
        "name": "line-items",
        "columns": ["Item", "Qty", "Total"],
        "rows": [
          { "Item": "Automate plan", "Qty": 1, "Total": "$29.00" },
          { "Item": "Extra seat", "Qty": 2, "Total": "$10.00" }
        ]
      },
      {
        "name": "totals",
        "rows": [
          { "key": "Subtotal", "value": "$39.00" },
          { "key": "Tax", "value": "$3.90" },
          { "key": "Total", "value": "$42.90" }
        ]
      },
      { "name": "payment-note", "title": "Payment terms", "text": "Pay before 31 Jan 2026." }
    ]
  }'

表は、ボックスの下端を超えた行を切り捨て、PDF は 1 ページです。想定する最も長い請求書が収まる高さの表にしてください。

配送ラベル

配送ラベルは、宛先、サービス、追跡番号のバーコードを表示します。4 × 6 インチのラベルは、300 dpi で 1200 × 1800 ピクセルなので、Size をその値に設定し、PNG を 300 dpi で印刷します。

レイヤー名 レイヤー リクエストのフィールド
ship-to テキスト text
service テキスト text
tracking-barcode バーコード barcode
curl --request POST \
  --url https://api.bannerify.co/v1/templates/createImage \
  --header 'Content-Type: application/json' \
  --output label.png \
  --data '{
    "apiKey": "YOUR_API_KEY",
    "templateId": "tpl_shipping_label",
    "modifications": [
      { "name": "ship-to", "text": "Mai Tran\n12 Pine Street\nHanoi 100000" },
      { "name": "service", "text": "Express" },
      { "name": "tracking-barcode", "barcode": "1Z999AA10123456784" }
    ]
  }'

text の改行は、ラベル上でも改行になるため、ship-to に住所全体を入れられます。バーコードは、バーの下に値を印字するので、番号用のテキストレイヤーを別に用意する必要はありません。

チケット

チケットは、参加者、イベント、入口のスキャナーが読み取る QR コードを表示します。QR コードの内容には、スキャナーが期待するアドレスまたはコードを送ります。

レイヤー名 レイヤー リクエストのフィールド
attendee テキスト text
event テキスト text
ticket-qr QR コード qrcode
curl --request POST \
  --url https://api.bannerify.co/v1/templates/createStoredImage \
  --header 'Content-Type: application/json' \
  --data '{
    "apiKey": "YOUR_API_KEY",
    "templateId": "tpl_ticket",
    "modifications": [
      { "name": "attendee", "text": "Mai Tran" },
      { "name": "event", "text": "Image automation meetup" },
      { "name": "ticket-qr", "qrcode": "https://example.com/tickets/8f3a1c" }
    ]
  }'

レスポンスには、保存した画像の url が含まれ、メールに入れられます。

関連ページ