メニュー 閉じる

Twitch Graphics Size Guide

Twitch Graphics Size Guide

Are you a stream designer? DIY streamer on a budget? Consider this Twitch Size Guide the bible for creative-types.

We’re going to show you all the best specs for your Twitch graphics. Dimensions, file sizes and formats for the essential designs, including:

  • Profile Picture & Banner
  • Webcam Overlay
  • Twitch Panels
  • Video Player Banner
  • Stream Alerts
  • Emotes & Badges
  • And more

This Twitch Size Guide is designed for both artists and streamers — a quick reference you can keep bookmarked. Everything has been tested and optimized by our team of 50+ Twitch creatives. We used only the latest, up-to-date specs for 2020-2021 and beyond.

さっそく始めましょう。

Twitch Profile Picture (Avatar) Size

基本から見ていきましょう。 プロフィール画像は、アバターとも呼ばれ、あなたのTwitchチャンネルに関連する主要な画像です。 新しい視聴者があなたのストリーム ブランドに抱く第一印象はこの画像である可能性が高いので、重要視しましょう。

  • Twitchのナビゲーションとチャンネル検索
  • 「ライブ配信中」のメール通知
  • ウェブ検索(Googleを含む)
  • あなたのストリームリンクを含むTwitter投稿

だから、無能にならないようにしましょう。 正しいサイジングをしましょう。

他のほとんどのストリーム グラフィックと異なり、プロフィール画像は正方形であることに注意してください。 Twitch では、最小寸法を 200 x 200 ピクセル、最大寸法を 256 x 256 ピクセルにすることを推奨しています。 このサイズを超えると、Twitchは自動的に画像を縮小してしまいますので、できるだけ256 x 256を使用することをお勧めします。 最大ファイルサイズは 10MB で、使用できるファイル形式は JPEG & PNG.

推奨される寸法。 256 x 256 ピクセル

最大ファイルサイズ: 10MB

使用可能なファイル形式: JPEG

。 JPEG、PNG

デザイナーからのアドバイス:

ここには、キックバットストリームのロゴであれ、大きな美しいマグカップの写真であれ、あなたの主なブランドイメージを使用することをお勧めします。 どちらを選んでも、被写体ができるだけフレームに収まるようにします。

最終的には、明確ではっきりしたものにします。視聴者は、プロフィール画像からすぐにあなたのチャンネルを認識できるようにすべきです。

Twitch Avatar Size

Twitch Profile Banner Size

プロフィールバナーの最適な高さは 480px です。 これより高いものや低いものは、Twitchによって自動的に拡大縮小されます。

幅は少しトリッキーな場合があります。 技術的には、Twitchはバナーの幅を900pxにすることを推奨していますが、大画面でのスケーリングを良くするために、より広くデザインすることをお勧めします。

さて、900pxは小さい画面や普通サイズの画面では問題なく表示されます。 これには、モバイルデバイス、タブレット、標準的なモニターが含まれます。 しかし、テレビや超広角モニターのような大きな高解像度画面では、画像は 900px をはるかに超えて引き伸ばされます。

この対策として、幅を 1200px に拡大することをお勧めします。

この対策として、幅を 1200px にすることをお勧めします。これにより、広い画面での拡大縮小がうまくいき、どの解像度でも鮮明できれいなバナーができます。

example profile banner showing best dimensions and file size

10MB 以下のプロフィールバナーを保つよう注意してください。 これは画像の歪みやアーティファクトを引き起こす可能性があり、大きなマイナス要因です。

フォーマットについては、JPEG または PNG ファイルのいずれかを選択できます。 巧妙なトリックは、バナーの右下隅にある厄介な UI のはみ出しに対抗するために、透過 PNG を使用することです。

推奨サイズ 1200 x 480 ピクセル

最大ファイル サイズ: 10MB

推奨されるファイル形式。 JPEG または PNG

Twitch Webcam (Overlays) Size

Overlays

Webcam overlay on-stream を選択したのですか? それに乾杯。 まもなく、あなたのその美しい顔は、世界中の何百、何千という視聴者に見えるようになります。 Web カメラのデザインに時間をかけ、& 考え込めば、きっと報われるでしょう。 16:9 または 4:3 のアスペクト比です。 最終的に、選択はストリーム カメラの解像度に依存します。 16:9 が一般的ですが、4:3 の Web カメラ フレームを好むストリーマーもいます

現実には、Web カメラはデザインの観点から見ると、少し変わったアヒルです。 ストリーマーは通常、探しているサイズに合うように OBS を介して Webcam ボックスをトリミングするか、マスクなどを介してカスタム形状を作成するので、特定のサイズや寸法を特定するのは困難です。 最終的なフレームは、ほとんどの場合、各ストリーマーが自分のニーズに合わせて縮小・調整することになります。

このため、特定の Web カメラの解像度を推奨することは困難ですが、可能な限り大きくすることをお勧めします。 少なくとも、1920 x 1080 ピクセルから始めると、縮小したときにデザインの質を保てます。 ウェブカメラが静止している場合は、PNGを使用します(JPEGは透明度をサポートしていないため、推奨できません)。 アニメーションフレームを使用する場合は、GIFを使用してください。

推奨される寸法。 1920 x 1080 ピクセル

使用可能なファイル形式。 PNG (静的)、GIF (アニメーション)

デザイナーからのヒント:

ウェブカメラはシンプルに見えるかもしれませんが、ここには多くのオプションがあり、多くのストリーマーは、適切なものを見つけるまで複数のデザイン タイプで試しています。 ウェブカメラは、シンプルで最小限のフレームから、ティッカー & ストリーム情報を含むより複雑なオーバーレイ、完全にアニメーション化された動的なデザインまで、さまざまな種類があります。

また、Web カメラのオーバーレイの画面上の配置とサイズを調整することをお勧めします。

また、Web カメラのオーバーレイの画面上の配置やサイズも調整する必要があります。 ウェブカメラのサイズを最小にし、ゲーム内の主要な指標をカバーしないように配置することを検討してください。

Webcams

Twitch

The maximum panel width is 320 pixels. これより広かったり狭かったりすると、Twitch は自動的に画像を 320px にスケーリングします。

パネルの高さは、より自由で創造的なものにすることができます。 伝統的な (すなわち、長方形の) パネルでは、60 ~ 100px の間の高さを推奨します。 これは通常、1 行のテキストとアイコンを内部に含めるためのスイートスポットです。

理想的な寸法とファイルサイズを示すパネルの例
従来の長方形の Twitch パネルに対する推奨サイズ

もうひとつの、より進んだパネル タイプに、正方形のパネルまたは垂直パネルがあります。 これらは、エモート、チャンネル ルール、PC スペック、スケジュール、スポンサーを表示するなどの情報提供の目的でよく使用されます。

ファイルサイズについては、Twitch のパネルを 2.9MB 未満に抑えるようにしてください。

ファイルサイズについては、Twitchのパネルは2.9MB未満に抑えるようにしてください。

形式については、透過PNGファイルを使用することをお勧めします。 透明であれば、曲線の縁取りや縁に沿ったデザインの装飾を施したパネルを使用できます。 つまり、直線的な四角形や長方形だけでなく、既成概念にとらわれない形状やアートスタイルが増えるということです。

推奨される寸法です。 従来型: 320 x 60-100 ピクセル。 背の高い: 320 x < 600 ピクセル

最大ファイル サイズ: 2.9MB

推奨ファイル フォーマット。 透過 PNG

Twitch 動画プレイヤー バナーのサイズ (オフライン画面)

動画プレイヤー バナー (しばしば「Twitch オフライン画面」と呼ばれる) には、比較的わかりやすいサイズ仕様があります。 Twitch ビデオプレーヤーのボックスは 16:9 なので、バナーはこのアスペクト比に合わせる必要があることを覚えておいてください。 そのため、ほとんどのストリーマーは1920 x 1080pxの寸法を採用しています。

example offline screen showing best dimensions and file size

10MB以下のファイルサイズにしておくと、画像が自動圧縮されることに注意してください。 不要な圧縮は画像の品質を著しく低下させ、ピクシレーションやアーチファクトを引き起こします。

JPEGまたはPNGフォーマットの使用をお勧めします。

私たちは、JPEGまたはPNGフォーマットを使用することを推奨します。 そのため、GIF をアップロードすると、アニメーションの最初のフレームのみが表示されます。

推奨されるサイズ。

最大ファイル サイズ: 10MB

推奨されるファイル形式。 JPEG & PNG

Twitch アラートのサイズ

独自のアラートを作成する場合、800 x 600px のキャンバスから始めることをお勧めします。 これは、OBS ブラウザーのソースまたは Streamlabs のアラート ボックスの標準サイズであり、デザインを作成、プログラム、設定するための十分なスペースがあります。

アラートを作成したら、700 ~ 750px の間の少し狭い幅を使用することを推奨します。 これにより、アラートの側面に十分な呼吸スペースとパディングのスペースが残ります。 アラートの標準的な高さは、200~250pxの間です。 これは、ほとんどの伝統的なアラートタイプのスイートスポットであることが分かっています。 必要に応じて、アニメーション効果、一般的なパディング、テキストメッセージのためにもう少し高さを追加することができます。 ボックス型の背の高いアラートでは、800pxまで高さを増やすこともできます。

現実には、これらの寸法は鉄則というよりも提案です。 正確な寸法はデザイナーや文脈によって異なるため、完璧なアラートサイズは存在しません。

Visuals by impulse stream alert example make your own
Size recommendation for Twitch Alerts

技術的には、警告ファイルのサイズは使用している OBS ソフトウェアに基づいて変化します。 StreamlabsまたはStreamElementsです。 Streamlabsの最大ファイルサイズは10MB、StreamElementsの最大ファイルサイズは30MBです。 しかし実際には、アラートサイズは常に2-3MB以下に抑えるようにすべきです。

ファイル形式に関しては、おそらく透明度をサポートするものがよいでしょう。 透明度は、アラートが単なる正方形や長方形ではなく、曲線の境界や非直線的な形状を持つことを可能にします。

JPEG ファイルは透過性をサポートしていないので、静的な (満場一致の) 警告には透過性のある PNG を使用することをお勧めします。 アニメーション化されたアラートには、透過性をサポートする WEBM フォーマットを使用します。 GIF ファイルは圧縮がひどく (ファイル サイズを低く保つために重要)、1 ビットの透過性しかサポートしていないため、避けるようにしてください。 700-750 x 200-250 ピクセル

推奨ファイル サイズ: 2-3MB

最大ファイル サイズ: 10MB (Streamlabs), 30MB (StreamElements)

推奨ファイル形式: GIF ファイル

推奨されるファイル形式は次のとおりです。 透過 PNG (静的)、WEBM (アニメーション)

Twitch Emotes Size

Emotes Badges

初めてカッパのエモーションを見たとき覚えていますか? ポグチャンプ? おそらく戸惑い、おそらく少し興味を持ちました。 しかし、いくつかの簡単な調査の後、あなたは突然、秘密のクラブに入会したように感じました。 内輪の冗談を聞かされたような。 そして、すぐにTwitchのチャットで新しいエモートのスパムを開始しました。

これが、エモートのコミュニティ構築の力です。

これがエモートのコミュニティ形成力です。 あなたのストリームが生き生きとダイナミックに見えるだけでなく、新しい視聴者がアクションに参加するために Sub ボタンを押すようになります。

現在、Twitch のアフィリエイトは、自分のチャンネルにカスタム エモートを 1 つだけアップロードすることができます。 たとえば、Tier 2 $9.99 Subを選んだ視聴者は、Tier 3 $24.99 Subsの場合と同様に、ユニークなエモートのデザインをアンロックします。 パートナーになると、購読者ポイントに注目が集まります。購読者ポイントは、視聴者があなたのチャンネルを長期にわたって購読することで蓄積されます。 サブポイント目標を達成すると、エモートスロットが追加され、チャンネルにさらに多くのエモートデザインをアップロードできるようになります。 ティアの詳細については、こちらのTwitchの投稿をご覧ください。

芸術的で独立した気分になっていますか?

芸術的で独立した気分で、自分のエモートを作りたいですか? すべてのエモートは、チャンネルで使用する前に Twitch に送信して確認する必要があるため、サイズと形式を正しく設定することをお勧めします。 各エモートは、28 x 28ピクセル、56 x 56ピクセル、112 x 112ピクセルの3つのサイズで提出する必要があります。 エモートはすべて透明でなければならないので、PNG形式を使用する必要があります。 ああ、最大ファイル サイズは 25KB です。

推奨されるサイズ。 112 x 112px、56 x 56px、& 28 x 28px

最大ファイル サイズ: 25KB

推奨のファイル形式です。 PNG

デザイナーからのヒント:

お気に入りのエモーションについて考えてみてください。 考えてみれば、どれも比較的シンプルなデザインですよね。 エモートは、シンプルでありながら、あなたのストリーマー・ブランドを象徴するものであるべきなのです。 ストリーマーがエモートにディテールを詰め込みすぎるという失敗をするのをよく見かけます。 確かに、高解像度では素晴らしく見えるかもしれませんが、28 x 28ピクセルという小さなサイズ(チャットで表示されるサイズ)に縮小すると、それらの余分なディテールはすべて失われることになります。 チャットでは、ぼやけた、混沌としたデザインに目を細めることになります。

ですから、シンプルにしてください。 一口サイズでまだ明確に認識できる、よく定義された画像を使用します。 テキストは、エモートが縮小されたときに失われる最初のものの 1 つであるため、すべての単語またはフレーズを大きくする必要があります。

Emotes Size

Twitch Badges (Subscriber Badges, Loyalty Badges) Size

お気に入りのストリーマーのチャットについて考えてみてください。 購読者としてそこにロールインすると、誇りを持ってそのチャンネル バッジを表示します。 あなたは彼らのストリームのベテランであり、彼らの放送キャリアを直接サポートしてきました。

Twitch Sub Badges は、チャットのサブスクライブした視聴者の名前の横に自動的に表示され、あなたのチャンネル専用に用意されます。 Twitchアフィリエイトとパートナーは、この「ベースバッジ」のカスタムデザインをアップロードすることができ、視聴者があなたのチャンネルに1ヶ月以上登録していることを示すことができます。 デフォルトのベースバッジは星形ですが、そのようなことはありません。

アフィリエイトやパートナーは、ロイヤリティバッジをアップロードすることもできます。これは、視聴者があなたのチャンネルに登録している期間を反映したユニークなカスタムバッジです。 たとえば、6 か月の購読者は、3 か月の購読者とは異なるデザインのバッジを持つことになります。 これは、最も忠実な購読者にチャットで特別な報酬を与える機会であり、また、視聴者が次の段階のバッジのロックを解除することを期待して購読を継続する動機付けにもなります。 現在、アフィリエイトは、ベースバッジに加えて、3ヶ月、6ヶ月、1年のサブスクライバーのためにカスタムロイヤルティバッジをアップロードすることができます。

エモートとは異なり、バッジは Twitch でのレビューや承認は必要なく、準備ができ次第、自分のチャンネルにアップロードすることができます。 各バッジは、3 つのサイズでアップロードする必要があります。 18 x 18 ピクセル、36 x 36 ピクセル、72 x 72 ピクセルの3種類のサイズでアップロードする必要がありますので、各バッジの3種類のコピーを保存しておいてください。 すべてのバッジは透過 PNG ファイルである必要があり、最大ファイル サイズは 25KB です。

推奨サイズ。 72 x 72px、36 x 36px、& 18 x 18px

最大ファイル サイズ: 25KB

推奨のファイル形式です。 PNG

デザイナーからのアドバイス:

エモートで説明したように、サイズの縮小を補うために、デザインは明確でシンプルであるべきです。 これは、標準のチャット エモートのほぼ半分のサイズであるサブスクライバー バッジの場合、特に当てはまります。 最高のTwitchバッジのほとんどが、ミニマルでシンプルなデザインであるのには理由があります。

予算がない、あるいは時間がない?

予算が限られていたり、時間がない場合は、完全にユニークなデザインではなく、バッジの色をシンプルに変更することを選択します。 たとえば、Base Subは赤いハート、3ヶ月は緑のハート、6ヶ月は紫のハートなどです。 正しく行われた場合、これらはユニークなバッジデザインと同じくらい効果的です。しかし、ほとんどのストリーマーは、リソースや時間ができたときにユニークなデザインにアップグレードすることを好みます。

Badges Size

Twitch VOD Thumbnail Size

ストリームですべてがうまくいくことがあります……

Twitch VOD サムネイル

Twitch VOD では、すべてのことがちょうどよいタイミングになることがよくあります。 ゾーンに入り、寄付 & が集まり、チャットが熱狂しているところです。 ストリーム終了画面が表示されたら、後日コミュニティで再共有するために、その悪い少年をVODとして保存してください。 しかし、プロのストリーマーはVODだけでは再生回数が保証されないことを知っています。

これは比較的簡単なことで、壮大なTwitchサムネイルを完成させるために、非常識なデザインスキルは必要ありません。 JPEGまたはPNGを使用し、簡単に作成できます。

推奨される寸法。 1280 x 720 ピクセル

推奨されるファイル形式。 JPEG、PNG

デザイナーからのアドバイス:

みなさん、クリエイティブになりましょう! これは、ストリームの一般的なデフォルトのフレームを使用している場合ではありません。 他の Twitch ストリーマーのチャンネルや YouTube でよく目にするサムネイルについて考えてみてください。 あなたの美しいマグカップのクローズアップ、ゲーム中の壮大な瞬間、またはカスタム作品など、焦点が明確でズームインした画像が最も効果的です。

ここであまり時間をかけずに、しかし見落とさないでください。

ここに時間をかけすぎず、しかし見落としてはいけません。VOD は強力なチャネル成長因子であり、優れたサムネイルは投資する価値があります。 Ninja が過去の放送をどれだけ頻繁に流しているかを見れば、明らかに何かがあるはずです!

Twitch VOD Size

Conclusion

さて、これで皆さんはおしまいでしょうか? Twitch に不可欠なすべてのグラフィックの推奨デザインおよびサイズ寸法です。 さあ、顔面騎乗で超傾いた Bob Ross のように、外に出てデザインの世界を征服してください。 筆はあなたの手の中にあり、ストリーマースフィアはあなたのキャンバスなのです。

次のステップに進むために必要なツールはすべて持っていると確信していますが、途中で助けが必要な場合は、プロのストリーム デザイナーのチームが手を貸します。

私たちのプレミアムな無料および既製のTwitchオーバーレイのコレクションは、いつでも自由に使用することができます。

私たちのストリーム サイズ シリーズの次の 2 つのパートをお楽しみに!

それまで、クールな子供たちよ、がんばってください。

愛、

VBI

注意: 私たちは常に、専門のデザイナー、アニメーター、イラストレーターのチームとの仕事を希望しますが、私たちのように、あなたがクリエイティブなタイプであることも認識しています。 自分の手を汚したいと思っている破天荒なイノベーターです。 もし、あなたがデザインをプロに任せたいと思ったとしても、VBIはあなたをサポートします。 また、Twitchのカスタムデザインであなたのキャリアを大きく前進させましょう!

VBIのストリームデザイン、無料のストリームグラフィックコレクションをご覧ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です