作るっちゃん サムネメーカー
「〇〇についてだべる会」系イベントのサムネイルを、ブラウザだけで作るツールです。
文字と登壇者のアイコンを入れるとその場でプレビューされ、ボタン1つで画像として保存できます。
ビルドもサーバーも不要です。index.html を開くだけで動きます。
使い方
index.html をブラウザ（Chrome / Edge / Firefox / Safari）で開く- プレビュー上のボタンで比率を選ぶ（下の「比率」を参照）
- 右のパネルでタイトル・サブタイトル・日付・時間を入力
- 曜日と BY は空欄のままなら、日付と登壇者の名前から自動で入ります
- 回数を入れると「#03」（既定）「VOL.03」「No.03」「EP.03」「第3回」から表記を選べます。
出す場所は「サブタイトルの後ろ」（既定）・タイトルの上・タイトルの前・DATE の表・左下・背景に大きく。
数字以外（「特別回」など）はそのまま出ます。空欄なら出ません
- 登壇者ごとに画像を選ぶ（カードにドラッグ＆ドロップでも OK）
- 円に収まりが悪いときは「ズーム」「横」「縦」で調整
- 登壇者は 1〜4 人。人数に合わせてアイコンの大きさと間隔が自動で変わります
- 形式とサイズを選んで「ダウンロード」
入力内容はブラウザに自動保存されるので、次回開くと前回の状態から始められます。
「初期状態に戻す」でリセットできます。
比率
| 比率 | 書き出しサイズ | 向いている場面 |
|---|
| 16:9 | 1920×1080 / 1280×720 / 3840×2160 | YouTube・配信・スライドなど |
| Discord（2.5:1） | 1600×640 / 2400×960 / 800×320 | Discord イベントのカバー画像 |
| OGP（1.91:1） | 1200×630 / 2400×1260 | リンクカード（OGP）・Facebook 投稿 |
| Mac（1.54:1） | 2940×1912 / 1470×956 | MacBook Air 15 インチの画面サイズ |
| 正方形（1:1） | 1080×1080 / 2160×2160 | X・Instagram の投稿 |
| 縦長（4:5） | 1080×1350 / 2160×2700 | Instagram のフィード投稿（縦） |
| ストーリー（9:16） | 1080×1920 / 2160×3840 | ストーリー・ショート動画 |
Discord のイベント作成画面では 800×400 以上が推奨と書かれていますが、実際に表示されるのは 2.5:1 で、
2:1 の画像は上下が切れます。2.5:1 で作れば切れません。
横長（16:9・Discord・OGP）は 16:9 と同じ配置を横に広げたもの（Mac は 4 人だと横一列に入らないので登壇者だけ並べ方を自動で決める）、正方形と縦長はタイトルの下に日付などを並べ、
登壇者は空いている場所に収まるように並べ方（横一列・縦一列・2 段）と大きさを自動で決めます。
タイトルが長いときは、正方形と縦長では折り返し、横長では文字を小さくして 1 行に収めます。
書き出し形式の選び方
背景に細かい粒子（グレイン）が入っているため、PNG は 1920×1080 で 3〜4MB 程度になります。
| 形式 | 目安サイズ（1920×1080） | 向いている場面 |
|---|
| JPEG（既定） | 約 0.3MB | ほぼどこでも受け付けてもらえる。迷ったらこれ |
| WebP | 約 0.3MB | 同じ画質でいちばん軽い。アップロード先が WebP 対応なら |
| PNG | 約 3.5MB | 劣化なしで保存したいとき・あとで加工するとき |
YouTube のサムネイルは 2MB までなので、PNG だと超えます。JPEG を使ってください。
Safari は WebP の書き出しに対応していないため、WebP を選んでも PNG で保存されます（画面に通知が出ます）。
フォント
サムネの日本語は Kosugi Maru、英数字は Agave、右下のロゴは M PLUS Rounded 1c です。
Kosugi Maru と M PLUS Rounded 1c は Google Fonts から読み込みます（画面の文字は Noto Sans JP / JetBrains Mono）。
オフラインだと OS のフォントで代用されるので、書き出しはネットにつながった状態で行ってください。
Agave は Google Fonts に無いので同梱しています（assets/fonts/Agave-Regular.ttf、SIL Open Font License 1.1、
assets/fonts/Agave-LICENSE.txt）。js/assets.js に埋め込み、英数字の範囲だけを受け持つフォントとして登録します。
英数字は日本語より少し大きく（1.07 倍）、太く（タイトルは 480、ほかは 460 相当。Regular のふちをなぞって太らせる）描き、
日本語との境目に少し間をあけます。値は js/render.js の TEXT_TITLE / TEXT_SMALL にあります。
ファイル構成
index.html 画面
css/style.css 画面のスタイル
js/render.js サムネイルの描画（canvas）。デザインを変えるならここ
js/app.js 入力・保存・書き出し
js/assets.js ロゴ・サンプル画像・Agave を埋め込んだもの（自動生成）
assets/ ロゴ・サンプル画像・フォント（Agave）の元ファイル
tools/embed-assets.mjs assets/ から js/assets.js を作り直すスクリプト
ロゴやサンプル画像を差し替えるとき
assets/ の画像を置き換えてから、次を実行します（Node.js 18 以上）。
node tools/embed-assets.mjs
画像を js/assets.js に埋め込んでいるのは、index.html をダブルクリックで開いた（file://）状態でも
書き出しができるようにするためです。別ファイルのまま読み込むと、ブラウザの制限で canvas から画像を書き出せません。
デザインの調整
js/render.js は比率ごとのデザイン座標（16:9 なら 1280×720。一覧は LAYOUTS）で描いていて、
書き出し時にサイズに合わせて拡大しています。比率ごとの書き出しサイズとボタンの表示名は js/app.js の RATIOS にあります。
色ズレ（赤 / 水色のずれ）とグローは fxText()、背景は background() / grain() / fog() にまとまっています。
GitHub Pages で公開する
リポジトリの Settings → Pages で、ブランチ（例: main）のルートを公開元にすれば、そのまま URL で使えます。
