研究室／iPhone、iPod touch、iPad用Webクリップ用アイコンの作り方

研究室 > iPhone、iPod touch、iPad用Webクリップ用アイコンの作り方

このページでは、iPhone、iPod touch、iPadの「Webクリップ」機能で表示されるアイコンの作り方を解説します。

Webクリップとは

iPhone、iPod touch、iPadのウェブブラウザ「Safari」の、ブックマーク機能のひとつです。
ホーム画面に、ウェブサイトへのショートカットを置くことができます。
Webページや、ページ内の特定部分に素早くアクセスできます。

Webクリップを作成すると、表示中のページを縮小した画像が、ボタンとして作成されます。
Webクリップ機能に対応したアイコンを設置しているサイトの場合は、そのアイコンがホーム画面に登録されます。

Webクリップの作成方法

Safariで、任意のWebサイトを開く
ブックマークに追加などが行える、共有アイコンをタップ
「ホーム画面に追加」を選択

このとき、通常は表示しているサイトの縮小画像（サムネール）がアイコンとして使われます。
以下で説明するアイコンが設置してあるサイトでは、サイトの縮小画像ではなくアイコンが表示されます。

iOS以外にも、Android端末もWebクリップアイコンに対応しています。

Webクリップ用アイコン画像の作成方法

用意する画像の大きさ

PNG形式の画像なら何でも使えそうです。
美しく表示させるためと、容量の節約のため、150 x 150ピクセルぐらいが丁度いいと思います。

画像は、iPhone/iPod touchでは114 x 114に、iPadでは144 x 144にリサイズされてアイコン化されます。
Retinaディスプレイではない旧モデルの場合は、解像度が半分で、iPhone/iPod touchは57 x 57に、iPadは72 x 72になります。

おすすめの画像サイズは、144 x 144ピクセルです。
このサイト「ありがとうiPod」で設置しているアイコンは、150 x 150ピクセルです。
本家Apple.comに設置されているアイコンは、129 x 129ピクセルです。（"http://www.apple.com/apple-touch-icon.png"を参照）

実際には画像の大きさは適当に作っても、アイコン作成時に自動的に縮小（または拡大）されます。
正方形じゃなくても、自動的にトリミングされます。

アイコンデザインの注意点

iPod/iPhone/iPad上でアイコンへの変換時に、ハイライト、テカリ、シャドウが自動的に入ります。
角も丸く削られ、統一されたボタンらしいデザインにされます。

上半分に白いテカリが入り、色が浅くなってしまいます。コントラストを強めに作った方がよさそうです。
上端は自動的にハイライトが入り、白く飛びます。そのため、枠のあるデザインだと上辺が細く見えてしまう場合があります。

透明部分を設定しても、生かされません。黒く塗りつぶされます。

画像を設置する

実際にアイコンをアップロードします。2種類の設置方法があります。

【1. サーバのルートに設置する】

サーバのroot（ルート）ディレクトリ（一番上のindex.htmlなどと同じ階層）に、ファイル名を「apple-touch-icon.png」としてアップします。
コンテンツに手を加える必要はありません。画像が存在していれば、iPhone/iPod touch/iPadが勝手にひろいます。
サイト全体で、同じWebクリップアイコンが適用されます。

【2. 任意の場所に設置して、リンクする】

無料のブログサービス等を利用していても、HTMLの<head>をカスタマイズできれば、Webクリップを設置できます。
画像をアップロード後、ウェブページの<head>〜</head>内に、<link rel="apple-touch-icon" href="/xxxxxxxxxx.png"/>の一行を追加します。
- 画像の場所、画像名は任意に設定できます。画像位置を相対パスで指定するなら「images/xxxxx.png」、絶対パスで指定するなら「http://www.〜」を書きます。
記述してあるページにのみ、Webクリップアイコンが使われます。一つのドメインの中で、コーナー毎にアイコンを使い分けられます。

画像にテカリを加えない方法

アイコンへのコンバート時に、自動的に画像に加えられる「テカリ」や影を、適用させなくする方法があります。
画像の設置の仕方により、方法が異なります。

【1. ファイル名を「apple-touch-icon-precomposed.png」にする】

上記「1. サーバのルートに設置する」の方法で、ファイル名「apple-touch-icon.png」の画像を単純にアップしている場合。
ファイル名を「apple-touch-icon-precomposed.png」に変更します。

【2. ヘッダのタグを「"apple-touch-icon-precomposed" 」にする】

上記「2. 任意の場所に設置して、リンクする」の方法で設置している場合。
ヘッダのタグを「<link rel="apple-touch-icon-precomposed" href="/xxxxxxxxxx.png"/>」に変更する。

それぞれファイル名またはタグの末尾に「-precomposed」が加わっています。
このように指定すると、元の画像のままでアイコン化されます。
ただし、カドは丸くされることに変わりありません。PNGの透明部分も、黒く塗りつぶされます。

サンプル

このサイト「iをありがとう」内には、3カ所にWebクリップアイコンを設置しています。
iPhone/iPod touch、iPadでは、右の画像のようにアイコン化されます。
画像サイズは150 x 150ピクセルで製作しています。

iをありがとうトップページ
- 画像：/image/apple-touch-icon.png
- 「link rel="apple-touch-icon-precomposed"」で設置。自動のテカリなし。
iPad Files
- 画像：/image/apple-touch-icon-ipad.png
- 「link rel="apple-touch-icon-precomposed"」で設置。自動のテカリなし。
touch-touch!
- 画像：/touch/touch-images/apple-touch-icon.png
- 「link rel="apple-touch-icon" 」で設置。自動のテカリあり。

任意のサイトに好きな画像のアイコンを使う

参考サイト：How To Set an Apple Touch Icon for Any Site — All in the head

リンク先では、Bookmarklet（ブックマークレット）を使って、任意のウェブサイトに好きなWebクリップアイコンを使えるjavascriptが紹介されています。使用するにはパソコンからブックマークを同期し、アイコンのURLを手で入力しなけらばならないので、少々面倒です。

補記：iPod touchソフトウェア1.1.4以前では、57 x 57ピクセルではなかった。

iPod touchソフトウェア1.1.4以前のバージョンでは、Webクリップ作成時の画像のコンバートにエラーがあったようです。
Appleの公式サイトで“57x57 pixels”で作れと説明されていましたが、このサイズで作っても画像がリサイズされていました。ピクセル（ドット）がぼやけてしまい、狙いどおりに表示されませんでした。以下の作成方法で対処できました。

60 x 60 pixelで画像を作成。
画像の左右1pixelと下3pixel（グレーの部分）は、アイコンへの変換時に削られる。 58 x 57pixel（オレンジ色の範囲内）だけが表示に使われる。

iPhone 3Gとアップデート後のiPod touchに搭載されている“iPhone 2.0 Software”では、こんなややこしい方法をとる必要はありません。
57 x 57 pixelで作成した画像が、そのままアイコンにコンバートされます。

もし中心が少し上に寄って見えるアイコンを見つけたとしたら、それは以前のiPod touchソフトウェアに合わせて作成されたアイコンだと考えられます。

メニュー | バッテリー(電池)交換ガイド | 分解・改造・カスタマイズ | 裏技・ソフト改変 | Webクリップ用アイコンの作り方