WEBサイトのファーストビューでよく見かける、背景画像がゆっくりズームしながら切り替わるスライドショー。VEGAS（vegas.js） を使うと、数行のコードで実装できます。
VEGASは長く「VEGAS2」としてjQueryプラグインの形で使われてきましたが、2026年2月にv3.0.0が公開され、jQueryなしで使えるようになりました。この記事では、新しく作るならv3、すでにjQueryを使っているサイトならv2の書き方のまま、という両方のコードを載せています。
この記事のコードと仕様は、2026年10月時点のVEGASの公式リポジトリとnpmで公開されているv3.0.0をもとにしています。v2系の最後のバージョンは2.6.0です。
完成イメージ
背景画像がズームしながらフェードで切り替わります。動きは公式サイトのトップで確認できます。
細かいオプションが豊富で、何より手っ取り早いのがVEGASの良いところです。一方で、大きな画像を何枚も読み込むので、ページによっては表示の立ち上がりが少し遅くなります。画像は圧縮してから使いましょう。
v3とv2、どちらを使うか
| サイトの状況 | おすすめ | 理由 |
|---|---|---|
| これから新しく作る | v3（jQueryなし） | jQueryを読み込まなくて済み、そのぶん軽くなる |
| すでにjQueryを使っている（WordPressのテーマなど） | v3のjQuery版 またはv2 | 書き方を変えずに使える |
| 既存のVEGAS2のコードを動かし続けたい | v2のまま | 無理に移行する必要はない |
v3には、v2と同じ書き方で使えるjQuery版のファイルも入っています。公式のREADMEでは、jQuery版は「v2との互換のために用意したもので、新しいプロジェクトではjQueryなしの書き方を使うように」と案内されています。
v3（jQueryなし）のコピペコード
下のコードをそのままHTMLファイルとして保存し、同じ階層にimgフォルダを作ってzoom01.jpg〜zoom04.jpgを置けば動きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VEGAS v3</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vegas@3.0.0/dist/vegas.min.css">
<style>
body { margin: 0; }
#mainvisual { height: 100vh; }
</style>
</head>
<body>
<section id="first-view">
<div id="mainvisual"></div>
</section>
<script src="https://cdn.jsdelivr.net/npm/vegas@3.0.0/dist/vegas.iife.min.js"></script>
<script>
vegas('#mainvisual', {
slides: [
{ src: 'img/zoom01.jpg' },
{ src: 'img/zoom02.jpg' },
{ src: 'img/zoom03.jpg' },
{ src: 'img/zoom04.jpg' }
],
transition: 'fade',
transitionDuration: 4000,
delay: 18000,
cover: true,
animation: 'random',
animationDuration: 20000,
timer: true
});
</script>
</body>
</html>v2との違いは2点だけです。
- 読み込むファイル：jQueryは不要です。
vegas.iife.min.jsを読み込むと、vegasという関数が使えるようになります - 呼び出し方：
$('#mainvisual').vegas({...})ではなく、vegas('#mainvisual', {...})と書きます
設定（slidesやtransitionなど）の名前はv2と同じです。
注意：v3の
vegas()は、セレクターに一致した最初の1つの要素にだけ適用されます（内部でdocument.querySelectorを使っているため）。同じクラスの要素を複数まとめて動かしたい場合は、要素ごとにvegas()を呼んでください。
npmで入れる場合
Viteなどのビルドツールを使っているなら、npmから入れられます。
npm install vegasimport 'vegas/dist/vegas.css';
import vegas from 'vegas';
vegas('#mainvisual', {
slides: [
{ src: '/img/zoom01.jpg' },
{ src: '/img/zoom02.jpg' }
]
});v2（jQuery版）のコピペコード
すでにjQueryを使っているサイトなら、従来のVEGAS2の書き方がそのまま使えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VEGAS2</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.css">
<style>
body { margin: 0; }
#mainvisual { height: 100vh; }
</style>
</head>
<body>
<section id="first-view">
<div id="mainvisual"></div>
</section>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.js"></script>
<script>
'use strict';
jQuery(function ($) {
$('#mainvisual').vegas({
slides: [
{ src: 'img/zoom01.jpg' },
{ src: 'img/zoom02.jpg' },
{ src: 'img/zoom03.jpg' },
{ src: 'img/zoom04.jpg' }
],
transition: 'fade',
transitionDuration: 4000,
delay: 18000,
cover: true,
animation: 'random',
animationDuration: 20000,
timer: true
});
});
</script>
</body>
</html>vegas.cssは<head>の中で、vegas.min.jsは</body>の手前で読み込みます。vegas.min.jsより先にjQueryを読み込むのを忘れないでください。
v2からv3へ移行する
jQueryの書き方のままv3に上げたい場合は、読み込むファイルを差し替えるだけです。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vegas@3.0.0/dist/vegas.min.css">
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vegas@3.0.0/dist/jquery.vegas.min.js"></script>$('#mainvisual').vegas({...})のコードはそのままで動きます。vegasinitやvegaswalkなどのjQueryのイベントも、互換のために引き続き発生します。
よく使う設定
設定の一覧は公式のドキュメントにあります。Google翻訳で日本語にすると読みやすいです。
よく使うものをまとめました。初期値はv3のソースコードで確認したものです。
| 設定 | 内容 | 初期値 |
|---|---|---|
delay |
次の画像に切り替わるまでの時間（ミリ秒） | 5000 |
transition |
切り替え効果。'random'にすると毎回ランダム |
'fade' |
transitionDuration |
切り替え効果にかける時間（ミリ秒） | 1000 |
animation |
表示中の動き。'kenburns'などでズーム。'random'も使える |
なし |
animationDuration |
表示中の動きにかける時間（ミリ秒） | 'auto' |
cover |
画像を要素いっぱいに広げる | true |
align / valign |
画像の横 / 縦の基準位置 | 'center' |
timer |
下部に進行状況のバーを表示する | true |
overlay |
画像の上に網目などの模様を重ねる | false |
shuffle |
スライドの順番をシャッフルする | false |
preload |
開始時に画像と動画を先に読み込む | false |
ズームしながら切り替えたい場合は、animationに'kenburns'を指定するのが基本です。上下左右に動かす'kenburnsLeft'や'kenburnsUp'なども用意されています。
スマホでは別の画像を表示する
縦長の画面では、横長の画像だと大事な部分が切れてしまうことがあります。画面の幅で画像を切り替えると解決できます。
let slides = [
{ src: 'img/zoom01.jpg' },
{ src: 'img/zoom02.jpg' },
{ src: 'img/zoom03.jpg' },
{ src: 'img/zoom04.jpg' }
];
if (window.matchMedia('(max-width: 991px)').matches) {
slides = [
{ src: 'img/zoom-sp01.jpg' },
{ src: 'img/zoom-sp02.jpg' },
{ src: 'img/zoom-sp03.jpg' },
{ src: 'img/zoom-sp04.jpg' }
];
}
// v3（jQuery なし）
vegas('#mainvisual', {
slides: slides,
transition: 'fade',
transitionDuration: 4000,
delay: 18000,
cover: true,
animation: 'random',
animationDuration: 20000,
timer: true
});
// v2 / jQuery 版なら、この部分を $('#mainvisual').vegas({ ... }) にするこの書き方は、ページを開いた時点の画面幅で画像を決めます。開いたあとに画面を回転させても画像は切り替わらない点に注意してください。
ボタンで操作する（v3）
v3のvegas()は、スライドショーを操作するためのオブジェクトを返します。公式のデモでは、次のように前後の切り替えや一時停止をしています。
const slideshow = vegas('#mainvisual', { slides: slides });
document.getElementById('btn-prev').addEventListener('click', () => slideshow.previous());
document.getElementById('btn-next').addEventListener('click', () => slideshow.next());
document.getElementById('btn-toggle').addEventListener('click', () => slideshow.toggle());よくある質問
Q. 画像が表示されません
A. まずブラウザの開発者ツールの「Network」タブで、画像が404になっていないかを確認してください。srcのパスは、HTMLファイルからの相対パスです。WordPressのテーマで使う場合は、テーマのフォルダからのパスではないので、get_template_directory_uri()でURLを組み立てて渡します。
Q. 表示中の要素の高さが0になります
A. VEGASを適用する要素には、高さを指定してください。上のコードでは#mainvisual { height: 100vh; }で画面いっぱいの高さにしています。
Q. VEGAS2のコードは、そのまま使い続けて大丈夫ですか？
A. 動いているなら、急いで移行する必要はありません。jQueryをやめたいタイミングで、v3のjQueryなしの書き方に切り替えるのがおすすめです。
まとめ
- VEGASは、背景画像をズームしながら切り替えるスライドショーを手軽に作れるライブラリ
- 2026年2月のv3.0.0からjQueryが不要になった。書き方は
vegas('#要素', {...}) - jQueryを使っているサイトは、v3のjQuery版に差し替えるだけで移行できる
- 設定の名前はv2と同じ。ズームは
animation: 'kenburns'
ほかのスライダーと比べたい場合は、こちらも参考にしてください。