モバイルアプリのランディングページ例とテンプレート
モバイルアプリのランディングページ例
モバイルアプリのランディングページ例：編集できるセクション + バッジのルール | We.Inc
その場で編集できるオリジナルのアプリLPセクション。スマホモックアップのヒーロー、機能、手順、ダウンロード帯に加え、App StoreとGoogle Playのバッジの公式ルールも紹介します。
アプリのランディングページの役割はただ1つ、適切な人にインストールしてもらうことです。まずアプリで何ができるかを1文で伝え、スマホの枠の中で動いている様子を見せ、App StoreとGoogle Playの公式バッジを上部と最後の両方に置きます。サイズや余白については、各ストアのバッジのルールに従いましょう。
ストアバッジのルール早見表（2026年10月時点で確認）
- ルール
- App Storeバッジ
- Google Playバッジ
- 文言
- App Storeからダウンロード
- Google Play で手に入れよう
- 周囲の余白
- バッジの高さの4分の1
- バッジの高さの4分の1
- ほかのバッジと並べる場合
- 最初に配置し、黒いバッジを使う
- ほかのバッジと同じかそれ以上の大きさにする
- 許される変更
- なし：改変、傾け、アニメーションは不可
- なし：色の変更や要素の並べ替えは不可
アプリページのまとめ記事の多くは、スクリーンショットのギャラリーです。このページでは、架空のアプリ用に作ったセクションそのものを素のHTMLとCSSで提供し、ヒーロー用の小さなジェネレーターも用意しています。本物のバッジ画像はAppleとGoogleから入手する必要があるため、バッジの場所はプレースホルダーにしています。
- ヒーロージェネレーターにアプリ名、1行の約束、ブランドカラーを入力し、HTMLをコピーします。
- 機能、使い方、最後のダウンロード帯と、セクション例を順に進めます。
- AppleとGoogleのマーケティングページから公式バッジをダウンロードし、プレースホルダーの枠に入れます。
- 各バッジを、そのストアのアプリ掲載ページに直接リンクします。
- 使い心地より先に、アプリで何ができるかを伝えましょう。「家賃や光熱費をルームメイトと割り勘」のような1文は、スローガンに勝ります。
- スマホの枠の中には、アプリの実際の画面を表示しましょう。ダミーデータは構いませんが、存在しない機能は不可です。
- Appleのガイドラインでは、App Storeバッジは1つのレイアウトに1つだけとし、メインのメッセージより目立たない位置に置くよう求めています。
- スマートフォンでは、訪問者のプラットフォームのバッジだけを表示することも検討しましょう。もう一方のストアのアプリはその端末にインストールできないからです。
- デスクトップでは小さなQRコードの枠を加えると、訪問者がワンステップでスマホに移れます。
よくある質問
モバイルアプリのランディングページには何を載せるべきですか？
アプリで何ができるかを伝える1文の見出し、実際の画面を映したスマホのモックアップ、成果として書いた3〜4つの機能、短い使い方の帯、公式のストアバッジ、そしてプライバシーポリシーへのリンクです。最後のダウンロード帯でバッジを繰り返します。
App StoreやGoogle Playのボタンを自作してもいいですか？
いいえ。どちらの企業も、公式のバッジ画像を変更せずに使うよう求めています。Appleのページではバッジを改変したり、傾けたり、アニメーションさせたりしないよう定めており、Googleのページでは色の変更や要素の並べ替えを禁じています。各社のマーケティングリソースからファイルをダウンロードしてください。
ストアバッジはどのくらいの大きさにすべきですか？
AppleはApp Storeバッジの画面上の最小の高さを40ピクセル、GoogleはGoogle Playバッジを28ピクセルと定めています。両方を並べる場合、Googleは自社のバッジをほかのバッジと同じかそれ以上の大きさにするよう求めています。
アプリがストアにあれば、Webサイトは必要ありませんか？
自社ドメインのページは、広告、メール、SNS投稿からリンクでき、プライバシーポリシーを掲載でき、アプリの用途に関するWeb検索で上位表示を狙える場所です。ストアの掲載ページだけでは、そのすべてはできません。
ほとんどのアプリに合う構成
- 上部：見出し、補足の1行、バッジ、スマホのモックアップ。中部：成果として書いた機能と、3ステップの使い方の帯。下部：今すぐインストールする短い理由を添えて、バッジをもう一度。
- ページは短く保ちましょう。心を決めた訪問者がほしいのはバッジであって、さらなるスクロールではありません。
バッジと配置
- どちらのストアも、バッジの周囲にバッジの高さの4分の1の余白を求めています。複数のストアバッジを並べる場合、Appleは黒いバッジを推奨し、自社のバッジを最初に置くよう求めています。
- 「App Storeからダウンロード」のように、バッジの文言と一致する代替テキストを使いましょう。スクリーンリーダーの利用者に、リンク先が伝わります。
コピーして使えるアプリLPのセクション
スマホのモックアップとバッジ枠付きのヒーロー
見出しの横に、CSSだけで作ったスマホの枠を置きます。画面幅が狭いと、スマホは文章の下に回ります。
成果として書いた機能
各カードは機能名ではなく、利用者が得られるものから始めます。
3ステップの使い方
番号付きの手順にすると、利用開始までが短く感じられます。順序が読み上げられるよう、順序付きリストを使いましょう。
QR枠付きの最後のダウンロード帯
最後にバッジを繰り返します。QR枠は、スマホに切り替えたいデスクトップの訪問者向けです。
アプリ画面の横スクロール帯
自分のボックス内で横にスクロールする帯なので、ページ自体が横にスクロールすることはありません。
アプリLPのチェックリスト
公開する前に
- 見出しでアプリで何ができるかを伝えている
- 平易な1文で
- モックアップに実際の画面を使っている
- アプリにない機能は載せない
- 公式バッジを変更せずに使っている
- AppleとGoogleからダウンロードしたもの
- 各バッジがストアの掲載ページにリンクしている
- ストアの汎用トップページではなく
- バッジの代替テキストが文言と一致している
- スクリーンリーダーの利用者のため
- フッターにプライバシーポリシーへのリンクがある
- 訪問者や審査担当者が見つけやすいように
- 最後にバッジを繰り返している
- 最後まで読んだ人のため
アプリのヒーロージェネレーター
見出し、補足の1行、画面の色を入力すると、CSSのスマホ枠と2つのバッジ枠を持つヒーローセクションを作れます。作ったらHTMLをコピーしてください。
見出し
補足の1行
画面の色
1週間の予定を5分で立てよう
Weekbirdは、やることリストを落ち着いた現実的なスケジュールに変えます。
あなたのアプリのヒーロー
これをコピーし、破線の枠を公式のバッジ画像に置き換えてください。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る