ウェブサイトに最適なロゴサイズはどれくらいですか？

公開: 2020-10-15

ブランドのロゴは、ウェブサイトの小さなファビコンから、混雑した高速道路の巨大な看板まで、さまざまな場所に配置する必要があります。 Webサイト内でも、ロゴを配置する場所はさまざまで、向きやサイズもさまざまです。また、ロゴを使用するたびに、またはifのバリエーションを使用するたびに、一貫性があり、鮮明で、認識できる必要があります。

最初から必要となるさまざまなロゴのサイズとサイズがわかっている場合は、それをWebサイト、ソーシャルメディア、印刷物、その他すべてのブランドの販促素材に追加する方がはるかに簡単です。

私たちのYoutubeチャンネルを購読する

ロゴのバリエーション

ほとんどの場合、ロゴには、会社名、アイコン、スローガンの3つの要素があります。または、ロゴは、画像または記号とタイポグラフィまたはワードマークの2つの主要なコンポーネントで構成されていると考えることができます。最終的には、これらの要素を一緒に使用することも、別々に使用することもできますが、どのように配置しても、ブランドを反映する必要があります。

デザイン、寸法、向き、形、サイズに関しては、1つのロゴにいくつかのバリエーションがあります。あなたがロゴを使用する文脈-私たちの目的のために、それがあなたのウェブサイトに行く場所-はあなたが選ぶロゴのバージョンを決定します。また、ロゴを異なる背景やサイズに適合させるたびに、その整合性を維持することが目標です。

Webサイトや他の場所で使用するために作成することを検討する必要がある一般的なロゴのバリエーションは次のとおりです。

水平、正方形、垂直
黒、白、フルカラー、インバースカラー
通常の背景と透明な背景
完全なロゴ、アイコンのみ、限定されたテキストまたは1文字/モノグラム

作成するさまざまなロゴのすべてと、それらを使用する場所の詳細も、ブランドキットに含める必要があります。また、ロゴのバリエーションを自分で作成していない場合は、それらを作成している代理店またはデザイナーが、元のプライマリロゴと一緒にすべてのバリエーションを送信する必要があることを知っておいてください。

ロゴファイルの種類

ファイルタイプは、拡大および拡大されたときのロゴの外観に影響します。スケーラブルでないファイルタイプを使用してロゴを作成すると、大きくなるにつれてぼやけてピクセル化されたように見えます。あなたはこれを望んでいません-あなたはそれが小さいか巨大であるかどうかにかかわらず、あなたのロゴが詳細で完璧に見えることを望みます。

品質を損なうことなくロゴをスケーラブルにするには、ベクター形式である必要があります。できればPNGファイルとして使用する必要があります。 PNGはロスレス圧縮ファイルです。つまり、ファイルサイズはかなり小さいですが、デザインの品質は維持されます。また、PNGファイルで透明な背景を使用することもできます。これは、Webサイトやその他のデジタルスペースに最適です。オンラインでロゴを表示する場合、読み込み時間を短縮するために、PNGファイルは200KB未満である必要があります。

あなたはJPGファイルに精通しているかもしれませんが、ロゴにJPGを使用したくありません。この種類のファイルは非可逆圧縮ではなく、ロスレス圧縮されています。ファイルサイズが少し小さいため、PNGよりも占有スペースは少なくなりますが、品質が低下し、特に拡大しようとすると、ロゴがピクセル化されて見える場合があります。

あなたのウェブサイトのロゴサイズの選択

あなたのロゴはあなたのウェブサイトの2つの主要な場所に行きます：ファビコンとナビゲーションバー。それらの場所の特定の寸法を調べてみましょう。

ファビコンロゴサイズ

ファビコンのような小さなスペースでは、領域が小さすぎてテキストが読めないため、アイコンのみのロゴを使用する必要があります。または、ロゴが単語の場合は、単語の最初の文字を使用するか、2つ以上の単語がある場合はモノグラムバージョンを使用できます。以下の例では、ギフトカードの一部を含むさまざまな場所で使用されているAmazonの1文字のロゴが表示されます。

出典：アマゾン

PSファビコンは、検索バーのWebページのタイトルの横に表示される小さなアイコンであり、ブックマークやお気に入りリストに表示されるものでもあります。

ファビコンのロゴサイズ

標準のファビコンサイズは次のとおりです。

16 x 16ピクセル（最も一般的）
32 x32ピクセル
48 x48ピクセル

ナビゲーションバーのロゴサイズ

あなたのウェブサイトのナビゲーションバーまたはヘッダーはあなたのロゴのホームになります-おそらく完全な、標準的なものです。通常、ロゴはナビゲーションバーの左側に配置されます。

ロゴサイズのナビゲーションバー

正確なサイズは特定のWebサイトビルダーによって異なりますが、サイズオプションはおおよそ次のようになります。

フルバナー：468 x60ピクセル
水平レイアウト：250 x150ピクセル; 350 x75ピクセル; または400x100ピクセル
垂直レイアウト：160 x160ピクセル

これらは実際のヘッダーのサイズではなく、ヘッダーは大きくなりますが、これらのタイプのWebサイトヘッダーに合うようにロゴをデザインするときに考慮すべきサイズです。

ロゴを使用するその他の場所

ウェブサイトのロゴのバリエーションを作成する場合は、他の場所にも必要なバージョンを作成するのも良い時期です。例えば：

デジタル広告とバナーにはロゴが必要です。
ソーシャルメディアでは、背景、バナー、カバー写真、プロフィール写真、投稿、サムネイルにロゴが必要です。
物理的な素材を販売するオンラインショップを持つブランドの場合、磁石、マグカップ、またはTシャツにロゴを印刷する必要がある場合があります。
物理的な材料を販売または送付する場合は、箱、封筒、場合によっては梱包用テープなどの輸送材料にロゴを配置します。

Canvaのようなツールには、Facebookのカバー写真やInstagramのストーリー投稿など、さまざまな場所のグラフィックに最適なサイズのすぐに使えるテンプレートがあります。ロゴをテンプレートにポップして、最終的なデザインをダウンロードして、必要な場所で使用できます。

あなたのウェブサイトのロゴサイズについての最終的な考え

ロゴ、そのバリエーション、およびWebサイトのどこに配置するかについては、これが創造的でデザイン中心であることを忘れないでください。従わなければならない厳格なルールはありません。そして、それは完璧な科学ではないので、芸術的な目と最善の判断を使用して、どこで何を使用するかを決定できます。あなたのロゴはあなたの会社について多くのことを伝えます、そしてそれは聴衆の認識に影響を与えるあなたのブランディング要素の1つです。どこで使用しても、クリアで高品質に見えるはずです。

あなたのロゴは準備ができていますか？ Diviでカスタムロゴ画像を追加する方法は次のとおりです。また、Diviでロゴを表示するためのシンプルでクリエイティブな方法を備えた記事もお気に召すかもしれません。

Mas Blend /shutterstock.comによる注目の画像