自分でできる簡単更新!オリジナルのホームページ制作ならkayokiseki-design

  

2015スマホにおけるファビコン・ウェブクリップアイコン

サイト内検索を設置したように、今さらながら自分のサイトを見直すようになりました。ふとfaviconをリニューアルした時に廃止していたことを思い出しました!
当時はモバイルファーストになるにあたって、favicon不要論が一部で出ていたので、もともとfaviconがあまり好きではないのでそれに乗っかったわけです(笑)しかし2015年末になっても、今もなおfavicon生きていました!!これはなくならないなと思ったので今更ながら設置しました。

ほかapple-touch-iconについても調べたので、今回はそのサイズやデザインについてです。

[広告]


例えば、モバイルのchromeアプリではこんなところにfaviconが出てきます。

・ブックマーク一覧

・開いているタブ一覧

PCほどfaviconの重要性は確かにないのですが、それでもきちんと表示されていますので、設定していないサイトのアイコンの味気無さと比べると、やはり置いておいて損はないものですね!

※faviconの作成・設置方法については、ほかにもたくさん扱っているブログさんがありますので、そちらをご参照ください。


今回これは必要不可欠!!と思ったのが、スマートフォンのホーム画面にサイトをブックマークした時に出るアイコン(ウェブクリップアイコンというのが正式名称)です。これは、Google検索ページの下部に8つだけ出る直近の検索して訪問したサイト履歴部分にも使われています。

設定していないと、androidではこのようにグレーやグリーン・イエローなどの背景色にサイトの頭文字1字のアイコンが自動作成されます。


ちょっと試しに色々なサイトをブクマしてみると、大手サイトさんでも設定していないところが少なからずあります。アプリ開発をしている方には必須の設定なのでしょうが、ホームページをそもそもホーム画面にブクマする方はあまりいないと思います。しかし、あなたのブログの定期購読者さん、あなたのネットショップの常連さんが、もしホーム画面にブクマしていてくれたら…。


オリジナルのアイコンを置く置かないでは、実際に購読のモチベーションや売り上げも変わってきそうです。ということで、今回はウェブクリップアイコンについて書きます。


サイズ

詳しくはこちらのブログさんがたいへんよく検証されているので、ぜひお読みください!

apple touch icon の iOS & Android での表示確認と設定 - TAKEN


確かに色々なタレコミを検索してみると、どうもnexusだけ(!)が曲者のようです。

サイズはいろいろな規格がありまともにすべて揃えて用意すれば20近くになってしまうそうです。しかし、ぴったりのサイズがなければ近いサイズの画像を縮小・拡大して表示するという仕組みを利用すれば、150px*150pxあたりが最も使い勝手がよさそうなので、nexus対策で144px*144pxという規格で今回わたしは作りました。


カラー

ホーム画面にウェブクリップアイコンでブクマしてくれるという方の癖を考えると、おそらくホーム画面はアイコンで埋め尽くされているのではないでしょうか。そうすると、整然と整列するアイコンの中に埋もれないようにする必要があるので、パステルではなく原色に近い背景色を使用したほうがよい気がします。また大手サイトのカラーが背景色は白が多く、背景色を黒にするとホーム画面の華やかさに水を差しかねないので、それもちょっと避けたいところ。


デザイン

ウェブクリップアイコンを見ていると、正円のもの、背景色透過のロゴだけのもの、ドロップシャドウをつけているものなどなど色々です。正方形の隅の角丸は自動的になるものですので、制作するときは144px*144pxのカンバスを用意して正方形で作ればOKです。


しかし!ちょっと今回わたしが試したのは、自動のborder-radiusを利用しながら右下方向に立体影を入れるということ。ということで調べました。IphoneやAndroidの自動border-radiusはいくつなのか。結果同じでよかった、15pxです!


このような感じで影部分になる色を正方形で作り、border-radius15pxでその上にアイコンを作成。PNG形式で保存します。


設置

<head>内に次のコードで設置します。画像パスは絶対パスです。

<link rel="apple-touch-icon" href="http://hogehoge.com/image/apple-touch-icon.png">

以前はIOSの自動光沢処理を回避する方法として「apple-touch-icon-precomposed」がありましたが、現在はフラットデザイン主流となり光沢無しとなっているので、あえて書く必要はないそうです。


ということで、ホーム画面に保存してみたところこんな感じです。「My Tracks」のグラデーションや、今はバージョンアップを辞めたので使用しないでね!と公式で言われておりますが絶賛愛用中の「androidブラウザ」のドロップシャドウなど、ちょっとしたひと手間が美しく見えるんですよね。ウェブクリップアイコン、ぜひこだわって作ってみてください!


本年もご依頼いただきましたクライアントの皆さま、そしてブログを訪問していただいた皆様、1年間ありがとうございました。また2016年も、ユーザビリティとアクセシビリティを重視したレスポンシブデザインのホームページの制作と、分かりやすく痒いところに手が届くようなブログ記事を書いていきたいと思っていますので、どうぞよろしくお願いいたします!!

[広告]

2015Googleカスタム検索を設置する ブログTOP FC2のレスポンシブテンプレートカスタマイズ
Hotentry
Blog Post
クリックして上に戻る