Twitchバナー（1200×480）
Twitchプロフィールバナーは1200×480ピクセルで、チャンネルヘッダーの後ろにある5:2のレターボックスです。ここでその正確なフレームに切り抜き、アバターとチャンネル名の重なり部分を描画することで、アートワークの見える部分がそれらの下に隠れることがなくなります。
PNG、JPG、WebP、GIFをドロップ
ページのどこにでもドロップできます · ファイルを選択 · 100 MB
対応形式： PNG, JPG, JPEG, WebP, GIF, AVIF
Twitchバナー（1200×480）とは
プロフィールバナーはチャンネル名とアバターの後ろにある横長の帯で、1200×480がTwitchが期待するサイズです。これは5:2のレターボックスであり、Discordのプロフィールバナーと同じ比率ですがサイズは全く異なるため、ファイルを再利用すると切り抜きされてしまいます。
二つの要素がこのバナーを覆います。アバターとチャンネル名がその左部分に重なり、ブラウザウィンドウの幅によって表示される帯の高さが変わります。狭いウィンドウではバナーは垂直方向に切り抜かれ、スケーリングされることはないため、アートワークの上下部分が最初に失われます。
このページは1200×480のフレームを保持し、ヘッダーがカバーする領域をマークし、正確なファイルをエクスポートします。何もアップロードされないため、バナーがまだ公開されていない依頼作品である場合、これは重要なポイントです。
離れている間にプレーヤーに表示される画像は全く異なる形状です—オフライン画面リサイズツール1920×1080のサイズを保持します。
エクスポートしたバナーが想定より重い場合、圧縮ツール指定したサイズに縮小します。
Twitchチャンネル画像の概要
3つの別々の画像、3つの別々の形状。これらを混同することが、チャンネルが未完成に見える最も一般的な理由です。
| 画像 | サイズ | 比率 | 表示場所 |
|---|---|---|---|
| プロフィールバナー | 1200 × 480 | 5:2 | チャンネル名とアバターの後ろ |
| プロフィール画像 | 256 × 256 | 1:1 | 円形、チャンネル名の横 |
| ビデオプレーヤーバナー | 1920 × 1080 | 16:9 | オフライン中のプレーヤー内 |
ヘッダーの重なり部分をデザインする
アバターサークルとチャンネル名はバナーの左部分を占め、フォローと登録ボタンがその右側に配置されます。確実に表示されるのは上部と右側の領域であり、そこにロゴ、スケジュール、またはキャッチコピーを配置するのが適切です。
プレビューの破線の矩形がその領域を示しています。その外側はテクスチャとして扱ってください：グラデーション、パターン、左下に被写体のない写真など。ヘッダーが表示されるすべてのスクリーンで、左側に依存するバナーは壊れたように見えます。
なぜ狭いウィンドウでは上下部分が消えるのか
Twitchはヘッダーの幅を埋めるようにバナーをレンダリングします。ウィンドウが狭くなると、帯はウィンドウと同じ幅を保ち、垂直方向に切り抜かれ、縮小されることはありません。そのため、狭い幅では有効な表示帯は480ピクセルより短くなります。
重要な要素はフレームの垂直中央に収めてください。上端から40ピクセル離れた位置にあるキャッチコピーはノートPCのウィンドウでは表示されず、そのことが通知されることもありません。
形式、ファイルサイズ、アップロード後のTwitchの処理
写真や絵画のバナーにはJPEGを使用してください—同じ1200ピクセルの帯で同じ見た目の品質に対して、PNGよりはるかに小さくなります。フラットな色、鮮明なエッジ、文字にはPNGを使用してください。その場合、JPEGのリングがすべての文字周りに見えるようになります。Twitchは配信のために受け取ったものを再エンコードするため、クリーンで高品質なソースファイルが、二重の損失を重ねることなく、エンコーダーに最適な素材を提供します。
よくある質問
Twitchプロフィールバナーのサイズは？
1200×480ピクセル、5:2の比率です。これはチャンネル名とアバターの後ろにあるバナーです。オフラインのビデオプレーヤーバナー（1920×1080）やプロフィール画像（256ピクセルの正方形）とは異なります。
なぜTwitchバナーの上部が切れているのですか？
ヘッダーがブラウザウィンドウの幅を埋め、垂直方向に切り抜かれるため、スケーリングされないからです。狭いウィンドウでは表示帯が480ピクセルより短くなります。キャッチコピーとロゴは上下端の近くではなく、垂直中央に配置してください。
バナーの左側は何で覆われていますか？
チャンネルのアバターとチャンネル名で、その横にフォローと登録ボタンがあります。プレビューの破線の矩形がクリアなままの部分を示しています。ヘッダーの下に配置されたものは完全に隠されているわけではなく、テキストと円の後ろにある状態になるため、空欄よりも悪い状態です。
1200×480より大きなバナーをエクスポートすべきですか？
比率が5:2のままなら可能です—2400×960はきれいに縮小され、高解像度ディスプレイで鮮明に見えます。異なる形状でファイルサイズが大きいだけでは、Twitchが間違った部分から切り抜く量が増えるだけです。
TwitchバナーにはJPEGとPNGどちらを使うべきですか？
アートワークが写真や絵画の場合はJPEGを使用してください。このサイズでは目に見える違いなく、ファイルサイズは数倍小さくなります。フラットな色、鮮明なエッジ、または文字がある場合はPNGを使用してください。その場合、JPEGのリングがすべての文字周りに現れます。他の人にファイルを渡す必要がない場合は、WebPは両方の用途に適しています。
バナーはこのサイトにアップロードされてリサイズされますか？
いいえ。デコード、切り抜き、リサイズ、エンコードのすべてがこのブラウザのタブで実行され、ファイルはあなたのデバイスから出ることはありません。ファイルを受け取るサーバーは存在せず、DevToolsで確認できます。