iPod touch用 Webclipアイコンを作成してみた
先日、アメリカ・サンフランシスコで開催された「Macworld 2008」で発表された、iPod touchのソフトウェアアップデート／新機能にWebclipという機能がある。
これはiPod touchのホームスクリーン（左の画像の画面）にお気に入りのウェブサイトのショートカットを置く、つまりウェブサイトのブックマークができるようになった。
このブックマーク、ホームスクリーンではアイコンで管理されるため、標準ではウェブサイトをブックマークする際にキャプチャを縮小してアイコン化して登録される。
しかし、それだとホームスクリーンにも格好がつかないし、キャプチャを縮小されたアイコンなのでわかりにくい。
そこでこのアイコンを任意のものにするべく、アイコンを作成してみた。
実はWWW WATCHのkatoさんが先にこの対応を施していたため、触発されて作った、というのが今回の経緯。
ではここから作成手順。
まず、左が作成したアイコン（変換前）
ファイルサイズは57px × 57px。
ファイル形式はPNGが望ましいようです。
faviconの特大版を作るような感覚でものの3分で作成のやっつけ仕事（リンク先に意味無し）
「変換前」と書いたのは、Webclipした際にiPod touch側で角丸＆グロス加工に勝手に変換されるため。
そのため、どんなアイコンでもたちまちグロッシーな質感に。
また、角丸に変換されるということは、周りが多少削られるということなので、周りの余白を若干多めに取ってデザインしています。
そして変換後のアイコン（イメージ）が下記。
iPod touchを所有していないため、隣にいるryokenくんのiPod touchで実験させてもらい確認した結果、変換されたアイコンがこのような感じです。
グロスがかかるためか、全体的に明度が上がって薄い印象に。
Webclip用のアイコンは彩度がパキパキしたデザインのほうが良さそうです。
今回はfaviconと合わせたかったし、当サイトは黒×緑のイメージなのでこれで妥協。
人のiPod touchで何度もテストするのもアレですし…。
さて次に設定の仕方ですが、これは2つの方法が用意されています。
まずは簡単な方法。
これはウェブサイトのルート（indexがある階層）にアイコン画像をアップするだけでよいです。
ただし、ファイル名を「apple-touch-icon.png」にすること。
でないと反映されないようです。
この方法は静的ページが大量にあるサイトや、サイト構成がややこしいサイトなどに適していると思います。
次に個人的に推薦の方法。
各HTMLファイルの<head>〜</head>に下記のソースを追加。
<link rel="apple-touch-icon" href="アイコン画像のアップ先パス" />
あとはサーバにアップするのみ。
これでiPod touchに任意のアイコンがWebclip時に表示されるようになります。
今後、iPod touch or iPhoneの普及によって、ウェブサイト制作にもこのapple-touch-iconを標準装備する時代がくるのでしょうか？
faviconの大きな弟、apple-touch-iconと言った感じですかね？
関連ページ：Appleからの公式情報
【iPhone Dev Center - Apple Developer Connection】
http://developer.apple.com/iphone/devcenter/designingcontent.html
comment:
trackback:
trackback URL :
「Webクリップ」用アイコン設置サイトリンク集（追記3）
retro さん、dbacks51 さん、ringo-sanco さんが次々と iPod touch / iPhone の「Webクリップ」用アイコンを導... [read more]
by Blog!NOBON - 2008.02.18 [Mon] 12:31
- アックゼロヨンアワード2007 表彰式 - 2008.04.24 [Thu]
- アックゼロヨン・アワード2007にデジパ オフィシャルサイトが入賞 - 2008.04.03 [Thu]
- まさかこんなコラボが実現するなんて - Epitaph × UT [ユニクロ] - 2008.03.25 [Tue]
- Macのネット環境を高速化 - dolipo - 2008.02.29 [Fri]
- デジパオフィシャルサイト・ノミネート - 第3回JWDAウェブデザインアワード：参加レポート - 2008.02.13 [Wed]
