レイヤーの種類

テンプレートは、レイヤーを重ねたキャンバスです。レイヤーにはそれぞれ種類があり、種類によってリクエストで変更できる内容が決まります。レイヤーに名前を付けると、リクエストからその名前で変更できます。すべてのフィールドは、Modificationsにまとめています。

レイヤーを追加する

キャンバス上部のツールバーには、Insert（+）、Frame（F）、Text（T）、Shapes の 4 つのボタンがあります。Frame、Text、Insert の Stack と Grid、Shapes の Rectangle（R）、Oval（O）、Line、Path（P）はツールを起動するので、キャンバスをクリックまたはドラッグしてレイヤーを配置します。フレームの内側に描いたレイヤーは、そのフレームの中に入ります。Insert のそのほかの種類と Shapes の Star は、キャンバスの左上付近に現れるので、ドラッグして配置します。

新しいレイヤーには、Text のように種類の名前が付き、同じ種類の 2 つ目のレイヤーには Text 1 のように番号が付きます。API を呼び出す前に、名前を変更してください。方法は、レイヤーに名前を付けるで説明しています。

項目	レイヤー	描画されるもの
Text	テキスト	1 行または複数行のテキスト
Image	画像	PNG、JPEG、WebP、SVG の画像
Frame	フレーム	塗り、枠線、影を付けられるボックス
Stack	フレーム	レイヤーを横または縦に並べるフレーム
Grid	フレーム	レイヤーを列に並べるフレーム
Rectangle	フレーム	200 × 200 ピクセルのグレーのフレーム
Oval	フレーム	200 × 200 ピクセルの丸いグレーのフレーム
Line	パス	マウスを押した位置から離した位置までの直線
Path	パス	クリックした点を通る、直線または曲線
QR Code	QR コード	QR コード
Barcode	バーコード	Code 128 のバーコード
Icon	アイコン	ベクターのアイコン
Star	星評価	評価を表す星の列
Key Value	キー・バリュー	ラベルと値の組
Signature	署名	署名者の名前、役職、日付
Alert	アラート	タイトルと本文のある注意書きボックス
Link	リンク	PDF でクリックすると URL を開くテキスト
Chart	グラフ	棒、折れ線、面、円、ドーナツのグラフ
Table	表	列と行で構成される表

レイヤーを選択すると、Design パネルに設定が表示されます。どのレイヤーにも Position & Size があり、それ以外のセクションは種類によって異なります。

テキスト

Text を選び、キャンバスをクリックまたはドラッグして、入力します。テキストレイヤーをダブルクリックすると、編集できます。Design パネルで、フォント、太さ、サイズ、間隔、配置、大文字小文字、色を設定します。

リクエストで変更できるのは、text と color です。新しいテキストはレイヤーのテキスト全体を置き換えるため、元のテキストにあった書式（たとえば 1 語だけの太字）は引き継がれません。

{ "name": "headline", "text": "Summer sale", "color": "#e11d48" }

フォントの一覧は Google Fonts のもので、フォントピッカーには検索ボックスがあります。フォントのアップロードはできず、Google Fonts が配信していないフォントは Arial で描画されます。

テキストレイヤーのボックスは、想定する最も長い値が収まる高さにしてください。描画された画像では、ボックスの下端でテキストが切れないため、長い値は下のレイヤーに重なることがあります。エディターのキャンバスではその部分が隠れるので、長い値はプレビューで確認してください。プレビューは、API と同じようにテキストを描画します。

Text fit セクションの Max lines は、その行数までしか表示しません。同じセクションの Fit は、テキストをボックスに合わせて拡大縮小し、Off、Grow to fill the box、Grow up to 150%、Shrink to fit、Scale each line を選べます。Shrink to fit は、テキスト全体がボックスに収まるまでフォントサイズを小さくします。Scale each line は行ごとにサイズを変えるため、最後の行や 1 行のテキストには効果がありません。

画像

レイヤーを選択し、Content セクションの Image source を使います。Library はアップロード済みの画像またはストック画像を選び、URL は画像のアドレスを受け付けます。Appearance セクションの Fit では、Cover、Contain、Fill を選べます。

画像をトリミングするには、画像を選択して Crop をクリックするか、画像をダブルクリックします。

リクエストで変更できるのは src で、同じボックスの中の画像が置き換わります。アドレスは、PNG、JPEG、WebP、SVG ファイルの公開 URL にしてください。Bannerify が画像をダウンロードする方法は、Modificationsで説明しています。

フレーム

フレームは、ボックスです。Frame を選び、キャンバス上でドラッグして描きます。色は Fill セクションで設定します。Stroke と Shadow セクションで枠線と影を追加でき、Appearance の Radius で角を丸くできます。ほかのレイヤーの背景やカードとして使います。

フレームには、ほかのレイヤーを入れられます。Rectangle と Oval もフレームです。フレームの内側にレイヤーを描くか、レイヤーをフレームにドラッグすると、その内側に入ります。レイヤーはフレームと一緒に動き、フレームはボックスの外にはみ出した部分を隠します。レイヤーをフレームの外にドラッグすると、取り出せます。Layers パネルでは、フレームのレイヤーがフレームの下に表示されます。

スタックとグリッド

レイアウトを設定したフレームは、Layers パネルの順序どおりに、レイヤーを自動で配置します。Insert の Stack または Grid を選ぶか、どのフレームでも Layout セクションの + をクリックします。新しいスタックには 2 つのフレームが、新しいグリッドには 4 つのフレームが入った状態で始まります。

フレームを選択しているときに Insert または Shapes から追加したレイヤーは、そのフレームの内側に入ります。フレームに対して大きすぎるレイヤーは、収まるように縮小されます。

• Stack は、レイヤーを横または縦に並べます。Direction で向きを、Distribute で並び方向の分配を、Align で直交方向の揃えを、Wrap で収まらないレイヤーの折り返しを設定します。
• Grid は、レイヤーを同じ幅の Columns に、行ごとに並べ、各レイヤーを列の幅いっぱいにします。Rows はフレームの高さを分け合い、行内に高いレイヤーがあると、その行が広がります。最後の行を超えたレイヤーは行を追加し、その行も高さを分け合います。
• Gap はレイヤーの間隔（グリッドでは、列の間隔と行の間隔の 2 つ）を、Padding はフレームの端からの内側の余白を設定します。

スタックやグリッドの中のレイヤーをドラッグすると、順序の別の位置へ移動できます。Layout セクションの − をクリックすると、レイアウトが解除され、レイヤーはその位置に残ります。

リクエストで変更できるのは visible だけです。

QR コード

Insert から QR Code を選び、Content にテキストまたは URL を入力します。リクエストで変更できるのは qrcode で、その内容が置き換わります。

バーコード

Insert から Barcode を選び、Content に値を入力します。Bannerify は Code 128 のバーコードを描画し、バーの下に値を印字します。リクエストで変更できるのは barcode です。

アイコン

Icon を選び、Set でセットを、Icon で名前を選びます。セットを変更すると、新しいセットに同じアイコンがあれば、レイヤーはそのアイコンを保ちます。

レイヤーは、アイコンを set:name の形式（例: lucide:house、ph-fill:star）で保存します。CheckCircle のようにセットのない名前は、Iconoir のアイコンです。どのセットも、商用利用が無料です。

セット	ID	ライセンス
Iconoir	iconoir	MIT
Lucide	lucide	ISC
Phosphor	ph, ph-fill	MIT
Heroicons	heroicons, heroicons-solid	MIT
Feather	feather	MIT
Tabler	tabler	MIT
Material Symbols	material-symbols	Apache 2.0
Bootstrap Icons	bi	MIT
Mage	mage	Apache 2.0
Basil（Craftwork 提供）	basil	CC BY 4.0
Flowbite	flowbite	MIT
Meteor	meteor-icons	MIT

リクエストで変更できるのは visible だけです。

パス

Path では、クリックして点を追加します。最初の点をクリックするとパスが閉じ、ダブルクリックするか Enter または Escape を押すと終了します。Shift を押したままにすると、線分が 45° の倍数に固定されます。Line は 2 点のパスを描きます。始点から終点までドラッグしてください。

パスを選択すると点を動かせ、2 つの点の間にある丸をドラッグすると点を追加できます。Points は線分を Straight（直線）または Curved（曲線）にし、Ends はパスを閉じ、Stroke と Fill は色と線の太さを設定します。

星評価

Star を選び、Rating セクションで星の数を設定します。リクエストで変更できるのは star で、レイヤーは整数 1 つにつき星を 1 つ描きます。0 の値は無視されます。

キー・バリュー

Key Value を選ぶと、請求書番号と支払期日のように、ラベルと値の組を印字できます。組は Data で編集し、向き、サイズ、ラベルの幅、区切り線は Layout で設定します。

リクエストで変更できるのは rows で、表示される順に、1 行につき 1 つの要素を渡します。形式は、キー・バリューを参照してください。

署名

Signature を選ぶと、署名者のブロックを印字できます。Signer セクションで、Layout（Single、Double、Inline）、Label、Name、Title、Date を設定します。

リクエストでは、Name を text で、Title を title で、Date を date で変更します。name はすでにレイヤーの識別に使われているため、名前には text を使います。

{ "name": "signature", "text": "An Nguyen", "title": "Director", "date": "2026-02-02" }

アラート

Alert を選ぶと、支払期限や発送のお知らせのような注意書きを印字できます。Content で、Variant（Info、Success、Warning、Error）、Title、Description を設定します。アイコンと枠線の表示と非表示も切り替えられます。

リクエストでは、見出しを title で変更し、Description を text で埋めます。

{ "name": "notice", "title": "Payment terms", "text": "Pay before 31 Jan 2026." }

リンク

Insert から Link を選ぶと、Web ページ、メール、電話番号を開くテキストを追加できます。アドレスは、PDF link セクションの URL に設定します。https://、http://、mailto:、tel: の URL を指定できます。Design パネルのそれ以外の部分は、テキストレイヤーと同じです。

リンクが動作するのは PDF だけです。PDF でテキストをクリックすると、URL が開きます。PNG、JPEG、WebP の画像には、リンクなしで同じテキストが描画されます。

リクエストでは、テキストを text で、色を color で、URL を href で変更します。

{ "name": "pay", "text": "Pay invoice INV-1048", "href": "https://example.com/pay/INV-1048" }

グラフ

Insert から Chart を選び、Data でデータ点を編集します。Chart セクションで、Variant（Bar、Horizontal bar、Line、Area、Pie、Donut）と Legend を選び、タイトルと軸ラベルを設定します。Series colors で、系列の色を設定します。

リクエストで変更できるのは rows です。1 つの系列にはデータ点を、複数の系列には系列ごとのデータを渡します。2 つの形式は、グラフを参照してください。

表

Insert から Table を選び、Data で初期の列と行を編集します。Table セクションで、Variant（Line、Grid、Minimal、Striped、Compact、Bordered、Primary header）と Row size（Default または Compact）を選びます。Stripe rows と No wrap はスイッチです。

リクエストで変更できるのは columns と rows です。形式は、表を参照してください。

レイヤーを表示または非表示にする

visible は、すべての種類のレイヤーで使えます。Layers リストのレイヤーの目のアイコンをクリックすると、非表示になります。非表示のレイヤーは、リクエストが "visible": true を設定するまで、描画されるファイルに含まれません。"visible": false を設定したリクエストは、表示中のレイヤーを非表示にします。

{ "name": "sale-badge", "visible": true }

リクエストで指定しなかったフィールドは、テンプレートの値のままです。