スマホユーザーを逃さない！CSSで作る縦スクロール設計

おはようございます！株式会社ファストコーディングの働くおかんです！

最近、息子（小学生）がスマホでYouTubeショートを見ているのをよく観察するんですが、もうずーっと縦にシュッシュッとスワイプしているんですよね。興味なければ即スワイプ、面白ければ止まる。この「縦にスワイプして次へ」という動作が完全に体に染みついているんだなって思いました。

TikTokもInstagramリールも、全部そうですよね。今の10代〜30代のユーザーにとっては「縦にスワイプ＝次のコンテンツ」が当たり前の操作になっています。

で、ふと思ったんです。この「縦スワイプの習慣」って、Webサイトの設計にも活かせるんじゃないかなと。ユーザーがすでに慣れている操作に合わせれば、それだけで使いやすくなるはずですよね。

今回は、そんなスマホユーザーの行動習慣に合わせた縦スクロール設計をCSSで実装する方法をご紹介します！

なぜ今「縦スクロール設計」なの？

ちょっと前まで、Webサイトのモバイル対応といえば「レスポンシブにしてPCのレイアウトを縮小する」がメインでした。でも今は、ユーザーの操作習慣そのものが変わっています。

TikTokの月間アクティブユーザーは世界で10億人以上。YouTubeショートの1日あたりの再生回数は700億回を超えています。これだけの人が毎日「縦にスワイプ」しているわけです。

この習慣がWebサイトの閲覧にも影響しています。スマホを片手で持って、親指で上下にスクロール。これがもう一番自然な動きなんですよね。横スワイプやタブ切り替えは、ユーザーにとって「余計なひと手間」になりがちです。

だから、コンテンツを縦方向に整理して、スクロールだけで情報が完結する設計がとても大切なんです。

CSS scroll-snapで「ピタッと止まる」セクション切り替え

まず紹介したいのが、CSSのscroll-snapです。これを使うと、スクロールしたときにセクションの先頭でピタッと止まってくれるんです。TikTokのような「1画面ずつ切り替わる」体験がCSSだけで作れます！

<div class="snap-container">
  <section class="snap-section" style="background: #FF6B6B;">
    <h2>サービス紹介</h2>
    <p>私たちが提供するサービスの特徴</p>
  </section>
  <section class="snap-section" style="background: #4ECDC4;">
    <h2>実績</h2>
    <p>これまでの制作実績をご紹介</p>
  </section>
  <section class="snap-section" style="background: #45B7D1;">
    <h2>お問い合わせ</h2>
    <p>お気軽にご相談ください</p>
  </section>
</div>

.snap-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.snap-section {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 2rem;
}

.snap-section h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.snap-section p {
  font-size: 1rem;
  opacity: 0.9;
}

ポイントはscroll-snap-type: y mandatoryです。yで縦方向を指定して、mandatoryで「必ずスナップポイントに止まる」ようにしています。-webkit-overflow-scrolling: touchは、iOSでの慣性スクロールを有効にするためのプロパティです。

これだけで、TikTokのように指でスーッとスクロールすると次のセクションにピタッと切り替わる気持ちいい動きになります！ユーザーが普段やっている操作と同じ感覚なので、説明なしで直感的に使ってもらえるんですよね。

カード型コンテンツを「縦に並べて読みやすく」

次は、よくあるカード型レイアウトの話です。PCだと横に3列とか4列に並べることが多いですよね。でもスマホでそのまま縮小すると、カードが小さくなりすぎて読めない…ということがよくあります。

モバイルでは、思い切って1列の縦並びにしてしまうのがおすすめです！

<div class="card-list">
  <article class="card">
    <div class="card-img">
      <img src="service-01.jpg" alt="Web制作" loading="lazy">
    </div>
    <div class="card-body">
      <h3>Web制作</h3>
      <p>レスポンシブ対応のコーディングを行います。</p>
    </div>
  </article>
  <article class="card">
    <div class="card-img">
      <img src="service-02.jpg" alt="LP制作" loading="lazy">
    </div>
    <div class="card-body">
      <h3>LP制作</h3>
      <p>コンバージョンに強いLPを制作します。</p>
    </div>
  </article>
</div>

.card-list {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  /* PCでは3列 */
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .card-list {
    /* スマホでは1列に */
    grid-template-columns: 1fr;
  }
}

.card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: #fff;
}

.card-img img {
  width: 100%;
  height: auto;
  display: block;
}

.card-body {
  padding: 1rem;
}

.card-body h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.card-body p {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
}

CSS Gridのgrid-template-columnsをメディアクエリで切り替えるだけなので、とてもシンプルです。スマホでは1列になるので、ユーザーは縦スクロールだけで全部の情報を見られます。横スクロールやタブ切り替えの操作が不要なので、離脱リスクがぐっと下がるんですよね。

stickyヘッダーで「今どこにいるか」を迷わせない

縦に長いページでよくある困りごとが「今どこを読んでいるかわからない」問題です。特にスマホは画面が小さいので、ナビゲーションがスクロールで消えてしまうと迷子になりやすいんですよね。

position: stickyを使えば、ヘッダーやナビゲーションを画面上部に固定できます！

<header class="sticky-header">
  <nav>
    <a href="#service">サービス</a>
    <a href="#works">実績</a>
    <a href="#contact">お問い合わせ</a>
  </nav>
</header>

<main>
  <section id="service">...</section>
  <section id="works">...</section>
  <section id="contact">...</section>
</main>

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.sticky-header nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.sticky-header nav::-webkit-scrollbar {
  display: none;
}

.sticky-header nav a {
  white-space: nowrap;
  font-size: 0.85rem;
  color: #333;
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}

.sticky-header nav a:hover,
.sticky-header nav a.active {
  border-bottom-color: #4ECDC4;
  color: #4ECDC4;
}

backdrop-filter: blur(8px)を使うことで、スクロールしたときにヘッダーの背景がすりガラスのようにぼやけて、コンテンツと自然に馴染みます。これ、見た目もおしゃれで私はとても好きなんです！

ナビゲーションのリンクが多い場合は、overflow-x: autoでナビ自体を横スクロールできるようにしています。ページ全体は縦スクロール、ナビだけは必要に応じて横スクロール、という使い分けです。

スクロール連動のプログレスバーで「あとどれくらい？」を見せる

記事やLPが縦に長くなると、「あとどれくらいあるんだろう？」とユーザーは不安になります。特にスマホでは、スクロールバーが細くて見えにくいんですよね。

そこで、画面上部にスクロール量を示すプログレスバーを付けてあげると、読了率がアップします！

<div class="progress-bar" id="progressBar"></div>

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF6B6B, #4ECDC4);
  width: 0%;
  z-index: 9999;
  transition: width 0.1s linear;
}

window.addEventListener('scroll', () => {
  const scrollTop = document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
  const progress = (scrollTop / scrollHeight) * 100;
  document.getElementById('progressBar').style.width = progress + '%';
});

JavaScriptは少しだけ使いますが、たった5行です。スクロールに合わせてバーが伸びていくので、ユーザーは「あと半分くらいだな」と感覚的にわかります。これだけで離脱率が下がるのは、実際にプロジェクトで試して実感しました！

scroll-snapの注意点

ここで、scroll-snapを使うときの注意点もお伝えしておきますね。便利な反面、気をつけるポイントがあります。

コンテンツ量に注意：各セクションが100vhに収まらないと、テキストが見切れてしまいます。スマホは画面が小さいので、内容を詰め込みすぎないのが大事です
mandatory と proximity の使い分け：mandatoryは必ずスナップしますが、コンテンツが長い場合はproximityにすると、スナップポイント付近でだけ吸着するようになります
古いブラウザ対応：scroll-snapは主要ブラウザでサポートされていますが、念のため@supportsでフォールバックを入れておくと安心です

/* scroll-snap が使えない場合のフォールバック */
.snap-container {
  height: auto;
  overflow-y: visible;
}

@supports (scroll-snap-type: y mandatory) {
  .snap-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
  }
}

@supportsを使って、scroll-snapに対応しているブラウザだけにスナップ動作を適用しています。非対応のブラウザでは普通のスクロールになるので、レイアウトが壊れる心配はありません。