スクロールダウン

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

スクロールダウン

スクロールダウンは、ファーストビューで「この下にコンテンツが続く」ことをさりげなく伝える誘導サインです。全画面のヒーロー画像を使うデザインでは、下に何もないように見えてしまう問題が必ず起きるため、線・丸・矢印などの小さな動きで視線を下へ導きます。

このデモは誘導サインの定番モチーフを網羅しつつ、スクロールに応じてタイムラインの縦線が伸びるインタラクティブな応用まで含めています。

おさえておきたいところ

「スクロールダウン」を使う目的はこんな感じです。

             目的：ページのスクロールを促す
動きのきっかけ：画面の読み込み中 / 画面の読み込み後 / スクロール / クリック

縦線が動いてスクロールを促す

丸が動いてスクロールを促す

マウスが動いてスクロールを促す

矢印が動いてスクロールを促す

スクロールをするとタイムラインの縦線が伸びる

実務メモ（2026年追記）

装飾としての誘導サインはaria-hidden="true"を付けて支援技術から隠すのが基本です（読み上げても意味がないため）。また「スクロールに応じて伸びる」系の演出は、2026年現在はCSSのスクロール連動アニメーション（animation-timeline）が主要ブラウザに広がりつつあり、JSなしで書ける場面が増えています。既存実装を壊してまで書き換える必要はありませんが、新規なら選択肢に入ります。

• アニメーションは無限ループになるため、ゆっくり・小さく・主張しすぎない調整が品位を決める
• prefers-reduced-motionでループを止める配慮を
• ファーストビューに実コンテンツの「頭出し」を少し見せるのも有効な代替手段
• ヒーロー演出全般は動く背景とあわせて設計すると一貫します

次回の予定

連続する内容をまとめ、項目の全体像を先に伝える
「アコーディオンパネル」を作ってみようと思います＼＼٩( ‘ω’ )و //／／