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

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

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


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

Download on the App Store

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

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


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



Google Playアプリのダウンロードボタンの作り方は以下の記事を参考にしてください。

目次

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

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

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

STEP
リンクメーカーを開く

まず、リンクメーカを開いてください。

STEP
言語を選択

言語を選択します。
ここでは「日本語」をクリックします。

Maclinkmakerの作り方
STEP
App Storeをクリック
Maclinkmakerの作り方
STEP
紹介したいアプリを検索

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

Maclinkmakerの作り方

検索結果より紹介したいアプリ(ここではSpark)を選んでクリックします。

Maclinkmakerの作り方
STEP
バッジを作成

下にスクロールして「バッジとロックアップ」から「埋め込みをコピー」をクリックします。

Maclinkmakerの作り方
Maclinkmakerの作り方
STEP
ブログに埋め込む

ワードプレスの設置したい箇所に、コピーした埋め込みコードをコピペします。

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

Maclinkmakerの作り方

これでバッチの設置ができました!

バッチの大きさを変える方法

埋め込みコードの最後のwidthheightの値を変えるとボタンの大きさが変えられます。

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

Download on the App Store


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

AppStoreでダウンロード

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

さいごに

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


ダウンロードボタンの作り方を検索したけどリンクメーカのサイトが変わってしまったようで分かりづらく、よく分からなかったので備忘録としてApp Storeのダウンロードボタン作成方法を作ってみました。


参考になれば幸いです。

Google Playアプリのダウンロードボタンの作り方は以下の記事を参考にしてください。

目次