フッター初級

アプリDLフッター（バッジ＋QR）

App Store / Google Play のバッジとQRコードを添えた、アプリ訴求フッター。PCではQRでスマホへ誘導、モバイルではバッジで直接ストアへ。アプリを持つサービスの定番です。

#footer#app#download#qr

ライブデモ

使用例（お題: カフェ MOON BREW）

この技法を「カフェ MOON BREW」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- MOON BREW：モバイルオーダーアプリのDLフッター -->
<footer class="fad">
  <div class="fad-inner">
    <div class="fad-left">
      <p class="fad-eyebrow">MOBILE ORDER</p>
      <h2 class="fad-title">並ばずに、一杯を。</h2>
      <p class="fad-sub">アプリで事前注文。受け取り時間を指定して、できたてをスムーズに。</p>
      <div class="fad-badges">
        <button class="fad-badge" type="button"><span class="fad-badge__ico"></span><span class="fad-badge__txt"><small>Download on the</small><b>App Store</b></span></button>
        <button class="fad-badge" type="button"><span class="fad-badge__ico fad-badge__ico--g"></span><span class="fad-badge__txt"><small>GET IT ON</small><b>Google Play</b></span></button>
      </div>
    </div>
    <div class="fad-qr" aria-label="QRコード">
      <div class="fad-qrgrid"></div>
      <p class="fad-qr__cap">スマホで読み取る</p>
    </div>
  </div>
  <div class="fad-bar">
    <a class="fad-logo" href="#" onclick="return false">☕ MOON BREW</a>
    <span>© 2026 MOON BREW</span>
  </div>
</footer>

CSS

/* MOON BREW（カフェ）：アプリDLフッターの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.fad { width: 100%; min-height: 380px; display: flex; flex-direction: column; background: #1a120a; color: #efe2d2; }
.fad-inner { flex: 1; display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 30px; padding: 36px 32px; }
.fad-eyebrow { margin: 0 0 10px; font-size: 11px; letter-spacing: .28em; color: #c9a877; font-weight: 700; }
.fad-title { margin: 0; font-size: 28px; font-weight: 800; font-family: "Hiragino Mincho ProN", serif; }
.fad-sub { margin: 12px 0 22px; font-size: 13.5px; color: #c2ad92; line-height: 1.7; max-width: 340px; }
.fad-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.fad-badge { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 9px 16px; border-radius: 12px; border: 1px solid #3a2c1c; background: #241a10; color: #fff; transition: border-color .2s ease, transform .15s ease; }
.fad-badge:hover { border-color: #c9a877; transform: translateY(-2px); }
.fad-badge__ico { width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #f5e6cf, #e0c79a); }
.fad-badge__ico--g { background: linear-gradient(135deg, #84cc16, #e0a458); }
.fad-badge__txt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.fad-badge__txt small { font-size: 9px; opacity: .7; }
.fad-badge__txt b { font-size: 14px; }

.fad-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fad-qrgrid { width: 124px; height: 124px; border-radius: 14px; padding: 10px; background: #fff; background-image: linear-gradient(#1a120a 2px, transparent 2px), linear-gradient(90deg, #1a120a 2px, transparent 2px); background-size: 14px 14px; background-position: 10px 10px; box-shadow: 0 14px 34px rgba(0,0,0,.4); position: relative; }
.fad-qrgrid::before, .fad-qrgrid::after { content: ""; position: absolute; width: 30px; height: 30px; border: 6px solid #1a120a; border-radius: 8px; background: #fff; }
.fad-qrgrid::before { top: 12px; left: 12px; }
.fad-qrgrid::after { top: 12px; right: 12px; }
.fad-qr__cap { margin: 0; font-size: 11px; color: #c9a877; }

.fad-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; font-size: 12px; color: #c9a877; border-top: 1px solid #2a1f13; }
.fad-logo { font-size: 16px; font-weight: 800; color: #fff; text-decoration: none; }

@media (max-width: 560px) { .fad-inner { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fad-badge { transition: none; } }

実装ガイド

使いどころ

アプリを提供するサービスのフッターに。App Store / Google Play バッジとQRコードで、PCからはQRでスマホへ、モバイルからはバッジで直接ストアへ誘導します。

実装時の注意点

QRは繰り返しグラデと擬似要素のファインダー（角の四角）でコード風に描いたダミー。実運用では生成したQR画像に差し替えます。バッジはホバーで浮き上がります。

対応ブラウザ

background-image の繰り返しグラデ・flexbox は全モダンブラウザ対応。QR画像差し替え時も同様です。

よくある失敗

QRは実物に必ず差し替えること（ダミーのまま公開しない）。バッジは各ストアの公式アセット規約に沿った見た目に。モバイルではQRを隠してバッジのみ見せると親切です。

応用例

対応OS判定でバッジを出し分け、ディープリンク対応、レビュー星評価の併記、機能スクリーンショットの追加などに展開できます。

コード