ありがとうiPod／研究室／iPhoneとiPod touchのWebクリップ用アイコンの作り方

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

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

Webクリップとは

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

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

もしお使いのiPod touchでWebクリップが作成できない場合は、ソフトウェア2.0にアップデートする必要があります。

Webクリップの作成方法

Safariで、任意のWebサイトを開く
画面下の「＋」ボタンをタッチ
「ホーム画面に追加」をタッチ

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

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

画像を用意する

PNG形式の画像なら何でも使えそうです。美しく表示させるために、ここでは57 x 57ピクセルでアイコンを作ります。

57 x 57 pixelで画像を作成します。
- 一番上の1pixelの列は、自動的にハイライトが入り、完全に白く飛んでしまいます。そのため、枠のあるデザインだと上辺が細く見えてしまう場合があります。
- 角丸にする必要はありません。
画像はPNG形式で保存します。
- iPod/iPhone上でアイコンへの変換時に、ハイライト、テカリ、シャドウが自動的に入ります。角も丸く削られ、統一されたボタンのデザインにされます。
- 上半分に白いテカリが入り、色が浅くなってしまいます。コントラストを強めに作った方がよさそうです。
- 透明部分を設定しても、生かされません。黒く塗りつぶされます。
実際には、画像の大きさはどうでもいいです。アイコン作成時に、自動的に縮小（または拡大）されます。正方形じゃなくても、自動的にトリミングされます。

画像を設置する

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

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

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

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

Webクリップアイコンを集める

当サイトのiPhone/iPod touch向けコンテンツtouch-touch!では、 WebClip用アイコンを設置しているサイトへのリンク集を公開しています。

iPhone/iPod touchでアクセスして、「iPod情報」から「iPod touch TIPS」に入ってください。

60以上のサイトを紹介しているので、Web Clipを作りはじめると、あっという間にホーム画面がいっぱいになります。

番外編：好きなアイドルの写真でアイコンギャラリーをつくる

好きなアイドルの写真などをアイコンにして、ホーム画面に並べられます。アイコンをタッチすると拡大画像が表示される、簡易アルバムの出来上がりです。

パソコンは必要なく、Wi-Fiに接続されたiPod touchだけで簡単に作れます。Googleイメージ検索の「イメージを最大化」リンクを利用します。

Safariの検索窓に名前を入力して、Google検索。
検索結果ページ上部の「画像」をタッチして、そのままイメージ検索結果へ。
イメージ検索結果のサムネール（縮小画像）をタッチして、画像のあるサイトへ。
ページ上部のフレームにある「イメージを最大化」または縮小画像をタッチして、画像のみの表示に。
画像を指で拡大、位置を調整。
＋ボタンをタッチして、Webクリップを作成する。

画像の拡大には、ピンチアウト（2本指で広げる）を使います。元画像の大きさによっては、うまく拡大できませんが、白い余白のあるアイコンも味があります。

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

参考サイト：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クリップ用アイコンの作り方