\r\n\r\n\r\n\r\n\r\n

Favicon 生成ツールの使い方:1 枚の画像から全サイズのアイコンへ

ファビコンはタブ・ブックマーク・検索結果・ホーム画面と表示先ごとにサイズが違います。一括出力して head に正しく書くのが確実です。

· · 3 分 · 49 阅读

昨夜もまたAppleの発表会を夜更かしして見ました。正直なところ、新しいスマホの見た目やチップの速度なんて、もちろん気にする人はいますが、私が一番印象に残ったのはむしろ細かいディテールでした。気づいたことはありませんか?Appleが新製品を出すたびに、公式サイトの小さなアイコン、アプリ内のさまざまなマーク、さらには宣伝ポスターの隅にある目立たない小さな四角まで、どれもこだわりが感じられます。これらを単体で見ると大したことないように思えますが、集まると「これはAppleだ」と一目でわかるあの力になるんです。

私が言っているのは、ブラウザのタブやブックマーク、スマホのホーム画面にあるあの小さなアイコン——Faviconのことです。普段はまともに見たこともないかもしれませんが、毎日あなたのために働いています。考えてみてください。ユーザーが20個のタブを開いて、びっしり文字だらけの中から、なぜ一目であなたのサイトを見つけられるのか?それはあのゴマ粒ほどの小さなアイコンのおかげです。Appleはこのことをよく理解していて、Faviconは常にシンプルで、常に高い識別性を持ち、たとえ16ピクセルに縮んでも、それがAppleであって他ではないとわかります。

多くの人がウェブサイトや製品を作るとき、大金をかけてロゴやVIを整えても、Faviconになると適当に画像を一枚放り込んだり、あるいは設定すらせず、ブラウザがデフォルトの空白ページアイコンを表示するままにしています。これはまるで、オーダーメイドのスーツを着ているのに足元はサンダルを引っかけているようなもので、ディテールがすべて台無しです。

実はFaviconというものは、小さいと言えば小さいし、大きいと言えば大きい。それはブランドとユーザーの間の最初の視覚的な関門です。ユーザーがまだあなたのページをクリックする前に、まずタブであの小さなアイコンを見て、心の中で既に採点しています。ぼやけていたり、引き伸ばされて変形していたり、ブランドと全く関係ないアイコンは、「このサイトはあまり信頼できないかも」というシグナルを送ります。逆に、はっきりしていてシンプルで、ブランドのメインビジュアルと一致した小さなアイコンなら、たとえユーザーがあなたの名前をすぐに覚えなくても、次にあの小さな四角を見たときに「ああ、あのサイトだ」と頭に浮かびます。

では、どうやってこれを解決するのか?以前はFaviconを作るのは面倒だと思われていました。切り抜き、サイズ調整、フォーマット変換、さらにさまざまなブラウザやOSへの対応が必要でした。今はFaviconジェネレーターのようなツールがあり、画像を一枚アップロードすれば、自動的にさまざまなサイズに切り分けてくれます。16×16、32×32、180×180、Appleのtouch iconまで用意してくれて、直接ダウンロードしてサイトのルートディレクトリに置けば完了です。節約した時間で、コピーの書き方や製品の最適化をもっと考えたら、よくないですか?

Appleの発表会から本質を見るとは、スペックではなく、あらゆるディテールをブランドの顔として扱うその姿勢です。小さなアイコンこそがブランド認知度の第一関門であり、この関門をクリアしなければ、後で何を言っても物足りません。10分かけてFaviconをきちんと整えることは、トップページに10個のスローガンを置くよりも効果的です。本当に、あの小さな四角にブランドの足を引っ張らせないでください。

更多文章
49 阅读 ·

blog.ctaTitle

blog.ctaDesc