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

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

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

Webクリップとは

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

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

iPod touchでWebクリップ機能を利用するには、2008年1月に公開された新しいソフトウェアが必要です。詳細は、製品紹介／iPod touchのソフトウェア・アップグレードをご覧ください。

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

画像を用意する

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

60 x 60 pixelで画像を作成します。
画像の左右1pixelと下3pixel（グレーの部分）は、アイコンへの変換時に削られてしまいます。 58 x 57pixel（オレンジ色の範囲内）だけが表示に使われます。
- ただし一番上の1pixelの列は、自動的にハイライトが入り、完全に白く飛んでしまいます。そのため、枠のあるデザインだと上辺が細く見えてしまう場合があります。
- 角丸にする必要はありません。
画像はPNG形式で保存します。
- iPod上でアイコンへの変換時に、ハイライト、テカリ、シャドウが自動的に入ります。角も丸く削られ、統一されたボタンのデザインにされます。
- 上半分に白いテカリが入り、色が浅くなってしまいます。コントラストを強めに作った方がよさそうです。
- 透明部分を設定しても、生かされません。黒く塗りつぶされます。
右の画像は、60 x 60ピクセルのものをHTML上で拡大したものです。よければダウンロードして、ひな形としてお使いください。（PNG画像）
解像度を数えたりが面倒！　という方は以下の3点に注意して作れば大丈夫です。
- 画像は正方形に。大きくてもOK。
- 四辺の余白を十分に。
- 絵の中心を、少し上に寄せる。

画像を設置する

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

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

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

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

57 x 57ピクセルではない

Webクリップ用アイコンの作成方法は、アップルが開発者向けの情報として公式に公開しています。>iPhone Dev Center - Apple Developer Connection
“57x57 pixels”で作れと説明されていますが、このサイズで作っても画像がリサイズされてしまいます。ピクセル（ドット）がぼやけてしまい、狙いどおりに表示されません。周囲もトリミングされてしまいます。
上に書いた60pixel角の画像を使う方法だと、リサイズされずにピクセルが生かされます。

画像の大きさは、1000ピクセル角で作ったとしても、自動的に縮小されます。長方形の画像を使うと、正方形にトリミングされます。
例えばアップル自身は、129 x 129ピクセルでアップしています。（PNG画像）

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

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

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

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

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

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

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

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

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

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

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

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