サイトにスマホ用のウェブクリップアイコンは設定していますか？-webaby【エンジニアお父さんの育児・子育て】

今回の記事は、サイト制作で必ず必要というものでもありません。

ですが、近年ではパソコンを持たずにスマホやタブレットで検索をしたりする人が多くなっています。また、googleもスマホへの対策やユーザビリティ向上を推薦していたりします。

そんなスマホユーザーにとって何が一番重要かというと、操作性です。

操作性といっても幅広くタップのしやすさやサイトの見やすさなどがあります。その中でも人目で何かを理解できることが重要になってきます。

そのためにも「ウェブクリップアイコン」を設定しておくことで、あなたのサイトをスマホから一目でわかるようにできます。

簡単に言うとスマホのホーム画面に、あなたの名刺を常に表示している状態だとイメージしてください。

そんな「ウェブクリップアイコン」の重要性と設定・作成方法をご紹介します。

1. ウェブクリップアイコンとは？
2. ウェブクリップアイコンの作成
3. ウェブクリップアイコンの設定方法
4. ブログ運営者やサイト管理者の方へ

ウェブクリップアイコンとは？

iPhone/iPod touch/iPad/androidのホーム画面に表示させるサイトのオリジナルアイコンのことをいいます。

設定がされていないとスマホのデフォルトアイコンがスマホ画面に表示されますが、サイトにしっかりとアイコンを設定しておくことで、スマホのホーム画面にブックマーク（クリップ）してもらうと、あなたのオリジナルアイコンを設定することができます。

サイト制作では、重要性は低いですがあなたのサイトをよく見る方やブックマークをしている方には、すごく重要なアイコンになります。

スマホのホーム画面は、アプリなどのアイコンで埋め尽くされています。またブックマークをする方は他のサイトもブックマーしていることが多く、そのほとんどがデフォルトアイコンです。

このデフォルトアイコンでは、どんなサイトのアイコンなのかが分かりづらく、ユーザーは一度アイコンをタップしてサイトを確認する手間がでてきます。

また、他のアイコンに埋もれてしまい目立ちにくいというデメリットもあります。ですから、ウェブクリップアイコンはサイト制作と同時に作成・設定することをオススメします。

このように文章で説明されても違いが分かりにくいと思うので、一度当ブログをスマホのホーム画面に付けてみて下さい。そうするとブログのロゴである「B」の文字がアイコンに表示されると思います。

また、ウェブクリップアイコンによく似た機能としてパソコンではファビコンというアイコン表示方法があります。

これもウェブクリップアイコンと同じでパソコンでブックマークをしたりサイトを開いた時にタブに表示されるアイコンです。これと同じようなスマホ版がウェブクリップアイコンといいます。

パソコン用のファビコン作成・設定方法はこちらの記事へ
サイト制作で欠かせないファビコンは忘れず作成していますか？

ウェブクリップアイコンの作成

ウェブクリップアイコンは「.png」形式の画像で作成します。

また、サイズは横180px：縦180px（正方形で作成する）で作成すると良いかと思います。サイズに関しては決まりがなく180pxや150pxと説明しているサイトがありますが、現在では150pxほどあれば問題ありません。（今後のスマホ事情によって変わる場合があります）

iOS 用の場合

アイコン画像の名前は「apple-touch-icon.png」としてください。角丸などはスマホが自動で合わせてくれるようになっています。

背景色が透明の場合は黒く表現される場合があるので透過するのは避けるようにしましょう。

アイコンに光沢を付けたくない時は、アイコンの画像の名前を「apple-touch-icon-precomposed.png」としてください。

android用の場合

アイコン画像の名前は「android-chrome.png」として作成します。iOS との違いはandroid端末では自動で角丸などにならないということです。

android用のアイコンは、作成時に角丸にしたり円形にしたりすることで他のアイコンとの区別ができたり目立つように作成したりすることが可能です。

ただ、androidは全機種で表示されない場合があります。機種によって認識してもらえずデフォルトアイコンのままの場合がありますが、そこに関してはクライアントと相談し全て対応は難しいと伝えておくことが大切です。

ウェブクリップアイコンの設定方法

まずは、先程作成したアイコン画像をサイトのルートに配置します。当ブログの場合はimgフォルダ内に配置しています。

次にhtmlファイル内のhead内にコードを記述してください。

iOS 用の場合

sizeは画像サイズを指定してアイコンを配置した場所のURLを記述して完了です。

android用の場合

こちらも同じくサイズ指定とアイコンのURLを記述して完了です。

ブログ運営者やサイト管理者の方へ

ウェブクリップアイコンやファビコンなどの作成や設定は、seoなどにも影響はありません。ですから設定しても検索順位が上がることもありません。

はっきり言って、労力と効果が比例していない作業になります。ですが、あなたのブログやサイトを観覧しいるユーザーが一番近いお客さんでもあります。

そんなユーザーに対しての気遣いとして設定する気持ちでウェブクリップアイコンをつけることをオススメします。

また、クライアントからの依頼でサイト制作をしているとこういった細かな設定や表示方法をしているだけで他の制作者よりもランクが上がります。

もちろんウェブクリップアイコンをしているだけで認められるわけではありませんが、このような細かな作業の積み重ねが重要な評価の１つでもあります。

ブログをもっとよく見せたい！クライアントに少しでも喜んでもらいたいと思う方は、ぜひ簡単な作業なので設定してみてください！