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

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

Webクリップとは

Webクリップ集

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

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

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

Webクリップの作成方法

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

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

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

Webクリップアイコンのサンプル

画像を用意する

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

画像を設置する

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

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

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

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

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

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

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

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

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

  1. Safariの検索窓に名前を入力して、Google検索。
  2. 検索結果ページ上部の「画像」をタッチして、そのままイメージ検索結果へ。
  3. イメージ検索結果のサムネール(縮小画像)をタッチして、画像のあるサイトへ。
  4. ページ上部のフレームにある「イメージを最大化」または縮小画像をタッチして、画像のみの表示に。
  5. 画像を指で拡大、位置を調整。
  6. +ボタンをタッチして、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ピクセルではなかった。

Webクリップアイコンのサンプル

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

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

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


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