グッズチラシ作成 使い方
イベントの物販で使う「グッズ販売チラシ」を、ブラウザだけで作れる無料のWebツールです。
商品画像のファイル名をルールどおりに付けておけば、商品の仕分け・商品名・値段を自動で読み取って、チラシの形に並べてくれます。
1. はじめに（必ずお読みください）
- パソコン専用です。パソコンの Chrome・Edge・Safari で使ってください。スマートフォン・タブレットには対応していません。
- 画像はどこにも送信されません。素材の画像は、お使いのパソコンのブラウザの中だけで扱います。
- データはお使いのパソコンに保存します。作ったチラシはサーバーには残りません。「保存」で作られるファイル（〈名前〉_チラシデータ.json）が唯一のデータです。
- ページを閉じると、作業中の内容は消えます。ツールは毎回まっさらな状態で開きます。途中でやめるときは必ず「保存」してください。
- 文字の書体はインターネットから読み込むため、インターネットにつながった状態で使ってください。
2. 素材を用意する
チラシに使う画像（商品画像・ロゴ・背景）を用意します。ファイル名は自由で大丈夫です。商品名や値段はあとから画面で入力できます。
【時短ワザ】ファイル名を決まった形にしておくと、仕分けも値段も自動で入ります
必須ではありませんが、画像を1つのフォルダにまとめ、ファイル名を下の形にしておくと、読み込むだけで商品名・値段・枠分けまで自動で入ります。商品が多いときほど楽になります。
区切りは「_」（半角アンダーバー）です。値段は数字だけで書きます（「円」は付けません）。
| ファイル名の形 | 例 | チラシでの扱い |
|---|---|---|
共通_商品名_値段共通アイテム_商品名_値段 | 共通アイテム_トレカセット_1000.png | 「共通」の枠に入り、「トレカセット ¥1,000」と表示 |
個別_商品名_値段個別アイテム_商品名_値段 | 個別アイテム_アクスタ_2000.png | 「個別」の枠に入る |
個別_グループ名_商品名_値段 | 個別_1部_ランブロ_1000.png | 「1部」の枠に入る。同じグループ名の商品は自動で同じ枠にまとまる |
| 値段の前に「各」 | 個別アイテム_Mカード_各2000.png | 「各 ¥2,000」と表示 |
名前に logo か ロゴ | ロゴ_三姉妹.png / logo.png | ロゴとして配置 |
名前に 背景 か 壁紙 | 壁紙_三姉妹壁紙.jpg / 背景.jpg | チラシの背景画像になる |
例：ページ上部の ASTER 3 SISTERS のチラシの場合（ファイル名の抜粋）
📁 フォルダの中身
ロゴ_三姉妹.png壁紙_三姉妹壁紙.jpg共通アイテム_トレカセット_1000.png共通アイテム_ラーメン蓋抑えアクスタ_2500.png共通アイテム_喜怒哀楽ステッカーセット_1000.png個別アイテム_Mカード_各2000.png個別アイテム_アクスタ_2000.png個別アイテム_加藤ランブロ_1000.png個別アイテム_山﨑ランブロ_1000.png個別アイテム_長月ランブロ_1000.png
チラシでの分かれ方（「ファイル名から自動配置」の場合）
- ロゴ・背景
- 三姉妹のロゴ／三姉妹の壁紙が背景に
- 共通グッズの枠
- トレカセット ¥1,000
ラーメン蓋抑えアクスタ ¥2,500
喜怒哀楽ステッカーセット ¥1,000 - 個別グッズの枠
- Mカード 各 ¥2,000
アクスタ ¥2,000 - ランブロの枠
- 加藤ランブロ ¥1,000
山﨑ランブロ ¥1,000
長月ランブロ ¥1,000
名前の終わりがそろった商品を自動で別の枠に分けます。「＋ 新しいデザインを始める」では「個別」の枠に入ります。枠の名前はあとから自由に変えられます。
この形になっていない画像は自動では並びませんが、読み込みはされているので、各商品の 📁 ボタンから選んで使えます。
画像の形式
- 使える形式：PNG・JPEG・WebP・GIF
- 透過していない画像（写真など）もそのまま使えます。
- おすすめは背景を透過した PNG です。白い四角が出ず、チラシの背景になじんできれいに仕上がります。
3. チラシを作り始める
手で1つずつ作る
ツールを開くとレイアウトの選択画面が出るので、近いものを選びます。左のパネルのブロック（枠）で「＋ 商品を追加」を押し、各商品の 📁 ボタンで画像を選んで、商品名と値段を入力します。ファイル名は何でも構いません。
素材をまとめて読み込む（ファイル名を時短ワザの形にしている場合）
次の2つのボタンから読み込めます。押すと下の画面が出るので、「📁 フォルダごと選ぶ」か「🖼 画像ファイルを選ぶ（複数選択可）」で素材を選びます。
「＋ 新しいデザインを始める」
ファイル名のルールどおりに、「共通」「個別」（グループ名があればグループごと）の枠を作って商品を並べます。
「ファイル名から自動配置」
上の仕分けに加えて、商品名の終わりが共通している商品（例：加藤ランブロ・山﨑ランブロ・長月ランブロ）を見つけて、別の枠にまとめます。シリーズ物が多いときに便利です。
このボタンは、ファイル名が時短ワザの形になっていることが前提です。形になっていない画像は自動では並びません。今の内容はすべて消えて組み直しになるので、作業中のものは先に保存してください。
大まかなレイアウトを選ぶ
素材を読み込むと、レイアウトの選択画面が出ます。近いものを選んでください（あとから左のパネルで自由に変えられます）。
4. 見た目を整える
左が設定パネル、右がチラシのプレビューです。設定を変えると、プレビューにすぐ反映されます。
プレビューでの操作
- 商品はドラッグで自由に移動できます（重ねてもOK）。
- 商品にマウスを乗せると −／＋（縮小・拡大）と ⬆（最前面へ）が出ます。
- 商品をクリックすると、左のパネルのその商品の編集欄に移動します。
- 枠（ブロック）は、枠の余白やラベルをつかんで移動できます。枠の下の中央に出る ↕ をドラッグすると、縦の長さを変えられます（配置によっては出ません）。
左のパネルでできること
| 項目 | 内容 |
|---|---|
| 全体 | 文字の雰囲気（kawaii・chic・pop など12種類）、価格タグの形（8種類）、用紙サイズ（A4・A3・正方形）と向き、ブロックの配置、余白、背景色・背景画像、星やハートの飾り など |
| タイトル | 「GOODS LINEUP」などの見出し文字を、好きなだけ追加できます。プレビュー上でドラッグ移動・拡大縮小できます |
| ロゴ | ロゴ画像を好きなだけ追加できます。タイトルと同じく自由に配置できます |
| ブロック（枠） | ラベル名、枠の色、バッジ、枠の表示／非表示、並び方（1個ずつ／2個ずつ）、段数 など。「＋ ブロック（枠）を追加」で枠を増やせます |
| 商品 | 商品名・補足・値段、「各」表記、画像の差し替え（📁）、色違い・種類違いの追加、画像の大きさ、回転、ロック、複製、別の枠への移動 |
きれいにそろえるコツ
- 画像基準サイズ：全商品の画像の大きさをそろえます。0 は自動。512×512px の素材なら 200 前後が目安です。そろえたあとで、各商品の −／＋ で個別に調整できます。
- 密集モード：ON にすると余白を詰めて並べます。商品が多いときに使います。
- 自由グリッド：「ブロック配置」で選ぶと、列数と、各ブロックの横マス数・縦マス数で枠の大きさを細かく決められます。
5. 保存する・続きから開く
- 「保存」を押すと、
〈名前〉_チラシデータ.jsonというファイルがパソコンに保存されます。設定と画像が1つのファイルにまとまっています。 - Chrome・Edge では保存先を選ぶ画面が出ます。Safari では通常のダウンロードとして保存されます。
- 続きを作るときは、「開く」でこのファイルを選ぶと、保存したときの状態に戻ります。
- このファイルが無くなると作り直しになります。大切なチラシは、ファイルを別の場所にもコピーしておくと安心です。
6. チラシを出力する
「チラシを出力」を押すと、次の3つがまとめてダウンロードされます（下の個別ボタンで1つずつも出力できます）。
| ファイル | 用途・大きさ |
|---|---|
〈名前〉_印刷用.png | 印刷向けの高解像度画像（A4横で 4093×2893px、A3横で 5787×4091px） |
〈名前〉_印刷用.pdf | 印刷用の画像を、用紙の実寸（A4・A3・正方形 210mm）で貼り込んだ PDF。印刷所やコンビニ印刷に |
〈名前〉_SNS用.png | SNS 投稿向け（長い辺が 2048px） |
SAMPLE 透かし（確認用）
確認や校正のときは、パネルの「SAMPLE 透かし」を ON にすると、斜めの「SAMPLE」が全面に薄く入ります。文字・数・大きさ・透明度・角度・色・位置を調整できます。ON のまま出力するとファイル名に「_サンプル」が付きます。完成版を出すときは OFF にしてください。
7. うまくいかないとき
- 画像が自動で並ばない
- 自動で並ぶのは、ファイル名を時短ワザの形にしたときだけです。形を合わせるか、各商品の 📁 ボタンで画像を選んでください。形を合わせたのに並ばない場合は、区切りが「_」（半角）になっているか、値段が数字だけ（例：
1000や各2000）になっているかを確認してください。 - 出力した画像で、商品画像やロゴが抜けている
- Safari で起きやすい現象です。もう一度出力するか、Chrome・Edge で出力してください。
- 「出力が止まりました」と表示された
- もう一度「チラシを出力」を押してください。それでも止まる場合は Chrome でお試しください。
- 作っていたチラシが消えた
- ページを閉じたり再読み込みしたりすると、作業中の内容は消えます。保存したファイルがあれば「開く」で戻せます。
- スマートフォンで使いたい
- 申し訳ありませんが、パソコン専用です。