スクロールで現れる固定CTA

商品ページを読み進めて価格が画面外に消えたところで、下から価格＋「カートに入れる」の帯が現れる。上へ戻って価格が見えると帯は引っ込む。

ENGLISH

Scroll-Revealed Sticky CTA

約124行画面のかたち / モバイル・タッチ操作の一覧 →

プレビュー

スクロール

操作枠内をスクロールすると動きます。

仕様書

向く場面: 商品ページで価格が画面外に消えたら購入導線を出す
長い説明の途中でも主 CTA へ届かせたいモバイル
帯に価格＋主 CTA＋安心の一言だけ置く場面
避ける場面: 最初から帯を出しっぱなしにする
副 CTA まで帯に詰める
本文末尾に帯ぶんの余白を取れないページ
構成要素: スクロールする本文
本文中の価格
固定の帯
帯の価格と注記
カートボタン
トースト
持っている状態: 通常
フォーカス
キーボード: Tab でスクロール領域へ入り↑↓で読み進めると帯が出る。帯の「カートに入れる」は Tab で到達し Enter／Space で追加
支援技術: 帯は隠れている間 aria-hidden＋inert で本文の価格と二重に読まれず Tab にも入らない。追加結果は role=status で読み上げ。写真は aria-hidden。reduced-motion で停止
動き: 帯は 280ms ease-out で下からスライド（transform のみで本文を動かさない）、トースト 200ms。価格の可視性で出入りを決める

原則フィッツの法則

比較固定ヘッダー・縮むヘッダー・消えるヘッダー

デザインの要点

帯を出す条件は「本文の価格が画面から消えた」こと。最初から出しっぱなしにすると本文の一部を常に隠す
帯には価格と主 CTA と安心の一言（送料無料・返品可）だけ。副 CTA は本文側に残して主役を守る
帯の高さぶん、本文の末尾に padding-bottom を足す。最後の段落やフッターが帯の裏に隠れる事故を防ぐ
出入りは transform で行う。高さを変えると本文がガタつき、読んでいる位置がずれる

プロのサイトでの実例

Apple別サイト ↗製品ページで、上部の購入導線がスクロールで隠れると価格と購入ボタンの帯が画面上部に固定される

実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。

実装メモ

プレビューでは枠内スクロールのため IntersectionObserver の root を内側のスクローラーにしています。実ページでは root を省略（ビューポート）し、.sco-bar を position:fixed; bottom:0 にしてください。帯が出ていない間は aria-hidden と inert で読み上げと Tab 順から外し、本文の CTA と二重に読まれたり、画面外のボタンにフォーカスが飛んだりしないようにしています。

コード（コピーして使えます）

<div class="sco-phone">
  <div class="sco-scroll" id="sco-scroll" tabindex="0" aria-label="商品ページ（スクロール）">
    <div class="sco-photo" aria-hidden="true"></div>
    <div class="sco-body">
      <p class="sco-brand">ミナト工房</p>
      <h2 class="sco-name">オーク材のサイドテーブル</h2>
      <p class="sco-price" id="sco-price">¥24,800 <span class="sco-tax">税込</span></p>
      <p class="sco-line">送料無料 ・ 30 日以内の返品可</p>
      <h3 class="sco-h">特長</h3>
      <p class="sco-p">無垢のオーク材を 3 年乾燥させてから削り出しています。天板の厚みは 25mm。ソファの肘掛けと同じ高さ（55cm）に合わせました。</p>
      <h3 class="sco-h">サイズ</h3>
      <p class="sco-p">幅 40cm ・ 奥行 40cm ・ 高さ 55cm ・ 重さ 4.2kg。脚は工具なしで取り付けられます。</p>
      <h3 class="sco-h">お届け</h3>
      <p class="sco-p">ご注文から 5〜7 日でお届けします。受注生産のため、1 点ずつ木目が異なります。</p>
      <h3 class="sco-h">お手入れ</h3>
      <p class="sco-p">乾いた布で拭いてください。年に 1 度、オイルを塗り直すと艶が戻ります。オイルは同梱しています。</p>
    </div>
  </div>
  <div class="sco-bar" id="sco-bar" aria-hidden="true" inert>
    <div class="sco-bar-info"><span class="sco-bar-price">¥24,800</span><span class="sco-bar-note">送料無料 ・ 30日返品可</span></div>
    <button class="sco-btn" type="button" id="sco-btn">カートに入れる</button>
  </div>
  <p class="sco-toast" id="sco-toast" role="status" aria-live="polite"></p>
</div>