ポートフォリオサイトを作ろうとする時、独自の色を出そうと「イケてるデザイン」を追求する方も多いはず。とはいえ、パッと思いつくデザインはどこかで見たことがあるようなものばかり。

そこで、もっとビジュアルにもこだわってポートフォリオサイトを作りたいという方けに、今回は「アコーディオンスライダー」をご紹介します。

サイトのビジュアルで勝負したいという方は、ぜひ活用してみてください。

カテゴリごとに切り分ける!ポートフォリオサイトに最適な「 アコーディオンスライダー 」

アコーディオンスライダー」とはその名の通り、クリックとともにメニューバーが展開される「アコーディオン」と、写真やキャッチコピーなどが横にスライドして流れる「スライダー」の要素を掛け合わせたスライダーのことです。

従来のスライダーでいえば、一枚一枚の写真が横にスライドする「カルーセルスライダー(単にスライダーとも)」を真っ先に思い浮かべるかもしれませんが、アコーディオンスライダーはカルーセルスライダーとは異なり、複数の画像が段組みになって画像ごとにスライドする仕組みをもちます。これにより、一枚の写真だけでは表現しきれない情報をスタイリッシュに伝えられます。

またスライダーの写真ごとに<a>タグを設定することで、グローバルナビゲーションの機能を代替してくれます。ポートフォリオサイトなど、ビジュアル面で周りと差別化したい場合にも最適です。

アコーディオンスライダーの実装方法

アコーディオンスライダーの実装方法

アコーディオンスライダーの実装は基本的に以下の2つの方法どちらかを用いて実装します。

  • イチから自分でHTML5/CSS3/JQueryを使ってアコーディオンスライダーそのものを作る
  • 配布されているJQueryプラグインのアコーディオンスライダーを使う

今回の場合は、プログラミング初心者でも手軽に扱えるよう、後者のJQueryプラグインを使ったやり方をご紹介します。

※ JQueryプラグインとは、HTML5/CSS3/JQueryなどを使って作られたファイルのことです。有料無料問わず、有志でファイルを作って配布されており、ファイルをダウンロードすれば誰でも利用できるものとなっています。


導入の流れは以下の通り。基本的にはどれも初級レベル以上のHTML5/CSS3/JQueryの知識が必須です。

  1. jQueryプラグインのファイルをダウンロード
  2. HTMLファイルにJQuery本体とJQueryプラグインを読み込む

以下で詳しく説明します。

1. jQueryプラグインのファイルをダウンロードする

まずはjQueryプラグインのもととなるファイルをそれぞれダウンロードしましょう。

jQueryのファイルは、GitHubや個人サイトに落ちているので、ライセンス要項を確認しつつ手順にしたがってダウンロードを進めましょう。

ファイルをダウンロードする

今回はJQuery Script.netに掲載されている「Automatic Accordion Slider Plugin For jQuery – Accordion.js」を例に解説します。

JQuery Script.netの各ページにある「Download」をクリック。すると自動でZIPファイルがダウンロードされるので、ファイルを解凍・展開します。

HTMLファイルにjQuery本体とjQueryプラグインを読み込む

ファイルを展開できたら、あとは自前で用意したHTMLファイルにjQuery本体とjQueryプラグインを読み込むだけ。

ちなみにここでのポイントはjQuery本体の読み込みを忘れないことです。jQueryプラグインにしろ、通常のjQueryにしろ、jQueryという動作ファイルを動かす以上、そのもととなるファイルを読み込まなければ動作が機能しません。

またjQueryプラグインの場合、プラグインごとに対応しているjQueryのバージョンが異なります。そのためプラグイン利用する際は、プラグインに合ったバージョンを選ばねばなりません。プラグインを使う際は、あらかじめ記載されたデモページを注意深く読むようにしましょう。

Automatic Accordion Slider Plugin For jQuery – Accordion.js」を利用する場合は、<head>要素の<title>タグ直下に以下のコードを入れます。

【index.html】


<!--JQuery本体を読み込むファイル-->
//code.jquery.com/jquery.min.js
<!--JQueryプラグインを読み込むファイル-->
http://js/accordion.min.js

実際のコードに導入してみるとこの通り。

【index.html】


<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
<!--JQuery本体を読み込むファイル-->
//code.jquery.com/jquery.min.js
<!--JQueryプラグインを読み込むファイル-->
http://js/accordion.min.js
</head>
<body>
 <li><img src="1.jpg" alt=""></li>
 <li><img src="2.jpg" alt=""></li>
 <li><img src="3.jpg" alt=""></li>
 <li><img src="4.jpg" alt=""></li>
 <li><img src="5.jpg" alt=""></li>
 <li><img src="6.jpg" alt=""></li>
</body>
</html>

その他、必要に応じてCSSファイル等も合わせて読み込めば完了です。

※ファイルの場所は、それぞれ保存する位置によって変わるので、必要に応じて適宜URLを修正するようにしましょう。

初心者でも簡単!すぐに実装できるアコーディオンスライダー10選

では、どういった種類のアコーディオンスライダーがあるのでしょうか。ここではjQueryプラグインを使って簡単に実装できるアコーディオンスライダーを10個ご紹介します。

1. Responsive Accordion Slider With jQuery And CSS3

Responsive Accordion

レスポンシブデザインに対応したjQueryとCSS3のアコーディオンスライダーです。横文字でページのナビをそれぞれ表示してくれるので、ポートフォリオサイトに制作実績をまとめる際に役立ちます。

Responsive Accordion Slider With jQuery And CSS3

2. Horizontal Accordion Slider Plugin with jQuery – Pana Accordion

Horizontal Accordion

シンプルなデザインのアコーディオンスライダーです。マウスを写真位置に合わせることで、写真の明度を変化させる仕組みになっています。

Horizontal Accordion Slider Plugin with jQuery – Pana Accordion

3. Automatic Accordion Slider Plugin For jQuery – Accordion.js

Automatic Accordion

右にスライドするアコーディオンスライダーです。コードの記述量も少なく比較的容易に導入できるので、JQueryプラグインをまだ利用したことがない方にはおすすめです。

Automatic Accordion Slider Plugin For jQuery – Accordion.js

4. Responsive Accordion Gallery Plugin With jQuery

Responsive Accordion

クリックに応じて文字が飛び出すアコーディオンスライダーです。スライダーで使われた写真の補足説明をしたいときに役立ちます。

Responsive Accordion Gallery Plugin With jQuery

5. Responsive Horizontal jQuery Accordion Plugin – AccordionJS

Responsive Horizontal

クリックで開閉するアコーディオンスライダーです。先に紹介した「Responsive Accordion Gallery Plugin With jQuery」とは異なり、文字情報を多く入れたいスライダーを作るのに最適です。

Responsive Horizontal jQuery Accordion Plugin – AccordionJS

6. Fullscreen Expanding Accordion / Slider With jQuery And CSS3

Fullscreen

画面いっぱいのフルスクリーンで利用できるアコーディオンスライダーです。従来のアコーディオンスライダーとは異なり、画面全体がスライダーの役割を担っているため、ビジュアルで攻めたい方には大変おすすめできます。

Fullscreen Expanding Accordion / Slider With jQuery And CSS3

7. Responsive Diagonal Slider Plugin With jQuery And CSS3 – Skewed Slider

Responsive Diagonal

斜めに画像が配置されたアコーディオンスライダーです。画像の枚数や画像の大きさといった細かな調整は必要になるものの、一風変わったオシャレなサイト制作には向いているデザインとなっています。

Responsive Diagonal Slider Plugin With jQuery And CSS3 – Skewed Slider

8. Smooth Horizontal Accordion Slideshow with jQuery and CSS3

Smooth Horizontal

ナビゲーションの機能を代替してくれるアコーディオンスライダーです。画像の透過とともにスライダータイトルを表示してくれる、特殊な変化をもったスライダーとなっています。

Smooth Horizontal Accordion Slideshow with jQuery and CSS3

9. Smooth Accordion Slider with jQuery and CSS3 – Showcase Panels

Smooth Accordion

画像情報の詳細をホバーで表示してくれるアコーディオンスライダーです。一見シンプルですが、裏では複雑な処理がされたスライダーとなっています。

Smooth Accordion Slider with jQuery and CSS3 – Showcase Panels

10. Simple Accordion Plugin For jQuery – zAccordion

Simple Accordion

名前の通り、シンプルな作りが売りのアコーディオンスライダーです。カスタマイズのバリエーションには富んでおり、10種類以上の動きの中からお好みでカスタマイズできます。

Simple Accordion Plugin For jQuery – zAccordion

おわりに

今回は、アコーディオンスライダーを10個ご紹介しました。実装にはjQueryプラグインを使うため、初級レベル相当のプログラミング知識は必要になりますが、少しでもプログラムに触ったことのある方ならば比較的簡単に導入できるでしょう。

また、どれも導入方法がそれぞれ異なるため、デモページをよく確認して導入するようにしましょう。

アコーディオンスライダーを使ったことがないという方は、この機会にぜひ一度使ってみてください。

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ