ファビコンのサイズや背景、デザインのポイント【ブログ実践記10日目】
ブログについて学び、実践し、更新する10日目。
9日目の実践記はこちら。
「今日やったこと」と「やってみた感想」について書いていく。
今日やったこと
まずは今日やったことから。
人気ブログランキング
毎日最初にやるのは「人気ブログランキング」と「にほんブログ村」のクリック。
人気ブログランキングのルーレットも2回やってこつこつポイントを貯めている。
カテゴリーを見直ししたので、ランキングがアップしたカテゴリーが出てきた。
はてなブログアカデミーと週刊はてなブログの記事を読む
今日もはてなブログアカデミー コース4の「検索エンジン最適化（SEO）を行う」を学ぶ。
今学んでいることは、ファビコンについて。
はてなブログでは「ブログアイコン」と表現されているが、「Favicon（ファビコン）」との違いは呼び方だけ。
はてなブログアカデミーで紹介されていたこちらの記事の続きを読む。
SEOでファビコンの設定は必須
前回までに学んだことをまとめると、
- 2019年、検索結果にFaviconが現れるようになった
- モバイル検索結果が変わった日から平均クリック率、CTRが変化したサイトががある
- Faviconでひと目で自分が信頼しているサイトだと確認できればクリック率が上がる
- Faviconで自分のブログだとわかりやすくすることは有益
- はてなブログは設定可能
で、要はSEOのためにはファビコンの設定が必須ということ。
過去に、はてなブログアカデミーのコース2の「ブログの主要な画像を設定する」でブログアイコンの設定はしている。
ただ、とりあえずプロフィールの顔写真で使っているタコのイラストをアップロードしただけだったので、今回読んでいる記事を参考に作り直してみることに。
ファビコンのサイズ
ファビコンのサイズは「48pxの倍数」にする必要があるとのこと。
はてなブログヘルプページも見直してみると、「192×192ピクセル四方より大きな正方形の画像」がいいと書かれていた。
ということで、はてなブログで使用するファビコンのサイズは最低でも「192×192ピクセル」にすればいいということがわかった。
現在は128ピクセルだったので修正が必要だ。
ファビコンの背景
ファビコンの背景については、
- 透過は使わない
- 背景色は目立つもの
これらに注意する必要があるとのこと。
現在は透過ではないものの、ファビコンの背景は白だったので、見直す必要がありそう。
自分のサイトに合った色でもいいとのことだが、タコの赤い色以外に使っている色が特にない。
それにセンスが問われそうなので、下手に背景の色を設定するとダサくなる。
ダサいファビコンを取るか、SEOを取るか…悩むところ。
はてなブログのファビコンを見てみると、白背景になっているので、白い背景がダメというわけではなさそう。
というわけで、背景は白のままにする。
ファビコンのデザイン
ファビコンのサイズや背景がどうこうよりも重要なのはデザインであった。
どうやら複雑なものにしない方がいいらしい。
Googleが無料で公開しているアイコンのサンプルも確認したが、シンプルなデザインが多い。
現在のアイコンは、ぼんやりした色合いで作ったイラストなので、そもそもファビコン向きの画像ではないことがわかった。
というわけで、ファビコンを新たにデザインすることに。
ファビコンの例
どんなファビコンのデザインにしたらいいのか迷ったときは、誰かの真似をするのが一番。
パクリではなくて参考にさせてもらおうかと。
「自分のサイトを知ってくれている人が気づけるようにする」のが最も大事であると、ファビコンの記事を書いているSEO専門家の辻正浩さんが言っている。
ということは、辻さんのサイトのファビコンを参考に作れば、最適解ではなくても大きな間違いは防げそう。
辻さんのサイトのファビコンは、「辻」の一文字と、目を引く「金赤」の背景。
CTRはモバイルだけで伸びているそうなので、このファビコンをベースに作ってみるのがよさそう。
やったみた感想
今日はファビコンについて学んだ。
とりあえず、プロフィールで使っている自作のタコのイラストではダメそう。
サイズや背景、デザインそのものに問題があることがわかった。
明日は実際にファビコンを作りなおしたいと思う。
明日も、はてなブログアカデミーのコース4「検索エンジン最適化（SEO）を行う」について学ぶ予定。
