カスタムバッジ画像のガイドライン

カスタムバッジ画像をデザインチームに依頼する予定です。

その前に、その画像が従うべきガイドラインを知っておくと便利です。:sweat_smile:

当然ながら正方形ですよね。他に何かありますか?画像形式は?解像度は?…?

「いいね!」 1

良い質問ですね!

バッジは通常、約14x14、16x16、または56x56ピクセルで表示されます。
サイズは、要素のフォントサイズに対する相対的なものであるため、変動する可能性があります。
しかし、目標とする基本的なサイズを把握するのに役立ちます。

また:

  • 1:1の比率
  • スケーリングにはSVG、大きな画像には透明なPNGを使用します。表示したい内容によって異なります。
  • 配色についてはダークモードを考慮してください。
  • 必要に応じてバッジの種類を考慮してください。
  • 小さなサイズでどのように表示されるかを考慮してください。

現時点で思いつくのは以上です。

カスタムSVGアイコンを作成することも検討できます。もし私の理解が正しければ。そうすれば、適切な色でうまくスケーリングされ(後で変更するのも簡単です)。

お役に立てば幸いです。

「いいね!」 5