Note
Lit's Make Icon

FaviconとApple Touch Iconを設定する【アイコンデザイン編】

サイトにもアイコンを!

こんにちは!ハネジです。

WEBサイトにもアイコンがつけられるのご存知ですか?
例えば、YahooやGoogleにアクセスしたときに、ブラウザのアドレスバーの左はしところに「Y!」とか「虫眼鏡」とか表示されてるアレです。

これ、実はWordpressで自分のサイトにもつけることができるんです!

ボクのサイトにも設定してあるので、そのとき気づいたことなどメモ的にシェアしますね。

スポンサーリンク

WEBサイトのアイコンの種類

WEBサイトに設定できるアイコンは、主に2種類。
昔から使われているFaviconと、近年普及してきたApple Touch iconです。

Favicon(ファビコン)とは

Favicon(ファビコン)とは、Favorite iconを略したもので、WEBサイトのシンボルとして設定できる画像形式です。

Yahoo favicon

WEBサイトをブラウザのお気に入りに登録したときなども、小さいアイコンとして表示されているときがありますね。

Faviconには表示するブラウザごとに決められたピクセルサイズがあって、下記のサイズで作成する必要がありますが、大きな画像は縮小すれば良いので、デザインするときは大きめでやると良いです。

  • 16 × 16 px(IE)
  • 32 × 32 px(他のブラウザ)

Apple Touch Icon(アップルタッチアイコン)とは

名前の通り、主にAppleの端末(iPhoneやiPad)のホーム画面用アイコンとして出発しました。

iPhoneなどのスマホが普及してから、WEBサイトをホーム画面に「お気に入り追加」したときにアイコンとして使われる画像形式です。

Apple Touch Iconにもに決められたピクセルサイズがあります。これも作成時は一番大きなサイズを基準に作れば良いですね。

  • 57 x 57 px
  • 60 x 60 px
  • 72 x 72 px
  • 76 x 76 px
  • 114 x 114 px
  • 120 x 120 px
  • 144 x 144 px
  • 152 x 152 px
  • 180 x 180 px

Apple Touch Iconが設定されていないWEBサイトを、ホーム画面にお気に入り登録すると、WEBサイトの縮小表示が設定されますね。

通常はそれでも問題ないのですが、アイコンが増えてくると、どれがどのサイトかちょっとわかりづらくなるので、わかりやすいオリジナルアイコンを設定したいところです。

アイコンデザインの作成

今回ボクはAdobe Photoshopというツールを使ってデザインしましたが、画像編集ソフトはAdobe Photoshopじゃなくても大丈夫です。
両方とも180 × 180 pxで作成しました。

なかなか良い出来栄えですね!(←自画自賛w

アイコンデザインのテーマとモチーフ

アイコンってシンボルですから、なるべくパッとみてわかるようなのが良いので、小さい文字をたくさん入れるデザインはちょっと難しいと思います。…それに小さい文字は老眼の進んだボクには厳しいですし(笑

そこで最初は、
サイト名がアフィリスキルなので、にしようか、
それともハネジにしようか、とか考えましたが、

今回はサイト名の英語表記
Affi ReskillのAをモチーフに選びました。

「アフィリエイトで稼ぐスキルを身につける」ってテーマのサイトだから、頭の中にはなんとなく“コインを手にするイメージ”“モチーフのA”がぼんやりあったので、とりあえず下記のアイコンサイトから素材になるものを探しました。

Icon Site Icon Archive
Icon Site FLAT ICON

のほうは「hand」と検索すればそれっぽいのがいっぱい出てくるので問題ありません。

Aのほうはあんまり良いのが見つからなかったので、結局Photoshop上でテキスト入力して、背景を書き足しています。

作成時の注意

なぜ2種類のデザインがあるのか?

というところですが、faviconって大きいピクセルサイズでも32 × 32 pxの表示にしかならないので、デザインを縮小したときぐちゃっと潰れちゃったんです。

なので、小さくても見えやすいように同じモチーフで少しシンプルにしてみました。結果的には、このデザインでも潰れちゃってるので、また折を見て調整する予定です。

追記:調整しました。Faviconが潰れて見えないので、もう少し簡素化しました。

これがビフォーアフターです。小さいので微妙な差ですけど、ちょっと見やすくなったかな??

アイコン設置の結果

設置方法はお使いのWordpresテーマによって変わってくるので、それはまた別の記事で紹介するとして、ここでは設定するとどうなるのか説明しますね。

faviconの設置結果

早速PCのブラウザで自分のサイトにアクセスしてみます・・

やったー!

ちょっと潰れちゃってますが、ちゃんと設定されますね!
これでお気に入りに入れたときもわかりやすくなります!

Apple Touch Iconの設置結果

iPhoneのSafariでアクセスし、ホーム画面に登録してみると・・・

おお!この段階でもうアイコンが表示されてますね!

 

次にホーム画面を見てみたところ・・・

やったー! これがやりたかった!

あ、結果が3つあるのは、どれが一番しっくりくるか試して見たかったからです。
実際に設置してみてはじめてわかることもあったりしますからね。

アフィリエイトサイトにアイコンを設置する効果

ブックマークやお気に入りって数がどんどん増えて行くので、あとから見返したとき結構埋もれちゃってるんですよね、

「あの記事ブックマークしたはずだけ、どこいった?」
なんて経験があなたもあるんじゃないでしょうか?

なのでアフィリエイトサイトにアイコンを設置する効果といえば、
なんといっても
他のサイトとの差別化です。

他の多くのサイトがアイコンを設定していない中で、あなたがアイコンを設定していれば、それだけで目立ちますよね。
目立つことで、あなたのサイトをユーザーに覚えてもらいやすくなりますよ。

そしてブックマークの中でも目立っていれば、探してもらいやすくなるので、リピート率アップが期待できます。

 

さらにあなどれない効果が
ブランディング効果です。

あなたの発信する情報の信頼性をかさあげする効果があります。

見た目をちゃんとすることで
話を聞いてもらいやすくなるのは
人もWEBサイトも同じ

なんですね。

もちろん、発信する情報のが一番大事なことはこれからも変わりませんが、ちょっとしたテクニックを駆使するのは全然アリですよ。

ぜひあなたもアイコン設置してみてくださいね!

では、今回はこのへんで!

タイトルとURLをコピーしました