基本ガイド
用途別レシピ
ソーシャルカード、商品バナー、証明書、請求書、配送ラベル、チケットなどの用途に合わせて、テンプレートとリクエストを作る方法を説明します。
各レシピでは、テンプレートに追加するレイヤーと、それを埋めるリクエストを示します。手順は、どのレシピでも同じです。
- 表のレイヤーを追加し、レイヤーに名前を付けると同じ方法で、それぞれに名前を付けます。
- テンプレートを保存し、カードの Copy Template ID で ID をコピーします。
- リクエストを送ります。
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 が含まれ、メールに入れられます。
関連ページ
- Modificationsには、リクエストで設定できるすべてのフィールドをまとめています。
- 画像の生成と PDF の生成では、各リクエストのオプションを説明しています。
- レイヤーの種類では、ここで使ったレイヤーを説明しています。