ファビコンはあなたのウェブサイトを象徴する表現で、通常はアドレスバーに表示されます。 また、フィードアグリゲーターやブックマークのリストにも表示されます。 ファビコンはWebサイトの重要な要素であるため、優れたファビコンの設計は必須です。
しかし、多くの人がこの要素に注意を払っていません。 ファビコンは通常最小限です。 したがって、ウェブサイトを設計するときに見落としがちです。 ただし、ユーザーがブラウザで複数のタブを開いている場合は、ファビコンを使用してサイトを特定し、さまざまなタブをスクロールします。 ファビコンは、ユーザーが同時に開いている可能性のある他のWebサイトのクラスターからWebサイトを区別する上で重要な役割を果たします。
ファビコンのデザイン vs ロゴのデザイン
ファビコンのデザインは、ロゴのアイデアと非常によく似ているかもしれません。 どちらも会社を図で表したもので、人々がブランドをより迅速に識別し、視覚的なインパクトを生み出すのに役立ちます。 ほぼ同じ機能を提供しますが、2つの間にかなりの違いがあります。
ファビコンのデザインには、ロゴのデザインとは異なる要件があります。 背景、アイコンのサイズ、およびブラウザーの可変性は、ファビコンで留意すべき重要な考慮事項の一部です。 ファビコンは簡単なデザインで機能し、ロゴは表現力を高める必要があるため、一般に多くの要素があります。 したがって、ファビコンを作成するには、ロゴの多くの要素を取り除き、それを簡素化する必要がある場合があります。
Favicon Designには、覚えておく必要のある特定の側面があります。
1.スペースの最適利用
スペースを賢く使うことについて話すと、そもそもあまりありません。 すべてのWebブラウザーでのファビコンの理想的なサイズはわずか16pxです。 これにより、スペースを賢く使用することがますます重要になり、ファビコンが明るく魅力的な方法でデザインされます。 ロゴを大幅に縮小する必要があるため、ロゴに大幅な変更を加える必要がある場合があります。 次のようなさまざまなインスタンスがあります。
ワードマークのロゴを持っている：
タイポグラフィやテキストベースのロゴは、最近その名を馳せています。彼らは時代を超越し、シンプルであるため、ロゴに適しています。ただし、ファビコンデザインについて話すとき、単語ベースのロゴは対処するのが難しい場合があります。ファビコンは小さく、スペースの可用性に制限があります。
したがって、指定されたエリアにブランドの名前全体を収めることは不可能です。このような状況では、会社名の頭文字のみを使用するのが理想的です。文字が少ないほど、デザインはきれいになるため、1つに固執してみてください。ただし、会社に2つの重要な名前または単語がある場合は、2文字の略語を作成します。それ以上のものはクラスター化されているように見えます。
ファビコンのデザインは会社のロゴデザインに忠実である必要があるという事実が課題です。したがって、ロゴをファビコンに縮小し、ファビコンとしてフィットするように再形成する場合は、必ずデザインのコア要素を含めて、同じデザイン言語と外観に準拠していることを必ず確認してください。
見て良い例の1つはVansです。 ロゴは、Vansを表すワードマークのロゴです。 ファビコンを作成する必要があるため、限られたスペースにすべてのキャラクターを含めることはできません。 ロゴに独特の特徴があることに気付いた場合は、頭文字Vです。これには、文字が終了する水平線があり、他の文字の上に表示されます。
Vansのファビコンがどのように設計されているかに注目してください。 ブランドの署名文字であるため、ブランドをVansとしてマークするのと同じ水平線を保持しています。 このようにして、ブランドはブランドのアイデンティティを保持し、ブランドとブランドのロゴに忠実なファビコンも作成します。
ブランドマークのロゴを持っている：
ブランドロゴは、会社を表すためにシンボルを使用するロゴです。 このようなロゴにはテキストがありません。 成功しているブランドであれば、そのようなロゴはすぐに認識されるのに最適です。 また、ファビコンデザインに変えるための理想的なロゴデザインでもあります。
一般に、ロゴをファビコンに必要なサイズに縮小することでうまくいくはずです。 ただし、ファビコンをくっきりと鮮明にするために、いくつかの側面を排除する必要がある場合があります。 そのような状況があるときはいつでも、少なくとも3〜4のバリアントがあり、何が最も効果的に機能するかを確認することが理想的です。
ブランドマークのロゴの良い例がNikeです。 ナイキという言葉を読んでも、すでにスウッシュのロゴを描くことができます。 ブランドは、ナイキに直接関連するスウッシュのロゴのシンボル化に成功しています。 ナイキのロゴはまさにスウッシュです。 したがって、このブランドのファビコンデザインを簡単に作成できます。 同社は、ファビコンのロゴで使用されているのと同じアイコンのサイズを変更したバージョンを使用しています。
象徴的なロゴがある：
象徴的なロゴには、ブランドマークとワードマークの両方のロゴがブレンドされています。 両方の要素を組み合わせ、テキストとサポートシンボルの両方が含まれます。 この良い例がプーマです。 彼らのロゴには、ブランド名PUMAを飛び越えているPumaが含まれています。
ただし、そのサイトにアクセスすると、サイトのファビコンはPumaのみを使用していることに気付くでしょう。 絵の表現はユーザーの間でより多くの保持価値を持っているので、ブランドはプーマのイメージだけを使用し、テキストは省くことにしました。 したがって、ロゴデザインの重要な要素を特定して、それをファビコンデザインにうまく変換するには、一部の要素を削除してもブランドアイデンティティが損なわれないようにすることが不可欠です。
2.ブラウザの互換性に留意する
ファビコンの設計中にほとんどの設計者が見落としたりスキップしたりする重要な要素の1つは、ブラウザごとに異なる要件が機能することです。 タブの背景は、使用しているブラウザーに応じて、黒、白、または灰色になることがあります。 カスタマイズ可能なテーマのサポートにより、背景は任意の色にすることができます。 そのため、ファビコンのデザインをできる限り準備し、徹底する必要があります。
ファビコンの色を注意深く選択し、デザインしたファビコンがPNGファイルとして保存されていることを確認してください。 SVG、GIF、JPGなど、機能する他の多くの形式があります。 ただし、結果を決定することはできません。 したがって、PNG形式を使用するのが最も安全なオプションです。 あなたはもっと注意深く、Microsoft ICO形式を選ぶかもしれません。MicrosoftICO形式は、すべてのブラウザでうまく機能するはずです。
3.目立つファビコンデザイン
ファビコンは、ネットをブラウジングしている限り、いつでも見ることができます。開いている複数のタブがあり、別のタブで作業している可能性があります。ただし、ウェブサイトのタブが開いている場合は、適切に設計されたファビコンが常に注目を集め、サイトに戻る可能性が高くなります。ファビコンは非常に目立ち、存在感が強いため、ファビコンのデザインを目立つようにすることが不可欠です。
これにはさまざまなアプローチがあります。 1つの方法は、他のファビコンからはっきりと目立つ、明るすぎる色を使用することです。ただし、このような明るい色の使用がブランドアイデンティティとうまく合わない可能性がある正式なセットアップ組織にいる場合、このアイデアはうまく機能しない可能性があります。
したがって、ウェブサイトのレイアウトとブランドの美学を補完するファビコンを設計することを常に覚えておく必要があります。別の方法は、さまざまな形やスタイルを利用することです。標準的な形状からの不規則性は、正しい方法で人々の注意を引くためのきずなです。
4.ファビコンデザインのサイズオプション
ファビコンデザインでは16ピクセルのサイズを維持するのが理想的な方法であると以前に説明しましたが、ファビコンを他のサイズで保存することも他の目的にとって重要です。 ICO形式でファイルを保存すると、1つのファイルの下にサイズの異なる複数のファビコンを作成できます。
したがって、常に16 x 16ピクセルバージョンが必要ですが、32 x 32および48 x 48ピクセルバージョンも含める必要があります。ユーザーがブックマークをデスクトップにドラッグする可能性があるため、これは役に立ちます。 ユーザーがこれを行ったときに、ブックマークセクションのファビコンが16 x 16しかない場合、ファビコンはピクセル化され、あまり鮮明ではないように見えることがあります。
ただし、32ピクセルと48ピクセルのバリアントを使用できる場合でも、きれいに表示されます。すべてのサイズについて知りたい場合は、16、32、48、64、128のファビコンを作成できます。
5.モノクロで実験します。
これは目新しいことではありませんが、多くの設計者はこのオプションを忘れています。 小規模なデザインは、単色の配色で見栄えがよくなります。 このルートを進む前に検討する価値のある重要な要素の1つは、ファビコンが同じメッセージを、色の有無にかかわらず伝えることができるかどうかを検討することです。 ファビコンのデザインに色を追加しても価値がないことに気付いた場合は、単色のファビコンデザインを試してみてください。
色を使用するアイコンをデザインする場合でも、ロゴをモノクロで作成し、次に色を追加するのが理想的な方法です。これにより、色がアイコンに文字と関連性をどのように追加しているかを確認できます。
6.デジタル化する前にスケッチする
ロゴ、アイコン、ファビコンのいずれを作成する場合でも、最初に紙にアイデアをスケッチするのが良いデザインの実践です。 完璧な完成版の最終版である必要はありません。 スケッチアウトの目的は、ファビコンを作成するためのガイドとして機能することです。 曲線と線、および消去と編集の自由度は、コンピュータに比べてはるかに多くのスケッチです。
したがって、作成したいファビコンの基本的なアウトラインを作成すると、デジタルで作業を開始するときに、複製したり、インスピレーションを得たりすることがはるかに容易になります。 これにより、時間を節約できるだけでなく、ファビコンのデザインではうまく機能しない形状や要素を作成する労力も節約できます。
7.一貫性が鍵です
ご存知のように、ロゴはブランドの美学とデザイン言語を考慮して作成されることがよくあります。それはあなたのブランドアイデンティティを補完し、それにより多くの価値を追加する必要があります。そうすることで、顧客の心に相乗効果を生み出し、ブランドとの関係を築き、ブランドをより明確に識別できます。
これはファビコン設計の例外ではありません。あなたのファビコンはあなたのウェブサイトとあなたのブランドを補うべきであり、逆もまた同様です。それはあなたの会社が属する業界にも関連している必要があります。統計会社のフォークをファビコンとして使用しても意味がありません。したがって、ファビコンとブランドが表すものとの間の関係を簡単に導き出すことが常に必要です。
どんな訪問者も、あなたのブランドがどのセクターに属しているか、どんなサービスを提供しているか、そしてあなたのニッチへのアプローチかどうかを理解できるはずです。一貫性は、ファビコン、アイコン、ロゴをデザインする上で重要な要素です。
これらは、ファビコンデザインの芸術を習得するための7つの重要な考慮事項でした。ファビコンは、多くのWeb開発者やグラフィックデザイナーから見過ごされがちです。ただし、さまざまなWebサイトを閲覧するときのユーザーエクスペリエンスの重要な要素です。ウェブサイトに付加価値を与えるだけではありません。それはまた、群集から際立つのに役立ち、あなたのウェブサイトに美的で機能的な価値を加えることができます。
おすすめ新着記事
おすすめタグ