【コピペで実装】スワイプ型LPのコーディング完全ガイド｜Swiper.js実装とコード例で作り方を解説

本記事は「Swiper.js」を使ったスワイプ型LPのコーディング手順を深掘りします。テンプレートに縛られず、自由なデザインとアニメーションを追求したい開発者向けの専門ガイドです。

※LP制作の全体像やツールを使った作り方は、以下の完全ガイドをご覧ください。

なぜSwiper.jsなのか？コーディングで実装するメリット

スワイプ型LPを制作するには、ノーコードツールを利用する方法から制作会社への外注まで、様々な選択肢があります。その中で、あえてコーディングという手段を選ぶ最大の理由は、他のどの方法よりも「自由度の高い、完全オリジナルなLP」を実現できる点にあります。

このコーディングによる実装において、現在、世界中の開発者から支持され、デファクトスタンダード（事実上の標準）となっているのが、JavaScriptライブラリの「Swiper.js」です。

その具体的なメリットを3つのポイントから解説します。

JavaScriptライブラリの「Swiper.js」のメリット

デザインとアニメーションの自由度が圧倒的に高い
豊富なオプションで高機能なLPが実装可能
コミュニティが活発で情報が豊富

マケ子

エンジニアリングができるのであれば、もっとも良い選択肢となります！

メリット1｜デザインとアニメーションの自由度が圧倒的に高い

ノーコードツールは手軽な反面、用意されたテンプレートや機能の範囲でしかデザインを組むことができません。しかし、Swiper.jsを使ったコーディングでは、そうした制約から完全に解放されます。

HTMLとCSSを直接記述できるため、複雑なレイアウトの実現や、ブランドイメージに沿った独自のデザインをピクセル単位で正確に反映させることが可能です。

さらに、スワイプ時の動きや要素の表示タイミングなど、細かなアニメーションやインタラクションを自由に実装できるため、ユーザーを惹きつける没入感の高いLP体験を演出できます。

メリット2｜豊富なオプションで高機能なLPが実装可能

Swiper.jsが支持される大きな理由の一つに、その豊富なオプション機能が挙げられます。

基本的なスワイプ機能だけでなく、多様な機能を組み合わせることで、高機能な専用ツールでしか実現できないようなLPを自作することが可能です。

自由自在にオプションをつけることが可能

ページネーション： 現在のスライド位置を示すインジケーター（点）
ナビゲーション： 前後のスライドへ移動するための矢印ボタン
自動再生（Autoplay）： 設定した秒数でスライドを自動的に切り替え
ループ（Loop）： 最後のスライドから最初のスライドへループ再生
多彩なエフェクト： フェードやカバーフローといったスライド切り替え効果

これらのオプションを駆使することで、単なるスライドショーに留まらない、戦略的でユーザーエンゲージメントの高いLPを構築できます。

マケ子

自由度の高さはダントツですね。

メリット3｜コミュニティが活発で情報が豊富

Swiper.jsは世界中で最も広く使われているスライダーライブラリのため、公式ドキュメントが充実しているのはもちろん、国内外の技術ブログやQ&Aサイト（Qiita, Zenn, Stack Overflowなど）に膨大な量の情報が蓄積されています。

実装中に不明な点やエラーが発生しても、検索すれば多くの解決策や実装例を見つけることができるでしょう。このように、開発コミュニティが活発で情報が豊富であることは、スムーズな開発を進める上で大きな安心材料となり、Swiper.jsが「王道」と呼ばれる所以でもあります。

無料資料ダウンロード

スワイプ型LPの制作やデザインにお悩みの方必見！制作完全ガイド

＼スワイプ型LPの制作方法がわかる／

資料ダウンロード

簡単30秒でお申し込み

【準備編】Swiper.jsの導入と環境構築

スワイプLPの骨格となるHTMLを記述する前に、まずプロジェクトにSwiper.jsライブラリを導入し、動作する環境を準備する必要があります。

導入方法には、主に2つの選択肢があります。

Swiper.jsライブラリの導入方法

CDNを利用する方法： 最も手軽で、すぐに実装を試したい場合に最適です。
NPMを利用する方法： より本格的な開発環境でプロ

ご自身のスキルレベルやプロジェクトの状況に合わせて、最適な方法を選択してください。

①CDNを使った最も簡単な導入方法

CDN（コンテンツ・デリバリー・ネットワーク）は、ライブラリのファイルを自身のサーバーに設置することなく、外部の高速なサーバーから直接読み込んで利用できる仕組みです。

HTMLファイルさえあればすぐに導入できるため、初心者の方や、まずは手元で動きを試してみたいという場合に最も簡単な方法です。

実装するには、お使いのHTMLファイルの特定の箇所に、以下のコードをコピー＆ペーストで記述します。まず、<head>タグ内にCSSファイルを読み込むための<link>タグを追加します。

<head>
  ...
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
  />
  ...
</head>

次に、</body>の閉じタグの直前に、JavaScriptファイルを読み込むための<script>タグを追加します。

<body>
  ...
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
</body>

これだけで、Swiper.jsを動かすための準備は完了です。

②NPMを使ったパッケージインストール（開発者向け）

Node.jsを利用したモダンな開発環境（ViteやWebpackなど）でプロジェクトを管理している場合は、NPM（Node Package Manager）を使ってSwiperをインストールするのが一般的です。

まず、お使いのターミナルで以下のコマンドを実行し、Swiperをプロジェクトにインストールします。

npm install swiper

インストール後、メインとなるJavaScriptファイルでSwiper本体と必要なCSSをインポートします。

// main.jsなど
// Swiper本体のインポート
import Swiper from 'swiper';

// Swiperの基本CSSのインポート
import 'swiper/css';

ページネーションやナビゲーション機能を使用する場合は、それぞれのCSSも追加でインポートする必要があります。

この方法では、プロジェクトのビルド時にSwiperが必要なファイルとしてバンドル（一つにまとめること）されるため、より効率的な管理が可能です。

【基本実装編】コピー＆ペーストで動く！スワイプLPの作り方

ここからは、実際にコードを記述していく実装パートです。前のセクションでSwiper.jsの導入が完了していれば、以下の3つのステップで基本的なスライダーが動作します。

コピー＆ペーストで利用できるサンプルコードを用意しましたので、順番に記述・保存して、ブラウザで表示を確認してみてください。

STEP 1｜HTMLでスライダーの骨格（コンテナ）を用意する

まず、スライダーを表示するための骨格をHTMLで記述します。Swiper.jsには基本的なルールがあり、.swiper > .swiper-wrapper > .swiper-slide という親子関係の構造で作成する必要があります。

ページネーション（点）やナビゲーション（矢印）を表示するための要素も、この段階で合わせて記述しておきましょう。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  
  <div class="swiper-pagination"></div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

.swiper-slide の中に画像タグ（<img>）やテキストを自由に入れることで、LPの各ページを作成していきます。

STEP 2｜CSSで基本的な見た目を整える（幅・高さなど）

次に、CSSでスライダーの見た目を整えます。HTMLを記述しただけでは、スライダーのサイズが指定されていないため、正しく表示されません。

最低限、.swiper コンテナに幅（width）と高さ（height）を指定する必要があります。ここではサンプルとして、スマートフォン画面を想定したサイズと、スライドの基本的な中央揃えのスタイルを記述します。

/* スライダー全体のコンテナのサイズを指定 */
.swiper {
  width: 375px;
  height: 667px;
}

/* 各スライドの見た目を調整（サンプル） */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  background-color: #3498db;
}

この時点ではまだスワイプはできませんが、ブラウザで表示するとスライドの1枚目が表示されるはずです。

STEP 3｜JavaScriptでSwiperを初期化する（必須コード）

最後に、JavaScriptを使ってSwiperを「初期化」します。この処理によって、ただのHTML要素だったスライダーが、スワイプ可能なインタラクティブなコンポーネントとして機能し始めます。

HTMLファイル内で<script>タグを記述するか、別途JavaScriptファイルを作成して以下のコードを記述してください。

const swiper = new Swiper('.swiper', {
  // スライドの方向：'vertical'（縦）'horizontal'（横）
  direction: 'horizontal',

  // ループ（繰り返し）を有効にする
  loop: true,

  // ページネーション（点）を有効にする
  pagination: {
    el: '.swiper-pagination',
  },

  // ナビゲーション（矢印）を有効にする
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

new Swiper()の第一引数にHTMLで指定したクラス名（.swiper）を、第二引数にオプションをオブジェクト形式で渡します。

これで、スワイプ可能で、左右の矢印とページネーションが表示される基本的なスライダーが完成です。

無料資料ダウンロード

スワイプ型LPの制作やデザインにお悩みの方必見！制作完全ガイド

＼スワイプ型LPの制作方法がわかる／

資料ダウンロード

簡単30秒でお申し込み

【応用編】よく使うSwiper.jsオプションとカスタマイズ例

基本的なスライダーが動くようになったら、次はSwiper.jsが持つ豊富なオプション機能を使って、より高機能で使いやすいLPへとカスタマイズしていきましょう。

ここでは、スワイプ型LPで特に使用頻度の高い4つのオプションについて、具体的な設定方法とデザインを調整するためのCSSコード例を紹介します。

ページネーション（点）の追加とスタイリング

ページネーションは、全スライド数と現在のスライド位置を視覚的に示す「点」のことです。ユーザーにLPの全体像を伝え、現在地を把握しやすくする重要な役割を果たします。

pagination オプションを有効にします。clickable: true を設定すると、ユーザーが点をクリックしてスライドを移動できるようになります。

デフォルトのページネーションの色は青色ですが、CSSで自由に色を変更できます。アクティブな（現在表示中の）点の色を変えるのが一般的です。

/* ページネーションの通常の色 */
.swiper-pagination-bullet {
  background-color: #cccccc;
}

/* アクティブなページネーションの色 */
.swiper-pagination-bullet-active {
  background-color: #3498db;
}

ナビゲーション（矢印）の追加とスタイリング

ナビゲーションは、左右にスライドを移動させるための矢印ボタンです。ユーザーが直感的にスワイプ操作を理解する手助けとなります。

navigation オプションを有効にし、HTMLで用意した prev（前へ）と next（次へ）の要素を指定します。

矢印のデフォルトの色やサイズもCSSで変更できます。::after 擬似要素に対してスタイルを適用するのがポイントです。

ループ（無限スクロール）設定

loop オプションを有効にすると、最後のスライドから最初のスライドへ、また最初のスライドから最後のスライドへとシームレスにスワイプできるようになります。

ユーザーが終わりを感じることなく、コンテンツを閲覧し続けることを促す効果があります。

設定は非常にシンプルで、loop: true を一行追加するだけです。

注意点

loop: true を設定すると、Swiperがスライドを複製して無限スクロールを実現します。そのため、スライドの合計枚数を参照するような処理を記述する際には注意が必要です。

気をつけてね！

自動再生（Autoplay）の設定

autoplay オプションを設定すると、ユーザーが操作しなくても自動でスライドが切り替わるようになります。LPのファーストビューで複数のメッセージを順番に見せたい場合などに有効です。

autoplay オプションに、スライドが切り替わるまでの時間（ミリ秒単位）を delay で指定します。

const swiper = new Swiper('.swiper', {
  // ...
  autoplay: {
    delay: 3000, // 3秒ごとにスライドを切り替える
    disableOnInteraction: false, // ユーザーが操作した後も自動再生を続ける
  },
});

disableOnInteraction: false を設定すると、ユーザーが一度手動でスワイプした後も自動再生が止まらなくなります。

【実践編】コーディングで失敗しないための4つの重要ポイント

基本的なスライダーが動作したら、次はいよいよ公開と運用を見据えた実践的な調整を行います。

特にコーディングで自作する場合、パフォーマンスや多様なユーザーへの配慮は開発者に委ねられます。ここで紹介する以下の4つのポイントは、LPの離脱率を下げ、成果を最大化するために不可欠な工程です。

失敗しないための重要ポイント4選

パフォーマンス最適化（画像遅延読み込み・WebP対応）
レスポンシピブとアクセシビリティへの配慮
SEOを考慮したHTML構造とタグ設定
Google Analyticsなど分析タグの実装方法

それでは一つずつ見ていきましょう。

ポイント1｜パフォーマンス最適化（画像遅延読み込み・WebP対応）

画像が多用されるスワイプ型LPにおいて、ページの表示速度はユーザーの離脱率に直結する最も重要な要素の一つです。

以下のようなポイントに注意して表示速度のパフォーマンスの最適化を計りましょう。

パフォーマンス最適化で気をつけること

画像の遅延読み込み（Lazy Loading）
次世代フォーマット「WebP」への対応

遅延読み込みとは、画面に表示される直前まで画像の読み込みを遅らせる技術です。Swiper.jsにはこの機能が標準で備わっています。

HTML: <img> タグの src 属性を data-src に変更し、swiper-lazy クラスを追加します。読み込み中のローディング画像も設定できます。

<div class="swiper-slide">
  <img data-src="path/to/image.jpg" class="swiper-lazy">
  <div class="swiper-lazy-preloader"></div>
</div>

JavaScript: lazy オプションを有効にします。

const swiper = new Swiper('.swiper', {
  // ...
  lazy: true,
});

ポイント2｜レスポンシピブとアクセシビリティへの配慮

▼レスポンシブ対応
Swiper.jsの breakpoints オプションを使えば、PCやタブレットなど、画面幅に応じてスライダーの表示設定を簡単に変更できます。例えば、「PCでは3枚の画像を並べて表示する」といったレイアウトも可能です。

const swiper = new Swiper('.swiper', {
  // ...
  // 画面幅に応じた設定
  breakpoints: {
    // 768px以上の場合
    768: {
      slidesPerView: 3, // 3枚表示
      spaceBetween: 30
    }
  }
});

▼アクセシビリティ対応
スクリーンリーダーなどを使用するユーザーにも配慮するため、Swiper.jsにはアクセシビリティ（a11y）モジュールが用意されています。これを有効にすると、ARIA属性などが自動的に付与され、操作性が向上します。

const swiper = new Swiper('.swiper', {
  // ...
  a11y: {
    enabled: true,
  },
});

ポイント3｜SEOを考慮したHTML構造とタグ設定

画像が中心となるスワイプ型LPでも、検索エンジンに正しくコンテンツを伝えるための基本的なSEO対策は必須です。

SEO対策の重要性

alt属性の設定： 全ての<img>タグには、画像の内容を説明するalt属性を必ず記述します。
見出しタグの活用： 各スライド内のメッセージには、<div>タグだけでなく、<h2>や<h3>といった見出しタグを適切に使い、文章の構造を明確にします。
テキスト情報の担保： 重要なキーワードや説明文は、画像内に焼き込むのではなく、必ずHTMLテキストとして記述しましょう。

ポイント4｜Google Analyticsなど分析タグの実装方法

LPの成果を測定するため、分析タグの埋め込みは不可欠です。Google Analytics（GA4）の場合、発行されたgtag.jsのコードをHTMLの<head>タグ内に貼り付けます。

さらに、Swiper.jsが提供する「イベント」を利用すれば、「どのスライドまで閲覧されたか」といったエンゲージメントを計測することも可能です。

▼JavaScript（イベント計測例）

swiper.on('slideChange', function () {
  // スライドが切り替わるたびにイベントが発生
  console.log('現在' + (swiper.realIndex + 1) + '枚目のスライドです');
  
  // ここにGA4のイベント送信コードなどを記述
  // gtag('event', 'swipe', { 'slide_number': swiper.realIndex + 1 });
});

無料資料ダウンロード

スワイプ型LP導入事例資料 3選｜店舗からBtoB、高単価商材のクリエイティブ事例まで

＼スワイプ型LPの12個の成功事例がすぐにわかる／

資料ダウンロード

簡単1分でお申し込み

スワイプ型LPのコーディングに関するQ&A

ここでは、Swiper.jsを使ったスワイプ型LPの実装に関して、開発者からよく寄せられる質問とその回答をまとめました。

Q ReactやVue.jsのようなフレームワークでも使えますか？: A

マケ子
はい、問題なく使用できます。

Swiper.jsは公式にReactコンポーネントとVueコンポーネントを提供しており、各フレームワークのエコシステムにスムーズに統合することが可能です。

npmでインストールした後、公式ドキュメントに従ってコンポーネントをインポートして利用してください。

Q スライドごとに高さを変えることはできますか？: A

マケ子
はい、可能です。

デフォルトではコンテナの高さは固定ですが、Swiperの初期化オプションで autoHeight: true を設定することで、現在アクティブなスライドの高さに合わせて、スライダー全体の高さが自動的に調整されるようになります。

コンテンツの量に応じてスライドの高さを変えたい場合に非常に便利です。

Q スライドの中にフォームを設置しても問題ありませんか？: A

マケ子
はい、設置自体は問題ありません。

ただし、ユーザーエクスペリエンス（UX）への配慮が必要です。

例えば、ユーザーがフォームの入力欄をタップしている間は、誤操作を防ぐためにスワイプ機能を一時的に無効化する、といった工夫が考えられます。

Swiperの allowTouchMove プロパティを動的に制御することで、こうした高度なインタラクションも実装できます。

まとめ｜Swiper.jsで自由自在なスワイプ型LPを実装しよう

この記事では、JavaScriptライブラリ「Swiper.js」を利用して、スワイプ型LPを自力でコーディング・実装するための手順を、準備から応用、実践的なポイントまで網羅的に解説しました。

ノーコードツールが手軽さというメリットを持つ一方で、コーディングによる実装は、デザインやアニメーション、インタラクションにおける圧倒的な自由度を提供してくれます。

今回紹介した基本的な実装方法と応用的なオプション、そしてパフォーマンスやSEOに関する知識は、あなたのLPを競合から一歩抜きん出た、成果の出るツールへと進化させるための強力な土台となるはずです。

ぜひ、この記事を参考に、あなただけの完全オリジナルなスワイプ型LP実装の第一歩を踏み出してください。

＼誰でも簡単にスワイプ型LPが作れる／

SwipeKitについて詳しく見る

あなたのLPが今日から変わる！