App Store・Google Playの公式バッジをダウンロードする方法【2026年】

2026年10月現在の入手方法と、日本語版Google Playバッジで気になった点、2つのバッジをWebサイトに横並びで表示する方法をまとめました。

App Storeの公式バッジをダウンロードする方法

App Storeのバッジは、Apple公式の「App Store Marketing Tools」から取得できます。

• アプリ名を検索
• 検索結果から対象のアプリを選択
• App Storeバッジを選択
• 言語やスタイルを選択
• バッジをダウンロード、または埋め込みコードを取得

App Store Marketing Toolsでは、バッジのほかにもアプリアイコン、QRコード、App Storeへのリンクなども生成できます。

Google Playの公式バッジをダウンロードする方法

Google Playのバッジは、Google公式の「Partner Marketing Hub」から取得できます。

Android DevelopersのマーケティングリソースにもGoogle Playバッジへの案内があり、現在はPartner Marketing Hubに用意された最新素材をダウンロードする形になっています。

Googleは古いバッジ素材を使わず、Partner Marketing Hubから最新バージョンをダウンロードするよう案内しています。

日本語だけ「Print」表記になっている

ここで少し気になったのが日本語版です。

2026年10月現在、Google Playバッジの言語別ダウンロード一覧を見ると、日本語素材は「GetItOnGooglePlay_Badge_Print_color_Japanese.svg」というファイル名で掲載されています。

その下には「Web」と付いた各言語の素材が並んでいますが、少なくとも現在の一覧では日本語の「Web」版は確認できませんでした。

Google公式のマーケティングリソースでは、Google Playバッジは各言語にローカライズしてダウンロードできると案内されていますが、日本語素材だけファイル名の扱いが少し異なるようです。

以前のGoogle Playバッジ画像URLは今も使える

以前この記事では、Google側にある日本語バッジ画像をURLから直接読み込む方法を紹介していました。

使っていた画像URLはこちらです。

https://play.google.com/intl/ja/badges/static/images/badges/ja_badge_web_generic.png

実際の表示例

このURLは2026年10月現在も有効で、バッジ画像も正常に表示されています。Googleから、このURLを廃止するといった告知が出ているわけでもありません。

ただし、Googleの現在のブランドガイドでは、古いバッジを使わずPartner Marketing Hubから最新素材を取得するよう案内されています。

これから新しく設置するなら、直リンクに依存するより公式から最新素材を取得して、自分のサイトに保存して使うほうが安心だと思います。

Google Playバッジの余白問題は解消された？

Partner Marketing Hubから現在配布されている日本語SVGを確認したところ、以前のGoogle Playバッジ画像にあったような大きな外周余白はありませんでした。

そのため、現行素材をダウンロードして使う場合は、以前紹介していたネガティブマージンによる位置調整は基本的に不要です。

一方、旧PNGを直リンクで使う場合は現在でも余白の影響を受けるため、App Storeバッジと並べる際にサイズや位置の調整が必要です。

調整例

<img src="APP_STORE_BADGE_URL" style="height:50px">

<img  src="https://play.google.com/intl/ja/badges/static/images/badges/ja_badge_web_generic.png" style="height:65px; margin-top:-7px">

これから新しく設置するなら、現行素材を使うほうがシンプルです。

App StoreとGoogle Playのバッジを横並びにする

現在の素材を横並びにするなら、Flexboxで同じ高さに揃えるだけで十分です。

たとえば、公式からダウンロードしたバッジを自分のサーバーへ保存した場合は次のように書けます。

HTML

<div class="store-badges">
  <a href="YOUR_APP_STORE_URL">
    <img src="/images/app-store-badge.svg" alt="App Storeからダウンロード">
  </a>

  <a href="YOUR_GOOGLE_PLAY_URL">
    <img src="/images/google-play-badge.svg" alt="Google Playで手に入れよう">
  </a>
</div>

CSS

.store-badges {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  img {
    display: block;
    width: auto;
    height: 50px;
  }
}

この例ではどちらも高さ50pxにしています。

Appleは画面上でApp Storeバッジを高さ40px以上、GoogleはGoogle Playバッジを高さ28px以上としています。

またGoogleは、他のアプリストアのバッジと並べる場合、Google Playバッジを同じ大きさ以上にするよう案内しています。

バッジ自体をトリミングしたり縦横比を変えたりせず、表示サイズだけ調整してください。

※Appleのロゴは、米国もしくはその他の国や地域におけるApple Inc.の商標です。App Storeは、Apple Inc.のサービスマークです。
※Google Play および Google Play ロゴは、Google LLC の商標です。

更新履歴

• 2026年10月1日：公式バッジの入手方法を全面更新。Google Playの現行配布先、日本語バッジのPrint表記、現行SVGの余白を確認し、従来のネガティブマージンによる補正方法を削除
• 2024年8月8日：Google Playバッジの配布URL変更に対応