オブジェクトを追加する
このページでは、デザインに置ける すべてのオブジェクト種類 とその追加方法を、章ごとの短尺動画つきでご案内します。
デザインに配置する要素を オブジェクト と呼びます。テキスト・画像・テーブル・図形などすべてオブジェクトの一種です。
オブジェクト一覧
| 種類 | 用途 |
|---|---|
| テキスト | 見出しや本文、説明文 |
| 四角形 / 楕円 | 枠線・区切り・装飾 |
| 画像 | ロゴ・写真・印鑑画像 |
| QR コード / バーコード | URL や商品コードの読み取り |
| テーブル | 明細行・一覧表 |
| グラフ | 円・棒・折れ線グラフでのデータ可視化 |
| ヘッダー / フッター | ページ上部・下部の見出し |
| グループ | 複数のオブジェクトをまとめて扱う |
各セクションのリンクから直接ジャンプできます。
テキストを置く
請求書の項目名や金額など、文字を配置します。
- ツールバーの 「テキスト」 アイコンを選びます。
- キャンバス上で文字を置きたい場所を ドラッグして枠を作ります。
- 表示された入力欄に文字を入力します。
- 「確定」 ボタンを押します。
文字を編集するには、配置済みのテキストを ダブルクリック します。プロパティパネルで 文字サイズ・色・フォント を変更できます。
図形（四角形・楕円）を置く
枠線や区切り、装飾としての図形を配置します。
- ツールバーの 図形ツール を開きます。
- 四角形 または 楕円 を選びます。図形ツールは クリックすると現在の図形が選ばれ、ドロップダウンの矢印部分で別の図形に切り替え られます。
- キャンバス上でドラッグして大きさを決めます。
- 配置後、プロパティパネルで 塗り色・線の太さ・角丸 などを調整できます。
画像を置く
会社のロゴや判子の画像など、画像ファイルを配置します。
- ツールバーの 画像ツール を開きます。
- 「画像を選択」 ダイアログが開きます。
- アップロード タブから新しいファイルを追加するか、ライブラリ タブから既存の画像を選びます。
- 対応形式: PNG / JPEG / GIF / SVG / WebP
- 「画像を設定」 ボタンを押します。
- ダイアログが閉じ、画像の配置モード になります。
- キャンバス上でドラッグして大きさを決めると、画像が配置されます。
- 一度アップロードした画像は、同じワークスペース内のすべてのデザインで再利用できます（ライブラリタブから選べます）。
- 画像サイズに厳密な上限はありませんが、数 MB 以内 の画像にしておくと表示・出力がスムーズです。撮ったままの高解像度写真などは、必要に応じて圧縮してからアップロードすることをおすすめします。
QR コード／バーコードを置く
データを読み取れるコードを配置します。
- ツールバーの 画像ツール のドロップダウンを開きます。
- QR コード または バーコード を選びます。
- キャンバス上でドラッグして配置します。
- 配置後、右のプロパティパネルの 「値」 欄に、QR/バーコードに埋め込むデータ（URL・商品コード・番号など）を入力します。
- 入力するとキャンバス上のコードが対応する内容に変わります。
QR コード／バーコードの「値」には、変数（パラメータ）を埋め込む こともできます。たとえばお客様ごとに違う URL を埋め込みたい場合、次のページの 変数の基本 で作ったパラメータを「値」に指定します。
テーブルを置く
明細行など、行数が変わるデータを配置します。
- ツールバーの テーブル ツールを選びます。
- キャンバス上でドラッグして大きさを決めます。
- 「テーブル設定」 ダイアログが開きます。
- 配列パラメータ を選びます。事前に配列タイプのパラメータが必要です（変数の基本 参照）。
- 列 を必要に応じて追加・編集します。
- 「確定」 を押して配置します。
グラフを置く
配列パラメータのデータを 円・棒・折れ線グラフ として可視化します。エディタでの見た目とまったく同じグラフが PDF にも出力されます。
- ツールバーの グラフ ツールを選びます。
- キャンバス上でクリックして配置します（最初は「データ未設定」のプレースホルダーが表示されます）。
- 右のプロパティパネルで以下を設定します。
- グラフ種別: 円 / 棒 / 折れ線 から選択
- データ: 参照する 配列パラメータ を選択（事前に配列タイプのパラメータが必要です。変数の基本 参照）
- ラベル列: 横軸・凡例のラベルに使う列
- 値列: グラフの値に使う列（数値の列を選んでください）
- データを設定すると、キャンバス上にグラフが表示されます。
- 必要に応じて 系列色・凡例の表示・グリッド線の表示 を調整できます（グリッド線は棒・折れ線グラフのみ）。
グラフはテーブルと同じく 配列パラメータへの参照 を持ちます。PDF 出力時にパラメータへ渡すデータを変えれば、テンプレートはそのままでグラフの内容だけが変わります。
値列のセルが数値に変換できない行（空欄や文字列など）はグラフから除外されます。すべての行が数値でない場合はプレースホルダー表示になります。
ヘッダー／フッターを置く
ページの上部・下部に見出しや注釈を表示します。
- ページ上部に ヘッダー にしたい内容を テキスト として配置します。
- ページ下部に フッター にしたい内容を同様に テキスト として配置します。
- ロゴを使う場合は画像を、ページ番号などは変数を組み合わせて利用できます。
現在のバージョンでは、通常のページ上にテキスト・画像として配置する方法を推奨 しています。今後のアップデートで、全ページ共通の専用領域機能を提供する予定です。
グループ化
関連するオブジェクトをまとめて扱えるようにします。
- グループ化したい複数のオブジェクトを ドラッグで囲んで選択 します。
- ツールバーの グループ化 ボタンを押します。
- 以後、グループ全体を一つの単位として 移動・サイズ変更・コピー できるようになります。
✅ このページの完了チェック
- テキスト・図形・画像・QR コード／バーコード・テーブル・グラフをそれぞれ 1 つずつ配置できた
- 配置済みのオブジェクトをクリックで選択し、プロパティを変更できた
- 複数のオブジェクトをドラッグで囲んでグループ化できた
次のステップ
オブジェクトの配置ができたら、次は 変数の基本 に進みま しょう。出力するたびに違う値を差し込めるようにします。