ブログにアプリのダウンロードリンクをきれいに貼る方法【iPhone/Android両対応】

ブログでアプリを紹介するとき、App StoreやGoogle PlayのURLをそのままテキストリンクで貼っていませんか？

それでもリンクとしては機能しますが、読者からするとどんなアプリなのかがリンクだけでは伝わりません。

アイコン付きのカード型リンクにするだけで、見た目が整い、アプリの印象がひと目で伝わるようになります。

さらに、iPhoneユーザーとAndroidユーザーの両方に対応したカードを作れば、読者の端末を問わずダウンロードに誘導できます。

この記事では、アプリリンクカードを作れる方法を比較して、実際にブログに貼るところまで解説します。

この記事の著者

ブログ運営 / WordPressカスタマイズ / SEO

バビ

詳しいプロフィール

プロフィール

WordPress・SEO・ブログ運営の実践情報を、実体験ベースで発信しています。

アプリリンクカードを作る方法は主に3つ

アプリのリンクカードを作る方法はいくつかありますが、大きく分けると3つです。

① Webツールでカードを作ってHTMLを貼る

アプリーチやアプリンカーのようなWebツールでカードを生成し、そのHTMLコードをブログの記事本文にコピペする方法です。

WordPressに限らず、はてなブログやnoteなど、HTMLが貼れるブログサービスなら使えます。プラグインのインストールも不要です。

② WordPressプラグインで記事内から直接作る

WordPressのブロックエディターやショートコードからカードを作成する方法です。

HTML/CSSのコピペが不要で、記事編集の流れの中でそのまま作れます。ただし、WordPressでしか使えません。

③ 手動でHTMLを書く

AppleやGoogleが公式に提供しているバッジ画像を使い、自分でHTMLを組む方法です。

デザインは完全に自由ですが、手間が大きく、数記事以上やるなら現実的ではありません。

大半の人には①か②が向いています。ここからそれぞれ詳しく解説するので、自分に合った方法を選んでください。

方法①：Webツールでカードを作ってHTMLを貼る

最も手軽な方法です。Webツールにアクセスしてカードを生成し、HTMLコードをコピーして記事に貼り付けます。

アプリーチ

サイト：https://mama-hack.com/app-reach

アプリ紹介リンクの生成ツールとしては最も知名度が高いサービスです。

アプリ名で検索してリンクを生成でき、iPhoneとAndroidの両方に対応したカードを作れます。無料で使えて、操作もシンプルです。

ただし、生成されるカードのデザインを調整するにはCSSを自分で書く必要があります。デフォルトのデザインのまま使うこともできますが、ブログのテーマに合わせて見た目を整えたい場合はCSS知識が要ります。

また、過去にサービスが一時停止したことがあり、長期的な継続性にやや不安が残る点は把握しておいた方がいいです。

アプリンカー（AppLinker Card）

サイト：https://shikamori-p.com/applinker/

アプリンカーは、アプリ紹介リンクカードを無料で作れるWebツールです。

アプリ名で検索してカードを生成する流れはアプリーチと同じですが、一番の違いはCSSを書かなくてもデザインを調整できることです。

枠線の有無、角丸、影、ボタンの色、カード幅、表示する情報（開発元、価格など）をすべてGUIで操作でき、プレビューを見ながら調整できます。

iPhone/Android両対応のカードはもちろん、片方のストアだけでも作成できます。アフィリエイトURLへの差し替えにも対応しています。

AppLinkerでカードを作る手順

実際にカードを作る流れを見てみます。

コピーしたコードの貼り付け先は以下の通りです。

WordPress以外のブログでも、HTMLが挿入できる場所にHTMLを、CSSが追加できる場所にCSSを貼れば使えます。

アプリーチとAppLinkerの比較

どちらを使うか迷う人向けに、違いをまとめます。

機能面の大きな差はデザイン調整の方法です。

CSSを書ける人はどちらでもいいですが、CSSに馴染みがない人や、プレビューを見ながら見た目を決めたい人はアプリンカーの方が使いやすいはずです。

方法②：WordPressプラグインで記事内から直接作る

WordPressを使っている場合は、プラグインで記事編集画面から直接カードを作るという選択肢もあります。

HTMLのコピペが不要で、記事を書く流れの中でそのまま操作できるのがメリットです。

アプリンカープラグイン版（ベータ）

アプリンカーにはWebツール版に加えて、WordPressのブロックエディターで使えるプラグイン版があります。

Webツール版との一番の違いは以下の3点です。

アプリ紹介記事を頻繁に書く人にとっては、毎回HTMLをコピペするよりもプラグイン版の方が効率的です。

現在ベータ版（v1.0.0-beta）なので、今後機能やUIが変わる可能性があります。

動作要件はWordPress 6.6以上、PHP 7.4以上です。

WP-Appbox

WP-Appboxは海外製のWordPressプラグインで、ショートコードを使ってアプリリンクを記事に挿入します。

App StoreやGoogle Play以外にも、Amazon Appストア、Microsoft Storeなど多くのストアに対応しているのが特徴です。

ただし、いくつか注意点があります。

多くのストアに対応している点はメリットですが、「iPhone/Android両対応のカードを手軽に作りたい」という用途には向いていません。

方法③：手動でHTMLを書く

AppleとGoogleはそれぞれ、公式のバッジ画像を提供しています。これを使って自分でHTMLを組めば、デザインは完全に自由です。

ただし、この方法ではアプリのアイコンや名前は自分で取得してHTMLに組み込む必要があります。

レスポンシブ対応、デザインの統一、複数アプリへの展開もすべて自力です。

1〜2本の記事でアプリを紹介するだけなら現実的ですが、アプリ紹介記事を定期的に書くなら、ツールやプラグインを使う方が圧倒的に効率的です。

どの方法を選べばいいか

最後に、自分に合った方法の選び方をまとめます。

WordPressを使っていて、アプリ紹介記事を頻繁に書く

→ アプリンカープラグイン版がおすすめです。
HTMLコピペ不要で、デザインの一括変更やアプリ情報の再利用ができるので、記事数が増えるほど差が出ます。

WordPressを使っているが、たまにアプリを紹介する程度

→ アプリンカーWebツール版で十分です。
必要なときだけアクセスしてカードを作り、HTMLを記事に貼ります。
プラグインを増やしたくない人にも向いています。

WordPress以外のブログサービスを使っている

→ アプリンカーWebツール版、またはアプリーチ。
HTMLが挿入できるブログサービスならどちらも使えます。
デザイン調整をCSSなしで済ませたいならAppLinker、慣れ親しんだツールを使いたいならアプリーチ。

完全に自分のデザインでやりたい

→ 手動HTML。自由度は最も高いですが、作成・メンテナンスの手間を許容できる場合のみ。

アプリリンクカードは一度作り方を決めてしまえば、あとは毎回同じ流れで作れます。

自分に合った方法を選んで、まずは1つカードを作ってみてください。

こちらもおすすめ

「noindexタグによって除外されました」の原因と対処法｜WordPress / Search Console 2026-03-13

レビュー記事の検索結果に星★を表示する方法【WordPress構造化データ入門】 2026-03-13

【WordPress】サブディレクトリの作り方。ブログのカテゴリーを別サイト化（ConoHa WING） 2020-05-27

WordPressをhttps化（常時SSL化）する方法を分かりやすく解説します 2020-09-20