ファビコンってどんなデザインにすればいいの?他のサイトはどんなのを使っているの?と検索したいのに、なかなか出てこなかったので、私がまとめてみました〜!
今回紹介するのは世の中でよく見るwebサイトや、ゲーム公式サイトなど計100個以上になります!「よく見るwebサイト」「ゲーム公式サイト」に分けて紹介していきます。
ENTACLではEWS(https://entertainment-web.site)にて国内を中心とした最新のゲーム・アニメサイトの情報を毎日更新・紹介しています。
その中から毎月編集部が気になるサイトをピックアップしてお伝えしています。
ENT+と合わせてEWSもチェックしてみてください!
ファビコンとは?
まずファビコンとはとは、、、なんぞや?ということで、解説していきます。
ファビコンとは、webサイトの顔と言っていいかもしれません!
たくさんのタブを開いているとき、ファビコンがあると一瞬でそのサイトに移動できます。
ファビコンがあることのメリット
ユーザーにストレスなくサイトを探すことができる
行き来していると無意識に企業ロゴを覚えやすい
信頼度が増す(細かいところですが、ファビコンがあるだけで信頼度がグッと高まります。)
ファビコンのサイズ
現在では約20種類ほどサイズが展開されています。ですが、wordpress4.3以降のバージョンでは512px×512pxのみの作成で全て対応してくれるようになりました。
それでは、ファビコンの分析に入りましょう!
100個以上のファビコンを分析!
一般的な企業サイトのファビコン
まずは、ファッションサイトや、ツール、食品サイトなどみなさんが日頃よく見る一般的な企業サイトから分析していきます!
見覚えのあるものが多いのではないでしょうか?ファビコンとアプリアイコンを同じデザインにするとweb上でも探しやすいので助かりますね!
参考として4社のファビコンとロゴを並べてみました!
初めの方で書いたように企業の認知につながるので会社の企業ロゴをファビコンにするのは一般的だと言えます!
企業ロゴをリデザインしたファビコン
ファビコンのサイズに合わせてもともとあるロゴを組み替え、みやすく、コンパクトにリデザインされたデザインです。
正方形の中に綺麗にまとまっているデザインは見ていて綺麗ですね!
正方形のファビコンを集めていると、文字のみで作成されている企業ロゴが多い印象でした。
企業の代表作・エンブレムを用いたファビコン
企業の売れ筋商品や、人気キャラクターをファビコンにしているサイトが結構ありました!
見覚えのあるキャラを見ると「あっ!」とすぐ企業を思い出せるのがいいですね!
左上にある永谷園さんのファビコンは、有名なお茶漬けのデザインですね!一人暮らしの私は大変お世話になっております(T ^ T)
参考:永谷園
隣のファビコンは不二家さんのペコちゃんですね!
不二家さんはミルキーなど代表的なお菓子がたくさんありますが、やはり昔から親しまれているペコちゃんはシンボルとして強いですね!
参考:不二家 ペコちゃんの部屋
そして一番右のBB-8はもちろんstar warsですね!
BB-8が新キャラとして登場した時は可愛くてみなさんも印象に残っているのではないでしょうか??
サイトを開いているときはひょこっと覗いているみたいで可愛いですね(^^)
参考:star wars
最後に印象的だったのは、右から2番目のTIFFANY&Co.です!
ティファニーといえば、ティファニーブルーですね。代表的なカラーをファビコンにするはなかなかないですね!広い年齢層に愛されていて、知名度があるからこそできることなのかもしれないですね!
参考:TIFFANY&Co.
次はゲーム公式サイトで分析していきましょう!
ゲーム公式サイトのファビコン
ゲームのロゴ・ロゴの一部を使ったファビコン
企業ロゴと同じく、ロゴの一部を使用したファビコンはやはり多いですね!
企業のロゴとゲームロゴで少し違うのは、ゲームの特徴を表現したデザイン部分をファビコンにしているところですね!
左側の「超探偵事件簿レインコード」は火の玉のようなデザインがロゴに入っており、それがファビコンになっていますね。
右側の「ホグワーツ・レガシー」は「W」のところに魔法のようなデザインが入っていて、それがファビコンになっていますね!
ゲームのイメージキャラを使ったファビコン
小さい頃からずっと遊んでいるあのキャラクターや、グラフィックがすごいオープンワールドのあのゲームなど!見覚えのあるキャラクターがたくさんいますね〜
ゲームの代表的なキャラがファビコンになっている中、あえてメインキャラではない「愛されキャラ」のようなキャラクターをファビコンにしているサイトもありましたね(^ ^)可愛くてほのぼのします〜!
ゲームのシリーズ系ファビコン
ゲームならではのシリーズもの作品!数字だけじゃわからなくない、、、?と思ったけど案外フォントの雰囲気やカラーリングでわかるもんですね(笑)
「龍が如く8」は今までのシリーズものと同じように筆で書かれていて力強い印象です。
「TEKKEN8」は規則性のある感じで、グランジや傷のようなテクスチャが付けられています。
シリーズものをファビコンにするメリットは、作品を検索する時にサイト名とファビコンが最新のものを表示してくれるので、すぐわかるというところですね!
ゲームの中のモチーフを用いたファビコン
企業サイトのファビコンにも多かった代表的なデザインは、ゲームでも多いですね〜
ファビコンを見て「何のゲームサイトでしょう?」ゲームをしたら楽しそうですね!(笑)
みなさんはいくつわかりますか〜!?
私が大好きな「アンダーテール」は素敵なファビコンですね(T ^ T)
見ているだけでケツイがみなぎりそうですね、、、
続いて「桃太郎電鉄 ~昭和 平成 令和も定番!~」のファビコンは可愛らしい桃ですね!
ロゴには入っていないですが、サイトを見るといろんなところに桃のデザインが散りばめられています。
変わったファビコン紹介
いろんなファビコンを紹介してきましたが、次は変わったファビコンを紹介します!
FavIconTris
ファビコンで戦うテトリス!?こんな小さい画面でできるの、、、って感じですが、ギリできます(笑)
参考:FavIconTris
私が実際に操作している画面です。操作の仕方は十字キーの→←で移動、↓で方向転換、スペースで下まで落とす です。
面白いのでぜひやってみてください!
面白法人カヤック
参考:面白法人カヤック
珍しくgifで作られたファビコンです。面白法人カヤックさんのロゴがまるで生き物みたいに歩いているのが可愛いです!
ファビコンを作るコツ
最後に、ファビコンを作る時のコツについてです!
今まで見ていただいたようにファビコンは小さい、、、画像で保存してアップデ見たらなんだかわからないことが多いので以下のことを注意して作成しましょう!
色を多く使わない!
ドットを意識!
背景はなるべく透過!(ダークモードの際に目立つため)
資格を意識して作成!
まとめ
今回はファビコンを集めに集め、分析してみました!
よく見るサイトがたくさんあったのではないでしょうか。ファビコンまで工夫されている企業はそれだけで信頼度が増しますね!
ファビコンを作成することがあったら参考にしてみてください!
ENTACLGRAPHICXXXでもゲーム・アニメ系のエンタメ系サイト制作を中心に様々なクリエイティブを制作しています。
ENTACLGRAPHICXXXオフィシャルサイト
サイトに掲載されていない実績も数多くございます。実績のお問い合わせ等はこちらから