はじめに

Templatteとは

Templatteは、テンプレート(レイアウト)を1回だけ作っておけば、あとは「値を差し込むだけ」で同じデザインの画像を何枚でも量産できる、Windowsデスクトップアプリです。配信スケジュール画像、ラジオ・動画のサムネイル、告知画像、SNS投稿画像など、「毎回同じ構図で、中身(タイトルや日付)だけ変わる」画像づくりに向いています。

Photoshopや Canva のような、自由に描画・加工できる汎用の画像編集ソフトではありません。装飾イラストやロゴなどの「素材そのもの」は、別のツールで作ったものをはめ込んで使う前提です。Templatteが担うのは「どこに何を配置するか」というレイアウトと、その量産だけに絞っています。

何ができるか

できることは、大きく分けて4つです。値の差し込み方式(連番・CSV・日付自動計算)は8〜9章で詳しく説明します。

基本の流れ

Templatteの画面は、大きく「テンプレート一覧(管理画面)」と「編集画面」の2つで構成されています。

テンプレート一覧(管理画面)

アプリを起動して最初に表示される画面です。

• ヘッダーの「新規作成」で真っさらなテンプレートを作り、そのまま編集画面が開きます
• 「テンプレート読み込み」で、既存の .templatte ファイルを開けます
• サムネイル付きのカード一覧から、過去に開いたテンプレートをクリックして開けます。左側のサイドバーで、お気に入り・最近使った・タグによる絞り込みができます
• 名前での検索、サムネイルの一括更新もこの画面で行います

編集画面

1つのテンプレートに対して、要素の配置・保存・お気に入り登録・エクスポート・一括生成をすべてここで行います。おおまかな構成は次の通りです。

• 要素一覧(画面左): レイヤー(テキスト・画像・フォルダ)の並び順を管理します。並び順がそのまま重なり順(上にあるものが手前)になります
• キャンバス(画面中央): 実際の見た目を確認しながら要素をドラッグ・リサイズできます
• プロパティパネル(画面右): 選択中の要素の、位置・フォント・色・「値の出どころ」(固定文字/CSVなどのスロット/自動日付/連番/連番日付)を設定します
• プレビューデータバー(キャンバス上部): CSVを設定して、実際の値に近い見た目を確認しながら編集できます(8章で詳しく説明します)

ヘッダーには「保存」「名前を付けて保存」「お気に入り」「エクスポート」「設定」、そして実際に画像を量産する「生成...」ボタンが並びます。この章では細かい操作方法までは扱いません。以降の章では、特に質問の多い「CSV」「日付フォーマット」「エクスポート/インポート」に絞って説明します。

編集画面 > 要素を追加・編集する

テキスト・画像・フォルダの3種類の要素を、要素一覧パネルから追加し、プロパティパネルで見た目や「値の出どころ」を編集します。この章では、要素の追加・削除・複製・コピー&ペーストと、プロパティパネルの設定項目をまとめて説明します。

要素の追加

• 要素一覧パネル下部の「+テキストを追加」「+画像を追加」「+フォルダを追加」ボタンで、それぞれの要素を追加します。フォルダを選択中に追加すると、そのフォルダの中に追加されます
• テキスト要素は初期文字列「テキスト」で追加され、画像要素は参照先が未設定のグレーのプレースホルダーとして追加されます
• 画像は、エクスプローラーからキャンバスへドラッグ&ドロップして追加することもできます。複数ファイルを同時にドロップすると、ドロップした位置を中心に、重ならないよう少しずつずらして配置されます

要素の削除・複製・コピー&ペースト

• 削除: 要素一覧下部の「削除」ボタン、右クリックメニューの「削除」、または Delete / Backspace キー(キャンバス上・要素一覧のどちらを操作中でも可)。中身のあるフォルダを削除しようとすると、確認ダイアログが表示されます
• 複製: 要素一覧の行を右クリックして「複製」を選ぶと、フォント・色などの設定ごと複製され、元の要素の隣に配置されます(フォルダ自体は複製できません)
• 切り取り・コピー・貼り付け: Ctrl+X / Ctrl+C / Ctrl+V。OSのクリップボードを経由するため、別の編集ウィンドウを開いている場合はそちらへ貼り付けることもできます

プロパティパネルの設定項目(共通)

要素を選択すると、画面右のプロパティパネルに設定項目が表示されます。テキスト・画像に共通する項目は次の通りです。

• 位置(X・Y)、幅・高さ(スライダーと数値入力の両方で調整可能)
• 上下左右・中央寄せのワンクリックボタン
• ブレンドモード(通常 / 乗算 / スクリーン / 加算 / 減算 / 比較(暗) / 比較(明) / 差の絶対値 / オーバーレイ / ソフトライト / ハードライト)

プロパティパネルの設定項目(テキスト要素)

• 値の出どころ: 固定文字 / スロット(CSVの列) / 自動日付(基準日から何日後かと表示形式のプリセット) / 連番(開始〜終了とゼロ埋め桁数) / 連番日付(開始日〜終了日と表示形式)
• フォント: フォント名(インストール済みフォントを検索できるコンボボックス)、サイズ、色(#RRGGBB)、配置(左 / 中央 / 右)
• 装飾: 縁取り(幅・色)、影(横ずれ・縦ずれ・ぼかし半径・色)

プロパティパネルの設定項目(画像要素)

• 値の出どころ: 固定画像(「参照...」ボタンでファイルを選択。選択すると実寸に応じてサイズが自動調整されます) / スロット(CSVの列)
• 配置方法: contain(全体を収める) / cover(はみ出しても埋める) / stretch(縦横比を無視して引き伸ばす)
• 「この画像の調整をリセット」ボタン: CSVプレビュー中にその行だけ個別調整した位置・サイズを削除し、既定値に戻します

複数選択時のプロパティパネル

複数の要素を選択している間は、個別設定の代わりに次の一括操作が表示されます。

• 端 / 中央揃え(横方向・縦方向)
• 等間隔配置(3つ以上選択している場合)
• まとめて移動(X / Y方向のスライダー)
• 「フォルダにまとめる」ボタン(5章で説明する要素一覧のフォルダとして1つにグループ化)

テンプレート全体の設定

要素を選択していないときも、プロパティパネルにはテンプレート全体に関わる設定が常に表示されます。

• 背景色(#RRGGBB)、透過(チェックボックス)
• 自動日付の基準日(指定する / しないの切り替え、日付入力欄、「翌週」ボタン。詳しくは9章)
• タグの追加・削除(既存タグの候補表示あり。テンプレート一覧画面での絞り込みに使われます。詳しくは6章)

編集画面 > キャンバス操作

キャンバス上での選択・移動・リサイズ・ズームなど、マウスとキーボードによる操作をまとめます。

選択

• 要素をクリックして選択します
• 複数選択: Ctrl または Shift を押しながらクリック、あるいは何もない場所からドラッグしてラバーバンド(範囲選択)
• Ctrl+A で全選択(ロック中の要素は対象外)

移動・リサイズ

• 移動: 要素をドラッグ。Shiftを押しながらだと水平・垂直方向のどちらかにロックされます。矢印キーで1px移動(Shift併用で10px)
• リサイズ: 選択時に四隅へ表示されるハンドルをドラッグ。Ctrlを押しながらで縦横比を固定、Shiftを押しながらで片方の軸だけ伸縮
• 回転機能はありません(位置とサイズのみ調整できます)

ロック・表示/非表示

要素一覧パネルの各行にあるアイコンから切り替えます。

• ロック(鍵アイコン): ドラッグ・リサイズができなくなります(選択や数値入力での編集は可能)。ロック中の要素はクリックしても透過し、下に重なった要素を選択できます
• 表示/非表示(目アイコン): キャンバス上での表示・非表示を切り替えます。複数選択中は選択した要素全体に一括で適用されます

ズーム・パン・元に戻す

• ズーム: Alt を押しながらマウスホイール
• パン(表示位置の移動): マウス中ボタンでドラッグ
• 一度手動でズーム・パンを操作すると、キャンバスの自動フィット表示は止まります。ヘッダーの「表示をリセット」ボタンで全体表示に戻せます
• 元に戻す / やり直し: Ctrl+Z / Ctrl+Y(ヘッダーのアイコンボタンからも操作できます)

編集画面 > 要素一覧(レイヤー)パネル

画面左の要素一覧パネルでは、要素の重なり順や構造を管理します。並び順がそのままキャンバス上の重なり順(上にあるものが手前)になります。

並び替え

• 行をドラッグ&ドロップして並び替えます(フォルダの中へさらにフォルダを入れる、という入れ子はできません)
• 「上へ / 下へ」ボタンでも1段ずつ並び替えられます

行に表示されるアイコン・情報

• 表示/非表示アイコン、ロック/解除アイコン(4章参照)
• 種類バッジ(テキスト / 画像を区別するアイコン)
• 「値の出どころ」の要約(固定文字の内容、スロット名、自動日付の設定、固定画像のパスなど)がひと目で分かるよう各行に表示されます

フォルダ

複数の要素をまとめて管理するための入れ物です。

• 名前はその場でクリックしてリネームできます
• 「ランダム」チェックボックス: 生成のたびにフォルダ内の要素から1つをランダムに選んで表示する設定です
• 開閉ボタンでフォルダ内の要素一覧を折りたたみ/展開できます
• 複数の要素を選択した状態で、プロパティパネルの「フォルダにまとめる」ボタンを押すと、選択した要素をまとめて新しいフォルダに入れられます(3章参照)

テンプレート一覧(ライブラリ)画面の操作

アプリ起動時に表示される、テンプレートを探す・開くための画面です。

ヘッダー

• 名前での検索欄
• 「テンプレート読み込み」: ファイルダイアログから既存の .templatte ファイルを開きます
• 「新規作成」: 真っさらなテンプレートを作成し、そのまま編集画面が開きます
• サムネイル一括更新ボタン

サイドバーの絞り込み

• お気に入り
• 最近使った(直近に編集した上位10件)
• タグ(複数選択可能)

これらの絞り込み条件は、すべてAND条件で組み合わせられます。

カード

1つのテンプレートにつき1枚のカードが表示され、次の情報・操作が並びます。

• サムネイル画像
• お気に入り星チップ(サムネイル右上、クリックでON/OFF)
• タイトル、キャンバスサイズ、タグチップ(最大2つ+件数)、最終編集の相対時間
• 「編集」ボタン、またはカード自体のクリックで編集画面が開きます

カードの「⋮」(ケバブ)メニュー

• ファイルの場所を開く: .templatte ファイルのあるフォルダをエクスプローラーで開きます
• zip出力: 11章で説明するエクスポートと同様に、参照画像を含めてZIP化します
• ライブラリから削除: 確認ダイアログの後、この一覧・お気に入り・タグ・生成履歴からのみ削除します。.templatte ファイルや画像自体は削除されません

編集画面 > 生成する

編集画面ヘッダーの「生成...」から、実際に画像を量産します。どのスロットにどんな値を差し込むかは、あらかじめ各要素の「値の出どころ」(3章)やCSV設定(8章)に保存されているため、生成のたびに入力し直す必要はありません。

生成ダイアログで入力する項目

入力するのは次の2つだけです。

• ファイル名ルール: 初期値はスロット名を _ 区切りで並べたものです。{スロット名} の形でスロットの値をファイル名に埋め込めます
• 出力形式: PNG または JPEG(選び方は12章のFAQ参照)

生成の流れ

1. 「生成...」を押し、ファイル名ルールと出力形式を確認・入力する
2. 「生成開始」を押す
3. 出力先フォルダを選ぶダイアログが表示されるので、保存先フォルダを選ぶ
4. 別スレッドで生成処理が始まり、ヘッダーの進捗バーが進む
5. 完了すると完了ダイアログが表示される(「フォルダを開く」ボタンで出力結果をすぐ確認できます)

編集画面 > CSVを設定する

編集画面のキャンバス上部にある「CSVを設定」ボタンから、タイトル一覧などをまとめたCSVファイルを読み込めます。これは単なる「見た目の確認用プレビュー」ではなく、そのまま一括生成時の値の出どころにもなる、テンプレートに紐づく設定です。

CSVを設定すると何ができるのか

• 実データでのプレビュー: CSVの列名と、テキスト・画像要素に設定した「スロット名」が一致する項目だけ、プレースホルダーではなく実際の値でキャンバスに表示されます。「前へ / 次へ」ボタンで、CSVの行を1件ずつ切り替えながら見た目を確認できます
• 一括生成の値の出どころ: 「生成...」を実行すると、CSVの列名とスロット名が一致する項目には、その列の値が(行ごとに)自動的に差し込まれます。生成のたびに列を選び直す必要はありません
• CSVの中身をアプリ内で確認・編集: 設定したCSVのファイル名(リンク風の表示)をクリックすると、テーブル形式・テキスト形式を切り替えられる編集ダイアログが開きます。ここでセルを直接書き換えて「保存」すると、CSVファイル自体が上書きされます
• 一時的にオフにする: 「プレビュー」の横にあるトグルをオフにすると、CSVを手放さずに一旦プレースホルダー表示へ戻せます。再度オンにすれば同じ行から続きを確認できます

スロットの値の出どころ、3つの優先順位

1つのテキスト・画像要素につき、値の出どころ(プロパティパネルの「値の出どころ」欄)は次のいずれかです。

「連番」「連番日付」で名前を付けたスロットは、CSVを介さずにテンプレート単体で完結するため、CSVを用意しなくても一括生成できます。CSVが必要になるのは、行ごとに異なる自由なテキスト(タイトルなど)を差し込みたい場合です。

編集画面 > 設定 > 日付フォーマット設定

「自動日付」は、CSVも連番も使わずに、基準日からのずれ(オフセット)だけで日付・曜日を自動計算して表示する、テキスト要素専用の値の出どころです。毎週の配信スケジュール画像のように「月曜〜日曜の7つの日付欄」を並べる用途に向いています。

基準日とオフセット

• テキスト要素ごとに「基準日から何日ずらすか(オフセット)」を設定します。0, 1, 2…と7個の要素を並べれば、1週間分の日付欄になります
• 基準日はテンプレート単位の設定です。指定しなければ、生成する瞬間の日付が基準日として使われます。あらかじめ基準日を指定しておき、次の週に進めるときは基準日だけ書き換える、という運用を想定しています

日付フォーマット設定の変更方法

表示形式(例: 「07/09」「2026年7月9日」)は、編集画面ヘッダーの「設定」から開くダイアログの「日付フォーマット設定を編集...」ボタンで変更できます。

1. 編集画面右上の「設定」ボタンを押す
2. 「日付フォーマット設定を編集...」を押すと、書式コードの早見表つきの編集ダイアログが開く
3. 書式コードを組み合わせたテキストを編集し、「保存」を押す

この編集内容は、アプリ全体で使う日付フォーマットの「プリセット一覧」そのものです(JSON形式のテキストとして直接編集する形式で、フォーマットのバリデーションは行われません)。

使える書式コード

ユーザーストーリー別ガイド

「結局、自分の作りたいものにはどの機能を使えばいいのか」を、想定シーンごとにまとめました。

テンプレートのエクスポート・インポートとファイルの扱い

テンプレートは「フォルダ」で成り立っている

.templatte ファイルは、装飾画像などの参照先を常に自分自身が置かれているフォルダからの相対パスで保持します(絶対パスは保存しません)。そのため、通常は次のように、テンプレート本体と画像フォルダを1つのフォルダにまとめて置きます。

配信スケジュール_縦型/
├── schedule.templatte
└── assets/
    └── logo.png

編集画面でテンプレートのフォルダの外にある画像を選ぶと、自動的に assets/ フォルダへコピーしてから相対パスとして参照します。設定ダイアログの「assetsフォルダを開く」から、このフォルダをエクスプローラーで直接確認できます(9章参照)。相対パスで管理しているため、フォルダごと移動・コピーすればそのまま別の場所でも開けます。

エクスポート(ZIPとして書き出す)

.templatte ファイル1つだけを人に渡すと、参照している画像が付いてこず開けなくなってしまいます。これを避けるため、編集画面ヘッダーの「エクスポート...」から、.templatte 本体と参照画像すべてを1つのZIPファイルにまとめて書き出せます。

• 未保存の変更がある場合は、エクスポート前に保存するかどうか確認されます
• ZIPの中身は、元のフォルダ構成(schedule.templatte と assets/ など)がそのまま保持されます

インポート(ZIPから復元する)

Templatteには専用の「インポート」ボタンはありません。次の手順で復元します。

1. 受け取ったZIPファイルを、任意のフォルダに手動で解凍する
2. Templatteのテンプレート一覧画面で「テンプレート読み込み」を押す
3. 解凍先の .templatte ファイルを選ぶ

ZIPの中身はエクスポート時と同じフォルダ構成を保っているため、解凍するだけで画像の相対パスがそのまま有効になります。別PCへ持ち運ぶ場合も、この手順でそのまま開けます。

よくある質問

CSVを設定したのに、一部の項目だけプレースホルダーのままなのはなぜ?

CSVの列名と、要素の「スロット名」が一致していない可能性があります。列名とスロット名は完全一致でしか対応付けられません。名前を揃えるか、その要素の値の出どころを見直してください。

日付フォーマットの編集を保存したら、表示がおかしくなった

日付フォーマット設定は保存前の内容チェックを行わない、プレーンテキストの編集画面です。書式が壊れている場合、アプリ側が既定のプリセットに自動的にフォールバックして読み込みます。書式コード早見表(9章の表)を参考に、記法を見直してください。

出力形式は JPEG と PNG のどちらを選べばよい?

背景を透過させたい(装飾画像の背後を透明にしたい)場合は PNG を選びます。JPEG は透過を保持できないため、テンプレートの背景に透過を含む場合は PNG を選んでください。

テンプレートを複数のPCで使い回したい

11章のエクスポート(ZIP化)→ 手動解凍 →「テンプレート読み込み」の手順で持ち運べます。画像は同梱されますが、フォントは同梱されないため、使用フォントは移行先のPCにも別途インストールしておく必要があります。

エラーが出たときは

CSVを読み込むとエラーになる(文字コード)

CSVはUTF-8(BOM付きも可)を優先して読み込み、それで読めない場合はShift-JIS(Excelの「CSV(コンマ区切り)」形式で保存したときの標準的な文字コード)として自動的に読み直します。どちらでも読み込めない場合だけエラーになります。この場合は、CSVを一度Excelやメモ帳で開き直し、「名前を付けて保存」で文字コードをUTF-8(理想は「CSV UTF-8(コンマ区切り)」)に指定して保存し直してください。

「生成...」を実行すると、途中でエラーが出て止まる

画像要素(固定画像・CSV等で差し込む画像)の参照先ファイルが見つからない場合、Templatteは1件でも見つからないと、その時点で一括生成を中断します(気づかないまま大量に出力してしまうことを避けるためです)。エラーメッセージに表示されたファイルパスを確認し、ファイルが正しい場所にあるか、CSVに書いた相対パスが誤っていないかを見直してから再実行してください。