テンプレートのデザイン

テンプレートは、名前付きのレイヤーで構成されたデザインです。エディターで一度作れば、あとはリクエストのたびにテンプレート ID と新しい値を送るだけで、Bannerify がその値を反映した画像または PDF を返します。

全体の流れ

キャンバスをデザインし、レイヤーを追加します。追加できるものは、レイヤーの種類にまとめています。
リクエストで変更するレイヤーすべてに、名前を付けます。リクエストが名前をどう使うかは、Modificationsで説明しています。
テンプレートを保存し、その ID と値を API に送ります。リクエストの例は、画像の生成と PDF の生成にあります。

テンプレートを作成する

ダッシュボードの Templates ページを開き、New template をクリックします。
空のキャンバスから始めるには Blank template を選びます。ギャラリーのテンプレートをプロジェクトにコピーするには、Start from a template の下にあるカードをクリックします。残りのテンプレートは、Browse the gallery で表示できます。

Blank template、Import from Figma、ギャラリーのテンプレートが並ぶ New template ダイアログ — New template ダイアログ。

新しいテンプレートが、エディターで開きます。

画面の見方

左に Layers パネル、中央にキャンバス、右にキャンバスの設定がある、テンプレートエディター — 1080 × 1080 の商品プロモーションを開いたエディター。

エリア	内容
左上	テンプレート名をクリックすると、テンプレートの一覧が開きます。鉛筆アイコン（Rename template）でこのテンプレートの名前を変更でき、Undo と Redo で変更を戻したりやり直したりできます
上部中央	Insert、Frame、Text、Shapes で、レイヤーを追加します
右上	Documentation でこのドキュメントを開き、Preview でキャンバスを描画し、Save で変更を保存します
左パネル	Layers タブにすべてのレイヤーが並び、Media タブに画像があります
右パネル	Design タブに、選択中のレイヤーの設定が表示されます。レイヤーを選択していないときは、キャンバスの設定が表示されます

キャンバスのサイズと背景を設定する

キャンバスの何もない場所をクリックすると、キャンバスの設定が開きます。

Preset のカード、Size のフィールド、Background の色が並ぶキャンバスの設定 — キャンバスの設定: プリセット、サイズ、背景。

Preset でサイズを選びます。Social、Print、Video、Ads のカードから選ぶか、カードの下にある Square（1080 × 1080 ピクセル）と Portrait（1080 × 1920）のボタンを使います。
プリセットが近いものの、ぴったりではない場合は、Size で幅と高さを変更します。
Background を、単色、グラデーション、画像のいずれかに設定します。

キャンバスのサイズは、出力のサイズです。画像はそのピクセル数になり、PDF のページはそのポイント数になります。そのため、A4 の PDF 用のキャンバスは 595 × 842 です。リクエストでキャンバスを変更することはできません。

レイヤーを追加する

ツールバーの Frame と Text を使うか、Insert または Shapes を開いて、ほかの種類のレイヤーを追加します。レイヤーを選択し、Design パネルで、位置と見た目を設定します。テキストレイヤーでは、Google Fonts が使えます。すべての種類と、リクエストで変更できるフィールドは、レイヤーの種類にまとめています。

Stack、Grid、Image、Icon、QR Code、Barcode、Chart、Table、Key Value、Signature、Alert が並ぶ Insert メニュー — Insert メニューには、ほかのレイヤーの種類が並びます。

headline のテキストレイヤーを選択し、位置、サイズ、タイポグラフィを表示した Design パネルのあるエディター — 選択したテキストレイヤーと、その Design パネル。

レイヤーに名前を付ける

リクエストは、レイヤーを名前で見つけます。リクエストで変更するレイヤーには、すべて名前を付けてください。

Layers リストでレイヤーをダブルクリックします。右クリックして Rename を選ぶこともできます。
名前を入力して Enter キーを押します。

新しいレイヤーには、Text のように種類の名前が付き、同じ種類の 2 つ目のレイヤーには Text 1 のように番号が付きます。headline や price のように、コードで読みやすい名前を付けてください。名前は完全に一致する必要があるため、Price と price は別の名前として扱われ、同じ名前のレイヤーが 2 つあると、両方に同じ値が設定されます。ルールは Modifications にあります。

画像を追加する

Media タブを開きます。

Upload、Browse library、画像のグリッドが並ぶエディターの Media タブ — Media タブには、プロジェクトの画像が並びます。

Upload をクリックすると、コンピューターから画像ファイルを追加できます。各ファイルがキャンバス上の画像レイヤーになり、1 ファイルの上限は 5 MB です。
Browse library をクリックすると、ストック画像を検索できます。画像を選び、Add to Template をクリックします。

Bannerify が描画できる形式は、PNG、JPEG、WebP、SVG です。これらのファイルを使ってください。画像レイヤーは、アドレスを指定することもできます。オプションは画像にあります。

変更をプレビューする

上部バーの Preview をクリックするか、Ctrl+P（Mac では Cmd+P）を押します。Preview template パネルは、保存していない変更も含めて、現在のキャンバスを描画します。API と同じレンダラーを使い、クォータは消費せず、常に PNG で表示されます。タイトルの横のバッジで、画像が Rendering、Ready、Unsynced、Render failed のどれかが分かります。

パネルには、テンプレートのレイヤーが一覧表示されます。レイヤーを選ぶと、値を試せます。

左にレイヤーの一覧、右に描画された画像を表示した Preview template パネル — レイヤーを選んで値を試し、描画結果を見比べます。

レイヤー	試せること
テキスト	Text content と Text color
画像	Image URL
QR コード	QR code content
バーコード	Barcode value
すべてのレイヤー	表示と非表示

ほかの種類のレイヤーには Visibility only と表示されるため、表、グラフ、Key Value のレイヤーは、リクエストで試してください。パネルに入力した値はテスト用で、テンプレートは変更されません。Reset と Reset all で、元の値に戻せます。

パネルは、名前に関する 2 つの問題を警告します。

Layer name required は、レイヤーに名前がないため、リクエストでは変更できないことを示します。
Shared layer name は、複数のレイヤーが同じ名前を持っているため、リクエストがそれぞれに同じ値を適用することを示します。

Download でプレビュー画像を保存し、Copy でコピーします。

テンプレートを保存する

Save は、何かを変更するまで無効です。クリックすると、テンプレートが保存されます。API リクエストは保存済みのバージョンを使うため、API で変更を試す前に保存してください。保存していない変更があるままエディターを離れようとすると、確認のダイアログが表示されます。

テンプレート ID をコピーする

Templates ページで、テンプレートカードのメニューを開きます。

Copy Template ID は、リクエストが templateId として送る ID をコピーします。
View generations は、このテンプレートの Generations ページを開き、生成ごとの時刻、形式、サイズ、modification を表示します。

次のステップ

レイヤーの種類で、各レイヤーとそのフィールドを説明しています。
用途別レシピでは、6 つのテンプレートと、そのリクエストを作ります。
API については、画像の生成と PDF の生成で説明しています。