ファビコンの概要と作り方

ECサイトの個性を表現!ファビコンの概要と作り方について


ECサイトの個性を表現する方法としては、こちらの「ネットショップの世界観を印象付ける3つのデザイン要素」でも説明しているように、ショップロゴを用意したり、特殊なフォントを利用してみたり、メインカラーを設定するなどの要素があるが、決してそれだけではない。

あまり聞きなれない言葉ではあるが、ファビコンをご存知だろうか。ファビコンはECサイトの個性を表現する要素の一つになるのだが「いったい何のこと?」という方のために、今回はファビコンの概要と作り方についてご説明していく。

 

ファビコンとは

ファビコンとは

上図の赤枠内にあるマークのことを、ファビコンと呼ぶ。ファビコンという名前を知らなくても、これを見れば「あーこれのことね」と思ってもらえるのではないだろうか。

ブラウザによって表示場所は異なり、URL横やタブに表示されるのが一般的。またブックマークのアイコンとしても使われる。ウェブサイトのシンボルマーク的な扱いである。

ちなみにファビコンとは「favorite icon」の略語である。

 

ファビコンを用意する理由

ファビコンを用意したからといって劇的に売上げや問い合わせが増加するわけではないが、「塵も積もれば山となる」と言うように、小さな仕組みの積み重ねが大事なのである。

ファビコンを用意するメリットとしては、少しでもユーザーに認知してもらいやすくなるところが大きい。ファビコンを見てなんとなくサイトの雰囲気を把握したり、どのようなサイトなのかを判断することができる。無意識的に視覚に入ってくる情報ではあるが、刷り込み効果を狙うといった意味でも効果的である。

また近年のウェブブラウザは、各ページをタブによって管理しているため、複数のタブを開いている場合でも、ファビコンがあることによって、何のサイトなのかを瞬時に判断することが可能になる。それにファビコンはブックマークアイコンにもなるので、数あるブックマークサイトから、自サイトを探してもらいやすくなる。

 

シンプルなデザインがいい

ファビコンは決して大きなサイズで表示されることはないので、デザインは簡素なものになりがちだ。逆にごちゃごちゃとしたファビコンを作ってしまうと、なんだかよくわからないものになってしまうので注意してほしい。

ファビコンを作る上で意識するべきことは、シンプルでありながら印象に残り、サイトの概要を表現するものであること。言葉にして説明するのは簡単だが、実際にこれらの要素を含んだファビコンを作るのはそうそう簡単なことではない。

 

ファビコンの作り方

ファビコンの作り方

ファビコンについての知識を得たところで、その作り方についてご説明していく。

 

サイズについて

ファビコンのサイズは「16px、32px、48px、152px…」などの決まりがあり、どのサイズを用意するかは、用途によって変わってくる。例えばIE(Windows標準のウェブブラウザ)では16pxが使用されていたり、デスクトップのショートカットには48pxが使用されたりするが、弊社ではひとまず多くのブラウザで推奨されている32pxのものを用意しておけばよいと考えている。

 

拡張子について

拡張子とはファイルの種類を表すものであり、画像ファイルなら「.jpg」や「.png」といった文字列のこと。

ファビコンの拡張子は少々変わっていて「.ico」となる。これはIEが推奨している拡張子であり、IEのバージョンが低いと「○○.ico」のファイルしかファビコンとして認識してくれない。IEを利用しているユーザーもまだまだ多いので、ファビコンとしては「○○.ico」のファイルを用意しておくのがベターだ。

 

作り方について

ファビコンを作る方法としては、イラストソフトを利用する方法と、ウェブサービスを利用する方法の2種類が存在する。

 

イラストソフトを利用するなら

使用するソフトはプロ御用達のIllustratorや、無料ながらも高機能なGIMP。このどちらかのソフトを利用していれば、ico形式のファイルを生成することができる。社内でデザインまで行っている企業なら、この方法でも対応が可能だろう。もしこうしたソフトを利用できる環境がなくても、後述するウェブサービスを利用する方法がある。

 

ウェブサービスを利用するなら

ico形式のファイルが作れなくても、pngやjpgなどの画像をico形式に変換するウェブサービスが存在する。

ファビコン favicon.icoを作ろう!

上記のサイトにアクセスして操作を行うことで、16px、32px、48pxのファビコンを作ることができる。操作方法も簡単で、元画像をアップロードして”favicon.ico作成”のボタンを押すだけ。元画像としては「PNG, GIF, JPG(JPEG), BMP」のファイルに対応している。

 

おわりに ファビコンでオリジナリティを発揮しよう

もし現状でファビコンを設定していないのであれば、ファビコンを用意するとよいだろう。ユーザーに対してサイトが認識されやすくなり、個性も表現できる。

ユーザーに愛されるECサイトを運営をしていくには、ファビコンのような細かい部分も意識していくようにしたい。

↑↑当記事が役になったならシェアしてもらえると嬉しいです!↑↑

 


【記事を書いている人】

profile4

鍵谷 隆 -KAGIYA TAKASHI-

国内向け通販事業、海外向け越境ECを経験して培った知識を活かし、ネットショップ事業者向けに売上げを伸ばすための提案を行っている。特に好きなのは、伸びしろのあるECサイトの販売戦略を考えていくこと。

当ECメディアに掲載している数々の記事が、全国のショップオーナー様のためになれば幸いです。大切にしていることは「売れないショップはない」です。

 

ネットショップのメディア化対応やってる?

ネットショップの開業や集客・売上げ増にお悩みでは?
新規参入企業の増加やリスティング広告の高騰で、集客しづらくなっていますよね。

ECサイトのメディア化対応していますか?
メディア化対応することで、集客とリピーターの問題は解決!

もしメディア化対応をしていなければ、売上げの多くをロスしているかも…
詳細については下記のボタンよりご覧ください!

メディア化対応について知る