faviconのストイシズム

favicon デザインする上で一番大切なのはブックマークの一覧やタブブラウザに並べられた複数のタブの中にあって、すぐにそれと識別できるかどうか、ですよね。さっき、あるいは、いつか見たあのサイトのことだって、横に添えられたタイトルを読みとるしかない場合よりも手っとり早く。

だから、一番やっちゃいけないと思うのは、それ自体をひとつの独立した作品のように考えて、なにかまったく新しいビジュアルアートを拵えてしまうことですね。わー、いつのまにかこんなところに見たこともないすてきな favicon があるー！なんて喜ぶ人はいないわけで。

こういう言い方をすると、そんなまさか、と思われるでしょうが、けっこうやってしまいがちだと思うんですよ。

たとえばちょっと前に Google の favicon が変わったと思うんですけど、あれ、混乱しませんでした？ だって、紫色の小文字の g って、そんなイメージ、サイトの本体のどこにもないわけで、あれを手がかりに Google のことをぱっと想起するのは難しいでしょう。ユーザにしなくても済む学習を強いてますよね。それとも、あれですか、今後に控えてる大きなデザインリニューアルの先触れなんでしょうか。それにしても、favicon の機能をまじめに考えれば、それはやっぱり順番が違う。

まあ、Google の場合は、使う回数が半端ではないので、そういう UI 学習もあっという間に済んで馴染んでしまいますけどね。でも、ぼくらが制作しているようなサイトではちょっとありえないやり方だと思います。Google だけに許された殿様デザイン。真似しちゃいけません。

では、われわれはどうすべきでしょうか。

存在意義から考えても、サイトIDの縮小版でいけるならそれが一番ですよね。しかし、たいていの場合、サイトIDをいくら縮小しても 16x16 にはおさまりません。

すると、まずやってみようと思うのは、サイトIDの形状のうちで、もっとも個性的な部分を切り出してみることでしょうか。

サイトIDにあしらっているシンボリックなマークだとか、ロゴのうちでも特にクセをつけている部分とか。

ただ、サイトIDから切り取ったその自慢の一部分が、本当にユーザに強い印象を残せているのか、あるいは、本当にその一部分で全体を代表させることができるのか、一度疑ってみる必要はあると思います。

たとえば、DELL のサイトの favicon は、DELL　のロゴのEの部分、あの斜めに傾けて図案化されたEなんですけど、あそこだけを切り取ってみせられても、それが DELL の E だなんて、いわれてみないとわからないかもしれません。実はブックマークに入れたのを後で見て、ぼくは一瞬わかりませんでした。

いや、DELL の E が、それだけの状態で、サイトのいたるところ、目につきやすいところに繰り返し出現していれば、favicon を見たときに、おお、あれこそはたしかに DELL のサイトの一片だって思えたかもしれません。でも、こっちはロゴのゲシュタルトしか見ていないわけで。あの E のところだけで再認を求められてもってかんじです。

それならいっそ、サイトIDと同じフォントと色で DELL の D を favicon にしてもらったほうがわかりやすいと思います。

それじゃあ、デザインのやり方としてあんまり安直だし、ちょっとまじめすぎてつまんないなんて思われるかもしれませんが、favicon の要件の第一は、あのサイトのことだってわかってもらう機能性にこそあって、それでサイトのトーン&マナーに新しい価値を付け加えることじゃないわけですから。

アイコンとしての表象性や再認性を実現するもっとも確実な方法は、音韻と色調に頼ることだったりするんですよね。

だって、サイトのタイトルってちゃんと覚えてなくても、頭文字や一部を提示されると、ああ、そうそう、それそれ、そんなかんじってなりますよね。

それから、サイトの全体のトーンを決定づけているカラーというのは、やっぱり心に残るもんで、ほら、なんだっけ、あの CSS リファレンスの黄色いサイト、なんていう人、結構多くないですか。

キャラがあったりするとまた別なんですけど、アイコンにとっての"絵"は、そのへんに実はあんまり貢献してくれないんですよね。

favicon を作るときは、そのへんをわきまえつつ、結構ストイックに取り組むべきかも知れないなって思うんです。なんか、かっこいいのが欲しくなっちゃうんですけどね。

-----------------
sent from W-ZERO3