コピペで簡単！スクロールダウンを促すCSSアニメーションの作り方とデザイン集

本記事には広告が含まれています

2026/05/08

Webサイトを開いた直後、「下に続きがあるのかどうか」が分かりにくく、そのままページを閉じてしまった経験はありませんか。

ファーストビュー（ページを開いて最初に目に入る領域）でユーザーの関心を引き、下へのスクロールを促すことは、直帰率を下げるために非常に重要です。その解決策として効果的なのが、矢印やテキストに動きをつける「スクロールダウンアニメーション」の導入です。

本記事では、JavaScriptを使わず、軽量で実装しやすい「CSSアニメーション」を使ったスクロールダウンの作り方を分かりやすく解説します。コピペで使える実用的なコード例も複数ご用意しましたので、ぜひご自身のサイトに取り入れてみてください。

なぜWebサイトにスクロールダウンのアニメーションが必要なのか？

デザインの現場において、スクロールを促すUI（ユーザーインターフェース）の重要性は年々高まっています。まずは、なぜこのアニメーションを設置すべきなのか、その具体的な理由から紐解いていきましょう。

ファーストビューの重要性と直帰率の関係

Webサイトを訪れたユーザーの多くは、最初の数秒（ファーストビュー）でそのページを読むべきかどうかを判断します。画面いっぱいに広がる美しい画像や動画を配置するデザインが主流となっていますが、これには一つの落とし穴が存在するのです。

それは、「1画面で完結しているコンテンツだ」とユーザーに誤認されてしまうリスクです。下に続きがあることに気づかれなければ、せっかく質の高い記事を書いても読まれることはありません。結果として直帰率（1ページ目だけを見て離脱する割合）が高くなってしまいます。

そこで、画面の下部で「ふわふわ」と動く矢印などがあれば、視覚的な手がかりとなります。「まだ情報が続いている」というメッセージを無意識のうちに伝え、自然な形でのスクロール行動を引き出すことができるわけです。

ユーザーに「その先」があることを視覚的に伝える

人間の目は、静止しているものよりも「動いているもの」に自然と引き付けられる性質を持っています。この心理的効果を利用したのがCSSアニメーションです。

単なる静止画の矢印アイコンを置くよりも、下に向かって規則的に動くアニメーションを付加するほうが、視線誘導の効果は格段に跳ね上がります。特にスマートフォンでの閲覧時は画面が狭いため、次のアクションを直感的に示唆する小さな工夫が、ユーザーの滞在時間を大きく左右するでしょう。

UI/UX向上のためのマイクロインタラクション

Webデザインにおけるこのような細かな動きは、「マイクロインタラクション」と呼ばれています。ユーザーの操作をサポートし、心地よい体験（UX）を提供する上で欠かせない要素です。

スクロールダウンのアニメーションは、単に迷いを無くすだけでなく、サイト全体に「洗練された印象」や「現代的な雰囲気」をプラスする効果も持ち合わせています。細かい部分まで配慮が行き届いたサイトは、読者からの信頼感獲得にも繋がるはずです。

JavaScriptを使わずCSSアニメーションで実装するメリット

Web上のアニメーションを実装する方法として、JavaScript（jQuery含む）を用いる手法と、CSSのみで構築する手法があります。ここでは、CSSを採用するメリットについて詳しく解説いたします。

サイトの読み込み速度（パフォーマンス）への悪影響が少ない

CSSアニメーション最大の魅力は、その「軽さ」にあります。JavaScriptの外部ライブラリを読み込む必要がないため、ページの表示速度（ページスピード）を落とす心配がほとんどありません。

近年、Googleの検索エンジンはページの表示速度をSEOの評価基準の一つとして重視しています。重いスクリプトを多用してサイトの動作がもたついてしまうと、検索順位にも悪影響を及ぼしかねません。CSSだけで完結させることで、SEOにも配慮した軽量なサイト運営が可能となります。

保守性が高く、コードの書き換えが容易

CSSを用いた方法はコードの構造がシンプルであるため、後からデザインを変更したい場合にも対応がスムーズです。色を変えたい、動くスピードを少し遅くしたいといった調整も、該当するCSSの数値を数箇所書き換えるだけで完了します。

また、JavaScriptの複雑なコードに触れる必要がないため、プログラミング初心者やHTML/CSSの基礎を学び始めたばかりのWebライター、ブロガーの方にとっても非常に扱いやすい技術と言えるでしょう。

比較表：CSSとJavaScriptでのアニメーション実装

それぞれの特徴を分かりやすく比較表にまとめました。用途に合わせて最適な手法を選ぶための参考にしてください。

比較項目	CSSアニメーション	JavaScript (jQuery等)
実装の難易度	低い（初心者向け）	やや高い（学習コストあり）
動作の軽さ	非常に軽い	ライブラリによっては重い
複雑な条件分岐	苦手（スクロール量に応じた変化など）	得意（多様なインタラクションが可能）
メンテナンス性	高い（スタイルシート内で完結）	コードが分散しがち

常に画面下部で動き続けるシンプルなスクロールダウンの演出であれば、CSSアニメーションで十分かつ最適な選択となります。

スクロールを促すCSSアニメーションの作り方・基礎知識

実際にコードを書く前に、どのような仕組みで動いているのか、基礎となるHTMLとCSSの構造を理解しておきましょう。原理を知ることで、後から自分好みにカスタマイズしやすくなります。

HTMLの基本構造（divやspanの活用）

まずは、画面上に表示するための「箱（要素）」をHTMLで作ります。一般的には、全体を囲むコンテナとしての<div>タグと、動く部分（矢印や線）を形作る要素を用意します。

例えば、画面の中央下部に配置したい場合、ファーストビューを構成する大きなエリア（ヘッダー画像など）の中に、スクロールダウン用の<div>を配置するのが基本ルールです。構造をシンプルに保つことで、CSSでの制御が格段に楽になります。

CSSプロパティ「@keyframes」で動きの定義を行う

CSSアニメーションの心臓部となるのが@keyframes（キーフレーム）という規則です。ここでは「0%の時はこの状態」「50%の時はこの状態」「100%の時はこの状態」というように、時間の経過に応じたスタイルの変化を定義します。

例えば、上から下へ移動する動きを作りたい場合、0%では「Y軸の移動距離が0」、100%では「Y軸の移動距離が20px」といった具合に設定します。これに透明度（opacity）の変化を組み合わせることで、「上から現れて下に消えていく」といった豊かな表現が可能になるのです。

animationプロパティで要素に動きを割り当てる

@keyframesで定義した動きの設計図を、実際にHTMLの要素へ適用するのがanimationプロパティの役割です。このプロパティでは、どのアニメーションを使うか（名前）、1回の動きに何秒かけるか（時間）、どのようなリズムで動かすか（イージング）、何回繰り返すか（回数）を細かく指定できます。

スクロールダウンを促す目的であれば、常に動いていてほしいので、繰り返し回数には無限ループを意味するinfiniteを設定するのが定番の手法です。

absoluteによる絶対配置で画面下部に固定する

作成したアニメーションパーツを、ファーストビューの「画面の一番下・中央」にピタッと配置するために、CSSのpositionプロパティを使用します。

親要素（ファーストビュー全体）にposition: relative;を設定し、スクロールダウンの要素にposition: absolute;を設定します。そしてbottom: 20px;、left: 50%;、transform: translateX(-50%);などを組み合わせることで、どんな画面サイズでも常に意図した位置に表示させることができるのです。

【コピペOK】スクロールダウンのデザイン別実装コード4選

ここからは、実際のWebサイト制作ですぐに使える、実用的なCSSアニメーションのコードをご紹介します。お使いのWordPressテーマの「追加CSS」や、スタイルシートにコピー＆ペーストしてご活用ください。

※HTMLコードは、表示させたいファーストビュー領域のHTML内に記述してください。

実装パターン1：シンプルに跳ねる下向き矢印

最もベーシックで、どんなデザインのサイトにも馴染みやすい「バウンス（跳ねる）」アニメーションです。「V」の字に似た矢印が上下に弾むことで、ユーザーの視線を下へと誘導します。

<!-- HTML -->
<div class="scroll-down-arrow"></div>

<!-- CSS -->
.scroll-down-arrow {
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 20px;
  height: 20px;
  border-bottom: 3px solid #333; /* 矢印の色と太さ */
  border-right: 3px solid #333;
  transform: translateX(-50%) rotate(45deg);
  animation: bounceArrow 2s infinite;
}

@keyframes bounceArrow {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0) rotate(45deg);
  }
  40% {
    transform: translateX(-50%) translateY(-15px) rotate(45deg);
  }
  60% {
    transform: translateX(-50%) translateY(-7px) rotate(45deg);
  }
}

CSSのborderを使って矢印の形を作り、それを45度回転させています。@keyframesで小刻みなY軸移動を設定し、ゴムボールが弾むような軽快な動きを表現しました。

実装パターン2：マウスホイールを模した定番アイコン

PCユーザーにとって直感的に理解しやすい、マウス本体とホイールの動きを模したデザインです。スクロールという動作そのものを視覚化しているため、誘導効果が非常に高いのが特徴です。

<!-- HTML -->
<div class="mouse-icon">
  <span class="wheel"></span>
</div>

<!-- CSS -->
.mouse-icon {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 45px;
  border: 2px solid #333; /* マウスの枠線 */
  border-radius: 15px;
}

.wheel {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background-color: #333; /* ホイールの色 */
  border-radius: 2px;
  animation: scrollWheel 1.5s infinite;
}

@keyframes scrollWheel {
  0% { top: 8px; opacity: 1; }
  100% { top: 24px; opacity: 0; }
}

マウスの枠はborder-radiusで丸みを帯びた長方形にし、中の<span>タグでホイール部分を作っています。ホイールが上から下へ移動しながら透明（opacity: 0）になっていくアニメーションを繰り返します。

実装パターン3：スッと伸びて消えるスタイリッシュな縦線

洗練されたコーポレートサイトや、ミニマルデザインのポートフォリオサイトなどでよく見かける、縦のラインが伸びては消えるエレガントな演出です。

<!-- HTML -->
<div class="scroll-line-box">
  <span class="scroll-text">SCROLL</span>
  <span class="scroll-line"></span>
</div>

<!-- CSS -->
.scroll-line-box {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.scroll-text {
  display: block;
  font-size: 12px;
  letter-spacing: 2px;
  color: #333;
  margin-bottom: 10px;
}

.scroll-line {
  display: block;
  margin: 0 auto;
  width: 1px;
  height: 60px;
  background: rgba(51, 51, 51, 0.3); /* 背景となる薄い線 */
  position: relative;
  overflow: hidden;
}

.scroll-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333; /* 動く濃い線 */
  animation: dropLine 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes dropLine {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

薄い線の背景の上に、濃い線を疑似要素（::before）で重ねています。この濃い線をtranslateYで上から下へと突き抜けさせることで、雨の雫が落ちるような滑らかでスタイリッシュな動きを実現しています。

実装パターン4：テキスト文字（Scroll）がふんわりとループする

記号や線だけでなく、「Scroll Down」といったテキストそのものに動きをつけるのも効果的です。メッセージが明確なため、幅広い層のユーザーに対して親切な設計となります。

<!-- HTML -->
<div class="scroll-fade-text">Scroll Down</div>

<!-- CSS -->
.scroll-fade-text {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #555;
  animation: fadeTextDown 2.5s infinite ease-in-out;
}

@keyframes fadeTextDown {
  0% {
    transform: translate(-50%, -10px);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 10px);
    opacity: 0;
  }
}

テキストが少し高い位置から現れ、定位置で一番はっきりと表示され、さらに下へ沈みながら消えていくアニメーションです。ease-in-outを指定することで、ふんわりとした柔らかい印象を与えます。

スクロールダウンのアニメーションをデザインする際の注意点

動きを取り入れることは効果的ですが、やりすぎは禁物です。ユーザーにストレスを与えないよう、実装時に気を配るべき重要なポイントを解説します。

スマホ（スマートフォン）でのタップ操作と見え方を考慮する

PCでは問題なく見えても、スマホの画面サイズではスクロールダウンのアニメーションが大きすぎたり、他の重要なコンテンツに被ってしまったりすることがあります。

特に画面の下部には、スマホブラウザ特有のメニューバー（URLバーやナビゲーション）が表示される領域があります。そのため、bottomの位置指定をギリギリにしすぎると、OSのメニューに隠れて見えなくなってしまうトラブルが起こりがちです。少し余裕を持たせた余白設定を心がけてください。

激しすぎるアニメーションは逆効果！適切な速度設定のコツ

目を引こうとするあまり、チカチカと高速で点滅したり、激しく動き回ったりするような過剰なアニメーションは、読者の目を疲れさせ、ストレスを与えてしまいます。

animation-duration（アニメーションにかかる時間）は、1秒〜3秒程度の間で設定し、ゆったりとした自然なリズムを持たせるのが理想的です。人間の呼吸のペースに近い、心地よい速度を探ってみましょう。

視認性を確保するための背景とのコントラスト調整

ファーストビューの背景画像が明るい写真なのに、スクロールダウンのアイコンやテキストが白色だと、同化してしまって全く認識されません。

背景が暗い場合は白系、明るい場合は黒・濃いグレーなど、しっかりとコントラストのつく色を指定することが重要です。背景画像がランダムに変わるようなサイトの場合は、アイコンに薄くtext-shadow（影）をつけたり、半透明の背景色を敷いたりして、どんな画像が来ても視認性を担保する工夫が必要です。

アニメーションがうまく動かない・表示されない時のチェックリスト

「コードをコピペしたのに画面に表示されない」「動きがおかしい」といった場合に確認すべき、代表的なつまずきポイントをご紹介します。

z-indexの設定不足で背景の裏に隠れていないか

要素自体は存在していても、背景画像や動画の後ろに配置されてしまっているケースが非常に多く見られます。この場合、CSSにz-index: 10;といった記述を追加し、要素の重なり順を前面に持ってくることで解決します。

親要素のposition設定（relative）を忘れていないか

スクロールダウンの要素にposition: absolute;を指定した場合、その基準となる親要素（大枠のdivタグなど）にposition: relative;が設定されていないと、画面全体の思いもよらない場所（ページの最下部など）に飛んでいってしまいます。必ず親要素とのセット関係を確認しましょう。

全角スペースや記号の記述ミスをチェックする

コードをコピー＆ペーストする際や、自分で少し数値を書き換えた際に、意図せず「全角スペース」が混入してしまうと、CSSはそこで読み込みを停止してしまいます。また、コロン（:）やセミコロン（;）、波括弧（{}）の閉じ忘れといった初歩的な構文エラーがないかも、落ち着いて見直してみてください。

WordPress環境でのスクロールダウン実装手順

WordPressをお使いの場合、紹介したコードをどこに貼り付ければ良いのか、基本的な手順をまとめました。

カスタムHTMLブロックを使った配置方法

ブロックエディター（Gutenberg）を使用している場合、記事の最上部や、固定ページのファーストビュー領域に「カスタムHTML」ブロックを追加します。
そこに、紹介した<div>などのHTMLコードをそのまま貼り付けます。

テーマカスタマイザーの追加CSSへの追記

CSSコードは、記事の中に直接書くのではなく、サイト全体の設定部分に記述するのが一般的です。WordPressの管理画面から「外観」→「カスタマイズ」→「追加CSS」と進み、そこにCSSコードを貼り付けて保存します。
これにより、該当のHTMLクラスを記述した全ての場所でアニメーションが適用されるようになります。

【完全版】Swiperカスタマイズ用オプションまとめ一覧！基本から高度な設定まで網羅