The WONDER ROAD

     

Uターンの失敗からリスタートするブログ

2020年03月

以前に
“Google Play で手に入れよう”
のバッジの貼り方を書きましたが
今回はAppleのApp Store用の
バッジの貼りつけかたです。

App_Storeからダウンロード


Contents
  1. "App Storeからダウンロード" をダウンロード
  2. サイズや位置を調整

1."App Storeからダウンロード" をダウンロード


  1. Apple Link Maker にアクセスします。


  2. 「国または地域」は「日本」、「メディアタイプ」は「App」を選択します。

    App_Store_でダウンロード_1

  3. 検索バーにリンクを貼りたいアプリを入力し検索します。

    App_Store_でダウンロード_2

  4. 検索できると埋め込みコードが表示されるのでコピーしてバッジを設置したい位置に貼りつけます。

    App_Store_でダウンロード_3
    App_Store_でダウンロード_4

    サイズはデフォルトで "width:135px;height:40px" が指定されているので、変更したい場合はここの数字を変更します。
これで完成です。

2.サイズや位置を調整する

さっきコピーしたコードを
ブログに貼りつけました。

表示はされましたが
タテにならんで表示されています。

これをなんとか
きれいに横にならべたい。


App_Store_バッジ_1

ソースを見てみると
Google Play バッジのコードが
<div>タグでくくられていました。

これをはずすと

App_Store_バッジ_2

横ならびになりました。

でも、App Storeのバッジが
少し上にずれて表示されています。

このときは "margin-top:10px" を追加して
App Storeのバッジの位置を少し下げます。

HTML


   <a  href="https://apps.apple.com/jp/app/***" 
style="***;width:135px;height:40px;margin-top:10px;"></a>

これで2つのバッジがきれいにならびました。

App_Store_バッジ_3



アプリを紹介するようなページでよく見る

あの
「Google Play で手に入れよう」
のボタンですが

いざ自分のブログに貼りつけるときに
どうすればいいのか?

やってみるととても簡単なので
覚えておきましょう。

Google_Play_で手に入れよう_ブログに貼る方法


Contents
  1. "Google Playで手に入れよう" を手に入れよう
  2. 禁止事項に気をつけて

1."Google Playで手に入れよう" を手に入れよう


  1. Google Play でほしいアプリを表示させ URL を取得します。

    Google_Play_Office_Lens

  2. Google Play バッジ にアクセスします。

    Google_Play_バッジ


  3. 「バッジ作成ツール」を選択します。

    Google_Play_バッジ _2


  4. 言語を「日本語」、作成形式を「デジタル」か「印刷」、ファイル形式を「PNG」か「EPS」を選択します。
    言語で「英語」を選択すると「Google Playで手に入れよう」が「GET IT ON Google Play」になります。

    Google_Play_バッジ _3

    ブログに貼りつけるので、作成形式を「デジタル」、ファイル形式を「PNG」を選択します。「印刷」というのは印刷物の原稿につかったりするんでしょうか。
    「印刷」を選択すると自動的に「EPS」が選択されます。
    "EPS"形式はベクター形式とラスター形式の両方を含むファイル形式になります。

    ベクター形式とラスター形式の違いについてはこちらの記事をご確認ください。



    ちなみに言語で「UTMソース」「UTMキャンペーン」は省略可なので省略します。


  5. 「Play ストア URL」へ1.で表示したページのURLを貼り付けます。

    Google_Play_バッジ _4


  6. 左側の「マーケティングにこの HTML バッジを含めます。」に表示されたHTMLを貼り付けるとバッジが表示されます。
    これをコピーして自分のサイトに貼りつけるだけでバッジが表示されます。

    Google_Play_バッジ _5


  7. ただ、このまま貼りつけると幅いっぱいに表示されてしまいます。

    Google_Play_バッジ _6

    なので、貼りつけるコードの<a>タグにwidth(幅)と height(高さ)を指定してサイズを変更します。

    HTML


    <a  href="https://play.google.com/@@@"><img  src="@@@.png"
    alt="Google Play で手に入れよう" width="155px" height="60px"></a>


    これでちょうど良いサイズで表示されました。

    Google_Play_バッジ _7


2.禁止事項に気をつけて

使用するバッジには
変更を加えてはいけない、
文字がきちんと読めるサイズに
しなければならない、等
禁止事項がありますので
念のため
チェックしておいたほうがいいです。


  • バッジは、Google が提供したそのままの状態で使用してください。変更を加えてはいけません。
  • バッジの周囲には、バッジの高さの 4 分の 1 に相当する余白を設ける必要があります。
  • バッジのサイズは、すべてのテキストが十分に判読できる大きさにする必要があります。
  • Google Play バッジの大きさは、他のアプリストアのバッジと同じかそれ以上にする必要があります。
  • バッジの背景は無地一色またはシンプルな背景画像にして、バッジ自体が埋もれないようにしてください。
  • バッジの言語はできる限り、マーケティング キャンペーンに使用する言語と一致させてください。
  • バッジをオンラインで使用する場合は、必ず Google Play ストアにリンクさせる必要があります。下で説明するバッジ作成ツールを使用すると、デジタル マーケティング用の HTML を作成できます。
  • バッジは、Google Play で入手可能なコンテンツのマーケティングにのみ使用できます。
  • クリエイティブ内にスペースがある場合は、Google Play の適切な法的帰属を含めてください。ローカライズ済みの法的帰属についてはバッジ作成ツールをご覧ください。
  • Google Play バッジを以下の用途に使用する場合は、Google Play パートナー ブランド チームの審査と承認を受ける必要があります。
    • テレビ コマーシャル
    • 屋外でのマーケティング キャンペーン
    • 100 万回以上のインプレッションが発生する見込みのキャンペーン
Google Play バッジより転載>

たったこれだけです。
とても簡単ですよね。



このページのトップヘ