ファビコン・サイトアイコンを販売・作成します

ファビコンは重要ーデザインと作成のポイント

【ファビコン・サイトアイコンの重要性】
ファビコン、サイトアイコンはWebサイトのサービスマークやロゴといえる存在です。
このあとは短い言葉のほうのファビコンで解説していきます。

私たちが実際に見ることができるのは以下のシーンなどです。
・PCブラウザの左上に小さく表示される
・スマートフォンで検索したときに、各サイトの左端に表示される

実際には、サンプル画像をもっと小さくしたものです。
これがなぜ重要かというと、特にスマートフォンで検索した場合には、他のサイトとの比較にさらされるからです。
検索結果としてのタイトルはもちろん重要ですが、左端にちらっと見えるファビコンもイラストが気になる方にはアピールとなります。

ここで、ファビコンのデザインや制作について考えてみます。

【デザイン・制作のポイント】
ファビコンのデザインは簡単そうに見えますが、実は結構難しいです。

(1)よろしくないのは、既存のロゴやサービスマークの画像をそのまま縮尺してファビコンにすることです。
これですと、ブラウザを通しての縮小の表示では、たいていの場合は文字が見えずらい、デザイン(かたち)も分かりにくいと認知されます。
つまり、ファビコン専用に改めて作成するか、あるいは既存のファイルをもとに相応の修正を加える必要があるということです。
これは文字だけのロゴの場合でも同様です。

ロゴに忠実でやや見えにくい例:
PCやスマートフォンで以下の企業のファビコンを注意して見てください。
全日空: ANAトップページ
日本航空: JALトップページ

おそらく、いずれも早期に改善されると思われます。
大人ですと慣れしたしんだサービスマークなのですが、子供などはそのようなことはわかりません。
将来の顧客となり得る彼ら・彼女らからすれば、この後に解説する他の企業のファビコンのほうが良く見えてしまうかもしれません。

(2)続いて、カラーです。これもそのままのものを使うと映えません。
スマートフォンなどでブックマークにすると、ファビコンが少し大きく見えるので、他のサイトのファイビコンとの見栄え争いとなります。
そのときに、スマートフォンやPCで「映える」カラーであることはとても重要なのです。
ここでは、逆によくよく研究している企業の例を挙げておきます。

日本マイクロソフト: 日本マイクロソフト トップページ
この配色は多くの企業がお手本とすべきかと感じます。グーグルの「G」なども同様です。

カラーの重要性を理解するためには、この下のファビコンの例はわかりやすいです。

好みが分かれるところですが、どちらも見栄えはします。(いずれも販売中のファビコンです!)
4色以下が間違いありませんが、一般的にはシンプルな2~3色が妥当なところです。

(3)文字(テキスト)。実はこれも重要です。
一般に提供されているフォントの、太さや文字間隔ですと、詰まった感じやスカスカ感が出ます。
ここでもよくよく研究している好例を挙げておきます。

価格.com: 価格.com トップページ

文字中心としては特筆すべき好例です。
ファビコンを拡大してみると、実はロゴマークと微妙に文字の配置などが異なることがわかります。
もう少し突っ込んだ話をすると、普通にフォントを使うとこのようには出来上がらないということです。

この下の例でも、配置やカラーを変えています。「ファビ」と「コン」で文字の間隔が異なるのがわかあります。

(4)賛否両論ありますが、イメージが見ている人に伝わるかどうかです。
例えば、次の3社の例を見てください。

IBM: IBM トップページ
日立製作所: 日立製作所 トップページ
NEC: NEC トップページ

それぞれが、きれいなファビコンに仕上がっています。さすがは大手企業といった印象です。
IBMは蜂のマーク、日立は重電企業らしいマーク、しかしながら、この3社だけで見ると、分かりやすいのはNECだったりします。
知っている大人は知っていますが、むしろ誰でもすぐにわかるNECが優れていると思うのは私どもだけでしょうか。

テレビのコマーシャルのようにストーリーが伝わるのであれば、イメージのロゴは素晴らしいですが、単純にWebページを見るだけであれば、わかりやすいほうがいいかもしれません。

(参考)上記を踏まえて、さらに、見ていただきたいのは有名な流通業の以下などのサイトです。

ユニクロ: UNIQLO トップページ
イオン: イオン トップページ
三越伊勢丹、ほか

比べていただくと、ユニクロがダントツで見やすいことがわかります。
実はユニクロは、単独のECサイトとしては、Amazon、ヨドバシカメラ、ZOZO、ビックカメラなどとともに Best 5 に入る存在です。

【ファビコンはWebビジネスへの姿勢を示す】
上記のように各企業や店舗の例を見ていただくと、Webビジネスに注力している企業のファビコンは秀逸であることがわかります。

つまり、

「Webビジネスに力を入れている企業や店舗 ≒ ファビコンがきれい・クール・印象的」

という図式が成り立ちます。力の入れ具合と相関関係があるともいえます。
逆の言い方をすれば、ファビコンが見劣りする企業や店舗は、まだWebビジネスに本腰を入れていないともいえます。

Webサイトそのものがクールなのに、WorePressのWマークが表示されている企業や店舗などもあります。
印象の薄いファビコンを使っているのはもったいないことです。

【ITzoo.jpとファビコンの関係】
ところで、ITzoo.jpでは、WebサイトやWebシステムの構築のお手伝いをしています。
そのなかで、Webサイトのお手伝いをした企業や店舗へのサービスとして、ファビコンのデザインや制作もしてきました。
これ自体はとても評判が良かったのですが・・・

私どもでは、上記を踏まえたデザインを心がけて作成しています。

たいていは、異なる2つのデザイン案を提示しております。
しかしながら、お客様のお好みで採用されなかったファビコンのなかにも、なかなか良いものがあります。

今般、それらを順次販売していくこととしました。
もともと企業や店舗向けに作成したファビコンです。

【販売するファビコンのファイル形式】
WordPressの「512 × 512 」に適したPNGファイルでご提供します。
(ほんの少し大きめで、角丸四角形で切り抜いたときにちょうどよいかたちに仕上げております。)

WordPressで、具体的には以下のようにして公開します。
外観 > カスタマイズ > サイト基本情報
サイトアイコン > 画像を選択 > 画像を切り抜き
この画像の切り抜きを計算してデザインするのがポイントなのです。

【どこから選ぶか】
メニュー > 素材 >ファビコン or
検索ボックスで、ファビコン などと入力してください。

販売しているファビコンの一例 住宅・不動産販売・建築会社向け
(先ほどのワイングラスも販売中です!)

特にWorePressのWマークが表示されている企業や団体、個人の方などにはお勧めです。
それぞれが、実際のサイトのWordPressで表示して確認済みのファビコンですので、すぐにお使いいただくことができます。