【App Storeバッジの作り方】アプリのダウンロードボタンを作ってみよう!

App Storeのアプリを紹介している記事でよく見る、以下のようなダウンロードボタンありますよね?

ボタンをクリックすると、App Storeのアプリダウンロードページに飛べるやつです。


どうやって作るのでしょうか?

Download on the App Store

このApp Storeのダウンロードボタンは「バッジ」と言います。

バッジはリンクメーカーというサイトから簡単に作成することができます!


App Storeのバッジの作り方を説明をしていきます。

目次

App Storeのアプリを紹介するダウンロードボタンの作り方

メールアプリの「Spark」のダウンロードボタンを作っていきます。

ここではWordPressに貼り付ける例で説明してきます。

  1. まず、リンクメーカを開いてください。
  2. 言語を選択します。ここでは「日本語」をクリックします。
Maclinkmakerの作り方
  1. App Store」をクリックします。
Maclinkmakerの作り方
  1. 紹介したいアプリを検索します。

ここでは「Spark」と入力してEnterキーを押します。

Maclinkmakerの作り方
  1. 紹介したいアプリ(ここではSpark)を選んでクリックします。
Maclinkmakerの作り方
  1. ここではバッジを作成するので、「バッジとロックアップ」の「埋め込みをコピー」をクリックします。
Maclinkmakerの作り方
Maclinkmakerの作り方
  1. ワードプレスの設置したい箇所に、コピーした埋め込みコードをコピペします。

ブロックエディターではカスタムHTMLを選んでコピーしたコードを貼り付けてください。

Maclinkmakerの作り方
  1. 貼り付けるとボタンのできあがりです!

コードの最後の「width」と「height」の値を変えるとボタンの大きさが変えられます。

次はコピーしたままのデフォルト設定で「width: 250px; height: 83px;」のボタンになります。

Download on the App Store



次のボタンは「width: 150px; height: 50px;」と変更したボタンです。

AppStoreでダウンロード

以上のようにボタンの大きさも変更できます。

さいごに

簡単にApp Storeのダウンロードボタン(バッジ)を作れる方法を説明しました。


ダウンロードボタンの作り方を検索したけどリンクメーカのサイトが変わってしまったようで分かりづらかったです。

色々サイトを探しましたがよく分からなかったので、備忘録としてApp Storeのダウンロードボタン作成方法を作ってみました。


参考になれば幸いです。

目次