Google Play と APP Store のリンクを並べるために奮闘

アプリへのリンクは、直接アドレスを指定しても良いんですけど、多少そこはスタイリッシュに行きたいなと言う訳で、ちょっとだけ調べてみました。

ほぼ自分用の忘備録な感もしますが、数多いブクマに埋もれて探すのを苦労するよりは、関連情報として記事にしておきます。

スポンサーリンク
レクタングル大

作りたいリンクのサンプル

※どちらもリンク先は「Google ストリートビュー」
※そしてどちらもデフォルトサイズ

Googleの場合

Google Play で手に入れよう

Appleの場合


リンク作成先

どうせ仕様がコロコロ変わるのを予見して、スクリーンショットは掲載しません。ある程度のキーワードは掲載するので、それでほぼ直観で作成可能だと思います。

Googleの場合

Google Play badge page へアクセスします。

ページ中ごろで設定する

Play ストア URL:ここに対象アプリのURLを入力

・マーケティングにこの HTML バッジを含めます。
この部分のコードを貼ればOK

Appleの場合

iTunes Link Maker へアクセスします。

小さすぎてめっちゃ解りにくい仕組みですが、検索ボックス直下の

ストア国:日本にします

Media Type:Appにします

それから対象のアプリを検索し、アイコンをクリックして表示されたページに記載されている、埋め込みコード部分のコードを貼り付けます。

※JPアクセスでも、初期設定のストア国は米国です。日本を選択するには毎度のごとく果てしなく下の方に表示されるので、下から探した方が早いです。

サイズ合わせがものっそい面倒臭い

コードをそのまま貼り付けると上記の画像サイズになるので、サイズ調整が必要になるんだけど、ものっそい面倒です。

とりあえず画像の Width と Height を指定してからの、上下左右のマージン調整が必要。貼り付け場所次第では、省略可能な部分もあるけど、何度も貼る予定があるならテンプレートコードとして全部指定してても良いんじゃないかな。


もっと良い方法があると思うけど、デザイン系は専門外なので、自分がやった方法は

<div style="float: left;"></div>
でリンクを囲った。これをしないと、縦並びになったので。

<img>タグ内に
style="margin: 12px 0px 0px 0px;" と width="230px" height="40px" 
を追加して微調整。
特にGooglePlayの方で微調整が必要。

最後に
<br clear="both">
で閉めて完了

めんどくっさ!

この調整に辿り着くまで30分は消費しました。

忘備録として残す感じで記事にしてて正解だった。

※スマホで確認したら左位置がズレてたのは宿題!

2017/10/30 宿題と格闘しました。
とりあえず。スマホアプリへのリンクなので、PCメインの表示なんてどうでも良いと考えると、横並びだとスマホのサイズがそれぞれなので、縦表示で良いだろうと考えた。

まずは初期サイズを再確認

Google = 646 × 250
ただし不透明部分を含んでいるので、実態は564 × 168

Apple = 135 × 40
ただし作成時点でサイズ指定がされている。サイズ指定無くすと表示されない。

幅150で換算しなおした

AppleサイズだとGoogleバナーの字がボケるので150で換算してみた。

Google = 170 × 66
これで実態が150 × 46

Apple = 150× 44

それを元に計算して縦に並べたが、まだ微妙に1pxほどズレる・・・

Google Play で手に入れよう

わからぬ!わからぬのじゃ!何故かAppleのリンクが消えてしまう・・・

ビジュアル編集しようとするとAppleリンクが消えてしまうので・・・

諦めたヽ(^o^)丿

こんな事に2時間、3時間どころか、数日も使ってられないわ(笑)

とりあえずまた宿題出来た!

そして驚いた( ゚Д゚)

1pxの闘いになっていたので、調整してはプレビュー・調整してはプレビューを何度も何度も繰り返していたら・・・

アクセス解析でPVが跳ね上がってた・・・

詳しく書きだすと別記事にした方が早いレベルなので割愛するけど、プレビューは1回程度にするか、テストサイトで記事を作成してからアップするか、どちらかにしないとGoogleから警告きそうだわ。

スポンサーリンク
レクタングル大
スポンサーリンク
レクタングル大