App Storeのアプリを紹介している記事でよく見る、以下のようなダウンロードボタンありますよね?
ボタンをクリックすると、App Storeのアプリダウンロードページに飛べるやつです。
どうやって作るのでしょうか?
このApp Storeのダウンロードボタンは「バッジ」と言います。
バッジはリンクメーカーというサイトから簡単に作成することができます!
App Storeのバッジの作り方を説明をしていきます。
目次
App Storeのアプリを紹介するダウンロードボタンの作り方
メールアプリの「Spark」のダウンロードボタンを作っていきます。
ここではWordPressに貼り付ける例で説明してきます。
- まず、リンクメーカを開いてください。
- 言語を選択します。ここでは「日本語」をクリックします。

- 「App Store」をクリックします。

- 紹介したいアプリを検索します。
ここでは「Spark」と入力してEnterキーを押します。

- 紹介したいアプリ(ここではSpark)を選んでクリックします。

- ここではバッジを作成するので、「バッジとロックアップ」の「埋め込みをコピー」をクリックします。


- ワードプレスの設置したい箇所に、コピーした埋め込みコードをコピペします。
ブロックエディターではカスタムHTMLを選んでコピーしたコードを貼り付けてください。

- 貼り付けるとボタンのできあがりです!
コードの最後の「width」と「height」の値を変えるとボタンの大きさが変えられます。
次はコピーしたままのデフォルト設定で「width: 250px; height: 83px;」のボタンになります。
次のボタンは「width: 150px; height: 50px;」と変更したボタンです。
以上のようにボタンの大きさも変更できます。
さいごに
簡単にApp Storeのダウンロードボタン(バッジ)を作れる方法を説明しました。
ダウンロードボタンの作り方を検索したけどリンクメーカのサイトが変わってしまったようで分かりづらかったです。
色々サイトを探しましたがよく分からなかったので、備忘録としてApp Storeのダウンロードボタン作成方法を作ってみました。
参考になれば幸いです。