ファーストビューで「続きがある」と伝えるため、次のセクションを少し見切れさせるか、小さな矢印を置く

どんな問題を解決するか / いつ使うか

ファーストビューを画面いっぱい（100vh など）で作ると、ページがそこで終わっているように見える。LPやコーポレートサイトのトップで。

やり方

• 次のセクションを少し見切れさせる：ファーストビューの高さを画面より少し低くする。

.hero {
  min-height: 88svh;   /* 100svh にせず、下に次の内容を少し見せる */
}

• 小さなスクロールの合図を置く：下向きの矢印や「Scroll」の表示を画面下中央に。ゆっくり上下させる程度の動きにとどめる。

.scroll-cue { animation: cue 2s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
}

• 画像やカードが下端で切れているのも「続き」の合図になる。

注意点

• スマホではブラウザのバーで表示領域が変わるため、vh より svh / dvh が安定する。
• 動きを減らす設定の人には、合図のアニメーションを止める。
• コード例は一般的な書き方で補ったもの（元の投稿はテキストのみ）。

出典

• 投稿者: @wokobo_net
• 投稿: @wokobo_net · 2026-10-16
• 収集日: 2026-10-16（JST、10/15・10/16分の巡回をまとめて実施）