iPhoneでサイトをホーム画面に追加した時のアイコンはどうやって指定するの?

iPhoneのホーム画面に以下のようなURLショートカットアイコンを表示できることを知ってましたか?

01_1.png

今回はこのURLショートカットアイコンをホーム画面に追加する方法と、サイト制作者がこのアイコンを指定する方法について紹介したいと思います。

そもそもこのアイコンは何?

このホーム画面上のアイコンは、iPhoneやiPod touchなどのSafariで見たサイトへのショートカットなのです。Safariのブックマークではなく「ホーム画面に追加」すると、このアイコンがホーム画面上に追加されます。僕自身iPhoneをそれなりに長いこと使っているんですが、この機能はつい先日知りました。mixiがスマートフォンに対応したというニュースを見て、iPhoneで mixiTouchにアクセスして気づいたのです。ホーム画面にショートカット・アイコンを追加する方法は次のとおりです。

1.まず、サイトを開きます。

02.png

2.「+」ボタンを押します。

02_1.png

3.「ホーム画面に追加」を選択します。

03_1.png

4.タイトルを確認します。

04.png

5.追加完了です。

01.png

ホーム画面への追加は簡単です。

サイト制作者はどうやってアイコンを指定するの?

さてそれでは、サイト制作者はどうやってこのアイコンを指定するのでしょうか?サイト制作者がアイコンを指定していない状態でユーザーがホーム画面の追加を行った場合は、次のようにサイトキャプチャがそのままアイコンになってしまいます。

05_1.png

せっかく作ったスマートフォンに対応したサイトなら、細かい所までケアしたいものです。このアイコンの指定方法、実は簡単です。headタグ内に以下を追加して、アイコン用の画像を用意するだけで指定できます。

<link rel="apple-touch-icon" href="画像パス" />

アイコン画像の仕様については以下にまとめておきます。

項目 説明
アイコン画像
サイズ
57×57ピクセル
(但し、正方形であれば57ピクセル以上でも可)
アイコン画像
フォーマット
gif,jpg,png,bmpいずれも可

ちなみにアイコン画像は勝手に「つや出し効果」と「角丸」にしてアイコンっぽくしてくれるので、画像を作成するときはその辺は気にしないで大丈夫です。

角丸は防げないですが、もし勝手な効果をつけたくない場合はapple-touch-iconをapple-touch-icon-precomposedとすれば良いです。あとアイコンのタイトルはtitleタグの内容がデフォルトで適用されます。以下が今回作成した画像。

taro二次会アイコン

今回色々と試している中でわかったのですが、一度ホーム画面にサイトキャプチャで登録されてしまった場合も、アイコン画像を設定し直したサイトに再度アクセスすることで以下のようにホーム画面のアイコンは設定した画像に変わります。そのため、初めは設定していなかった場合でも、後で修正すればちゃんと各ユーザーのiPhone上に反映されるので安心です。

06.png

これで細部までこだわったスマートフォンサイト制作の役に立てばと思います。

ちょっと宣伝:シンメトリック製品のスマートフォン対応について

今回mixiがmixiTouchとしてスマートフォン向けのサイトを作成したのですが、これは今後の爆発的なスマートフォンの普及を想定してのことでしょう。まー、潤沢な開発資金と運用資金があればPC、携帯、スマートフォンって3つバラバラなものを作成管理していくのがベストだと思います。でも正直なところ、たいていの案件では、モバイルに割り当てられる予算はあまり多くないでしょう。かと言って、今後のことを考えるとスマートフォンにも対応しないわけにもいかない感じだと思います。

そこで今回宣伝したいのが、シンメトリックが提唱しているスマートフォン対応です。簡単に説明してしまうと、スマートフォンに合わせた画像の大きさや配置でサイトを作って、それを通常の携帯でも見せればいいじゃん!という考えです。そして、それを実現するのがラウンドアバウトという携帯コンテンツ変換エンジンです。興味があれば是非見てみてください。

参考サイト:Safari Web Content Guide

  • Pingback: iPhone用 ホーム画面 アイコン | MWT Lab.

  • reo
    全くやり方がわかりません(´;Д;) 自分はiPod touchなのですが iPod touchでは無理なのでしょうか…?
  • ya-yo
    reoさん コメントありがとうございます。随分レスポンスが遅くなってしまいまして申し訳ないです。 iPod touchでも同じ方法、headタグ内に <link rel=”apple-touch-icon” href=”画像パス” /> を記載しておき、アイコン画像をhrefで指定したパスに正しく配置しておけばウェブページを「ホーム画面に追加」で指定したアイコンになると思うので、お試しください。 ちょっと古いですが、以下のサイトにもわかりやすい記述があるので参考にしてみてはいかがでしょうか? http://www.design-oil.com/blog/2008/02/21/331 ※アイコン画像サイズについては最近は150px×150pxで作るのが良いようです。
  • コント
    書いていた通りにして、出来ました。ありがとうございました
  • Pingback: iPhone/アンドロイド系端末からスマホ専用サイトよりアクセスできます。 | カプセルホテル -Capsule Hotel Japan-

  • Pingback: アプリと連動、電子書籍の特性を活かした『GARAPAGOS STORE』 | スマートフォン&モバイルEC事例・ノウハウ集

  • Pingback: WordPressテーマ「STINGER3」のファビコン、アイコン画像をカスタマイズ

  • hakama
    はじめまして!おかげさまで出来ました。ありがとうございます!! 更に質問です!この方法だとサイト名が「あいうえお食堂」だけど あいうえお食堂〜笑顔で新鮮な定食をどうぞ〜 みたいにしている場合、ユーザーがホーム画面に追加する際「あいうえお食堂 | 笑顔で新鮮な定食をどうぞ」が名前に入ります。もちろんユーザーが名前の修正で「〜笑顔で新鮮な定食をどうぞ〜」を消してくれれば、ホーム画面のアイコンの下は「あいうえお食堂」になります。しかしユーザーが消してくれない場合「あいうえお食堂〜笑…」みたいな中途半端な表示になってしまいます。 ユーザーがホーム画面に追加する際、自動的に「あいうえを食堂」だけで登録されるようには可能でしょうか?
    • ya-yo
      hakamaさん コメントありがとうございます。 少しでもお役に立てたようで良かったです! アイコンの下に任意の文字を登録する方法ですが、head内に以下のタグで指定してあげるとcontent属性の部分で実現できます。 ただ、文字数によっては省略されてしまいますので、うまくいかない場合は文字数を調整してみてくださいね。
      • hakama
        できました!バッチリです!ありがとうございます! もう一つ追加で質問させてください。この方法で「アイコン指定、文字指定」は行えました。私の作成しているページは1枚もののシングルページで、ページ内リンクがいくつか張られています。トップはwww.single.jpなのですが、メニューでページ内移動するとwww.single.jp/#3などに移動します。 この際、ユーザーがトップでホーム画面に追加してくれれば、ユーザーが次回ホームのアイコンから来た場合はトップが表示されるのですが、#3などに移動後にホーム画面に追加したアイコンからだと#3が開いてしまいます。 トップは最新情報の更新などを含めて、すべてのユーザーにまず見てもらいたい情報が詰まっているので、#3でホーム画面に追加してくれたユーザーにも必ずトップ(#なし)が表示されるようにしてあげたいのですが、何か良い方法はあるでしょうか?
        • ya-yo
          hakamaさん ご質問頂いた件について色々試したり、調べてみたのですが、現在の仕様ではどうしてもアドレスバーに表示されているURLがリンク先として指定されてしまうので、簡単な方法では実現は難しそうです。 恐らくですが、「ホーム画面に追加」という機能はサイトを利用するユーザーにとってはブラウザのブックマークへのショートカットをスマートフォンのホーム画面に追加する感覚だと思うので、仕様としてはユーザーがどこに対してブックマークしたいかというユーザー目線が重要視されていて、サイト運営側として「どこにブックマークしてほしいか」という意向までは吸収できないのではないかと思ってます。。。。
          • hakama
            なるほど!現状ではそのように出来ないのですね!わざわざ調べてもらいまして本当にありがとうございました!