千葉県のホームページ制作 DESIGN Oil / DESIGN Oil BLOG

iPod touch用Webクリップについて、なんかアツい感じになっているみたい。

Webクリップとは、iPod touchのブックマーク機能（ショートカット）。
Webクリップを作成すると表示中のページを縮小した画像がアイコン化されますが、Webクリップに対応した画像を設定しておくことで、任意の画像でアイコン化することが可能です。

つまり、iPod touch版『favicon』と言った感じでしょうか。

早速作ってみました。制作時の注意などは下記から。

早速作ってみました

と言う訳で、作ってみたのが↑上の画像。

Webクリップ時に、角丸加工とグロス加工が自動的に加わりますので、

実際に、アイコン化された画像は↑上記のようなイメージになります。

Webクリップ制作時の注意

• ファイル形式はPNG。
• 画像サイズは何pxでも自動リサイズされる（但し、奇麗に表示させる為には特定のサイズで制作しておくと◎ 下記参照）。
• 角丸加工はiPod側で行われるので元画像では必要なし。
• 同じく、iPod側でハイライト、テカリ、シャドウが自動的に入る。
• 上半分に白いテカリが入るのでコントラストは強めが良いみたい。
• 透明部分を設定しても黒く塗りつぶされてしまう。

設置方法は2つ

• サーバのroot（ルート）ディレクトリに、ファイル名を「apple-touch-icon.png」としてアップ。

もしくは、

• ウェブページの＜head＞〜＜/head＞内に、＜link rel=”apple-touch-icon” href=”/ファイル名.png”/＞と記述。
  （＊『＜』『＞』は半角で記述して下さい。）

こちらの方法なら、ファイル名・ファイル設置場所を任意に指定できます。
無料のブログサービスを利用していたり、ドメイン内で運営する複数のサイトに個別のWebクリップを指定する時などはこちらが便利です。

Webクリップを美しく表示させる為にやっておくこと

※注意：下記方法はソフトウェア1.1.4以前のバージョンの古いiPod touchを対象とした作り方です。

最新のiPod touch及びiPhone 3Gに対応したWebクリップの作り方は、修正記事『最新版：iPod touch版favicon？な『Webクリップ』を作ってみる方法』をご確認下さい。

画像を60px × 60pxで作成する。
アップルからは『57px × 57px』で作るようにアナウンスされているようですが、このサイズで制作すると、アイコン化の際にリサイズされてしまうようです。

また、下図↓を参考に、イラストなどが、角丸加工などでトリミングされない領域に配置しておくと良いでしょう。
（画像の左右1pxと下部3pxは、アイコン化時にトリミングされてしまうので、余白としておくと良い。）

まだまだ、iPod touchでのネット人口は低い状態ではありますが、iPhoneの日本上陸も見据えて、早めに対応しておくと良いかも。

残念なのは、iPod touchを所有していないので、確認ができない所…。
『Webクリップできたよ〜』なんてコメントもらえたら非常に嬉しいです。
Web担当者は、テスト環境としてiPod touchを所有しておくべき時代なんでしょうかね？

Webクリップ制作に当たっては下記サイトに詳しく解説されています ||
ありがとうiPod／研究室／iPod touchのWebクリップ用アイコンの作り方

また、Webクリップについて、『他のサイトはどんな画像を用意しているのかな？』なんて参照してみたい場合は下記サイトをチェックしてみると良いかもしれません。
Webクリップ対応サイトがピックアップされています ||
:: Blog!NOBON | 「Webクリップ」用アイコン設置サイトリンク集（追記3） ::

● Categories：All, WEB.
● TrackBackURL：
http://www.design-oil.com/blog/2008/02/21/331/trackback