Discordバナーのリサイズ
Discordは2つの異なるバナーを使用しています:プロファイル用の680×240(17:6)とサーバー用の960×540(16:9)です。ここで一度切り抜くと両方が一緒にエクスポートされ、アバターサークルと名前ブロックがプレビュー上に描画されるので、重要な部分がそれらの後ろに隠れることはありません。
PNG、JPG、WebP、GIFをドロップ
ページのどこにでもドロップできます · ファイルを選択 · 100 MB
対応形式: PNG, JPG, JPEG, WebP, GIF, AVIF
Discordバナーのリサイズとは
ほぼすべての「Discordバナー」の問題は同じ間違いから来ています:バナーは2つあるのです。アバターの後ろにあるプロファイルバナーは680×240、ワイドな17:6のレターボックスです。チャネルリストの上に表示されるサーバーバナーは960×540、通常の16:9です。デザインファイルでは似て見えますが、一度アップロードすると全く異なって動作します。
Discordは間違った形状のバナーを拒否しません。代わりに中央から切り抜きますが、それはさらに悪いことです――プロファイルスロットに16:9の画像を入れると、上下から約3分の1の高さが失われ、取り込まれる部分はちょうど中央にあったものです。端に近いロゴがあるアートワークは、ロゴが半分に切れて戻ってきます。
このページでは両方のフレームを保持し、一度の切り抜きから両方をエクスポートし、Discordが上に重ねるものを描画します:左下隅に重なる円形のプロフィール画像と、その横にあるユーザー名ブロックです。実際のプロファイルで残る部分はデザインファイルで残る部分と同じではなく、その違いはアップロード前に確認しておく価値のある部分です。
必要なサイズがDiscordのものではなく独自のものの場合、一般的な画像切り抜きツールでは任意のピクセル矩形を入力できます。
複数の場所で一度にアートをフォーマットすることは一般的で、他のプラットフォームのリサイズツールにはTwitch、Roblox、Etsyなど、同じ正確なフレームが用意されています。
両方のバナーサイズとそれぞれの場所
2つのフレームは異なる場所で使用され、どちらも他の代用にはなりません。両方をエクスポートして保持してください;運営するサーバーと所有するプロファイルの両方が、いずれどちらかを必要とします。
| バナー | サイズ | 比率 | 表示場所 |
|---|---|---|---|
| プロファイルバナー | 680 × 240 | 17:6 | 自分のプロファイルカードでアバターの後ろ |
| サーバーバナー | 960 × 540 | 16:9 | チャネルリストの上、ブーストされたサーバー用 |
| サーバー招待スプラッシュ | 1920 × 1080 | 16:9 | 招待リンクのプレビューの後ろ |
プロファイルバナーの上に重なるもの
プロファイルバナーは全体として見られることはありません。円形のアバターがその左下隅に重なり、ユーザー名、タグ、バッジがその円のすぐ右に配置されます――これらで左下の大部分が覆われます。
上のプレビューでは両方が描画されています。これから導かれる実用的なルール:読み取る必要のあるものを左下の3分の1に配置しないこと。顔、ロゴ、テキストは右上にあり、構成としてではなくテクスチャとして読み取れる背景が重なりを最もよく乗り切ります。
- アバターサークルはバナーの左下隅に重なり、円にマスクされるので、角の詳細が2重に失われます。
- ユーザー名ブロックはアバターから右に伸び、下半分のほぼ中央を横切ります。
- バッジとステータスドットは円の内側と周りに配置されるので、その直後の細かい詳細は完全に消えます。
なぜ16:9の画像は17:6の切り抜きを生き延びられないのか
17:6は2.5対1、16:9は約1.78対1です。プロファイルフレームは高さに対して幅がはるかに広いので、16:9の画像をそこに収めるには上下を切り捨てる必要があります――高さの約29%――または両側をパディングしてフルブリードの外観を完全に失います。
どちらの結果も間違いではありませんが、選択はあなた次第です。フレームいっぱいに切り抜くツールは、どの部分を中央に保持するかを選べます;画像全体を合わせるツールは背景色でパディングしてすべてのピクセルを保持します。最初のオプションしか提供しないツールは、あなたに代わって決定しています。
フォーマットとファイルサイズ
フラットな色、鮮明なエッジ、テキストがあるアートワークにはPNG、JPEGのリングがすべての文字周りに表示されるのでJPEGは不向きです。写真的なバナーにはJPEGが適しており、同じ見た目の品質で劇的に小さくなります。WebPは受け入れられ、さらに小さくなりますが、後で再アップロードする可能性のある誰かに渡すにはPNGやJPEGの方が安全です。
アニメーションバナーはNitro機能でありGIFが必要ですが、このツールは生成しません――静止画像をフォーマットします。このツールができることは、アニメーターが必要とする正確なフレームサイズを準備することです。
よくある質問
Discordのプロファイルバナーのサイズは?
680×240ピクセル、17:6の比率です。これはDiscordがプロファイルカード上で表示するサイズであり、異なる形状の画像は拒否される代わりに中央から切り抜かれて適合します。同じ17:6比率で大きくアップロードするときは、余裕を持たせるために1360×480が適切なソースです。
なぜDiscordは私のバナーを切り抜くのですか?
渡した画像がスロットが期待する比率ではないからです。Discordはレターボックス化する代わりにフレームを埋めるので、画像の中央部分を取り込み、残りを捨てます――画像が高すぎる場合は上下、広すぎる場合は左右です。ここで意図的に切り抜くことで、どの部分を保持するかを選択できます。
サーバーバナーはプロファイルバナーと同じ画像ですか?
いいえ、一方をもう一方に再利用することは最も一般的な間違いです。サーバーバナーは960×540で16:9比率で、チャネルリストの上に表示されます;プロファイルバナーは680×240で17:6比率で、アバターの後ろに表示されます。このページから両方をエクスポートし、別々のファイルとして保持してください。
アバターがアートワークの一部を覆いますか?
はい。円形のプロフィール画像が左下隅に重なり、ユーザー名ブロックがその右に伸びます。両方が上のプレビューに描画されるので、切り抜いている間に重なりを確認でき、後から発見する必要がありません。読み取る必要のあるものを左下の3分の1から外してください。
画像はリサイズするためにどこかにアップロードされますか?
いいえ。デコード、切り抜き、リサイズ、エンコードのすべてがこのブラウザタブ内で行われ、確認できます:DevToolsを開き、ネットワークパネルに切り替えてエクスポート――ファイルを運ぶものは一切表示されません。ページのContent-Security-Policyはいずれにせよ送信要求をブロックします。
ここでアニメーションのDiscordバナーを作成できますか?
ここではできません。アニメーションバナーはGIFが必要でNitro機能です;このツールは静止画像をPNG、JPEG、WebPにフォーマットします。それでも最初のステップとして有用です――680×240または960×540の正確なフレームをエクスポートし、そこからアニメーションを作成するので、モーション作業を開始する前に寸法が正しいことが保証されます。