作るっちゃん サムネメーカー

「〇〇についてだべる会」系イベントのサムネイルを、ブラウザだけで作るツールです。 文字と登壇者のアイコンを入れるとその場でプレビューされ、ボタン1つで画像として保存できます。

ビルドもサーバーも不要です。index.html を開くだけで動きます。

使い方

1. index.html をブラウザ（Chrome / Edge / Firefox / Safari）で開く
2. プレビュー上のボタンで比率を選ぶ（下の「比率」を参照）
3. 右のパネルでタイトル・サブタイトル・日付・時間を入力
   • 曜日と BY は空欄のままなら、日付と登壇者の名前から自動で入ります
   • 回数を入れると「#03」（既定）「VOL.03」「No.03」「EP.03」「第3回」から表記を選べます。 出す場所は「サブタイトルの後ろ」（既定）・タイトルの上・タイトルの前・DATE の表・左下・背景に大きく。 数字以外（「特別回」など）はそのまま出ます。空欄なら出ません
4. 登壇者ごとに画像を選ぶ（カードにドラッグ＆ドロップでも OK）
   • 円に収まりが悪いときは「ズーム」「横」「縦」で調整
   • 登壇者は 1〜4 人。人数に合わせてアイコンの大きさと間隔が自動で変わります
5. 形式とサイズを選んで「ダウンロード」

入力内容はブラウザに自動保存されるので、次回開くと前回の状態から始められます。 「初期状態に戻す」でリセットできます。

比率

比率	書き出しサイズ	向いている場面
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 で使えます。