【保存版】Webデザイナー未経験でも失敗しない！定番jQueryプラグイン「Slick」「Lity」の導入手順と完全実装コード

HTMLとCSSの基本

 

「ポートフォリオを作っているけれど、なんだか動きがなくて素人っぽい」 「JavaScriptのコードを見ても、どこをどう触れば動くのかさっぱりわからない」

Webデザインの勉強を始めたばかりのころ、誰もが一度はこの壁にぶつかります。特にコーディング初心者の方にとって、動きのあるサイトを作ることは非常にハードルが高く感じるかもしれません。

しかし、安心してください。実は、現場で活躍しているプロのWebデザイナーも、すべての動きを一からプログラミングしているわけではありません。大切なのは、先人たちが作った便利な「道具（jQueryプラグイン）」を正しく選び、自分のサイトに組み込むスキルです。

この記事では、Webデザイナー未経験の皆さんが迷わずにハイクオリティなサイトを作れるよう、現場でよく使う厳選プラグイン3つと、その具体的な実装コード、そして導入で絶対に失敗しないための「鉄則」を詳しく解説します。

この記事を読み終える頃には、あなたのサイトにプロ顔負けの「スライダー」や「ポップアップ」が実装されているはずですよ。

なぜプロは「jQueryプラグイン」を使うのか？

Webサイトにおける「動き」には、実は定番のパターンが決まっています。 スライダー、スマホメニュー、画像の拡大表示（ライトボックス）……これらは現代のWebサイトにおいて「あって当たり前」の機能です。

これらをすべてゼロからJavaScriptで書こうとすると、膨大な時間がかかりますし、バグ（不具合）が出る可能性も高くなります。そこでプロは、世界中のエンジニアが開発し、動作検証まで済ませてくれている「jQueryプラグイン」というパッケージを利用します。

僕が講師として教えている受講生のみなさんも、最初は「JavaScriptを完璧に書けないとプロになれない」と思い込みがちです。しかし、実際は違います。

「適切なプラグインを探し出し、自分のデザインに合わせて導入できること」

これこそが、プロになるための第一歩であり、現場で最も求められるスキルの一つなのです。まずは難しいコードを書くことよりも、優れた道具を使いこなして、短期間で質の高い成果物を完成させる感覚を身につけていきましょう。

これだけ覚えればOK！ポートフォリオを格上げする3大プラグイン

世の中には無数のプラグインがありますが、今回はコーディング初心者の方がまずマスターすべき、以下の3つに絞って解説します。これさえ使えれば、ポートフォリオのクオリティは劇的に向上します。

  1. Slick（スライダー）：メインビジュアルを自動で切り替える

  2. Lity（ライトボックス）：クリックで画像や動画をふわっと表示する

  3. Drawer（ドロワーメニュー）：スマホ用のハンバーガーメニューを作る

それでは、それぞれの導入方法を実際のコードと共に見ていきましょう。

1. 決定版スライダープラグイン「Slick」

「Slick（スリック）」は、Web制作の現場で最も使われていると言っても過言ではないスライダープラグインです。レスポンシブ対応（スマホ対応）が標準で備わっており、カスタマイズも非常に簡単です。

導入ステップ

まずは、必要なファイルを読み込みます。今回は初心者の方でも扱いやすい「CDN（インターネット上のファイルを直接読み込む方法）」を使います。

以下のコードを、あなたのHTMLの<head>タグ内と、</body>タグの直前に記述してください。

▼ HTML（head内など）

 

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

 

▼ HTML（bodyの閉じタグ直前）

 

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

 

実装コード（コピペOK）

次に、実際にスライダーを表示させるためのHTMLとCSS、そしてJavaScriptを書きます。

HTML

 

<div class="slider">
  <div><img src="img/slide01.jpg" alt="スライド1"></div>
  <div><img src="img/slide02.jpg" alt="スライド2"></div>
  <div><img src="img/slide03.jpg" alt="スライド3"></div>
</div>

 

JavaScript（自作のscript.jsなどに記述）

 

$(function() {
  $('.slider').slick({
    autoplay: true,       // 自動再生
    autoplaySpeed: 2000,  // 再生速度（ミリ秒）
    dots: true,           // ドットナビゲーションを表示
    arrows: true,         // 前後ボタンを表示
    infinite: true,       // 無限ループ
  });
});

 

たったこれだけで、自動で切り替わるスライダーが完成します。「autoplaySpeed」の数字を変えれば速さを調整できますし、「dots: false」にすればドットを消すことも可能です。

2. 動画も画像も手軽にポップアップ「Lity」

ポートフォリオサイトで、作品をクリックしたら大きく表示させたい場合によく使われるのが「ライトボックス」と呼ばれる手法です。「Lity（リティ）」は、動作が非常に軽く、画像だけでなくYouTube動画も簡単にポップアップできる優れたプラグインです。

導入ステップ

Slickと同様に、CDNを使ってファイルを読み込みます。

▼ HTML（head内など）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.css">

 

▼ HTML（bodyの閉じタグ直前）

<script src="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.js"></script>

 

実装コード（コピペOK）

Lityの素晴らしいところは、JavaScriptの記述（初期化コード）が基本的に不要な点です。HTMLの<a>タグに特定の記述をするだけで動作します。

HTML（画像の場合）

<a href="img/work01_large.jpg" data-lity>
  <img src="img/work01_thumb.jpg" alt="作品サムネイル">
</a>

 

HTML（YouTubeの場合）

<a href="https://www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>
  動画を見る
</a>

 

これだけで、クリックすると背景が暗くなり、コンテンツがふわっと中央に表示されます。難しい設定なしでリッチな表現ができるので、Webデザイナー未経験の方に特におすすめです。

3. スマホサイトの必需品「Drawer」

最近のWebサイト制作では、スマートフォン表示の対応（レスポンシブデザイン）が必須です。特にスマホ画面でよく見る、三本線のボタンを押すとメニューが横から出てくる「ハンバーガーメニュー」は、自作しようとするとCSSとJSの複雑な連携が必要になります。

これを一瞬で実装できるのが「Drawer（ドロワー）」プラグインです。

導入ステップ

▼ HTML（head内）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">

 

▼ HTML（bodyの閉じタグ直前）

<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>

 

実装コード

DrawerはHTMLの構造に少し決まりがあります。以下の構造をそのまま使い、中身のリンクなどを書き換えて使うのが一番の近道です。

HTML

<body class="drawer drawer--right"> <header role="banner">
    <button type="button" class="drawer-toggle drawer-hamburger">
      <span class="sr-only">toggle navigation</span>
      <span class="drawer-hamburger-icon"></span>
    </button>
    
    <nav class="drawer-nav" role="navigation">
      <ul class="drawer-menu">
        <li><a class="drawer-brand" href="#">ロゴ/タイトル</a></li>
        <li><a class="drawer-menu-item" href="#">メニュー1</a></li>
        <li><a class="drawer-menu-item" href="#">メニュー2</a></li>
      </ul>
    </nav>
  </header>

  <main role="main">
    <p>ここにサイトのメインコンテンツが入ります</p>
  </main>
  
</body>

 

JavaScript

$(function() {
  $('.drawer').drawer();
});

 

これで、スマホサイトによくある「横から出てくるメニュー」の実装完了です。

プラグイン導入で絶対に失敗しない「3つの鉄則」

「コードをコピペしたのに動かない！」「デザインが崩れてしまった……」

コーディング初心者の方がプラグイン導入でつまずく原因の9割は、実は「読み込み順」にあります。以下の3つの鉄則を必ず守るようにしてください。

鉄則1：JavaScriptファイルは「親・子・孫」の順で呼ぶ

プログラムは上から順に読み込まれます。この順番を間違えると、プラグインは100%動きません。

  1. 親（jQuery本体）：すべての土台。これがないと何も始まりません。

  2. 子（プラグインのJS）：SlickやLityなどのファイル。

  3. 孫（自作のJS）：$('.slider').slick(...)などを書いた自分のファイル。

よくあるミスは、jQuery本体よりも先にプラグインや自分のJSを読み込んでしまうことです。「まずはjQuery」と覚えておきましょう。

鉄則2：CSSは「リセット → プラグイン → 自作」の順

見た目（CSS）にも読み込み順序のルールがあります。

  1. リセットCSS：ブラウザの初期スタイルを打ち消すもの。

  2. プラグインのCSS：Slickなどのスタイル。

  3. 自作のCSS（style.css）：あなたが書くデザイン。

もし「リセットCSS」を最後に読み込んでしまうと、せっかくプラグインが持っているレイアウトまでリセットされてしまい、表示が崩れる原因になります。

鉄則3：JavaScriptは</body>の直前に書く

HTMLは上から順番に読み込まれます。もし<head>の中（ページの上の方）でJavaScriptを実行しようとすると、まだ画像や文字が読み込まれていないため、「操作する対象が見つからない」というエラーが起きることがあります。

これを防ぐ一番確実な方法は、JavaScriptの読み込みコードをすべて**</body>の閉じタグの直前**にまとめることです。こうすることで、HTML（画像や文字）がすべて表示された後にプログラムが動き出すため、トラブルを未然に防ぐことができます。

まとめ：動くサイトが、あなたの自信になる

今回紹介したプラグインは、どれもWeb制作の現場でスタンダードに使われているものばかりです。

「自分でコードを書く」ことにこだわりすぎて立ち止まるよりも、まずはこうした便利なプラグインを使って、一つでも多くの作品を完成させてみてください。「自分のサイトが動いた！」という感動体験こそが、学習を続ける一番のモチベーションになります。

Webサイト制作の技術は成熟しており、初心者の方がゼロから悩まなくてもいいように、たくさんの便利な道具が用意されています。

まずはこの記事のコードをそのまま自分のエディタに貼り付けて、ブラウザで開いてみてください。その一歩が、プロのWebデザイナーへの入り口になるはずです。

この記事で紹介した参考リンク

タイトルとURLをコピーしました