YouTubeサムネイル一括作成 YouTube Thumbnail Batch Maker
YouTubeサムネイル一括作成は、背景・キャラクター・ロゴの画像レイヤーと、タイトル/サブタイトル/サブサブタイトルの3階層テキストを組み合わせて、YouTubeサムネイル(1280×720)を最大30枚まとめて生成できる無料ツールです。設定は1画面にまとまっていて、左のプレビューを見ながら調整できます。スマートフォンでも読める文字サイズを自動で確保し、右下の再生時間バッジやキャラクターを避けてレイアウトするなど、クリック率を落とさないための制約を組み込んでいます。画像はサーバーに保存されず、すべてブラウザ内で処理されます。
背景未設定
キャラクター・人物未設定
ロゴ未設定
レイアウト
文字の設定
市松模様の上に文字だけを描いています。明るい所と暗い所の両方で、フチ取りと影が効いているかを確認できます。
設定はこのブラウザに自動保存され、次回開いたときに復元されます(画像は保存されません)。 JSONで書き出しておくと、別のパソコンやブラウザでも同じ設定を再現できます。 タイトルと共通サブタイトルも一緒に書き出されます。
出力設定JPEG / 連番
使い方
設定は1画面にまとまっています。左(スマートフォンでは上)にプレビューが固定表示され、右の設定を触るたびにその場で反映されます。ページを行き来する必要はありません。
- タイトルを1行ずつ入力します。1行が1枚のサムネイルになります(最大30行)。
|で区切るとサブタイトル・サブサブタイトルになります。強調したい部分は【】で囲み、数字は自動で強調されます。 - 背景画像を登録し、「暗くする」「ぼかし」を調整します。文字の背後を少し暗くすると読みやすくなります。画像なしでも背景色とグラデーションだけで作成できます。
- 必要ならキャラクター(人物)画像とロゴ画像を登録します。キャラクターは左右・大きさ・上下位置を調整でき、白フチと影を付けられます。
- レイアウト・フォント・文字色を選びます。迷ったら「背景に合わせて自動で選ぶ」を押すと、背景とキャラクターの位置を解析して最適なレイアウトを提案します。
- プレビューとスマートフォン実寸プレビューで確認します。警告が出たら「自動修正」を押すと設定を調整して解消します。
- 「全N枚をまとめて確認」で、生成前に全タイトルの仕上がりを一覧チェックします。
- 「サムネイルを一括生成する」を押すと、全枚数をまとめて生成します。ZIP一括、または1枚ずつダウンロードできます。
クリックされるサムネイルの条件
YouTubeサムネイルは「大きな画面で見て良いもの」ではなく、「小さな画面で見て伝わるもの」が正解です。このツールは、次の条件を自動で守るように作ってあります。
1. スマートフォンでの表示は横210ピクセル程度しかない
視聴の大半はスマートフォンからで、一覧に並ぶサムネイルは横210ピクセル前後にまで縮みます。1280ピクセルで作ったサムネイルは、実際には約6分の1に縮小されて見られているということです。パソコンの大画面で確認して「読める」と判断すると、ほぼ確実に読めない大きさになります。
本ツールでは、右側に実寸210×118ピクセルのプレビューを常に表示しています。ここで読めるかどうかだけを基準にしてください。
2. 文字は画像の高さの6.5%以上
1280×720で作る場合、文字の大きさは約47ピクセル以上が下限の目安です。これを下回ると、スマートフォンでは文字の形が潰れて読めなくなります。
「自動サイズ調整」をオンにすると、文字領域に収まる範囲でできるだけ大きな文字サイズを自動的に選びます。それでも下限を下回る場合は、警告を表示します。警告が出たときは、装飾を足すのではなくタイトルを短くしてください。
3. 文字数は13文字前後、多くても20文字まで
文字数と文字サイズは反比例します。文字を増やせば、そのぶん1文字が小さくなります。タイトル一覧の各行には文字数バッジが表示され、13文字以内なら緑、20文字以内なら黄色、それを超えると赤で表示されます。
動画タイトルをそのままサムネイルに載せる必要はありません。サムネイルには「一番言いたいこと」だけを置き、詳細は動画タイトル側に書くほうが結果的に伝わります。
4. 右下には文字を置かない
YouTubeの一覧では、サムネイルの右下に再生時間のバッジが重なります。ここに文字を置くと隠れてしまいます。「再生時間バッジを避ける」をオンにしておくと、文字領域を自動的に縮めて回避します。「セーフエリアを表示」をオンにすると、緑の枠(安全領域)と赤の枠(バッジ領域)を確認できます。
5. 背景と文字のコントラストを確保する
文字色を「自動」にすると、文字を置く領域の明るさを実際に測定して、白文字か黒文字かを選びます。加えて、フチ取りと影を付けることで、背景が複雑な写真でも文字が沈まないようにしています。
それでも読みにくいときは、「暗くする」を40〜50%まで上げるか、「下帯」「左パネル」など帯を敷くレイアウトに変更してください。
6. シリーズものは同じレイアウトで揃える
連続もの・シリーズものの動画は、レイアウトと配色を揃えたほうがチャンネルとして認識されやすくなります。このツールは背景1枚とレイアウト設定を全枚数で共有するため、タイトルだけを差し替えた統一感のあるサムネイルが一度に作れます。
機能の詳細
画像レイヤー(背景・キャラクター・ロゴ)
3枚の画像を別々のレイヤーとして重ねられます。描画順は背景 → 帯・パネル → キャラクター → 文字 → ロゴです。
- 背景… 全面に敷く/全体を収めるを選べます。暗さとぼかしで文字の読みやすさを調整します。
- キャラクター(人物)… 背景を透過したPNGを推奨します。左右の配置、大きさ(高さ30〜110%)、上下位置を調整できます。 白フチは、影の色を白にして全方位へずらしながら12回重ね描きすることで作っています。切り抜き画像が背景から浮き上がり、サムネイルらしい見た目になります。
- ロゴ… 四隅から位置を選べます。幅5〜40%、不透明度20〜100%。右下に置いた場合は再生時間バッジの上に自動で逃がします。
「文字を重ねない」をオンにすると、キャラクターの占める幅を計算して文字領域を反対側へ自動的に狭めます。人物の顔に文字が重なる事故を防げます。オフにすると文字領域が広がるぶん文字は大きくなりますが、重なりは自分で確認してください。
背景の色・グラデーション・フチどり
背景画像を使わない場合や、画像の余白部分に出る色を設定できます。
- 2色のグラデーション… 開始色と終了色をそれぞれ指定できます。向きは「左→右」「上→下」「左上→右下」「右上→左下」から選べます。
- フチどり(枠線)… サムネイル全体を囲む枠線です。太さ2〜48px、単色または2色グラデーションを選べます。一覧に並んだときに他の動画と区切って見せたい場合や、シリーズものの識別に使えます。枠線は最前面(ロゴよりも上)に描かれます。
枠線の向きは背景グラデーションの向きに合わせています。
背景の模様(画像なしで作れる21種類)
写真を用意しなくても、模様だけで成立するサムネイルが作れます。模様はすべてブラウザ内で描いているので、素材のダウンロードも著作権の確認も不要です。
- 点・格子系… ドット/ドット(千鳥)/グリッド(方眼)/グリッド(斜め)/市松/十字/リング
- 線・ストライプ系… ストライプ(縦・横・斜め・逆斜め)/ジグザグ/波線
- 図形系… 三角/六角形(ハニカム)/星/紙吹雪
- 放射系… 集中線/放射(塗り分け)/同心円
- 質感系… ノイズ
模様には色・濃さ(0〜70%)・大きさ(16〜200px)を指定できます。色を白にすると明るい模様、黒にすると影のような模様になります。濃さは10〜20%程度に抑えると、文字の邪魔をせず背景に奥行きが出ます。
模様は背景画像の上に重ねて描かれるので、写真の上に薄く格子を敷くといった使い方もできます。「暗くする」は模様の上から掛かるため、模様を敷いてから全体を暗くすれば文字はそのまま読めます。
紙吹雪とノイズは位置がばらばらに見えますが、乱数ではなく座標から計算しているため、同じ設定なら何度描いても同じ絵になります。一括生成した全枚数で柄がそろいます。
3階層のテキスト
タイトル入力欄で1行を | で区切ると、3階層になります。
第1回 これだけで【激変】する | 初心者向け | 全5回シリーズ
- タイトル… 一番大きい主役の文字。最大行数は1〜3行から選べます。
- サブタイトル… タイトルに対する割合(25〜75%)で指定します。最大2行。
- サブサブタイトル… さらに小さい補足。割合18〜60%、1行のみ。
全枚数に共通の文言を入れたい場合は「共通サブタイトル」「共通サブサブタイトル」に書いておきます。行に | の指定がないとき、こちらが自動的に使われます。シリーズ名や「第○期」のような固定文言に向いています。
サブが小さくなりすぎる場合は、読める下限(約26px)まで自動的に拡大します。そのぶんタイトルが小さくなるため、警告でお知らせします。サブを省けばタイトルをもっと大きくできます。
レイアウトテンプレート
- 中央ドーン… 画面中央に極太テキスト。文字領域が最も広く、長めのタイトルでも大きく表示できます。迷ったらこれ。
- 下帯… 下部に黒のグラデーション帯を敷きます。上半分に人物や商品を置く構図向きです。
- 上帯… 上部に帯を敷きます。下側に被写体を大きく見せたいときに。
- 左パネル… 左半分を暗くして左寄せでテキストを配置。右側に人物を置く定番レイアウトです。
- 煽り(極太フチ)… アクセント色の文字に極太の黒フチ。エンタメ・ゲーム系で使われる形です。
- ミニマル(左下)… 帯を使わず左下に配置。解説・ドキュメンタリー系の落ち着いたトーン向きです。
文字の演出(フチ取り・影)と、文字だけのプレビュー
サムネイルの文字は、写真の上に置いても沈まないようにフチ取りと影で持ち上げます。
- フチの太さ… 文字サイズに対する割合で0〜30%。太いほど遠目に強くなりますが、太すぎると文字の形が潰れます。既定は15%です。
- 影… 行ごとに1回だけ落としています。強調区間(【】内)ごとに影を落とすと重なって濃くなるためです。
文字の設定の一番上に「文字デザインだけのプレビュー」があります。写真・キャラクター・ロゴを外し、市松模様の上に文字だけを描いたものです。明るい所と暗い所が交互に並ぶので、フチ取りと影が両方の背景で効いているかを一目で確認できます。写真が派手だと文字の演出が効いているのか判断しづらいため、切り分けて見るためのものです。
文字色は実際の背景から決めた値をそのまま使っているので、このプレビューと本番で色が食い違うことはありません。
フォント
Noto Sans JP・M PLUS 1p・Dela Gothic One・RocknRoll One・Zen Maru Gothic・Kaisei Decol の日本語ウェブフォントと、端末の標準フォントから選べます。サムネイルは太いフォントほど小さくしても読めます。迷った場合は Noto Sans JP か Dela Gothic One を選んでください。
【】による強調
タイトルの一部を【】で囲むと、その部分だけがアクセント色で描画されます。【】の記号自体は出力されません。
第2回 やってはいけない【3つ】のこと
と入力すると、「3つ」だけが黄色などのアクセント色になります。1枚につき強調は1か所までにしてください。全部を強調すると、どこも強調されていないのと同じになります。
出力形式
- JPEG(推奨)… 品質92%で出力します。写真背景ではファイルサイズが小さく、YouTubeの2MB制限にも余裕を持って収まります。
- PNG… ベタ塗り背景や図形中心のデザインで、文字のフチが最もきれいに出ます。写真背景では2MBを超えることがあります。
- WebP… 最も軽量ですが、ブラウザによっては出力できない場合があります。
生成結果には1枚ごとのファイルサイズが表示され、2MBを超えたものは赤字で警告されます。
ファイル名
初期状態では thumb-01.jpg、thumb-02.jpg… の連番で出力します。「ファイル名にタイトルを使う」をオンにすると、タイトルからファイル名を自動生成します(ファイル名に使えない記号は自動で置き換えます)。
2MB制限の自動調整
YouTubeのサムネイルは2MBが上限です。「2MBを超えたら自動で品質を下げる」をオンにしておくと、書き出したファイルが2MBを超えた場合に品質を 92%→85%→78%→70%→62%→55% と段階的に下げ、収まった時点で確定します。PNGを選んでいて収まらない場合はJPEGに自動変換します。どちらの場合も、生成結果に何をしたかが表示されます。
レイアウトの自動提案
「背景に合わせて自動で選ぶ」を押すと、背景画像を16×9のセルに分割して各セルの明るさのばらつき(標準偏差)を測定し、文字を置く領域が最も平坦になるレイアウトを選びます。背景が全体的に複雑な場合は、帯やパネルで文字の背後を覆うレイアウト(下帯・上帯・左パネル)が有利と判定されます。選ばれたものには「おすすめ」の印が付きます。
自動修正
「文字が小さすぎます」「タイトルが入りきりません」といった警告には「自動修正」ボタンが付きます。押すと、影響の小さい順に設定を変えて警告の解消を試みます。
- 自動サイズ調整をオンにする
- 最大行数を増やす(2行→3行)
- レイアウトを文字領域の最も広い「中央ドーン」に変える
それでも解消しない場合は「タイトルを短くしてください」と表示します。装飾を足して解決する問題ではないためです。判定は現在プレビュー中の1枚ではなく全タイトルに対して行います。
全枚数の確認
「全N枚をまとめて確認」を押すと、生成前に全タイトルの仕上がりを一覧表示します。各カードには文字サイズと行数、状態バッジ(OK/注意/要修正)が付きます。カードをクリックすると、その行が大きいプレビューに切り替わります。
A/Bテスト用のバリエーション出力
出力設定の「バリエーション」で2または3を選ぶと、同じタイトルをレイアウト違いで複数枚出力します。ファイル名の末尾に -a / -b / -c が付きます。YouTubeにはサムネイルのA/Bテスト機能(Test & Compare)があるため、そのまま比較用の素材として使えます。1パターン目は現在選択中のレイアウトです。
設定の保存とJSONでの持ち運び
レイアウト・フォント・配色・出力形式などの設定は、お使いのブラウザ(localStorage)に自動保存され、次回開いたときに復元されます。初期状態に戻したいときは「設定をリセット」を押してください。
「設定を書き出す(JSON)」を押すと、設定一式を JSON ファイルとして保存できます。別のパソコンやブラウザで「設定を読み込む」から読ませれば、同じ見た目を再現できます。チームで統一したい場合や、シリーズごとにテンプレートを使い分けたい場合に使ってください。
書き出される内容は次のとおりです。
- 背景の色・グラデーション・暗さ・ぼかし・枠線
- キャラクターとロゴの配置・大きさ・装飾の設定(画像そのものは含まれません)
- レイアウト・フォント・文字色・サブの割合・フチと影の設定
- 出力形式・ファイル名・バリエーション
- 入力したタイトル一覧と共通サブタイトル
読み込み時は値の型と色コードを検証し、おかしな値は無視して既定のままにします。無視した項目は画面に表示されます。画像は含まれないため、背景・キャラクター・ロゴは読み込み後にもう一度登録してください。
よくある質問
- Q. YouTubeサムネイルの推奨サイズは?
- A. 1280×720ピクセル(16:9)、ファイルサイズ2MB以内が推奨です。このツールは常に1280×720で出力し、2MBを超えた場合は生成結果に警告を表示します。
- Q. 何枚まで一括で作れますか?
- A. 一度に最大30枚まで作成できます。タイトルを1行に1つずつ入力すると、その行数ぶんのサムネイルが生成されます。31行目以降は無視されます。
- Q. 画像はサーバーにアップロードされますか?
- A. いいえ。背景画像の読み込みからサムネイルの生成まで、すべてお使いのブラウザ内(JavaScriptのCanvas)で処理しています。画像がサーバーに送信・保存されることはありません。
- Q. クリック率を上げるために気をつけることは?
- A. YouTubeの視聴の多くはスマートフォンで、サムネイルは横210ピクセル程度でしか表示されません。文字数は13文字前後まで、行数は2行までに抑え、文字は画像の高さの6.5%以上の大きさを確保してください。このツールは自動文字サイズ調整でこの条件を満たすように調整し、下回る場合は警告します。また、右下は再生時間バッジが重なるため、文字を置かないように自動で回避します。
- Q. 文字が小さすぎるという警告が出ます。どうすればいいですか?
- A. タイトルを短くするのが最も効果的です。それが難しい場合は、最大行数を2行から3行に増やす、レイアウトを「中央ドーン」など文字領域の広いものに変更する、といった方法があります。
- Q. 背景画像を1枚ずつ変えたいのですが。
- A. このツールは「背景1枚 × タイトル複数行」で、シリーズものの統一感を出すことを目的にしています。背景を変えたい場合は、背景を差し替えてもう一度生成してください。設定は保持されます。
- Q. 生成した画像は商用利用できますか?
- A. ツールの出力自体に制限はありません。ただし、背景に使用した画像の権利は利用者側で確認してください。フォントについては、選択できるものはすべて SIL Open Font License などで商用利用が認められているものです。
- Q. PNGを選んだのにJPEGで保存されました。なぜですか?
- A. YouTubeのサムネイルは2MBが上限です。写真背景をPNGで書き出すと2MBを超えることが多いため、「2MBを超えたら自動で品質を下げる」がオンの場合は、PNGで収まらないと判断した時点でJPEGに自動変換します。生成結果に変換した旨が表示されます。この動作が不要なら、そのチェックを外してください。
- Q. A/Bテスト用に複数パターンを作れますか?
- A. はい。出力設定の「バリエーション」で2または3を選ぶと、同じタイトルをレイアウト違いで複数枚出力します。ファイル名の末尾に a / b / c が付きます。YouTubeのサムネイルA/Bテスト(Test & Compare)にそのまま使えます。
- Q. 設定は次回も残りますか?別のパソコンでも同じ設定を使えますか?
- A. レイアウト・フォント・配色・出力形式などの設定は、お使いのブラウザに自動保存され、次回開いたときに復元されます。「設定をリセット」で初期状態に戻せます。別のパソコンやブラウザで同じ設定を使いたい場合は「設定を書き出す(JSON)」でファイルに保存し、移動先で「設定を読み込む」から読ませてください。タイトル一覧も一緒に書き出されます。画像は含まれないため、背景・キャラクター・ロゴは読み込み後に登録し直してください。
- Q. 背景の画像を用意できません。画像なしでも作れますか?
- A. はい。背景色の2色グラデーションに加えて、画像を使わない模様を21種類用意しています。ドット・グリッド・ストライプ・市松・三角・六角形・星・紙吹雪・集中線・同心円・ノイズなどから選べ、それぞれ色・濃さ・大きさを調整できます。すべてブラウザ内で描いているため、素材のダウンロードや著作権の確認は不要です。
- Q. キャラクターやロゴも入れられますか?
- A. はい。背景とは別に、キャラクター(人物)画像とロゴ画像をレイヤーとして登録できます。キャラクターは左右の配置・大きさ・上下位置を調整でき、切り抜きPNGに白フチと影を付けられます。「文字を重ねない」をオンにすると、文字領域を自動的にキャラクターの反対側へ寄せます。ロゴは四隅から位置を選べ、右下に置いた場合は再生時間バッジを避けます。
- Q. サブタイトルやサブサブタイトルは入れられますか?
- A. はい。タイトル入力欄で1行を「|」で区切ると、タイトル/サブタイトル/サブサブタイトルの3階層になります。全枚数に共通のサブタイトルを入れたい場合は「共通サブタイトル」欄に書いておくと、行で指定がないときに自動的に使われます。サブが小さくなりすぎる場合は読める下限まで自動的に拡大します。
- Q. スマートフォンでも使えますか?
- A. はい。スマートフォン・タブレット・PCに対応したレスポンシブデザインです。パソコンでは左にプレビュー、右に設定の2カラムで表示され、スマートフォンでは1カラムになりプレビューが画面上部に固定されます。
関連ツール
注意事項
このツールは無料でご利用いただけます。画像はブラウザ内で処理され、サーバーには保存されません。背景に使用する画像の著作権・肖像権は、利用者ご自身でご確認ください。YouTubeのサムネイル仕様(推奨サイズ・容量上限)は変更される場合がありますので、最新の情報は YouTube ヘルプをご確認ください。
※このプログラムはPHP8.2.22にて作成、動作確認を行っております。
※ご利用下さっている皆様のご意見・ご要望(改善要望)をお寄せください。