モバイル LP が「縦長」になる宿命

スマートフォン画面は PC の 1/4〜1/6 程度。バナー 1 枚だけでもファーストビューを占領し、
必然的に縦方向へレイアウトが伸びる。縦長＝離脱率が上がる という先入観を持つ人もいるが、実は 新規訪問ユーザーの 65 % は 75 % 以上のスクロールを行う という調査もある。

問題は長さそのものではなく、「視覚的単調さ」 と 「操作負荷」。同じテンポで似たブロックが続けば飽きられ、要所で CTA が現れなければ離脱を招く。この記事では「流れを切らずに変化を生む」4 つの演出を解説する。

演出①：リズミカルな セクション間コントラスト

✔ ポイント

• 背景色・タイポグラフィ・レイアウト・メディア形式の4 軸すべてでコントラストをつける
• 3〜4 ブロックごとにリズムを変え、「チャプター感」を演出
• CSS の scroll-snap を併用すると「1 画面＝1 メッセージ」が際立つ

// スクロールスナップのベース
.snap-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}
.snap-section {
  scroll-snap-align: start;
  min-height: 100vh;      // 1 画面を占有
  display: flex;
  align-items: center;
  justify-content: center;
}

レイアウトパターン例

1. フルスクリーンヒーロー — 写真＋キャッチコピー（暗色背景 × 白文字）
2. カードカルーセル — Swiper.js で横スクロール（ライトグレー背景）
3. 証言動画＆引用 — 全幅動画＋セリフ字幕（白背景 × 太字ブラック）
4. 統計データグラフ — SVG アニメーション（ブランドカラー背景）

コントラストを意識すると「次は何が出てくる？」という期待が生まれ、縦に長くても退屈しない。

演出②：マイクロインタラクションで視線誘導

マイクロインタラクションとは「タップ・スクロール・ホバーなど、
1 回のアクションに対する小さなフィードバック」。
スマホ LP では Intersection Observer を使って「要素がビューポートに入った瞬間」
だけアニメーションを再生するとコストが低い。

// appear クラスを付与して一度だけ再生
const io = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (e.isIntersecting) {
      e.target.classList.add('appear');
      io.unobserve(e.target);        // 一度で終了し負荷を軽減
    }
  });
}, { threshold: 0.3 });              // 30% 見えたら発火

document.querySelectorAll('.js-animate').forEach(el => io.observe(el));

使いどころ

• 商品の特徴アイコン：ズームイン＆フェード
• 数字カウンター：countUp.js で増加演出
• ボタンホバー：指が触れた瞬間にカラーが変わるタップフィードバック

1〜2 秒未満の小さな動きを点在させることでリズムが生まれ、指を動かし続けたくなる。

演出③：軽量パララックス & メディアミックス

フルページパララックスは 60fps を保つのが難しいが、
背景層だけを動かすワンポイントパララックスならモバイルでもスムーズ。
加えて「動画・静止画・ Lottie アニメ」の メディアミックス が効果的。

.parallax {
  background-image: url('/img/bg-stars.webp');
  background-attachment: fixed;   /* iOS16 以降は fixed が機能 */
  background-size: cover;
  background-position: center;
}

ベストプラクティス

• will-change: transform と content-visibility: auto で GPU レンダを最適化
• 画像は AVIF / WebP、動画は H.265 / VP9＋長さ 6〜12 秒のループ
• アニメーションは Lottie（JSON） を lottie-web で再生し、300 KB 以内に収める

背景層でゆっくり動く星空、その上に半透明シェイプ、
さらに前景の製品画像をクロップアウトする 3 レイヤー構成は、
ユーザーに没入感を与えつつファイルサイズも抑えられる。

演出④：Sticky CTA と スクロールプログレス

縦長 LP では「いま 何章目なのか」「いつ CTA が来るのか」を示すと離脱が減少する。
おすすめは以下の 2 つの同時採用。

1. プログレスバー：上部 3 – 4px のシンプルバーが進捗を可視化
2. Sticky CTA：CTA ボタンを下部に固定し、セクション毎に文言を差し替え

// Sticky CTA をセクションに応じて動的変更
const cta = document.getElementById('stickyCTA');
const sections = document.querySelectorAll('[data-cta]');

window.addEventListener('scroll', () => {
  const pos = window.scrollY + window.innerHeight / 2;
  sections.forEach(sec => {
    if (pos > sec.offsetTop && pos < sec.offsetTop + sec.offsetHeight) {
      cta.textContent = sec.dataset.cta;  // data-cta 属性を読み込む
    }
  });
});

CTA を常に視野に置き、かつコンテンツに合わせてコピーが変わるため心理的負荷が大幅に下がる。
プログレスバーは CSS のみでも可能。

.progress {
  position: fixed;
  top: 0; left: 0; height: 4px;
  background: var(--brand);
  width: calc(100% * var(--scroll));
}

--scroll には scrollY/(bodyHeight - vh) の値を JS で代入。

実装チェックリスト（パフォーマンス & アクセシビリティ）

項目	推奨値 / 方法
LCP（Largest Contentful Paint）	2.5 s 以下：ヒーロー画像を即時プリロード
CLS（Cumulative Layout Shift）	0.1 未満：画像に width height を埋め込む
JS バンドル	150 KB 以下／HTTP2 による分割ロード
画像フォーマット	95 % 以上を WebP / AVIF へ変換
スクロールアニメ	requestAnimationFrame＋transform・opacity の 2 プロパティで完結
色覚バリアフリー	WCAG AA コントラスト 4.5:1 を遵守
ARIA	アコーディオンやモーダルは aria-expanded aria-modal を正しく設定

Google PageSpeed Insights と Lighthouse で 85 点以上を目標にすると、
SEO シグナルとしても高評価を得られる。

まとめ：演出は「体験設計」の手段である

縦長 LP を最後まで読ませる鍵は「変化・参加・達成感」。

1. セクション間コントラストでテンポを刻み、
2. マイクロインタラクションで操作への小報酬を与え、
3. 軽量パララックスで没入感を高め、
4. Sticky CTA＋プログレスでゴールを明確にする。

4 つの演出は単独でも効果があるが、「物語の構造」を意識して連鎖させると相乗効果が生まれる。
コンバージョン率 1 % の差は、スマホユーザーの「気持ちよくスクロールできた」か
どうかが左右する――そう考えて、コードとデザインの両面から磨き上げてほしい。

次のステップ

1. 現行 LP を Lighthouse で計測し、離脱セクションを特定する
2. 本記事の 4 演出を 1 つずつ A/B テストで導入
3. 結果を基に KPI（CVR・平均スクロール％・滞在時間）を改善サイクルへ組み込む

あなたのスマホ特化 LP が、縦長でもスクロールが止まらない魅力的な体験になることを祈っています。