このサイトの「ファビコン」のデザインについて考えてみる。
ファビコンとは何かというと、ブラウザでお気に入り登録などした際に、アイコンとして登場する小さいマークのことだ。その他にもサイトのショートカットをデスクトップに貼ったときや、アイフォンのショートカットをつくったときにも表示される。
ブックマークなどしてくれた方はわかっていると思うが、このサイトのファビコンはこんな形をしている。（小さくて恐縮だが）
拡大するとこんな形である。
スケッチズム_ファビコンなぜ、このような形になっているのか。どのようにつくっているのか。ボツ案も含め、デザインのプロセスを、できるだけわかりやすく、順を追って説明したい。
Contents
ファビコンについて学習する
ファビコンの言葉の由来
デザインを考える前に、ファビコンについてもっと知っておきたい。
ファビコンの名前の由来について調べてみると、
favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon（フェイバリット・アイコン：お気に入りアイコン）という英語の語句を縮約したものである。
ということである。なるほど。言われてみれば納得である。favicon。語源は単純であるが、キャッチーな響きでとてもいいネーミングであると思う。
優れたファビコンの条件を考える
さて、まず優れたファビコンとはどういうデザインなのか、考えたい。
- サイトのロゴデザインなどと一貫性がある
- ブックマークバーに並べたくなるデザイン
- 小さくてもわかりやすい。
- 他のファビコンに埋もれない独自性がある
- サイトの趣旨をわかりやすく表現している
僕の考えた大事な要素は以上の５点。この５点に明確な回答が作れたとき、優れたファビコンができたとしよう。
優れたファビコンの事例
では、世の中の優れたファビコンにはどういったものがあるのか。パッと思いつくもので優れていると感じるのは、はやり「apple」なのではないかと思う。
優れたファビコンの条件と照らし合わせてアップルロゴについて考えてみる。
- サイトのロゴデザインなどと一貫性がある → もちろんアップル社のロゴデザインと一致している
- ブックマークバーに並べたくなるデザイン → リンゴがかわいい
- 小さくてもわかりやすい。 → しっかりわかる
- 他のファビコンに埋もれない独自性がある → アップル社といえばかじったリンゴ
- サイトの趣旨をわかりやすく表現している → 発明とアダムとイブのリンゴ。よくできている。
アップル社のロゴの起源は、ニュートンの万有引力の発見に掛けられている。世紀の大発明の象徴として、りんごのロゴマークにしているのである。非常に企業イメージとしてわかりやすく、納得がいく。
ちなみに、リンゴをかじっているのは、「bite（かじる）」と「byte」をかけているだとか、アダムとイブの禁断の果実を口にしただとか、諸説出回っているが、実際はさくらんぼと間違えないようにかじった形にしたものだと、デザイナーのロブ・ジャノフ氏が語っている。
apple_logo 「リンゴにかじった部分をデザインに入れた理由は、さくらんぼと見間違えられないため」。
他にも、躍動感を表すナイキの「swoosh」、aからｚまで取り揃えているamazon、ツイッターのラリーバードなど。シンプルだが誰もが知っていて、わかりやすく、さらに奥が深い。
実際にファビコンのデザインを考える
ファビコンのサイズを認識する
ファビコンの特徴はとにかく小さい。一般的にはブラウザなどを想定し、下記の中で必要なものを作成する。
- 16px × 16px：IEのタブ
- 24px × 24px：IE9の「ピン留め機能」
- 32px × 32px：Chrome、Firefox、Safariなどのタブ
- 48px × 48px：Windowsのサイトアイコン
- 64px × 64px：高解像度のWindowsサイトアイコン
ファビコンを考えるときは、小ささと解像度を意識しなければならない。
サイト「スケッチズム」の思想を考える
改めてこのサイト「スケッチ ズム」のファビコンデザインについて考えてみる。優れたファビコンはサイトを思想を映し出している。このサイト「スケッチズム」の思想については「なぜスケッチするのか？」で言及しているが、スケッチをすることを通じて、いろいろなことを楽しく考えることが大事である。
マウスを操作しCGを創っていく過程では、残念ながら僕の脳みそは停止してしまう。しかし手を動かしてスケッチすることは逆に脳を活性化させてくれる。
だから、ただ絵を描いているだけではないし、ただ考えているだけでもない。
「描きながら考える」
この思想をどのような形にするか、スケッチしながら考えてみる。
実際にいくつかスケッチしてみる
ファビコン_アイディアスケッチ集①、②案はスケッチブックにサイト名の頭文字である「Ｓ」、もしくは、「ism」と書いてみる。
②案は実際にadobeのイラストレーターを使って作成してみる。
文字はスケッチの感じを出したく、手書きで書いてみた。最小のサイズで表示してみる。実際にファビコンとして設定したみたが、表現が細かすぎて不適切だと感じた。ひねりもない。
⑥、⑦、⑧、⑨案あたりで形の組み合わせでかたちをつくるマークを考えた。△▢の組み合わせでできる５角形のかたちは、鉛筆のように見えたり、家のように見えたりと形の奥深さを感じることができ、単純な形で多様性を感じさせる。
⑪案、⑫案では、正幾何学に先ほどの5角形を2つ重ねてみる。図と地の関係で、地には鉛筆が、図にはＳ字が見える。S字は「sketchism」としたときの頭文字である。
もう少し発展させ４角形から２つの鉛筆型が抜き取られたＳ字型とした。（下図）
さらにベースの四角形はスケッチブックをモチーフとしたパターンを入れた。日本でスケッチブックと言えば マルマン スケッチブック ということで、オレンジと黒をベースとしたパターンを採用した。
これは一つ形になったと思うが、ふと、思いとどまる。
先に考えた優れたファビコンデザインの条件は満たせているだろうか。
- サイトのロゴデザインなどと一貫性がある → ロゴデザインはこれから考えることしよう
- ブックマークバーに並べたくなるデザイン → 悪くはない
- 小さくてもわかりやすい。 → しっかりわかる
- 他のファビコンに埋もれない独自性がある → 悪くはないが、マルマンのイメージがいささか強い
- サイトの趣旨をわかりやすく表現している → 「描きながら考える」これが表現できているか…？
「描きながら考える」
この思想を体現する形になっているだろうか。スケッチのアイテムとイニシャルである「S」をかけたデザインではあるが、肝心な思想が抜けている気もする。
もう少し別案も考えてみる。
描きながら考えるとは、なんとも難しいお題であるが、「描きながら」というところを「描きかけ」とすることで表現できないか。
今度は頭文字を「ス」に変えて、鉛筆で「ス」を描いているところを表現してい見た。「ス」を描きながら、鉛筆のフォルムと描いた線が合わさって全体が「ス」を表している。
まさにスケッチズムのファビコンを描きながら考えている様子を体現していると、言えないか。
…しかしこれは、正しい「ス」の書き順になっていない。「ス」を自然に描いているところをイメージして、もう一度やり直し。
鉛筆を下に移動し、スの書き順通りに調整。併せて色も鉛筆の色と線の色を統一した。
最後に、鉛筆をもう少し自然な角度にし、それでいて「ス」の形が崩れないように調整する。
どうだろう。鉛筆の部分を傾けることで、描いている感じが強調され、全体に動きも出てきた。「描きながら考える」が少しは実践できているだろうか。
ひとまずは、これを用いてファビコンを作りたいと思う。
画像をファビコンにする具体的な方法
上で作成してきた画像は、adobeのイラストレーターで作成している。イラストレーターは平面的なグラフィックデザインをつくるのに優れている。
イラストレーターでは320pxの正方形のアートボードで画像を制作した。上述したのサイズの倍数で、大きめに作成した。
このサイトはwordpressを使って書いているので、ファビコンはバズ部が推奨する『RealFaviconGenerator』というプラグインを使用して作成した。僕が参照したのは、下記のページである。
ここでは「Favicon by RealFaviconGenerator」というプラグインを使ったファビコン設定を紹介する。このプラグインは、従来のファビコン設定の手間を省き、さらに iPhone や Windows 8 のアイコン画像まで設定できる。
この際、作成したデータを保存する際は、拡張子をpngとする必要がある。pngとすることで、背景を透明に認識させることができる。
またwordpressを使っていない方も、ファビコンを作成する様々な方法がある。
是非参考にしていただきたい。
まとめ
どうだろう。このサイトのファビコンをつくる流れを一通り描いてきた。ファビコンの作成がロゴなどの作成と違う点は、小さい表現のときにも、その中でサイトらしさを表現しなければいけないところだろう。
この記事に書いた一連のプロセスが完成するまで、寝かせている期間も含めて、およそ3か月程度。少々時間がかかりすぎているかもしれないが、今後、変貌を遂げていくかもしれないことを考えると、変遷の一部でしかないのかもしれない。
コメントを残す