iPhone/iPadのホーム画面用アイコンをサイトに設定しよう

画像: Matthew Guay

2010.06.29

IT・WEB

iPhone/iPadのホーム画面用アイコンをサイトに設定しよう

安田 英久
株式会社インプレスビジネスメディア Web担当者Forum編集長

今日は、「Webサイトを作ったらまずやるべきこと」に追加する内容をお伝えします。iPhone/iPadのホーム画面にあなたのサイトが追加されたときに表示されるアイコンの設定方法です。

Webサイトを作ったらまずやるべきことチェックリストという、はてブ2000ブクマ以上の大人気記事がありますが、そこに追加すべき内容が1つ増えていました。iPhone/iPad用のアイコン設定です。

iPhone用のSafariでは、ブックマーク追加メニューから「ホーム画面に追加」を選ぶと、ホームにそのサイトのアイコンを追加できます。アップルはこれは「Web Clip(ウェブクリップ)」と呼んでいるようです。

iPhoneでは見づらかったPC向けサイトもiPadでは比較的見やすくなるため、お気に入りのサイトをiPadのホームに追加する人が増えているのではないでしょうか。

こうしてホーム画面に追加されたときに表示されるアイコンは、何もしなければそのサイトの画面キャプチャになります。

これでは、何のサイトかわかりませんね。しかし、そこはアップル、表示するアイコンをWeb担当者が指定する方法を用意しています。

アイコンを、

・ 「apple-touch-icon.png」というファイル名の
・ PNG画像として
・ サイトのルートディレクトリに置いておく

だけです。faviconのようなものですね。iPhone用Safariは、その名前の画像があると、それを勝手に角丸にしたりハイライト/シャドウを付けたりして、iPhone風のアイコンにして使ってくれます。最終的なアイコンは57px×57pxにリサイズして使われ、透過色は無視されて黒色になってしまうようです。

ただ、自動処理に任せると、意外と見づらいアイコンになってしまう場合もあります。そういった場合は、「apple-touch-icon- precomposed.png」というファイル名で画像をアップロードしておくと、iPhoneはそちらを優先して使い、角丸などの処理だけしてアイコン化してくれます。

自動処理の画像は気に入らないけど、のっぺりしたアイコンもちょっと……という人は、アイコン自動処理サービス「iPhone / iTouch icon generator」がオススメです。

iPhone / iTouch icon generator(英語サイト)
http://www.flavorstudios.com/iphone-icon-generator

英語サイトですが、難しくありません。「Upload Image」タブをクリックして、ボタンのスタイルを選んでから下の「Upload Your Image」で元画像をアップロードすると、iPhoneボタン風にした画像を作ってくれます。

続きは会員限定です。無料の読者会員に登録すると続きをお読みいただけます。

Ads by Google

この記事が気に入ったらいいね!しよう
INSIGHT NOW!の最新記事をお届けします

安田 英久

株式会社インプレスビジネスメディア Web担当者Forum編集長

企業のウェブサイト活用やウェブマーケティングに関するメディア「Web担当者Forum」(http://web-tan.forum.impressrd.jp/)を運営しています。

フォロー フォローして安田 英久の新着記事を受け取る

一歩先を行く最新ビジネス記事を受け取る

ログイン

この機能をご利用いただくにはログインが必要です。

ご登録いただいたメールアドレス、パスワードを入力してログインしてください。

パスワードをお忘れの方

フェイスブックのアカウントでもログインできます。

INSIGHT NOW!のご利用規約プライバシーポリシーーが適用されます。
INSIGHT NOW!が無断でタイムラインに投稿することはありません。