[iPhone]アプリのダウンロードボタンをつけてみた!

Icons! (161 / 365)
Icons! (161 / 365) Photo by somegeekintn

なんか最近皆さんの記事にあるアプリのダウンロードボタンが大きくなっている?

MyEditor MyEditor
価格: ¥350
カテゴリ: ビジネス, 仕事効率化
App Storeで詳細を見る

アプリをダウンロードする


というわけで僕も作ってみたくなったのでAppHTMLをカスタマイズしてつけてみることにしました!
もう皆さんブログで紹介されている方がたくさんいるとは思いますが自分用で作り方を載せておくことにします!

参考にしたブログ

delaymaniaさんを参考にして作ってみました。

アプリをダウンロードするボタンが付くようにAppHTMLをカスタマイズしました | delaymania

ダウンロードボタンを作る

まずはボタンを作ってみた。既にあるボタンを頂いてもいいけど「ボタン素材 自動生成サイト」という便利なサイトがあったので自作してみた。

ボタン素材 自動生成サイト – ButtonMakerアフラット

上のサイトで作ったボタンがこちら

Appdownload2

Appdownloadb2

ブログにあわせてと思ったけどブラックでいいかな!
このサイトでは、フォントもいろいろ変えることが可能だし、カドを丸くしたりすることもできますね!
出来上がったボタンを保存します。

ボタン画像をアップロード

出来上がったボタン画像をWordPressのメディアのアップロードでアップロードします。

AppBotane 20121224

そしてボタン画像のURLをコピーします

AppBotane2 20121224

delaymaniaさんのソースをコピーして
ソースは改行をとりましょう。そのままだとうまくいかなかった!

AppBotane03 20121224

Bookmarklet生成!

Bookmarkletリンク集のAppHTMLへ

Bookmarkletリンク集

AppHTMLの中のカスタマイズするときに入れる欄に先ほどソースをいれます。このとき上のテンプレートは選択しないでおきます。

AppBotane4 20121224

ペーストしたソース内のURLを先ほどアップロードしたものに変更してブックマークレットを生成してできあがり!ブラウザー上にブックマークしたりiPhone上でブックマークしましょう!

完成!

出来上がったのがこれです!

MyEditor MyEditor
価格: ¥350
カテゴリ: ビジネス, 仕事効率化
App Storeで詳細を見る

アプリをダウンロードする


ダウンロードがわかりやすくなったね!

さいごに

ブログでアプリ紹介をするのはいいんだけど、初心者はダウンロードボタンを探してしまうとかダウンロードする方法がわからないということを知りました。これでわかりやすくなるかな?それとクリック数が増える効果もあるのだとか。これはやってみる価値ありですね!

クリック数がこれだけ上がる! アプリダウンロードボタン設置前と設置後を比較 | NANOKAMO BLOG

ボタンは既にあるボタンを頂いてもな〜と思ったので文字をちょっと変えて自作してみました。ボタン作成のページがなかなか良かった!カスタマイズするときに使えるかな?

ところでMac上に作ったのでiPhone上でもと思ったらうまくいかない。Mac上で作ったのをiPhoneに流そうかな。

皆さんも自分のボタンを作ってみてはいかがでしょうか!tatoでした!