iOSアイコンをホーム画面に登録しよう！

前回作成した「iOS風アイコン」を実際にiPhoneなどの画面に登録！
使用アプリケーションはPhotoshopのみ。
前回作成したファイルで簡単に登録設定ができます。



前回作成のPhotoshopレイヤーファイルを用意します。
デザイン制作した「角丸」の枠を不可視にします。
新たに「STUDIO HERMIT」とお好きな書体で記述します。
あまり細い文字でないほうがよいでしょう。



次に画像をアイコン用のサイズに調整します。
画像解像度、サイズは114pix正方形に調整します。
できたら「WEB用に保存…」で保存します。
現在のiOSデバイスは表示解像度がよいので、
JPEGやGIFではなく「PNG」ファイル形式で保存します。



自分のWEBサイトのトップページのソースを開きます。
＜TITLE＞の直前にアイコンを呼び出すタグを記述します。
記述するタグは、
＜link rel="apple-touch-icon-precomposed" href="アイコン画像ファイルを置いたルートパス" /＞

「アイコン画像ファイルを置いたルートパス」の記述参考例。
トップ階層／以下に「img」フォルダを作り、その中に「icon.png」というファイルを置いた場合、
＜link rel="apple-touch-icon-precomposed" href="img/icon.png" /＞
となります。



iPhoneなどで、自分のWEBサイトを開きます。



トップページを開いたらブックマーク記録ボタンをタップします。
「ホーム画面に追加」をタップします。
この時にアイコン下のアイコン名を短いコピーに調整します。
ホーム画面の各アイコンに表示できる文字数に限りがあるからです。



ホーム画面のお好きな位置に設定して、完成っ！
アイコンの「角丸」加工はiOSデバイスが自動で作成します。

Apple製品のカスタマイズ性は、今なお健在ですね！

I'll be in touch.