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サイトを運営をしていくには、ファビコンのような細かい部分も意識していくようにしたい。


【著者からの一言】

profile

鍵谷 隆 -KAGIYA TAKASHI-

当記事は2016年ごろ、私がECサイトのコンサル経営をしていた時期にまとめたノウハウ集だ。そのため外部サイトへのリンクが切れていたり、Googleや各種ASPなどの外部システムの仕様変更などで状況が変わっている可能性があることだけは了承してくれ!

ただ商いの本質は変わることはない。ネットショップ運営でお困りの経営者や担当者なら、当サイトの記事も必ず役に立つはずだ。全てのEC関係者に幸あれ。検討を祈る!